Improve GUI

This commit is contained in:
Phillip Kühne 2019-05-26 02:54:43 +02:00
parent 3adea7b46a
commit 2e65679c06
4 changed files with 71 additions and 34 deletions

View File

@ -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()

View File

@ -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 -&nbsp;<span <span class="text-muted">KaraoQueue -&nbsp;<span
style="display:inline-block;transform: rotate(180deg);">&copy</span>&nbsp;2019 - Phillip style="display:inline-block;transform: rotate(180deg) translateY(-0.2rem)">&copy</span>&nbsp;2019 - Phillip
Kühne</span> Kühne</span>
</div> </div>
</footer> </footer>

View File

@ -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>&nbsp;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>&nbsp;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({
if (result) { message: "Wirklich alle Eintragungen löschen?",
deleteAllEntries() buttons: {
confirm: {
label: 'Ja',
className: 'btn btn-danger'
},
cancel: {
label: 'Nein',
className: 'btn btn-secondary'
}
},
callback: function(result){
if (result) {
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>",
if (result) { buttons: {
updateSongDatabase() confirm: {
label: 'Ja',
className: 'btn-primary'
},
cancel: {
label: 'Nein',
className: 'btn btn-secondary'
}
},
callback: function(result){
if (result) {
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 %}

View File

@ -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("")
} }
}); });