pannenkoekenwachtrij/templates/home.html

66 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pannenkoekenwachtrij</title>
</head>
<body>
<header>
<h1>Welkom bij de pannenkoekenwachtrij</h1>
<form id="addPersonForm">
<p>Naam van de volgende <input type="text" name="name"></p>
<p>Specifieke opmerkingen <input type="text" name="remark"></p>
<p><input type="submit" value="Persoon toevoegen" id="addPersonButton"></p>
</form>
<h2>Zie hieronder de lijst van personen die een pannenkoek willen</h2>
<table>
{% for order in orders %}
<tr>
<td><button onclick="start_bakken({{order.id}})">Aan het bakken</button></td>
<td><button onclick="klaar({{order.id}})">Klaar</button></td>
<td><button onclick="dissmiss({{order.id}})">Dismiss</button></td>
<th>{{ order.name + order.remark + ": " }}</th>
<td>{{ "Huidige status: " + order.status }}</td>
</tr>
{% endfor %}
</table>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#addPersonButton").click(function(event) {
event.preventDefault();
var form = $("#addPersonForm").serializeArray();
var name = form[0]["value"];
var remark = form[1]["value"];
$.ajax({
type: "POST",
url: '/execute',
contentType: "application/json",
data: JSON.stringify({
"lecode": `insert into orders (name, remark) values ("${name}", "${remark}")`
}),
success: function(data) {
console.log("SUCCESS : ", data);
},
error: function(e) {
console.log("ERROR : ", e);
}
});
});
})
</script>
</body>
</html>