queue-manager/templates/admin.html

82 lines
2.6 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Panel admina — kolejka</title>
<style>
body{font-family:Helvetica,Arial;margin:20px}
.grid{display:flex;gap:16px;align-items:flex-start}
.col{flex:1;padding:10px;border:1px solid #eee;border-radius:6px;background:#fafafa}
h2{margin-top:0}
.inline-form{display:inline-block;margin:3px}
.btn{padding:6px 10px;border-radius:4px;border:1px solid #888;background:#f0f0f0;cursor:pointer}
.num-label{font-size:18px;margin-right:8px;display:inline-block;width:40px;text-align:center}
/* Responsive: na wąskich ekranach kolumny jedna pod drugą */
@media (max-width:700px){
.grid{flex-direction:column}
.num-label{width:60px}
}
</style>
</head>
<body>
<h2>Panel admina</h2>
<form method="post" style="margin-bottom:18px">
<div style="display:flex;flex-direction:column;gap:10px;max-width:220px">
<button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Dodaj numer
</button>
<button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Reset — usuń wszystkie
</button>
</div>
</form>
<div class="grid">
<div class="col">
<h3>Oczekujące</h3>
{% for n in waiting %}
<form class="inline-form" method="post">
<input type="hidden" name="num" value="{{n}}">
<button class="btn" name="action" value="call">{{n}}</button>
</form>
{% else %}
<p>brak</p>
{% endfor %}
</div>
<div class="col">
<h3>Wywołane (obecne)</h3>
{% for n in called %}
<div style="margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap">
<span class="num-label">{{n}}</span>
<form style="display:inline-block;margin-right:6px" method="post">
<input type="hidden" name="num" value="{{n}}">
<button class="btn" name="action" value="done">Przyszedł / Usuń</button>
</form>
<form style="display:inline-block" method="post">
<input type="hidden" name="num" value="{{n}}">
<button class="btn" name="action" value="return">Wróć do kolejki</button>
</form>
</div>
{% else %}
<p>brak</p>
{% endfor %}
</div>
<div class="col">
<h3>Obsłużone</h3>
{% for n in done %}
<div>{{n}}</div>
{% else %}
<p>brak</p>
{% endfor %}
</div>
</div>
</body>
</html>