queue-manager/templates/admin.html

78 lines
2.4 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:12px">
<label>Start — liczba numerów:
<input name="count" type="number" min="1" value="20" style="width:80px;margin-left:6px">
</label>
<button class="btn" name="action" value="start">Start</button>
<button class="btn" name="action" value="reset">Reset</button>
</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>