Add admin "login" and functionality, fix Umlauts in search

templates/base.html

@@ -52,11 +52,14 @@
     </div>
     <!-- Footer -->
     <footer class="footer">
-        <div class="container text-center py-3">
+        <div class="container text-center py-3 d-flex flex-row mx-auto">
             {% if not auth %}
-                <a href="/login"><i class='material-icons'>launch</i>&nbsp;Login</a>
+                <a href="/login" class="d-flex justify-content-center align-content-between ml-1 mr-1"><i
+                        class='material-icons mr-1'>launch</i><span>Login</span></a>
             {% endif %}
-            <a href="https://github.com/PhoenixTwoFive/karaoqueue"><i class='material-icons'>code</i>&nbsp;Github</a>
+            <a href="https://github.com/PhoenixTwoFive/karaoqueue"
+                class="d-flex justify-content-center align-content-between ml-1 mr-1"><i
+                    class='material-icons mr-1'>code</i><span>Github</span></a>
             <span class="text-muted">KaraoQueue -&nbsp;<span
                     style="display:inline-block;transform: rotate(180deg);">&copy</span>&nbsp;2019 - Phillip
                 Kühne</span>

templates/main_admin.html

@@ -3,35 +3,80 @@
 {% extends 'base.html' %}
 {% block title %}Home{% endblock %}
 {% block content %}
-<table class="table">
-    <tr>
-        <th scope="col">Name</th>
-        <th scope="col">Song</th>
-        <th scope="col">Künstler</th>
-        <th scope="col">Löschen</th>
-    </tr>
-    {% for entry in list: %}
-    <tr>
-        <td>
-            {{ entry[0] }}
-        </td>
-        <td>
-            {{ entry[1] }}
-        </td>
-        <td>
-            {{ entry[2] }}
-        </td>
-        <td>
-            <button type='button' class='btn btn-danger' onclick='deleteEntry({{ entry[3] }})'><i
-                    class='material-icons'>delete</i></button>
-        </td>
-    </tr>
-    {% endfor %}
-</table>
-<a name="end"></a>
+<div class="container">
+    <div class="row">
+        <div class="card" style="width: 100%">
+            <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"
+                    onclick="confirmDeleteAllEntries()"><i
+                        class="material-icons mr-1">
+                        delete_forever
+                    </i>&nbsp;Alle Einträge löschen</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 class="row">
+        <table class="table">
+            <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Song</th>
+                <th scope="col">Künstler</th>
+                <th scope="col">Löschen</th>
+            </tr>
+            {% for entry in list: %}
+            <tr>
+                <td>
+                    {{ entry[0] }}
+                </td>
+                <td>
+                    {{ entry[1] }}
+                </td>
+                <td>
+                    {{ entry[2] }}
+                </td>
+                <td>
+                    <button type='button' class='btn btn-danger d-flex justify-content-center align-content-between'
+                        onclick='confirmDeleteEntry("{{ entry[0] }}",{{ entry[3] }})'><i
+                            class='material-icons'>delete</i></button>
+                </td>
+            </tr>
+            {% endfor %}
+        </table>
+        <a name="end"></a>
+    </div>
+</div>
 {% endblock %}
 {% block extrajs %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
+    integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous"></script>
 <script>
+    function confirmDeleteEntry(name, entry_id) {
+        bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){
+            if (result) {
+                deleteEntry(entry_id)
+            }
+        })
+    }
+    function confirmDeleteAllEntries() {
+        bootbox.confirm("Wirklich alle Eintragungen löschen?", function(result){
+            if (result) {
+                deleteAllEntries()
+            }
+        })
+    }
+    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>" ,
+        function(result){
+            if (result) {
+                updateSongDatabase()
+            }
+        })
+    }
     function deleteEntry(entry_id) {
        $.ajax({
         type: 'GET',
@@ -41,5 +86,23 @@
        });
        location.reload();
     }
+    function deleteAllEntries() {
+        $.ajax({
+            type: 'GET',
+            url: '/api/entries/delete_all',
+            contentType: "application/json",
+            dataType: 'json'
+        });
+        location.reload();
+    }
+    function updateSongDatabase() {
+        $.ajax({
+            type: 'GET',
+            url: '/api/songs/update',
+            contentType: "application/json",
+            dataType: 'json'
+        });
+        location.reload();
+    }
 </script>
 {% endblock %}

templates/songlist.html

@@ -51,11 +51,13 @@
             var value = $(this).val().toLowerCase();
             //alert(value);
             if(value.length >= 3) {
-                $.getJSON("/api/songs/compl/" + value, function (data) {
+                $.getJSON("/api/songs/compl", { search: value }, function (data) {
                     var items = [];
                     $.each(data, function (key, val) {
                         items.push("<tr><td>"+val[0]+`</td>
-                            <td><button type='button' class='btn btn-primary' data-toggle='modal'
+                            <td><button type='button'
+                                    class='btn btn-primary d-flex justify-content-center align-content-between'
+                                    data-toggle='modal'
                                     data-target='#enqueueModal' onclick='setSelectedId(`+val[1]+`)'><i
                                         class='material-icons'>queue_music</i></button></td>
                         </tr>`)