136 lines
6.4 KiB
HTML
136 lines
6.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.5">
|
|
<title>Pannenkoekenwachtrij</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tuicss@@2.1.1/dist/tuicss.min.css" rel="stylesheet"/>
|
|
<style>
|
|
.tui-window {
|
|
width: 100%;
|
|
}
|
|
|
|
.col {
|
|
width: 100%;
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
td, th {
|
|
text-align: center;
|
|
}
|
|
|
|
.tui-table tbody tr td {
|
|
padding-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="tui-bg-green-black">
|
|
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%">
|
|
<div class="container" style="width: 100%">
|
|
<div class="row">
|
|
<div class="col m12">
|
|
<div class="tui-window red-168">
|
|
<fieldset class="tui-fieldset">
|
|
Welkom bij de pannenkoekenwachtrij
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col m12">
|
|
<div class="tui-window red-168">
|
|
<fieldset class="tui-fieldset">
|
|
<form action="/add_person" method="POST">
|
|
<div class="row">
|
|
<div class="col m12" style="display: inline-flex">
|
|
Naam van de volgende:
|
|
<input class="tui-input" type="text" id="name" name="name" style="margin-left: 10px; flex: 1">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col m12" style="display: inline-flex">
|
|
Specifieke opmerkingen:
|
|
<input class="tui-input" type="text" id="remark" name="remark" style="margin-left: 10px; flex: 1">
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 10px">
|
|
<div class="col m12" style="display: inline-flex">
|
|
<input class="tui-button green-168" type="submit" value="Persoon toevoegen" style="flex: 1; margin-bottom: 0px;">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if people.len > 0
|
|
<div class="row">
|
|
<div class="col m12">
|
|
<div class="tui-window red-168">
|
|
<fieldset class="tui-fieldset">
|
|
<form action="/status_update" method="POST">
|
|
<input type="hidden" name="id" value="@{people[0].id}">
|
|
<input class="tui-button green-168" type="submit" value="Update First Person" style="width: 100%">
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@end
|
|
<div class="row">
|
|
<div class="col m12">
|
|
<div class="tui-window red-168">
|
|
<fieldset class="tui-fieldset">
|
|
<h2>Zie hieronder de lijst van personen die een pannenkoek willen</h2>
|
|
<table class="tui-table" style="width: 100%">
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="4" style="text-align:center; vertical-align:middle; padding-top: 20px">Volgende persoon</td>
|
|
</tr>
|
|
@if people.len > 0
|
|
@for person in people[..1]
|
|
<tr>
|
|
<td>@person.name @person.remark()</td>
|
|
<td>@person.status_str()</td>
|
|
<td>@person.order_time_humanized()</td>
|
|
<td>
|
|
<form action="/status_update" method="POST">
|
|
<input type="hidden" name="id" value="@person.id">
|
|
<input class="tui-button green-168" type="submit" value="Update">
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@end
|
|
@end
|
|
<tr>
|
|
<td colspan="4" style='text-align:center; vertical-align:middle'>Andere personen</td>
|
|
</tr>
|
|
@if people.len > 1
|
|
@for person in people[1..]
|
|
<tr>
|
|
<td>@person.name @person.remark()</td>
|
|
<td>@person.status_str()</td>
|
|
<td>@person.order_time_humanized()</td>
|
|
<td>
|
|
<form action="/status_update" method="POST">
|
|
<input type="hidden" name="id" value="@person.id">
|
|
<input class="tui-button green-168" type="submit" value="Update">
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@end
|
|
@end
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|