From ac940ded8c6d022641777f0faf86ab64badd68d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <mail@phillipkuehne.de>
Date: Wed, 4 Oct 2023 00:53:03 +0000
Subject: [PATCH] Add debouncing for the search

---
 backend/templates/base.html     |  58 ++++++++------
 backend/templates/songlist.html | 132 +++++++++++++++++---------------
 2 files changed, 104 insertions(+), 86 deletions(-)

diff --git a/backend/templates/base.html b/backend/templates/base.html
index 20a115c..8d20f30 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -16,11 +16,14 @@
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
 
     <!-- Bootstrap-Toaster-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
-        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
+        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css"
+        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="static/css/style.css" rel="stylesheet">
@@ -81,8 +84,8 @@
             {% if not auth %}
             <a href="/login" class="ml-1 mr-1"><i class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
             {% endif %}
-            <a href="https://github.com/PhoenixTwoFive/karaoqueue"
-                class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
+            <a href="https://github.com/PhoenixTwoFive/karaoqueue" class="ml-1 mr-1"><i
+                    class="fab fa-github mr-1"></i><span>Github</span></a>
             <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-23 - Phillip
                 Kühne</span>
         </div>
@@ -95,8 +98,12 @@
         integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"
+        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"
+        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
+        crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
         integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
         </script>
@@ -106,7 +113,8 @@
     <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/js/bootstrap-toaster.min.js"
