Fachschaft/GetraenkelisteWebsite
5
0
Fork 0
Code Issues Pull Requests Actions Activity

Add stats display

Browse Source
This commit is contained in:
Moritz
2025-06-07 17:17:53 +02:00
parent ef464db3dc
commit 389f7e21b3
5 changed files with 671 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
templates/base.html
View File

@@ -48,171 +48,6 @@
</header>
<main>
{% block content %}{% endblock %}
{% if user %}
{% if 'Getraenkeliste Postpaid' in user.groups %}
<p>Du bist Teil der Fachschaft Informatik.</p>
{% if prepaid_users_from_curr_user %}
<p>Liste deiner Prepaid-User:</p>
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Key</th>
<th style="padding: 0.5em 1em">Money (€)</th>
</tr>
</thead>
<tbody>
{% for prepaid_user_i in prepaid_users_from_curr_user %}
<tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<p>Füge Nutzer zur Prepaid Liste hinzu:</p>
<form method="post" action="/add_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<input id="username" type="text" name="username" placeholder="Username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
<label for="start_money" style="margin: 0 0.5em 0 0; font-weight: bold">Start Money (€):</label>
<input id="start_money" type="number" name="start_money" placeholder="Start Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add User</button>
</form>
<p>Füge bestehendem Prepaid-User Geld hinzu:</p>
{% if db_users_prepaid %}
<form method="post" action="/add_money_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="addmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="addmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="addmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="addmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add Money</button>
</form>
{% else %}
<p>Es sind keine Prepaid-User vorhanden.</p>
{% endif %}
{% endif %}
{% if 'Getraenkeliste Verantwortliche' in user.groups %}
<h2>Admin Interface</h2>
<p>Ausgleichszahlung:</p>
<p>Der eingegebene Betrag wird vom aktuell eingeloggten Nutzer abgezogen und dem eingetragenem Nutzer gutgeschrieben.</p>
<form method="post" action="/payup" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="payup-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="payup-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="payup-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="payup-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Pay Up</button>
</form>
<h3>Postpaid Liste</h3>
<p>Users in postpaid database:</p>
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">ID</th>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Money (€)</th>
<th style="padding: 0.5em 1em">Activated</th>
<th style="padding: 0.5em 1em">last drink</th>
</tr>
</thead>
<tbody>
{% for db_user_i in users %}
<tr{% if db_user_i.money <= -5000 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ db_user_i.id }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.money / 100 }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.activated }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.last_drink }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>(De-)Activate User</p>
<form method="post" action="/toggle_activated_user_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
</form>
<p>Set user money:</p>
<form method="post" action="/set_money_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="setmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="setmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="setmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="setmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Set Money</button>
</form>
<h3>Prepaid Liste</h3>
<p>Users in prepaid database:</p>
{% if db_users_prepaid %}
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">ID</th>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Key</th>
<th style="padding: 0.5em 1em">Postpaid_User ID</th>
<th style="padding: 0.5em 1em">Money (€)</th>
<th style="padding: 0.5em 1em">Activated</th>
<th style="padding: 0.5em 1em">last drink</th>
</tr>
</thead>
<tbody>
{% for prepaid_user_i in db_users_prepaid %}
<tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.id }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.postpaid_user_id }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.activated }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.last_drink }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>(De-)Activate User</p>
<form method="post" action="/toggle_activated_user_prepaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
</form>
<p>Delete User</p>
<form method="post" action="/del_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="del-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="del-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(179, 6, 44); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Delete User</button>
{% else %}
<tr>
<td colspan="7" style="text-align: center">No users in prepaid database</td>
</tr>
{% endif %}
{% endif %}
{% endif %}
</main>
</body>
</html>

215
templates/index.html
View File

