Fix sticky Popups

This commit is contained in:
Phillip Kühne 2023-03-30 21:05:36 +02:00
parent fad21ba6c5
commit 4c64144f3d
Signed by: phillip
GPG Key ID: E4C1C4D2F90902AA

View File

@ -1,15 +1,13 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}Warteliste-Admin{% endblock %} {% block title %}Warteliste-Admin{% endblock %}
{% block content %} {% block content %}
<style> <style>
table td:nth-child(2) { table td:nth-child(2) {
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
text-overflow: clip; text-overflow: clip;
max-width: 200px !important; max-width: 200px !important;
} }
</style> </style>
<div class="container"> <div class="container">
<div id="toolbar"> <div id="toolbar">
@ -18,24 +16,13 @@ table td:nth-child(2) {
<button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i <button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i
class="fas fa-file-import mr-2"></i>Song-Datenbank class="fas fa-file-import mr-2"></i>Song-Datenbank
aktualisieren</button> 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"> <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> </div>
<table class="table entries" <table class="table entries" id="entrytable" data-toggle="table" data-search="true" data-show-columns="true"
id="entrytable" data-show-toggle="true" data-multiple-select-row="true" data-click-to-select="true" data-toolbar="#toolbar"
data-toggle="table" data-pagination="true" data-show-extended-pagination="true" data-classes="table table-hover"
data-search="true" data-url="/api/queue" data-show-refresh="true" data-auto-refresh="true" data-auto-refresh-interval="10">
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> <thead>
<tr> <tr>
<th data-field="state" data-checkbox="true"></th> <th data-field="state" data-checkbox="true"></th>
@ -53,15 +40,18 @@ table td:nth-child(2) {
<script> <script>
$(function () { $(function () {
refreshEntryToggle() refreshEntryToggle()
$('#entryToggle').change(function() { $('#entryToggle').change(function () {
$.ajax({url: "/api/entries/accept/"+($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000)}); $.ajax({ url: "/api/entries/accept/" + ($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000) });
}) })
$("#entrytable").bootstrapTable().on('load-success.bs.table', function() { $("#entrytable").bootstrapTable().on('load-success.bs.table', function () {
$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').tooltip()
}) })
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
}) })
function confirmDeleteEntry(name, entry_id) { function confirmDeleteEntry(name, entry_id) {
bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){ bootbox.confirm("Wirklich den Eintrag von " + name + " löschen?", function (result) {
if (result) { if (result) {
deleteEntry(entry_id) deleteEntry(entry_id)
} }
@ -80,7 +70,7 @@ table td:nth-child(2) {
className: 'btn btn-secondary' className: 'btn btn-secondary'
} }
}, },
callback: function(result){ callback: function (result) {
if (result) { if (result) {
DeleteSelectedEntries(getIdSelections()) DeleteSelectedEntries(getIdSelections())
} }
@ -100,7 +90,7 @@ table td:nth-child(2) {
className: 'btn btn-secondary' className: 'btn btn-secondary'
} }
}, },
callback: function(result){ callback: function (result) {
if (result) { if (result) {
var dialog = bootbox.dialog({ var dialog = bootbox.dialog({
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>', message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',
@ -114,8 +104,8 @@ table td:nth-child(2) {
} }
function refreshEntryToggle() { function refreshEntryToggle() {
$.getJSON("/api/entries/accept", (data) => { $.getJSON("/api/entries/accept", (data) => {
if (data["value"]!=$('#entryToggle').is(":checked")) { if (data["value"] != $('#entryToggle').is(":checked")) {
if(data["value"]==1) { if (data["value"] == 1) {
$('#entryToggle').data('bs.toggle').on('true') $('#entryToggle').data('bs.toggle').on('true')
} }
else { else {
@ -125,51 +115,51 @@ table td:nth-child(2) {
}) })
} }
function deleteEntry(entry_id) { function deleteEntry(entry_id) {
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: '/api/entries/delete/'+entry_id, url: '/api/entries/delete/' + entry_id,
contentType: "application/json", contentType: "application/json",
dataType: 'json', dataType: 'json',
async: false async: false
}); });
$("#entrytable").bootstrapTable('refresh') $("#entrytable").bootstrapTable('refresh')
} }
function markEntryAsSung(entry_id) { function markEntryAsSung(entry_id) {
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: '/api/entries/mark_sung/'+entry_id, url: '/api/entries/mark_sung/' + entry_id,
contentType: "application/json", contentType: "application/json",
dataType: 'json', dataType: 'json',
async: false async: false
}); });
$("#entrytable").bootstrapTable('refresh') $("#entrytable").bootstrapTable('refresh')
} }
function markEntryAsTransferred(entry_id) { function markEntryAsTransferred(entry_id) {
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: '/api/entries/mark_transferred/'+entry_id, url: '/api/entries/mark_transferred/' + entry_id,
contentType: "application/json", contentType: "application/json",
dataType: 'json', dataType: 'json',
async: false async: false
}); });
$("#entrytable").bootstrapTable('refresh') $("#entrytable").bootstrapTable('refresh')
} }
function DeleteSelectedEntries(ids) { function DeleteSelectedEntries(ids) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: '/api/entries/delete', url: '/api/entries/delete',
data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}), data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
error: function() { error: function () {
bootbox.alert({ bootbox.alert({
message: "Fehler beim Löschen der Eintragungen.", message: "Fehler beim Löschen der Eintragungen.",
}) })
}, },
success: function() { success: function () {
$("#entrytable").bootstrapTable('refresh') $("#entrytable").bootstrapTable('refresh')
}, },
@ -183,28 +173,29 @@ table td:nth-child(2) {
url: '/api/songs/update', url: '/api/songs/update',
contentType: "application/json", contentType: "application/json",
dataType: 'json', dataType: 'json',
success: function(data) { success: function (data) {
wait_dialog.modal('hide') wait_dialog.modal('hide')
bootbox.alert({ bootbox.alert({
message: data["status"], message: data["status"],
callback: function() { callback: function () {
$("#entrytable").bootstrapTable('refresh') $("#entrytable").bootstrapTable('refresh')
} }
}) })
} }
}); });
} }
function TableActions (value, row, index) { function TableActions(value, row, index) {
console.log("Value: "+value+", Row: "+row+", Index: "+index) console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
console.log(row) console.log(row)
let outerHTML = "" let outerHTML = ""
if (row.Transferred==1) { if (row.Transferred == 1) {
outerHTML = "<button type=\"button\" class=\"btn btn-default\" onclick=\"markEntryAsTransferred("+row.entry_ID+")\"><i class=\"fas fa-backward\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"markEntryAsSung("+row.entry_ID+")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"confirmDeleteEntry('"+row.Name+"',"+row.entry_ID+")\"><i class=\"fas fa-trash\"></i></button>"; 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>&nbsp;<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>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry('" + row.Name + "'," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
} else { } else {
outerHTML = "<button type=\"button\" class=\"btn btn-info\" onclick=\"markEntryAsTransferred("+row.entry_ID+")\"><i class=\"fas fa-exchange-alt\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"markEntryAsSung("+row.entry_ID+")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"confirmDeleteEntry('"+row.Name+"',"+row.entry_ID+")\"><i class=\"fas fa-trash\"></i></button>"; 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>&nbsp;<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>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry('" + row.Name + "'," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
} }
return outerHTML; return outerHTML;
} }
function getIdSelections() { function getIdSelections() {
return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) { return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
return row.entry_ID return row.entry_ID