86 lines
2.8 KiB
HTML
86 lines
2.8 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" maxlength=30></p>
|
|
<p>Specifieke opmerkingen <input type="text" name="remark" maxlength=50></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 id="orderTable">
|
|
</table>
|
|
</header>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<script>
|
|
|
|
function executeQuery(query, callback) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/execute',
|
|
contentType: "application/json",
|
|
data: JSON.stringify({
|
|
"lecode": query
|
|
}),
|
|
success: callback,
|
|
error: function(e) {
|
|
console.log("ERROR : ", e);
|
|
}
|
|
});
|
|
}
|
|
|
|
function start_bakken(id) {
|
|
executeQuery(`UPDATE orders SET status = 'aan_het_bakken' where id=${id}`, function(ign) {
|
|
updateTable();
|
|
});
|
|
}
|
|
function klaar(id) {
|
|
executeQuery(`UPDATE orders SET status = 'klaar' where id=${id}`, function(ign) {
|
|
updateTable();
|
|
});
|
|
}
|
|
function dismiss(id) {
|
|
executeQuery(`UPDATE orders SET status = 'dismissed' where id=${id}`, function(ign) {
|
|
updateTable();
|
|
});
|
|
}
|
|
|
|
function updateTable() {
|
|
executeQuery(`SELECT id, name, remark, status from orders where status != 'dismissed'`, function(x) {
|
|
$('#orderTable').empty();
|
|
console.log(x);
|
|
for (row of x) {
|
|
console.log(row);
|
|
$('#orderTable').append(`<tr><td><button onclick="start_bakken(${row[0]})">Aan het bakken</button></td><td><button onclick="klaar(${row[0]})">Klaar</button></td><td><button onclick="dismiss(${row[0]})">Dismiss</button></td><th>${row[1] + " (" + row[2] + ")"}</th><td>${row[3]}</td></tr>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
updateTable();
|
|
$("#addPersonButton").click(function(event) {
|
|
event.preventDefault();
|
|
var form = $("#addPersonForm").serializeArray();
|
|
var name = form[0]["value"];
|
|
var remark = form[1]["value"];
|
|
executeQuery(`INSERT INTO orders (name, remark) VALUES ('${name}', '${remark}')`, function(ign) {
|
|
updateTable();
|
|
});
|
|
});
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|