mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-19 02:51:48 +02:00
331 lines
12 KiB
HTML
331 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}Songsuche{% endblock %}
|
|
{% block content %}
|
|
<input class="form-control" id="filter" type="text" placeholder="Suche nach einem Song...">
|
|
<h4 id="suggestionExplainer" class="mt-3 mb-3 text-center" style="display: none;">Oder probiere es mit einem dieser Vorschläge:</h4>
|
|
<table class="table">
|
|
<tbody id="songtable">
|
|
</tbody>
|
|
</table>
|
|
<div class="modal fade" id="enqueueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Auf die Liste setzen</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="songinfo container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 id="songTitle"></h5>
|
|
<p><span id="songArtist"></span> <span id="songYear"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1">
|
|
<p><i class="fas fa-info"></i></p>
|
|
</div>
|
|
<div class="col" id="indicators">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1">
|
|
<p><i class="fas fa-file-audio"></i></p>
|
|
</div>
|
|
<div class="col">
|
|
<p id="songGenres"></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1">
|
|
<p><i class="fas fa-language"></i></p>
|
|
</div>
|
|
<div class="col">
|
|
<p id="songLanguages"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<form id="nameForm">
|
|
<div class="modal-body">
|
|
<label for="singerNameInput">Dein Name:</label>
|
|
<input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
|
|
required>
|
|
<input id="selectedId" name="selectedId" type="hidden" value="">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
|
|
<button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block extrajs %}
|
|
<script>
|
|
$(document).ready(function () {
|
|
getSuggestions(10);
|
|
$("#filter").keyup(debounce(() => songSearch()));
|
|
|
|
$("#nameForm").submit(function (e) {
|
|
e.preventDefault();
|
|
submitModal();
|
|
});
|
|
$('#enqueueModal').on('shown.bs.modal', function (e) {
|
|
$("#singerNameInput").focus();
|
|
})
|
|
|
|
});
|
|
|
|
function getSuggestions(count) {
|
|
$.getJSON("/api/songs/suggest", { count: count }, function (data) {
|
|
console.log(data);
|
|
if (data.length == 0) {
|
|
console.log("No suggestions");
|
|
$("#suggestionExplainer").hide();
|
|
} else {
|
|
$("#suggestionExplainer").show();
|
|
}
|
|
$.each(data, function (key, val) {
|
|
$("#songtable").append(constructResultRow(val))
|
|
});
|
|
});
|
|
}
|
|
|
|
function constructResultRow(data) {
|
|
let itemRow = document.createElement("tr")
|
|
let itemCell = document.createElement("td")
|
|
itemCell.innerHTML = data["artist"] + ` - ` + data["title"]
|
|
itemRow.appendChild(itemCell)
|
|
let infoCell = document.createElement("td")
|
|
let duoindicator = document.createElement("i")
|
|
duoindicator.classList.add("fas")
|
|
if (data["duo"] == 0) {
|
|
duoindicator.classList.add("fa-user")
|
|
|
|
}
|
|
if (data["duo"] == 1) {
|
|
duoindicator.classList.add("fa-user-friends")
|
|
}
|
|
duoindicator.classList.add("ml-1")
|
|
duoindicator.classList.add("list-indicator")
|
|
infoCell.appendChild(duoindicator)
|
|
if (data["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(" + data["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)
|
|
return itemRow
|
|
}
|
|
|
|
function enqueue(client_id, id, name, success_callback, blocked_callback) {
|
|
var data = {
|
|
"name": name,
|
|
"id": id,
|
|
"client_id": client_id
|
|
}
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/api/enqueue',
|
|
data: JSON.stringify(data),
|
|
success: success_callback,
|
|
statusCode: {
|
|
423: blocked_callback
|
|
},
|
|
contentType: "application/json",
|
|
dataType: 'json'
|
|
});
|
|
}
|
|
|
|
function setSelectedId(id) {
|
|
$("#songArtist").html("");
|
|
$("#songTitle").html("");
|
|
$("#songYear").html("");
|
|
$("#indicators")[0].innerHTML = "";
|
|
|
|
$("#selectedId").attr("value", id);
|
|
$.getJSON("/api/songs/details/" + id, function (data) {
|
|
$("#songTitle").html(data["title"]);
|
|
$("#songArtist").html(data["artist"]);
|
|
$("#songYear").html(data["year"]);
|
|
$("#indicators")[0].innerHTML = "";
|
|
|
|
let duoindicator_badge = document.createElement("span");
|
|
duoindicator_badge.classList.add("badge");
|
|
duoindicator_badge.classList.add("badge-secondary");
|
|
duoindicator_badge.classList.add("badge-pill");
|
|
duoindicator_badge.classList.add("mx-1");
|
|
duoindicator_badge.classList.add("p-2");
|
|
|
|
if (data["duo"] == 0) {
|
|
duoindicator_badge.innerHTML = "Solo";
|
|
let duoindicator = document.createElement("i");
|
|
duoindicator.classList.add("fas");
|
|
duoindicator.classList.add("fa-user");
|
|
duoindicator.classList.add("ml-1");
|
|
duoindicator_badge.appendChild(duoindicator);
|
|
$("#indicators")[0].appendChild(duoindicator_badge)
|
|
}
|
|
|
|
if (data["duo"] == 1) {
|
|
duoindicator_badge.innerHTML = "Duo";
|
|
let duoindicator = document.createElement("i");
|
|
duoindicator.classList.add("fas");
|
|
duoindicator.classList.add("fa-user-friends");
|
|
duoindicator.classList.add("ml-1");
|
|
duoindicator_badge.appendChild(duoindicator);
|
|
$("#indicators")[0].appendChild(duoindicator_badge)
|
|
}
|
|
|
|
if (data["explicit"] == 1) {
|
|
let explicitindicator_badge = document.createElement("span");
|
|
explicitindicator_badge.classList.add("badge");
|
|
explicitindicator_badge.classList.add("badge-secondary");
|
|
explicitindicator_badge.classList.add("badge-pill");
|
|
explicitindicator_badge.classList.add("mx-1");
|
|
explicitindicator_badge.classList.add("p-2");
|
|
explicitindicator_badge.innerHTML = "Explicit";
|
|
let explicitindicator = document.createElement("i");
|
|
explicitindicator.classList.add("fas");
|
|
explicitindicator.classList.add("fa-e");
|
|
explicitindicator.classList.add("ml-1");
|
|
explicitindicator_badge.appendChild(explicitindicator);
|
|
$("#indicators")[0].appendChild(explicitindicator_badge)
|
|
}
|
|
|
|
let styles = data["styles"].split(",");
|
|
let languages = data["languages"].split(",");
|
|
|
|
$("#songGenres").html("");
|
|
$("#songLanguages").html("");
|
|
|
|
for (let i = 0; i < styles.length; i++) {
|
|
let badge = document.createElement("span");
|
|
badge.classList.add("badge");
|
|
badge.classList.add("badge-secondary");
|
|
badge.classList.add("badge-pill");
|
|
badge.classList.add("mx-1");
|
|
badge.classList.add("p-2");
|
|
badge.innerHTML = styles[i];
|
|
$("#songGenres")[0].appendChild(badge);
|
|
}
|
|
|
|
for (let i = 0; i < languages.length; i++) {
|
|
let badge = document.createElement("span");
|
|
badge.classList.add("badge");
|
|
badge.classList.add("badge-secondary");
|
|
badge.classList.add("badge-pill");
|
|
badge.classList.add("mx-1");
|
|
badge.classList.add("p-2");
|
|
badge.innerHTML = languages[i];
|
|
$("#songLanguages")[0].appendChild(badge);
|
|
}
|
|
});
|
|
}
|
|
|
|
function submitModal() {
|
|
var name = $("#singerNameInput").val();
|
|
var id = $("#selectedId").attr("value");
|
|
enqueue(localStorage.getItem("clientId"), id, name, function (response) {
|
|
entryID = response["entry_id"];
|
|
toast = {
|
|
title: "Erfolgreich eingetragen",
|
|
message: "Du wurdest erfolgreich eingetragen.",
|
|
status: TOAST_STATUS.SUCCESS,
|
|
timeout: 5000
|
|
}
|
|
Toast.create(toast);
|
|
addEntry(entryID);
|
|
$("#enqueueModal").modal('hide');
|
|
window.location.href = '/#end';
|
|
}, function (response) {
|
|
bootbox.alert({
|
|
message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: " + response.responseJSON.status,
|
|
});
|
|
entriesAccepted();
|
|
$("#enqueueModal").modal('hide');
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function songSearch() {
|
|
let value = $("#filter").val()
|
|
if (value.length >= 1) {
|
|
$("#suggestionExplainer").hide();
|
|
$.getJSON("/api/songs/search", { q: value }, function (data) {
|
|
var items = [];
|
|
$("#songtable").html("")
|
|
$.each(data, function (key, val) {
|
|
$("#songtable").append(constructResultRow(val))
|
|
});
|
|
|
|
|
|
$(items.join("")).appendTo("#songtable");
|
|
entriesAccepted()
|
|
});
|
|
} else {
|
|
$("#songtable").html("")
|
|
getSuggestions(10);
|
|
}
|
|
}
|
|
|
|
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) => {
|
|
if (data["value"] == 0) {
|
|
$(".enqueueButton").prop("disabled", true)
|
|
$(".enqueueButton").prop("style", "pointer-events: none;")
|
|
$(".enqueueButton").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='top'></span>");
|
|
$(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
} else {
|
|
$(".enqueueButton").prop("disabled", false)
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
{% else %}
|
|
function entriesAccepted() {
|
|
$(".enqueueButton").prop("disabled", false)
|
|
}
|
|
{% endif %}
|
|
|
|
</script>
|
|
{% endblock %} |