Alpha release
This commit is contained in:
parent
62681acd16
commit
eeda5062ae
14 changed files with 842 additions and 1 deletions
53
Server/Host/templates/index.html
Normal file
53
Server/Host/templates/index.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<form name="order" onsubmit="return validateForm()" action="{{ url_for('order_get') }}" method="POST" class="flex-container">
|
||||
<li class="box desk-nr">Tisch Nummer
|
||||
<div>
|
||||
<select name="desk" class="desk-select">
|
||||
{% for e in range(1, MAX_DESKS+1) %}
|
||||
|
||||
{% if desk == e %}
|
||||
<option selected>{{e}}</option>
|
||||
|
||||
{% else %}
|
||||
<option>{{e}}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="box content">Menu
|
||||
{% for category in orderableItems.get('products') %}
|
||||
|
||||
|
||||
<div>
|
||||
<details>
|
||||
<summary>{{ category }}</summary>
|
||||
|
||||
|
||||
{% for product in orderableItems.get('products').get(category)%}
|
||||
|
||||
<div class="products" id="{ product['name'] }">
|
||||
{{product['name']}}
|
||||
<input id="points" type="number" value=0 name="{{ "order-name." + product['name'] }}" step="1">
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</details>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<button type="submit" class="box order">Weiter</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
23
Server/Host/templates/login.html
Normal file
23
Server/Host/templates/login.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Login Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Login Page</h1>
|
||||
<form method="POST" action="{{ url_for('login') }}">
|
||||
{{ form.csrf_token }}
|
||||
{{ form.username.label }}
|
||||
{{ form.username }}
|
||||
<br>
|
||||
<br>
|
||||
{{ form.password.label }}
|
||||
{{ form.password }}
|
||||
<br>
|
||||
<p>{{ form.remember_me }} {{ form.remember_me.label }}</p>
|
||||
<br>
|
||||
{{ form.submit }}
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
Server/Host/templates/orders.html
Normal file
125
Server/Host/templates/orders.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Orders</title>
|
||||
<style>
|
||||
table { border-collapse: collapse; width: 80%; margin: 40px auto; }
|
||||
th, td { border: 1px solid #cccccc; padding: 12px 18px; }
|
||||
th { background: #f0f0f0; }
|
||||
.finish-btn {
|
||||
background-color: #4CAF50; /* Green */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 7px 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.undo-btn {
|
||||
background-color: #f44336; /* Red */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 7px 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.finish-btn:hover { background-color: #388e3c; }
|
||||
.undo-btn:hover { background-color: #d32f2f; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="text-align:center;">Current Orders</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Desk</th>
|
||||
<th>Products</th>
|
||||
<th>Action</th>
|
||||
<th>Order-Nr</th>
|
||||
</tr>
|
||||
{% for order in orders%}
|
||||
<tr id="order-{{ order[2] }}">
|
||||
<td>{{ order[0] }}</td>
|
||||
<td>
|
||||
<ul>
|
||||
{% for product in order[1] %}
|
||||
<li>{{ product }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class="finish-btn"
|
||||
onclick="markFinished({{ order[2] }})"
|
||||
id="btn-{{ order[2] }}">
|
||||
Finished
|
||||
</button>
|
||||
</td>
|
||||
<td>order {{ order[2] }} </td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3">No open orders.</td></tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
<script>
|
||||
// Track active timers for each order
|
||||
window.activeTimers = {};
|
||||
|
||||
function markFinished(orderId) {
|
||||
fetch('/orders', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `order_id=${orderId}&action=finish`
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const btn = document.getElementById(`btn-${orderId}`);
|
||||
btn.className = 'undo-btn';
|
||||
btn.onclick = () => undoFinished(orderId);
|
||||
|
||||
// Start countdown (10s)
|
||||
let secondsLeft = 10;
|
||||
btn.textContent = `Undo (${secondsLeft}s)`;
|
||||
|
||||
// Store timer reference
|
||||
window.activeTimers[orderId] = setInterval(() => {
|
||||
secondsLeft--;
|
||||
btn.textContent = `Undo (${secondsLeft}s)`;
|
||||
|
||||
// Auto-remove after 10s
|
||||
if (secondsLeft <= 0) {
|
||||
clearInterval(window.activeTimers[orderId]);
|
||||
document.getElementById(`order-${orderId}`).remove();
|
||||
delete window.activeTimers[orderId];
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function undoFinished(orderId) {
|
||||
// Clear the countdown timer
|
||||
if (window.activeTimers[orderId]) {
|
||||
clearInterval(window.activeTimers[orderId]);
|
||||
delete window.activeTimers[orderId];
|
||||
}
|
||||
|
||||
fetch('/orders', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `order_id=${orderId}&action=undo`
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Revert button to original state
|
||||
const btn = document.getElementById(`btn-${orderId}`);
|
||||
btn.className = 'finish-btn';
|
||||
btn.textContent = 'Finished';
|
||||
btn.onclick = () => markFinished(orderId);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue