phillip/karaoqueue
1
0
Fork 0
mirror of https://github.com/PhoenixTwoFive/karaoqueue.git synced 2025-07-06 01:54:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use bootstrap-table for fancy ajax tables.

Browse Source
This commit is contained in:
Phillip Kühne
2019-08-18 23:55:59 +02:00
parent 41b2aa2ed1
commit 3ed8146b6f
11 changed files with 161 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/templates/base.html
View File

@ -11,6 +11,9 @@
<title>{% block title %}{% endblock %} - KaraoQueue</title>
<!-- Bootstrap-Tables -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
@ -18,9 +21,10 @@
<!-- Custom styles for this template -->
<link href="static/css/style.css" rel="stylesheet">
<!-- Fontawesome Icons-->
<!-- Fontawesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
@ -88,6 +92,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
{% block extrajs %}{% endblock %}
<script>
$(document).ready(function () {

27
app/templates/main.html
View File

@ -3,28 +3,19 @@
{% extends 'base.html' %}
{% block title %}Warteliste{% endblock %}
{% block content %}
<a role="button" class="btn btn-primary btn-lg btn-block" href="/list">Eintragen</a>
<table class="table">
<a role="button" class="btn btn-primary btn-lg btn-block mb-2" href="/list">Eintragen</a>
<table class="table"
data-toggle="table"
data-url="/api/queue"
data-pagination="true"
data-classes="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Song</th>
<th scope="col">Künstler</th>
<th scope="col" data-field="Name">Name</th>
<th scope="col" data-field="Title">Song</th>
<th scope="col" data-field="Artist">Künstler</th>
</tr>
</thead>
{% for entry in list: %}
<tr>
<td>
{{ entry[0] }}
</td>
<td>
{{ entry[1] }}
</td>
<td>
{{ entry[2] }}
</td>
</tr>
{% endfor %}
</table>
<a name="end"></a>
{% endblock %}

111
app/templates/main_admin.html
View File

@ -4,53 +4,37 @@
{% block title %}Warteliste-Admin{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="card" style="width: 100%">
<div class="card-body">
<button type="button" class="topbutton btn btn-danger"
onclick="confirmDeleteAllEntries()"><i class="fas fa-trash mr-2"></i>Alle 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>
</div>
</div>
<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>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Song</th>
<th scope="col">Künstler</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
{% for entry in list: %}
<table class="table"
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">
<thead>
<tr>
<td>
{{ entry[0] }}
</td>
<td>
{{ entry[1] }}
</td>
<td>
{{ entry[2] }}
</td>
<td>
<button type='button' class='btn btn-success'
data-toggle="tooltip" data-placement="top" title="Als gesungen markieren"
onclick='markEntryAsSung({{ entry[3] }})'><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='confirmDeleteEntry("{{ entry[0] }}",{{ entry[3] }})'><i
class="fas fa-trash"></i></button>
</td>
<th data-field="state" data-checkbox="true"></th>
<th scope="col" data-field="Name">Name</th>
<th scope="col" data-field="Title">Song</th>
<th scope="col" data-field="Artist">Künstler</th>
<th scope="col" data-formatter="TableActions">Aktionen</th>
</tr>
{% endfor %}
</table>
<a name="end"></a>
</div>
</thead>
</table>
<a name="end"></a>
</div>
{% endblock %}
{% block extrajs %}
@ -65,9 +49,9 @@
}
})
}
function confirmDeleteAllEntries() {
function confirmDeleteSelectedEntries() {
bootbox.confirm({
message: "Wirklich alle Eintragungen löschen?",
message: "Wirklich gewählte Eintragungen löschen?",
buttons: {
confirm: {
label: 'Ja',
@ -80,7 +64,7 @@
},
callback: function(result){
if (result) {
deleteAllEntries()
DeleteSelectedEntries(getIdSelections())
}
}
})
@ -118,7 +102,7 @@
dataType: 'json',
async: false
});
location.reload();
$("#entrytable").bootstrapTable('refresh')
}
function markEntryAsSung(entry_id) {
$.ajax({
@ -128,17 +112,24 @@
dataType: 'json',
async: false
});
location.reload();
$("#entrytable").bootstrapTable('refresh')
}
function deleteAllEntries() {
function DeleteSelectedEntries(ids) {
$.ajax({
type: 'GET',
url: '/api/entries/delete_all',
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',
async: false
dataType: 'json'
});
location.reload();
}
function updateSongDatabase(wait_dialog) {
$.ajax({
@ -150,10 +141,18 @@
wait_dialog.modal('hide')
bootbox.alert({
message: data["status"],
callback: function() {location.reload()}
callback: function() {$("#entrytable").bootstrapTable('refresh')}
})
}
});
}
function TableActions (value, row, index) {
return "<button type='button' class='btn btn-success' data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick='markEntryAsSung("+row.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.ID+")'><i class=\"fas fa-trash\"></i></button>";
}
function getIdSelections() {
return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
return row.ID
})
}
</script>
{% endblock %}

36
app/templates/played_list.html
View File

@ -1,15 +1,23 @@
{% extends 'base.html' %}
{% block title %}Abspielliste{% endblock %}
{% block content %}
<div class="card admincontrols" style="width: 100%">
<div class="card-body">
<button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteAllEntries()"><i
class="fas fa-trash mr-2"></i>Abspielliste löschen</button>
<button type="button" class="topbutton btn btn-primary" onclick="exportPDF()"><i class="fas fa-file-pdf mr-2"></i>Als PDF herunterladen</button>
<button type="button" class="topbutton btn btn-secondary" onclick="printPDF()"><i class="fas fa-print mr-2"></i>Drucken</button>
</div>
<div id="toolbar">
<button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteAllEntries()"><i
class="fas fa-trash mr-2"></i>Abspielliste löschen</button>
<button type="button" class="topbutton btn btn-primary" onclick="exportPDF()"><i
class="fas fa-file-pdf mr-2"></i>Als PDF herunterladen</button>
<button type="button" class="topbutton btn btn-secondary" onclick="printPDF()"><i
class="fas fa-print mr-2"></i>Drucken</button>
</div>
<table class="table" id="table">
<table class="table"
id="table"
data-toggle="table"
data-search="true"
data-show-columns="true"
data-toolbar="#toolbar"
data-pagination="true"
data-classes="table table-bordered table-striped"
data-show-extended-pagination="true">
<thead>
<tr>
<th scope="col">Song</th>
@ -67,7 +75,8 @@
function exportPDF() {
var doc = new jsPDF();
doc.autoTable({
html: '#table',
head: [["Song","Wiedergaben"]],
body: createTableArray(),
theme: 'grid'
});
doc.save('Abspielliste.pdf');
@ -76,11 +85,18 @@
function printPDF() {
var doc = new jsPDF();
doc.autoTable({
html: '#table',
head: [["Song","Wiedergaben"]],
body: createTableArray(),
theme: 'grid'
});
doc.autoPrint();
doc.output('dataurlnewwindow');
}
function createTableArray() {
var data = $("#table").bootstrapTable('getData')
out = data.map(x => [x["0"],x["1"]])
return out;
}
</script>
{% endblock %}

10
app/templates/songlist.html
View File

@ -4,16 +4,6 @@
<input class="form-control" id="filter" type="text" placeholder="Suchen...">
<table class="table">
<tbody id="songtable">
<!--{% for entry in (): %}
<tr>
<td>
{{ entry[0] }}
</td>
<td>
<button type="button" class="btn btn-primary"><i class="material-icons">queue_music</i></button>
</td>
</tr>
{% endfor %}-->
</tbody>
</table>
<div class="modal fade" id="enqueueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"