-        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {% block extrajs %}{% endblock %}
     <script>
         $(document).ready(function () {
@@ -151,29 +159,29 @@
         }
 
         function addEntry(entryId) {
-          entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
-          if (entryArray == null) {
-            entryArray = []
-          }
-          entryArray.push(entryId)
-          localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
+            entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
+            if (entryArray == null) {
+                entryArray = []
+            }
+            entryArray.push(entryId)
+            localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
         }
 
         function removeEntry(entryId) {
-          entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
-          if (entryArray == null) {
-            entryArray = []
-          }
-          entryArray = entryArray.filter(function(value, index, arr){ return value != entryId;});
-          localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
+            entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
+            if (entryArray == null) {
+                entryArray = []
+            }
+            entryArray = entryArray.filter(function (value, index, arr) { return value != entryId; });
+            localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
         }
 
         function getOwnedEntries() {
-          var entries = JSON.parse(localStorage.getItem("ownedEntries"))
-          if (entries == null) {
-            entries = []
-          }
-          return entries;
+            var entries = JSON.parse(localStorage.getItem("ownedEntries"))
+            if (entries == null) {
+                entries = []
+            }
+            return entries;
         }
 
     </script>
diff --git a/backend/templates/songlist.html b/backend/templates/songlist.html
index f25b5e7..2bd6698 100644
--- a/backend/templates/songlist.html
+++ b/backend/templates/songlist.html
@@ -69,67 +69,7 @@
 <script>
     $(document).ready(function () {
         $("#filter").focus();
-        $("#filter").keyup(function () {
-            var value = $(this).val().toLowerCase();
-            //alert(value);
-            if (value.length >= 1) {
-                $.getJSON("/api/songs/search", { q: value }, function (data) {
-                    var items = [];
-                    $("#songtable").html("")
-                    $.each(data, function (key, val) {
-                        let itemRow = document.createElement("tr")
-                        let itemCell = document.createElement("td")
-                        itemCell.innerHTML = val["artist"] + ` - ` + val["title"]
-                        itemRow.appendChild(itemCell)
-                        let infoCell = document.createElement("td")
-                        let duoindicator = document.createElement("i")
-                        duoindicator.classList.add("fas")
-                        if (val["duo"] == 0) {
-                            duoindicator.classList.add("fa-user")
-                            
-                        }
-                        if (val["duo"] == 1) {
-                            duoindicator.classList.add("fa-user-friends")
-                        }
-                        duoindicator.classList.add("ml-1")
-                        duoindicator.classList.add("list-indicator")
-                        infoCell.appendChild(duoindicator)
-                        if (val["explicit"] == 1) {
-                            let explicitindicator = document.createElement("i")
-                            explicitindicator.classList.add("fas")
-                            explicitindicator.classList.add("fa-e")
-                            explicitindicator.classList.add("ml-1")
-                            infoCell.appendChild(explicitindicator)
-                        }
-                        itemRow.appendChild(infoCell)
-                        let buttonCell = document.createElement("td")
-                        let button = document.createElement("button")
-                        button.classList.add("btn")
-                        button.classList.add("btn-primary")
-                        button.classList.add("justify-content-center")
-                        button.classList.add("align-content-between")
-                        button.classList.add("enqueueButton")
-                        button.setAttribute("type", "button")
-                        button.setAttribute("data-toggle", "modal")
-                        button.setAttribute("data-target", "#enqueueModal")
-                        button.setAttribute("onclick", "setSelectedId(" + val["karafun_id"] + ")")
-                        let buttonIcon = document.createElement("i")
-                        buttonIcon.classList.add("fas")
-                        buttonIcon.classList.add("fa-plus")
-                        button.appendChild(buttonIcon)
-                        buttonCell.appendChild(button)
-                        itemRow.appendChild(buttonCell)
-                        $("#songtable").append(itemRow)
-                    });
-
-                    
-                    $(items.join("")).appendTo("#songtable");
-                    entriesAccepted()
-                });
-            } else {
-                $("#songtable").html("")
-            }
-        });
+        $("#filter").keyup(debounce(() => songSearch()));
 
         $("#nameForm").submit(function (e) {
             e.preventDefault();
@@ -271,6 +211,76 @@
 
     }
 
+    function songSearch() {
+        let value = $("#filter").val()
+        if (value.length >= 1) {
+            $.getJSON("/api/songs/search", { q: value }, function (data) {
+                var items = [];
+                $("#songtable").html("")
+                $.each(data, function (key, val) {
+                    let itemRow = document.createElement("tr")
+                    let itemCell = document.createElement("td")
+                    itemCell.innerHTML = val["artist"] + ` - ` + val["title"]
+                    itemRow.appendChild(itemCell)
+                    let infoCell = document.createElement("td")
+                    let duoindicator = document.createElement("i")
+                    duoindicator.classList.add("fas")
+                    if (val["duo"] == 0) {
+                        duoindicator.classList.add("fa-user")
+
+                    }
+                    if (val["duo"] == 1) {
+                        duoindicator.classList.add("fa-user-friends")
+                    }
+                    duoindicator.classList.add("ml-1")
+                    duoindicator.classList.add("list-indicator")
+                    infoCell.appendChild(duoindicator)
+                    if (val["explicit"] == 1) {
+                        let explicitindicator = document.createElement("i")
+                        explicitindicator.classList.add("fas")
+                        explicitindicator.classList.add("fa-e")
+                        explicitindicator.classList.add("ml-1")
+                        infoCell.appendChild(explicitindicator)
+                    }
+                    itemRow.appendChild(infoCell)
+                    let buttonCell = document.createElement("td")
+                    let button = document.createElement("button")
+                    button.classList.add("btn")
+                    button.classList.add("btn-primary")
+                    button.classList.add("justify-content-center")
+                    button.classList.add("align-content-between")
+                    button.classList.add("enqueueButton")
+                    button.setAttribute("type", "button")
+                    button.setAttribute("data-toggle", "modal")
+                    button.setAttribute("data-target", "#enqueueModal")
+                    button.setAttribute("onclick", "setSelectedId(" + val["karafun_id"] + ")")
+                    let buttonIcon = document.createElement("i")
+                    buttonIcon.classList.add("fas")
+                    buttonIcon.classList.add("fa-plus")
+                    button.appendChild(buttonIcon)
+                    buttonCell.appendChild(button)
+                    itemRow.appendChild(buttonCell)
+                    $("#songtable").append(itemRow)
+                });
+
+
+                $(items.join("")).appendTo("#songtable");
+                entriesAccepted()
+            });
+        } else {
+            $("#songtable").html("")
+        }
+    }
+
+    function debounce(func, timeout = 300) {
+        let timer;
+        return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => { func.apply(this, args); }, timeout);
+        };
+    }
+
+
     {% if not auth %}
     function entriesAccepted() {
         $.getJSON("/api/entries/accept", (data, out) => {