karaoqueue/app/templates/played_list.html

{% 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>
<table class="table" id="table">
    <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://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.1.1/dist/jspdf.plugin.autotable.js"></script>
<script>
    function confirmDeleteAllEntries() {
        bootbox.confirm({
            message: "Wirklich Abspielliste löschen?<br>Stelle sicher, dass du sie vorher zwecks Abrechnung gedruckt und/oder heruntergeladen hast!", 
            buttons: {
                confirm: {
                    label: 'Ja',
                    className: 'btn btn-danger'
                },
                cancel: {
                    label: 'Nein',
                    className: 'btn btn-secondary'
                }
            },
            callback: function(result){
                if (result) {
                    deleteAllEntries()
                }
            }
        })
    }
    function deleteAllEntries() {
        $.ajax({
            type: 'GET',
            url: '/api/played/clear',
            contentType: "application/json",
            dataType: 'json',
            async: false
        });
        location.reload();
    }

    function exportPDF() {
        var doc = new jsPDF();
        doc.autoTable({
            html: '#table',
            theme: 'grid'
        });
        doc.save('Abspielliste.pdf');
    }

    function printPDF() {
        var doc = new jsPDF();
        doc.autoTable({
            html: '#table',
            theme: 'grid'
        });
        doc.autoPrint();
        doc.output('dataurlnewwindow');
    }
</script>
{% endblock %}