mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-07-04 17:21:43 +02:00
Refactor for heroku
This commit is contained in:
136
backend/templates/songlist.html
Normal file
136
backend/templates/songlist.html
Normal file
@ -0,0 +1,136 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Songsuche{% endblock %}
|
||||
{% block content %}
|
||||
<input class="form-control" id="filter" type="text" placeholder="Suchen...">
|
||||
<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 Liste setzen</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<form id="nameForm">
|
||||
<div class="modal-body">
|
||||
<label for="singerNameInput">Sängername</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">Close</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 () {
|
||||
$("#filter").focus();
|
||||
$("#filter").keyup(function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
//alert(value);
|
||||
if (value.length >= 1) {
|
||||
$.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 justify-content-center align-content-between enqueueButton'
|
||||
data-toggle='modal'
|
||||
data-target='#enqueueModal' onclick='setSelectedId(`+ val[1] + `)'><i
|
||||
class="fas fa-plus"></i></button></td>
|
||||
</tr>`)
|
||||
});
|
||||
|
||||
$("#songtable").html("")
|
||||
$(items.join("")).appendTo("#songtable");
|
||||
entriesAccepted()
|
||||
});
|
||||
} else {
|
||||
$("#songtable").html("")
|
||||
}
|
||||
});
|
||||
|
||||
$("#nameForm").submit(function (e) {
|
||||
e.preventDefault();
|
||||
submitModal();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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), // or JSON.stringify ({name: 'jonas'}),
|
||||
success: success_callback,
|
||||
statusCode: {
|
||||
423: blocked_callback
|
||||
},
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
}
|
||||
|
||||
function setSelectedId(id) {
|
||||
$("#selectedId").attr("value", id);
|
||||
}
|
||||
|
||||
function submitModal() {
|
||||
var name = $("#singerNameInput").val();
|
||||
var id = $("#selectedId").attr("value");
|
||||
enqueue(localStorage.getItem("clientId"),id, name, function () {
|
||||
$("#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');
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
{% 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 nicht mehr möglich.")
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
} else {
|
||||
$(".enqueueButton").prop("disabled", false)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
{% else %}
|
||||
function entriesAccepted() {
|
||||
$(".enqueueButton").prop("disabled", false)
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user