@@ -164,55 +164,170 @@ content %}
</div>
</div>
<script>
async function showDrinkPopup() {
const response = await fetch("/popup_getraenke");
const data = await response.json();
const container = document.getElementById("popup-getraenke");
container.innerHTML = "";
data.getraenke.forEach(name => {
const btn = document.createElement("button");
btn.textContent = name;
btn.style.margin = "0.5em";
btn.style.padding = "0.5em 1em";
btn.style.borderRadius = "6px";
btn.style.border = "1px solid #00618F";
btn.style.background = "#e0f4ff";
btn.style.cursor = "pointer";
btn.onclick = () => {
document.getElementById("getraenk-auswahl").value = name;
document.getElementById("popup").style.display = "none";
document.getElementById("drink-form").submit();
};
container.appendChild(btn);
});
document.getElementById("popup").style.display = "block";
let dauer = 3; // Sekunden
let verbleibend = dauer;
const bar = document.getElementById("progress-bar");
bar.style.width = "100%";
const interval = setInterval(() => {
verbleibend -= 0.1;
bar.style.width = (verbleibend / dauer * 100) + "%";
if (verbleibend <= 0) {
clearInterval(interval);
const auswahlInput = document.getElementById("getraenk-auswahl");
if (auswahlInput) {
auswahlInput.value = "";
}
document.getElementById("popup").style.display = "none";
const drinkForm = document.getElementById("drink-form");
if (drinkForm) {
drinkForm.submit();
}
}
}, 100);
console.log("Popup angezeigt und Fortschrittsbalken gestartet.");
}
</script>
{% if user %}
{% if 'Getraenkeliste Postpaid' in user.groups %}
<p>Du bist Teil der Fachschaft Informatik.</p>
{% if prepaid_users_from_curr_user %}
<p>Liste deiner Prepaid-User:</p>
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Key</th>
<th style="padding: 0.5em 1em">Money (€)</th>
</tr>
</thead>
<tbody>
{% for prepaid_user_i in prepaid_users_from_curr_user %}
<tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<p>Füge Nutzer zur Prepaid Liste hinzu:</p>
<form method="post" action="/add_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<input id="username" type="text" name="username" placeholder="Username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
<label for="start_money" style="margin: 0 0.5em 0 0; font-weight: bold">Start Money (€):</label>
<input id="start_money" type="number" name="start_money" placeholder="Start Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add User</button>
</form>
<p>Füge bestehendem Prepaid-User Geld hinzu:</p>
{% if db_users_prepaid %}
<form method="post" action="/add_money_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="addmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="addmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="addmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="addmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add Money</button>
</form>
{% else %}
<p>Es sind keine Prepaid-User vorhanden.</p>
{% endif %}
{% endif %}
{% if 'Getraenkeliste Verantwortliche' in user.groups %}
<h2>Admin Interface</h2>
<p>Ausgleichszahlung:</p>
<p>Der eingegebene Betrag wird vom aktuell eingeloggten Nutzer abgezogen und dem eingetragenem Nutzer gutgeschrieben.</p>
<form method="post" action="/payup" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="payup-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="payup-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="payup-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="payup-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Pay Up</button>
</form>
<h3>Postpaid Liste</h3>
<p>Users in postpaid database:</p>
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">ID</th>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Money (€)</th>
<th style="padding: 0.5em 1em">Activated</th>
<th style="padding: 0.5em 1em">last drink</th>
</tr>
</thead>
<tbody>
{% for db_user_i in users %}
<tr{% if db_user_i.money <= -5000 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ db_user_i.id }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.money / 100 }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.activated }}</td>
<td style="padding: 0.5em 1em">{{ db_user_i.last_drink }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>(De-)Activate User</p>
<form method="post" action="/toggle_activated_user_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
</form>
<p>Set user money:</p>
<form method="post" action="/set_money_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="setmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="setmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in users %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<label for="setmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
<input id="setmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Set Money</button>
</form>
<h3>Prepaid Liste</h3>
<p>Users in prepaid database:</p>
{% if db_users_prepaid %}
<table>
<thead>
<tr>
<th style="padding: 0.5em 1em">ID</th>
<th style="padding: 0.5em 1em">Username</th>
<th style="padding: 0.5em 1em">Key</th>
<th style="padding: 0.5em 1em">Postpaid_User ID</th>
<th style="padding: 0.5em 1em">Money (€)</th>
<th style="padding: 0.5em 1em">Activated</th>
<th style="padding: 0.5em 1em">last drink</th>
</tr>
</thead>
<tbody>
{% for prepaid_user_i in db_users_prepaid %}
<tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.id }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.postpaid_user_id }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.activated }}</td>
<td style="padding: 0.5em 1em">{{ prepaid_user_i.last_drink }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>(De-)Activate User</p>
<form method="post" action="/toggle_activated_user_prepaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
</form>
<p>Delete User</p>
<form method="post" action="/del_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
<label for="del-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
<select id="del-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
{% for db_user in db_users_prepaid %}
<option value="{{ db_user.username }}">{{ db_user.username }}</option>
{% endfor %}
</select>
<button type="submit" style="padding: 0.5em 1em; background: rgb(179, 6, 44); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Delete User</button>
{% else %}
<tr>
<td colspan="7" style="text-align: center">No users in prepaid database</td>
</tr>
{% endif %}
{% endif %}
{% endif %}
{% endblock %}

36
templates/stats.html Normal file
View File

@@ -0,0 +1,36 @@
{% extends "base.html" %}
{% block title %}Statistik{% endblock %}
{% block content %}
<!-- Chart.js einbinden -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h3>Verteilung der Getränkesorten</h3>
<canvas id="pieChart" width="400" height="200"></canvas>
<script>
// Pie Chart für Getränketypen
const pieChartLabels = {{ stats_drink_types | map(attribute='drink_type') | list | tojson }};
const pieChartData = {{ stats_drink_types | map(attribute='count') | list | tojson }};
const pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: pieChartLabels,
datasets: [{
data: pieChartData,
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' },
title: {
display: true,
text: 'Verteilung der Getränkesorten'
}
}
}
});
</script>
{% endblock %}