125 lines
No EOL
4.1 KiB
HTML
125 lines
No EOL
4.1 KiB
HTML
<!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> |