mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-19 19:11:49 +02:00
Improve GUI
This commit is contained in:
parent
3adea7b46a
commit
2e65679c06
@ -14,13 +14,17 @@ def open_db():
|
|||||||
return conn
|
return conn
|
||||||
|
|
||||||
def import_songs(song_csv):
|
def import_songs(song_csv):
|
||||||
|
print("Start importing Songs...")
|
||||||
df = pandas.read_csv(StringIO(song_csv), sep=';')
|
df = pandas.read_csv(StringIO(song_csv), sep=';')
|
||||||
conn = open_db()
|
conn = open_db()
|
||||||
|
cur = conn.cursor()
|
||||||
df.to_sql(song_table, conn, if_exists='replace',
|
df.to_sql(song_table, conn, if_exists='replace',
|
||||||
index=False)
|
index=False)
|
||||||
|
cur.execute("SELECT Count(Id) FROM songs")
|
||||||
|
num_songs = cur.fetchone()[0]
|
||||||
conn.close()
|
conn.close()
|
||||||
print("Imported songs")
|
print("Imported songs ({} in Database)".format(num_songs))
|
||||||
return
|
return("Imported songs ({} in Database)".format(num_songs))
|
||||||
|
|
||||||
def create_entry_table():
|
def create_entry_table():
|
||||||
conn = open_db()
|
conn = open_db()
|
||||||
|
@ -17,8 +17,9 @@
|
|||||||
<!-- Custom styles for this template -->
|
<!-- Custom styles for this template -->
|
||||||
<link href="static/css/style.css" rel="stylesheet">
|
<link href="static/css/style.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Material Icons-->
|
<!-- Fontawesome Icons-->
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||||
|
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -52,16 +53,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container text-center py-3 d-flex flex-row mx-auto">
|
<div class="container text-center py-3">
|
||||||
{% if not auth %}
|
{% if not auth %}
|
||||||
<a href="/login" class="d-flex justify-content-center align-content-between ml-1 mr-1"><i
|
<a href="/login" class="ml-1 mr-1"><i
|
||||||
class='material-icons mr-1'>launch</i><span>Login</span></a>
|
class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="https://github.com/PhoenixTwoFive/karaoqueue"
|
<a href="https://github.com/PhoenixTwoFive/karaoqueue"
|
||||||
class="d-flex justify-content-center align-content-between ml-1 mr-1"><i
|
class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
|
||||||
class='material-icons mr-1'>code</i><span>Github</span></a>
|
|
||||||
<span class="text-muted">KaraoQueue - <span
|
<span class="text-muted">KaraoQueue - <span
|
||||||
style="display:inline-block;transform: rotate(180deg);">©</span> 2019 - Phillip
|
style="display:inline-block;transform: rotate(180deg) translateY(-0.2rem)">©</span> 2019 - Phillip
|
||||||
Kühne</span>
|
Kühne</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
@ -7,16 +7,11 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="card" style="width: 100%">
|
<div class="card" style="width: 100%">
|
||||||
<div class="card-body d-flex flex-row">
|
<div class="card-body d-flex flex-row">
|
||||||
<button type="button" class="btn btn-danger d-flex justify-content-center align-content-between m-2"
|
<button type="button" class="btn btn-danger m-2"
|
||||||
onclick="confirmDeleteAllEntries()"><i
|
onclick="confirmDeleteAllEntries()"><i class="fas fa-trash mr-2"></i>Alle Einträge löschen</button>
|
||||||
class="material-icons mr-1">
|
<button type="button" class="btn btn-danger m-2"
|
||||||
delete_forever
|
onclick="confirmUpdateSongDatabase()"><i class="fas fa-file-import mr-2"></i>Song-Datenbank
|
||||||
</i> Alle Einträge löschen</button>
|
aktualisieren</button>
|
||||||
<button type="button" class="btn btn-danger d-flex justify-content-center align-content-between m-2"
|
|
||||||
onclick="confirmUpdateSongDatabase()"><i
|
|
||||||
class="material-icons mr-1">
|
|
||||||
cloud_download
|
|
||||||
</i> Song-Datenbank aktualisieren</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,9 +35,9 @@
|
|||||||
{{ entry[2] }}
|
{{ entry[2] }}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button type='button' class='btn btn-danger d-flex justify-content-center align-content-between'
|
<button type='button' class='btn btn-danger justify-content-center align-content-between'
|
||||||
onclick='confirmDeleteEntry("{{ entry[0] }}",{{ entry[3] }})'><i
|
onclick='confirmDeleteEntry("{{ entry[0] }}",{{ entry[3] }})'><i
|
||||||
class='material-icons'>delete</i></button>
|
class="fas fa-trash"></i></button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@ -63,17 +58,47 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
function confirmDeleteAllEntries() {
|
function confirmDeleteAllEntries() {
|
||||||
bootbox.confirm("Wirklich alle Eintragungen löschen?", function(result){
|
bootbox.confirm({
|
||||||
|
message: "Wirklich alle Eintragungen löschen?",
|
||||||
|
buttons: {
|
||||||
|
confirm: {
|
||||||
|
label: 'Ja',
|
||||||
|
className: 'btn btn-danger'
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
label: 'Nein',
|
||||||
|
className: 'btn btn-secondary'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
callback: function(result){
|
||||||
if (result) {
|
if (result) {
|
||||||
deleteAllEntries()
|
deleteAllEntries()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
function confirmUpdateSongDatabase() {
|
function confirmUpdateSongDatabase() {
|
||||||
bootbox.confirm("Wirklich die Song-Datenbank aktualisieren?<br>Dies lädt die Aktuelle Song-Liste von <a href='https://www.karafun.de/karaoke-song-list.html'>KaraFun</a> herunter, <b>und wird alle Eintragungen löschen!</b>" ,
|
bootbox.confirm({
|
||||||
function(result){
|
message: "Wirklich die Song-Datenbank aktualisieren?<br>Dies lädt die Aktuelle Song-Liste von <a href='https://www.karafun.de/karaoke-song-list.html'>KaraFun</a> herunter, <b>und wird alle Eintragungen löschen!</b>",
|
||||||
|
buttons: {
|
||||||
|
confirm: {
|
||||||
|
label: 'Ja',
|
||||||
|
className: 'btn-primary'
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
label: 'Nein',
|
||||||
|
className: 'btn btn-secondary'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
callback: function(result){
|
||||||
if (result) {
|
if (result) {
|
||||||
updateSongDatabase()
|
var dialog = bootbox.dialog({
|
||||||
|
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',
|
||||||
|
|
||||||
|
closeButton: false
|
||||||
|
});
|
||||||
|
updateSongDatabase(dialog)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -95,14 +120,20 @@
|
|||||||
});
|
});
|
||||||
location.reload();
|
location.reload();
|
||||||
}
|
}
|
||||||
function updateSongDatabase() {
|
function updateSongDatabase(wait_dialog) {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: '/api/songs/update',
|
url: '/api/songs/update',
|
||||||
contentType: "application/json",
|
contentType: "application/json",
|
||||||
dataType: 'json'
|
dataType: 'json',
|
||||||
|
success: function(data) {
|
||||||
|
wait_dialog.modal('hide')
|
||||||
|
bootbox.alert({
|
||||||
|
message: data["status"],
|
||||||
|
callback: function() {location.reload()}
|
||||||
|
})
|
||||||
|
}
|
||||||
});
|
});
|
||||||
location.reload();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
@ -56,16 +56,18 @@
|
|||||||
$.each(data, function (key, val) {
|
$.each(data, function (key, val) {
|
||||||
items.push("<tr><td>"+val[0]+`</td>
|
items.push("<tr><td>"+val[0]+`</td>
|
||||||
<td><button type='button'
|
<td><button type='button'
|
||||||
class='btn btn-primary d-flex justify-content-center align-content-between'
|
class='btn btn-primary justify-content-center align-content-between'
|
||||||
data-toggle='modal'
|
data-toggle='modal'
|
||||||
data-target='#enqueueModal' onclick='setSelectedId(`+val[1]+`)'><i
|
data-target='#enqueueModal' onclick='setSelectedId(`+val[1]+`)'><i
|
||||||
class='material-icons'>queue_music</i></button></td>
|
class="fas fa-plus"></i></button></td>
|
||||||
</tr>`)
|
</tr>`)
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#songtable").html("")
|
$("#songtable").html("")
|
||||||
$(items.join("")).appendTo("#songtable");
|
$(items.join("")).appendTo("#songtable");
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
$("#songtable").html("")
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user