mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-07-04 09:11:42 +02:00
Add debouncing for the search
This commit is contained in:
@ -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}} - 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 () {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user