mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-19 19:11:49 +02:00
Phillip Kühne
a54953ff0d
Fixed copy functionality by no longer rendering the data into the function call as string literal, but instead accessing it from the DOM in the function call.
220 lines
9.3 KiB
HTML
220 lines
9.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}Warteliste-Admin{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
table td:nth-child(2) {
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
text-overflow: clip;
|
|
max-width: 200px !important;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div id="toolbar">
|
|
<button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteSelectedEntries()"><i
|
|
class="fas fa-trash mr-2"></i>Gewählte Einträge löschen</button>
|
|
<button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i
|
|
class="fas fa-file-import mr-2"></i>Song-Datenbank
|
|
aktualisieren</button>
|
|
<input id="entryToggle" type="checkbox" class="topbutton" data-toggle="toggle" data-on="Eintragen erlaubt"
|
|
data-off="Eintragen deaktiviert" data-onstyle="success" data-offstyle="danger">
|
|
</div>
|
|
<table class="table entries" id="entrytable" data-toggle="table" data-search="true" data-show-columns="true"
|
|
data-show-toggle="true" data-multiple-select-row="true" data-click-to-select="true" data-toolbar="#toolbar"
|
|
data-pagination="true" data-show-extended-pagination="true" data-classes="table table-hover"
|
|
data-url="/api/queue" data-show-refresh="true" data-auto-refresh="true" data-auto-refresh-interval="10">
|
|
<thead>
|
|
<tr>
|
|
<th data-field="state" data-checkbox="true"></th>
|
|
<th scope="col" data-field="Name" data-formatter="CopyFormatter">Name</th>
|
|
<th scope="col" data-field="Title"data-formatter="CopyFormatter">Song</th>
|
|
<th scope="col" data-field="Artist"data-formatter="CopyFormatter">Künstler</th>
|
|
<th scope="col" data-formatter="TableActions">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<a name="end"></a>
|
|
</div>
|
|
{% endblock %}
|
|
{% block extrajs %}
|
|
<script>
|
|
$(function () {
|
|
refreshEntryToggle()
|
|
$('#entryToggle').change(function () {
|
|
$.ajax({ url: "/api/entries/accept/" + ($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000) });
|
|
})
|
|
$("#entrytable").bootstrapTable().on('load-success.bs.table', function () {
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
})
|
|
$('[data-toggle="tooltip"]').tooltip({
|
|
trigger: 'hover'
|
|
})
|
|
})
|
|
function confirmDeleteEntry(name, entry_id) {
|
|
bootbox.confirm("Wirklich den Eintrag von " + name + " löschen?", function (result) {
|
|
if (result) {
|
|
deleteEntry(entry_id)
|
|
}
|
|
})
|
|
}
|
|
function confirmDeleteSelectedEntries() {
|
|
bootbox.confirm({
|
|
message: "Wirklich gewählte Eintragungen löschen?",
|
|
buttons: {
|
|
confirm: {
|
|
label: 'Ja',
|
|
className: 'btn btn-danger'
|
|
},
|
|
cancel: {
|
|
label: 'Nein',
|
|
className: 'btn btn-secondary'
|
|
}
|
|
},
|
|
callback: function (result) {
|
|
if (result) {
|
|
DeleteSelectedEntries(getIdSelections())
|
|
}
|
|
}
|
|
})
|
|
}
|
|
function confirmUpdateSongDatabase() {
|
|
bootbox.confirm({
|
|
message: "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>",
|
|
buttons: {
|
|
confirm: {
|
|
label: 'Ja',
|
|
className: 'btn-primary'
|
|
},
|
|
cancel: {
|
|
label: 'Nein',
|
|
className: 'btn btn-secondary'
|
|
}
|
|
},
|
|
callback: function (result) {
|
|
if (result) {
|
|
var dialog = bootbox.dialog({
|
|
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',
|
|
|
|
closeButton: false
|
|
});
|
|
updateSongDatabase(dialog)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
function refreshEntryToggle() {
|
|
$.getJSON("/api/entries/accept", (data) => {
|
|
if (data["value"] != $('#entryToggle').is(":checked")) {
|
|
if (data["value"] == 1) {
|
|
$('#entryToggle').data('bs.toggle').on('true')
|
|
}
|
|
else {
|
|
$('#entryToggle').data('bs.toggle').off('true')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
function deleteEntry(entry_id) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/api/entries/delete/' + entry_id,
|
|
contentType: "application/json",
|
|
dataType: 'json',
|
|
async: false
|
|
});
|
|
$("#entrytable").bootstrapTable('refresh')
|
|
|
|
}
|
|
function markEntryAsSung(entry_id) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/api/entries/mark_sung/' + entry_id,
|
|
contentType: "application/json",
|
|
dataType: 'json',
|
|
async: false
|
|
});
|
|
$("#entrytable").bootstrapTable('refresh')
|
|
|
|
}
|
|
|
|
function markEntryAsTransferred(entry_id) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/api/entries/mark_transferred/' + entry_id,
|
|
contentType: "application/json",
|
|
dataType: 'json',
|
|
async: false
|
|
});
|
|
$("#entrytable").bootstrapTable('refresh')
|
|
|
|
}
|
|
|
|
function DeleteSelectedEntries(ids) {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/api/entries/delete',
|
|
data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
|
|
error: function () {
|
|
bootbox.alert({
|
|
message: "Fehler beim Löschen der Eintragungen.",
|
|
})
|
|
},
|
|
success: function () {
|
|
$("#entrytable").bootstrapTable('refresh')
|
|
|
|
},
|
|
contentType: "application/json",
|
|
dataType: 'json'
|
|
});
|
|
}
|
|
function updateSongDatabase(wait_dialog) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/api/songs/update',
|
|
contentType: "application/json",
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
wait_dialog.modal('hide')
|
|
bootbox.alert({
|
|
message: data["status"],
|
|
callback: function () {
|
|
$("#entrytable").bootstrapTable('refresh')
|
|
}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
function TableActions(value, row, index) {
|
|
let outerHTML = ""
|
|
if (row.Transferred == 1) {
|
|
outerHTML = "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Markierung zurückziehen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-backward\"></i></button> <button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button> <button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
|
|
} else {
|
|
outerHTML = "<button type=\"button\" class=\"btn btn-info\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als übertragen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-exchange-alt\"></i></button> <button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button> <button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
|
|
}
|
|
return outerHTML;
|
|
}
|
|
|
|
function CopyFormatter(value, row, index) {
|
|
let escapedString = value.replace("\"","\\\"").replace("\'", "\\\'")
|
|
return "<span onclick='copyAndNotify(this.innerText)'>"+value+"</span>";
|
|
}
|
|
|
|
function getIdSelections() {
|
|
return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
|
|
return row.entry_ID
|
|
})
|
|
}
|
|
|
|
function copyAndNotify(text) {
|
|
navigator.clipboard.writeText(text).then(function () {
|
|
let toast = {
|
|
title: "Kopiert",
|
|
message: text,
|
|
status: 1,
|
|
timeout: 5000
|
|
};
|
|
Toast.create(toast);
|
|
})
|
|
}
|
|
</script>
|
|
{% endblock %} |