Commit 0c9339d1 authored by BuildTools's avatar BuildTools
Browse files

store user data in database

parent 1f32e717
<?PHP <?PHP
$user = 'apache'; $user = 'apache';
$pass = 'e164AzpQx564TpJa'; $pass = 'e164AzpQx564TpJa';
$db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass); $db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass);
$query = "SELECT date FROM opening WHERE date >= " . date("Y-m-d"); $query = "SELECT date FROM opening WHERE date >= " . date("Y-m-d");
$result = $db->query($query); $result = $db->query($query);
$data = array(); $data = array();
foreach( $result as $row ){ foreach( $result as $row ){
array_push($data, $row["date"]); array_push($data, $row["date"]);
} }
echo json_encode($data); echo json_encode($data);
?> ?>
\ No newline at end of file
<?PHP <?PHP
$user = 'apache'; $user = 'apache';
$pass = 'e164AzpQx564TpJa'; $pass = 'e164AzpQx564TpJa';
$db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass); $db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass);
$query = 'SELECT tables, opentime, closetime FROM opening WHERE date="' . $_GET["date"] . '"'; $query = 'SELECT tables, opentime, closetime FROM opening WHERE date="' . $_GET["date"] . '"';
$result = $db->query($query)->fetch(); $result = $db->query($query)->fetch();
$data = array("tables" => $result[0], "open" => $result[1], "close" => $result[2]); $data = array("tables" => $result[0], "open" => $result[1], "close" => $result[2]);
$query = 'SELECT start, end, tisch FROM reservations WHERE date="' . $_GET["date"] . '"'; $query = 'SELECT start, end, tisch FROM reservations WHERE date="' . $_GET["date"] . '"';
$result = $db->query($query); $result = $db->query($query);
$reservations = array(); $reservations = array();
foreach( $result as $row ){ foreach( $result as $row ){
if (!array_key_exists("T".$row["tisch"], $reservations)) { if (!array_key_exists("T".$row["tisch"], $reservations)) {
$reservations["T".$row["tisch"]] = array(); $reservations["T".$row["tisch"]] = array();
} }
$rowdata = array("start" => $row["start"], "end" => $row["end"]); $rowdata = array("start" => $row["start"], "end" => $row["end"]);
array_push($reservations["T".$row["tisch"]], $rowdata); array_push($reservations["T".$row["tisch"]], $rowdata);
} }
$data["reservations"] = $reservations; $data["reservations"] = $reservations;
echo json_encode($data); echo json_encode($data);
?> ?>
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Z10 Gast Registrierung</title> <title>Z10 Gast Registrierung</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="/scripts.js"></script> <script src="/scripts.js"></script>
</head> </head>
<body onload="onLoad();"> <body onload="onLoad();">
<h2>Z10 Gast Registrierung</h2> <h2>Z10 Gast Registrierung</h2>
<p id="js-info">Diese Seite benötigt JavaScript um aktuelle Reservierungen anzeigen zu können.</p> <p id="js-info">Diese Seite benötigt JavaScript um aktuelle Reservierungen anzeigen zu können.</p>
<label>Datum der gewünschten Veranstaltung auswählen</label><br> <label>Datum der gewünschten Veranstaltung auswählen</label><br>
<select id="reservationDate" onchange="loadReservations()"></select><br> <select id="reservationDate" onchange="loadReservations()"></select><br>
<canvas id="reservations"></canvas> <canvas id="reservations"></canvas>
<p>Auf Grund der Corona Verordnung müssen sich Gäste nun auch bei uns Kontaktdaten hinterlegen. Diese werden nach Ablauf von 3 Wochen wieder gelöscht und werden nicht anderweitig genutzt bla bla bla...</p> <p>Auf Grund der Corona Verordnung müssen sich Gäste nun auch bei uns Kontaktdaten hinterlegen. Diese werden nach Ablauf von 3 Wochen wieder gelöscht und werden nicht anderweitig genutzt bla bla bla...</p>
<p>Für eine Reservierung folgendes Formular ausfüllen. Dabei reicht ein Weg (Post/Telefon/Mail) zur Kontaktaufnahme aus.</p> <p>Für eine Reservierung folgendes Formular ausfüllen. Dabei reicht ein Weg (Post/Telefon/Mail) zur Kontaktaufnahme aus.</p>
<form id="personalData" onsubmit="return validateReservation()" method="post"> <form id="personalData" action="/validateReservation.php" onsubmit="return validateReservation()" method="post">
<label for="Vname">Vorname:</label><br> <label for="Vname">Vorname:</label><br>
<input type="text" id="Vname" name="Vname"><br> <input type="text" id="Vname" name="Vname"><br>
<label for="Nname">Nachname:</label><br> <label for="Nname">Nachname:</label><br>
<input type="text" id="Nname" name="Nname"><br> <input type="text" id="Nname" name="Nname"><br>
<label for="Addr">Adresse, Hausnummer:</label><br> <label for="Addr">Adresse, Hausnummer:</label><br>
<input type="text" id="Addr" name="Addr"><br> <input type="text" id="Addr" name="Addr"><br>
<label for="Plz">Postleitzahl:</label><br> <label for="Plz">Postleitzahl:</label><br>
<input type="text" id="Plz" name="Plz"><br> <input type="text" id="Plz" name="Plz"><br>
<label for="Tel">Telefonnummer:</label><br> <label for="Tel">Telefonnummer:</label><br>
<input type="text" id="Tel" name="Tel"><br> <input type="text" id="Tel" name="Tel"><br>
<label for="Email">Email:</label><br> <label for="Email">Email:</label><br>
<input type="text" id="Email" name="Email"><br> <input type="text" id="Email" name="Email"><br>
<input type="checkbox" id="accept" name="accept""> <input type="checkbox" id="accept" name="accept"">
<label for="accept">Ich bestätige hiermit die Speicherung meiner Daten...</label><br><br> <label for="accept">Ich bestätige hiermit die Speicherung meiner Daten...</label>
<input type="submit" value="Reservierung abschließen"><br><br>
</form> <input type="text" class="hiddenInput" id="startTime" name="startTime">
</body> <input type="text" class="hiddenInput" id="endTime" name="endTime">
<input type="text" class="hiddenInput" id="table" name="table">
<input type="text" class="hiddenInput" id="date" name="date"><br><br>
<input type="submit" value="Reservierung abschließen"><br>
</form>
</body>
</html> </html>
\ No newline at end of file
var select = new Object(); var select = new Object();
var reservationData; var reservationData;
function onLoad() { function onLoad() {
resetSelection(); resetSelection();
disableJSInfo(); disableJSInfo();
loadOpeningDates(); loadOpeningDates();
initCanvasClickListener(); initCanvasClickListener();
} }
function resetSelection() { function resetSelection() {
select.startH = -1; select.startH = -1;
select.endH = -1; select.endH = -1;
} }
function disableJSInfo() { function disableJSInfo() {
document.getElementById("js-info").style.display = "none"; document.getElementById("js-info").style.display = "none";
} }
function loadOpeningDates() { function loadOpeningDates() {
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var dropdown = document.getElementById("reservationDate") var dropdown = document.getElementById("reservationDate")
var data = JSON.parse(this.responseText); var data = JSON.parse(this.responseText);
data.forEach(function(date) { data.forEach(function(date) {
var option = document.createElement("option"); var option = document.createElement("option");
option.text = date; option.text = date;
dropdown.add(option); dropdown.add(option);
}); });
loadReservations(); loadReservations();
} }
}; };
xhttp.open("GET", "getOpeningDates.php", true); xhttp.open("GET", "getOpeningDates.php", true);
xhttp.send(); xhttp.send();
} }
function loadReservations() { function loadReservations() {
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
reservationData = JSON.parse(this.responseText); reservationData = JSON.parse(this.responseText);
resetSelection(); resetSelection();
updateCanvas(); updateCanvas();
} }
}; };
xhttp.open("GET", "getReservations.php?date=" + document.getElementById("reservationDate").value, true); xhttp.open("GET", "getReservations.php?date=" + document.getElementById("reservationDate").value, true);
xhttp.send(); xhttp.send();
} }
function updateCanvas() { function updateCanvas() {
var openTime = reservationData.open.split(':'); var openTime = reservationData.open.split(':');
var closeTime = reservationData.close.split(':'); var closeTime = reservationData.close.split(':');
var canvas = document.getElementById("reservations"); var canvas = document.getElementById("reservations");
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
canvas.width = (closeTime[0] - openTime[0]) * 2 * 25 + (closeTime[1] - openTime[1]) / 30 * 25 + 30; canvas.width = (closeTime[0] - openTime[0]) * 2 * 25 + (closeTime[1] - openTime[1]) / 30 * 25 + 30;
ctx.canvas.height = reservationData.tables * 80 + 30; ctx.canvas.height = reservationData.tables * 80 + 30;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i=1; i <= reservationData.tables; i++) { for (var i=1; i <= reservationData.tables; i++) {
drawTableUsage(ctx, i, openTime, closeTime, reservationData.reservations["T" + i]); drawTableUsage(ctx, i, openTime, closeTime, reservationData.reservations["T" + i]);
} }
} }
function drawTableUsage(ctx, tablenr, openTime, closeTime, reservations) { function drawTableUsage(ctx, tablenr, openTime, closeTime, reservations) {
var sectionWidth = 25; var sectionWidth = 25;
var sectionHeight = 40; var sectionHeight = 40;
var graphHeight = 80; var graphHeight = 80;
var offsetX = 10; var offsetX = 10;
var offsetY = 30 + (tablenr - 1) * graphHeight; var offsetY = 30 + (tablenr - 1) * graphHeight;
var sections = (closeTime[0] - openTime[0]) * 2 + (closeTime[1] - openTime[1]) / 30; var sections = (closeTime[0] - openTime[0]) * 2 + (closeTime[1] - openTime[1]) / 30;
if (ctx.canvas.width < sections * 25 + 30) { if (ctx.canvas.width < sections * 25 + 30) {
ctx.canvas.width = sections * 25 + 30; ctx.canvas.width = sections * 25 + 30;
} }
if (ctx.canvas.height < tablenr * graphHeight + 30) { if (ctx.canvas.height < tablenr * graphHeight + 30) {
ctx.canvas.height = tablenr * graphHeight + 30; ctx.canvas.height = tablenr * graphHeight + 30;
} }
// draw green area // draw green area
ctx.fillStyle = "#27ae60"; ctx.fillStyle = "#27ae60";
ctx.fillRect(offsetX, offsetY, sections * sectionWidth, sectionHeight); ctx.fillRect(offsetX, offsetY, sections * sectionWidth, sectionHeight);
// draw reserved area // draw reserved area
if (typeof reservations !== "undefined") { if (typeof reservations !== "undefined") {
reservations.forEach(function(reservation) { reservations.forEach(function(reservation) {
var start = reservation.start.split(':'); var start = reservation.start.split(':');
var end = reservation.end.split(':'); var end = reservation.end.split(':');
ctx.fillStyle = "#CD5C5C"; ctx.fillStyle = "#CD5C5C";
ctx.fillRect(offsetX + (start[0] - openTime[0]) * 2 * sectionWidth + (start[1] - openTime[1]) * sectionWidth, offsetY, (end[0] - start[0]) * 2 * sectionWidth + (end[1] - start[1]) / 30 * sectionWidth, sectionHeight); ctx.fillRect(offsetX + (start[0] - openTime[0]) * 2 * sectionWidth + (start[1] - openTime[1]) / 30 * sectionWidth, offsetY, (end[0] - start[0]) * 2 * sectionWidth + (end[1] - start[1]) / 30 * sectionWidth, sectionHeight);
}); });
} }
// draw selection // draw selection
if (select.table == tablenr) { if (select.table == tablenr) {
if (select.startH != -1) { if (select.startH != -1) {
ctx.fillStyle = "#f1c40f"; ctx.fillStyle = "#f1c40f";
if(select.endH != -1) { if(select.endH != -1) {
ctx.fillRect(offsetX + (select.startH - openTime[0]) * 2 * sectionWidth + (select.startM - openTime[1]) / 30 * sectionWidth, offsetY, (select.endH - select.startH) * 2 * sectionWidth + (select.endM - select.startM) / 30 * sectionWidth, sectionHeight); ctx.fillRect(offsetX + (select.startH - openTime[0]) * 2 * sectionWidth + (select.startM - openTime[1]) / 30 * sectionWidth, offsetY, (select.endH - select.startH) * 2 * sectionWidth + (select.endM - select.startM) / 30 * sectionWidth, sectionHeight);
} else { } else {
ctx.fillRect(offsetX + (select.startH - openTime[0]) * 2 * sectionWidth + (select.startM - openTime[1]) / 30 * sectionWidth, offsetY, sectionWidth, sectionHeight); ctx.fillRect(offsetX + (select.startH - openTime[0]) * 2 * sectionWidth + (select.startM - openTime[1]) / 30 * sectionWidth, offsetY, sectionWidth, sectionHeight);
} }
} }
} }
// draw lines // draw lines
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.strokeRect(offsetX, offsetY, sections * sectionWidth, sectionHeight); ctx.strokeRect(offsetX, offsetY, sections * sectionWidth, sectionHeight);
ctx.beginPath(); ctx.beginPath();
for (var i=1; i < sections; i++) { for (var i=1; i < sections; i++) {
ctx.moveTo(i * sectionWidth + offsetX, offsetY); ctx.moveTo(i * sectionWidth + offsetX, offsetY);
ctx.lineTo(i * sectionWidth + offsetX, offsetY + sectionHeight); ctx.lineTo(i * sectionWidth + offsetX, offsetY + sectionHeight);
} }
ctx.stroke(); ctx.stroke();
// draw timeline // draw timeline
ctx.fillText("Tisch " + tablenr, offsetX, offsetY - 10); ctx.fillText("Tisch " + tablenr, offsetX, offsetY - 10);
for (var i=0; i < sections/2; i++) { for (var i=0; i < sections/2; i++) {
ctx.fillText((parseInt(openTime[0])+i)+":"+openTime[1], i * 2 * sectionWidth + offsetX - 10, offsetY + sectionHeight + 10); ctx.fillText((parseInt(openTime[0])+i)+":"+openTime[1], i * 2 * sectionWidth + offsetX - 10, offsetY + sectionHeight + 10);
} }
ctx.fillText(closeTime[0]+":"+closeTime[1], sections * sectionWidth + offsetX - 10, offsetY + sectionHeight + 10); ctx.fillText(closeTime[0]+":"+closeTime[1], sections * sectionWidth + offsetX - 10, offsetY + sectionHeight + 10);
} }
function initCanvasClickListener() { function initCanvasClickListener() {
document.getElementById("reservations").addEventListener("mousedown", function(e) { document.getElementById("reservations").addEventListener("mousedown", function(e) {
var rect = document.getElementById("reservations").getBoundingClientRect(); var rect = document.getElementById("reservations").getBoundingClientRect();
var x = e.clientX - rect.left; var x = e.clientX - rect.left;
var y = e.clientY - rect.top; var y = e.clientY - rect.top;
var tablenr = getTableFromLocation(y, 30, 80); var tablenr = getTableFromLocation(y, 30, 80);
if (tablenr == -1) { if (tablenr == -1) {
return; return;
} }
var section = getSectionFromLocation(x, 10, 25); var section = getSectionFromLocation(x, 10, 25);
if (tablenr == -1) { if (tablenr == -1) {
return; return;
} }
var pixel = document.getElementById("reservations").getContext("2d").getImageData(x, y, 1, 1).data; var openTime = reservationData.open.split(':');
var hex = "#" + ((pixel[0] << 16) | (pixel[1] << 8) | pixel[2]).toString(16); var closeTime = reservationData.close.split(':');
if( hex == "#cd5c5c") { if (select.startH != -1) {
alert("Dieser Zeitraum ist schon reserviert"); if(select.endH != -1) {
return; select.endH = -1;
} selectStart(tablenr, section, openTime, closeTime);
} else {
//todo check if time is reserved selectEnd(tablenr, section, openTime, closeTime);
}
var openTime = reservationData.open.split(':'); } else {
var closeTime = reservationData.close.split(':'); selectStart(tablenr, section, openTime, closeTime);
}
if (select.startH != -1) {
if(select.endH != -1) { updateCanvas();
select.endH = -1; });
// set start }
select.table = tablenr;
select.startH = parseInt(openTime[0]) + Math.floor((section - 1)/2); function selectStart(tablenr, section, openTime, closeTime) {
select.startM = parseInt(openTime[1]) + ((section - 1) % 2) * 30; select.table = tablenr;
} else { select.startH = parseInt(openTime[0]) + Math.floor((section - 1)/2);
//set end select.startM = parseInt(openTime[1]) + ((section - 1) % 2) * 30;
if (select.table != tablenr) {
alert("Du kannst nur einen Tisch reservieren"); if (typeof reservationData.reservations["T" + select.table] !== "undefined") {
return; console.log("T" + select.table);
} for (var i = 0; i < reservationData.reservations["T" + select.table].length; i++) {
select.endH = parseInt(openTime[0]) + Math.floor(section/2); var res = reservationData.reservations["T" + select.table][i];
select.endM = parseInt(openTime[1]) + (section % 2) * 30; var start = res.start.split(":");
} var end = res.end.split(":");
} else { // start between reservation
// set start if ((select.startH - start[0]) * 60 + select.startM - start[1] >= 0 && (select.startH - end[0]) * 60 + select.startM - end[1] < 0) {
select.table = tablenr; resetSelection();
select.startH = parseInt(openTime[0]) + Math.floor((section - 1)/2); }
select.startM = parseInt(openTime[1]) + ((section - 1) % 2) * 30; }
} }
}
updateCanvas();
}); function selectEnd(tablenr, section, openTime, closeTime) {
} if (select.table != tablenr) {
alert("Du kannst nur einen Tisch reservieren");
function getTableFromLocation(y, offset, graphHeight) { return;
var tablenr = (y + offset) / graphHeight; }
if (Math.abs(tablenr - Math.round(tablenr)) < 0.25) { select.endH = parseInt(openTime[0]) + Math.floor(section/2);
return Math.round(tablenr); select.endM = parseInt(openTime[1]) + (section % 2) * 30;
}
return -1; if ((select.endH - select.startH) * 60 + select.endM - select.startM <= 0) {
} alert("Das Ende muss später als der Anfang liegen!");
select.endH = -1;
function getSectionFromLocation(x, offset, sectionWidth) { return;
return Math.ceil((x - offset) / sectionWidth); }
}
if (typeof reservationData.reservations["T" + select.table] !== "undefined") {
function validateReservation() { for (var i = 0; i < reservationData.reservations["T" + select.table].length; i++) {
if (document.getElementById("Vname").value == "") { var res = reservationData.reservations["T" + select.table][i];
alert("Vorname muss ausgefüllt sein!"); var start = res.start.split(":");
return false; var end = res.end.split(":");
} // start between reservation
if (document.getElementById("Nname").value == "") { if ((select.startH - start[0]) * 60 + select.startM - start[1] >= 0 && (select.startH - end[0]) * 60 + select.startM - end[1] < 0
alert("Nachname muss ausgefüllt sein!"); // end between reservation
return false; || (select.endH - start[0]) * 60 + select.endM - start[1] > 0 && (select.endH - end[0]) * 60 + select.endM - end[1] <= 0
} // reservation between start and end
|| (select.startH - start[0]) * 60 + select.startM - start[1] <= 0 && (select.endH - end[0]) * 60 + select.endM - end[1] >= 0) {
if (document.getElementById("Addr").value != "" && document.getElementById("Plz").value == "") { alert("Dieser Zeitraum ist schon reserviert!");
alert("Postleitzahl muss ausgefüllt sein!"); select.endH = -1;
return false; }
} }
if (document.getElementById("Addr").value == "" && document.getElementById("Plz").value != "") { }
alert("Adresse muss ausgefüllt sein!"); }
return false;
} function getTableFromLocation(y, offset, graphHeight) {
var tablenr = (y + offset) / graphHeight;
if (document.getElementById("Addr").value == "" && document.getElementById("Tel").value == "" && document.getElementById("Email").value == "") { if (Math.abs(tablenr - Math.round(tablenr)) < 0.25) {
alert("Das Gesundheitsamt fordert eine Möglichkeit zur Kontaktaufnahme"); return Math.round(tablenr);
return false; }
} return -1;
}
if (!document.getElementById("accept").checked) {
alert("Ohne die Speicherung der Daten ist ein Besuch im Z10 nicht möglich!"); function getSectionFromLocation(x, offset, sectionWidth) {
return false; return Math.ceil((x - offset) / sectionWidth);
} }
if (select.startH == -1 || select.endH == -1) { function validateReservation() {
alert("Es muss eine gültige Zeitspanne ausgewählt sein"); if (document.getElementById("Vname").value == "") {
return false; alert("Vorname muss ausgefüllt sein!");
} return false;
}
var xhttp = new XMLHttpRequest(); if (document.getElementById("Nname").value == "") {
xhttp.open("POST", "validateReservation.php", false); alert("Nachname muss ausgefüllt sein!");
return false;
var formData = new FormData(document.getElementById("personalData")); }
formData.append("date", document.getElementById("reservationDate").value);
formData.append("startTime", select.startH + ":" + select.startM); if (document.getElementById("Addr").value != "" && document.getElementById("Plz").value == "") {
formData.append("endTime", select.endH + ":" + select.endM); alert("Postleitzahl muss ausgefüllt sein!");
return false;
xhttp.send(formData); }
if (document.getElementById("Addr").value == "" && document.getElementById("Plz").value != "") {
return false; alert("Adresse muss ausgefüllt sein!");
return false;