karaoqueue/backend/templates/played_list.html

{% extends 'base.html' %}
{% block title %}Abspielliste{% endblock %}
{% block content %}
<div id="toolbar">
    <button type="button" class="topbutton btn btn-danger" onclick="confirmCloseEvent()"><i
            class="fas fa-trash mr-2"></i>Event beenden</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"
        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>
            <th scope="col">Wiedergaben</th>
        </tr>
    </thead>
    {% for entry in list: %}
    <tr>
        <td>
            {{ entry[0] }}
        </td>
        <td>
            {{ entry[1] }}
        </td>
    </tr>
    {% endfor %}
</table>
</table>
{% endblock %}
{% block extrajs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.0.10/dist/jspdf.plugin.autotable.js"></script>
<script>
    function confirmCloseEvent() {
        bootbox.confirm({
            message: `Wirklich Ereignis beenden?<br>
                        Folgendes wird passieren:<br>
                        <ul>
                            <li>Die Warteschlange wird geleert</li>
                            <li>Die Abspielliste wird gelöscht</li>
                            <li>Eine neue Event-ID wird vergeben</li>
                        </ul>
                        Diese Aktion kann nicht rückgängig gemacht werden!
            `, 
            buttons: {
                confirm: {
                    label: 'Ja',
                    className: 'btn btn-danger'
                },
                cancel: {
                    label: 'Nein',
                    className: 'btn btn-secondary'
                }
            },
            callback: function(result){
                if (result) {
                    closeEvent()
                }
            }
        })
    }
    function closeEvent() {
        $.ajax({
            type: 'GET',
            url: '/api/event/close',
            contentType: "application/json",
            dataType: 'json',
            async: false
        });
        location.reload();
    }

    function exportPDF() {
        var doc = new jsPDF();
        doc.autoTable({
            head: [["Song","Wiedergaben"]],
            body: createTableArray(),
            theme: 'grid'
        });
        doc.save('Abspielliste.pdf');
    }

    function printPDF() {
        var doc = new jsPDF();
        doc.autoTable({
            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 %}