Commit 1f32e717 authored by uoure's avatar uoure
Browse files

initial commit

parents
<?PHP
$user = 'apache';
$pass = 'e164AzpQx564TpJa';
$db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass);
$query = "SELECT date FROM opening WHERE date >= " . date("Y-m-d");
$result = $db->query($query);
$data = array();
foreach( $result as $row ){
array_push($data, $row["date"]);
}
echo json_encode($data);
?>
\ No newline at end of file
<?PHP
$user = 'apache';
$pass = 'e164AzpQx564TpJa';
$db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass);
$query = 'SELECT tables, opentime, closetime FROM opening WHERE date="' . $_GET["date"] . '"';
$result = $db->query($query)->fetch();
$data = array("tables" => $result[0], "open" => $result[1], "close" => $result[2]);
$query = 'SELECT start, end, tisch FROM reservations WHERE date="' . $_GET["date"] . '"';
$result = $db->query($query);
$reservations = array();
foreach( $result as $row ){
if (!array_key_exists("T".$row["tisch"], $reservations)) {
$reservations["T".$row["tisch"]] = array();
}
$rowdata = array("start" => $row["start"], "end" => $row["end"]);
array_push($reservations["T".$row["tisch"]], $rowdata);
}
$data["reservations"] = $reservations;
echo json_encode($data);
?>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Z10 Gast Registrierung</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="/scripts.js"></script>
</head>
<body onload="onLoad();">
<h2>Z10 Gast Registrierung</h2>
<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>
<select id="reservationDate" onchange="loadReservations()"></select><br>
<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>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">
<label for="Vname">Vorname:</label><br>
<input type="text" id="Vname" name="Vname"><br>
<label for="Nname">Nachname:</label><br>
<input type="text" id="Nname" name="Nname"><br>
<label for="Addr">Adresse, Hausnummer:</label><br>
<input type="text" id="Addr" name="Addr"><br>
<label for="Plz">Postleitzahl:</label><br>
<input type="text" id="Plz" name="Plz"><br>
<label for="Tel">Telefonnummer:</label><br>
<input type="text" id="Tel" name="Tel"><br>
<label for="Email">Email:</label><br>
<input type="text" id="Email" name="Email"><br>
<input type="checkbox" id="accept" name="accept"">
<label for="accept">Ich bestätige hiermit die Speicherung meiner Daten...</label><br><br>
<input type="submit" value="Reservierung abschließen"><br><br>
</form>
</body>
</html>
\ No newline at end of file
var select = new Object();
var reservationData;
function onLoad() {
resetSelection();
disableJSInfo();
loadOpeningDates();
initCanvasClickListener();
}
function resetSelection() {
select.startH = -1;
select.endH = -1;
}
function disableJSInfo() {
document.getElementById("js-info").style.display = "none";
}
function loadOpeningDates() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var dropdown = document.getElementById("reservationDate")
var data = JSON.parse(this.responseText);
data.forEach(function(date) {
var option = document.createElement("option");
option.text = date;
dropdown.add(option);
});
loadReservations();
}
};
xhttp.open("GET", "getOpeningDates.php", true);
xhttp.send();
}
function loadReservations() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
reservationData = JSON.parse(this.responseText);
resetSelection();
updateCanvas();
}
};
xhttp.open("GET", "getReservations.php?date=" + document.getElementById("reservationDate").value, true);
xhttp.send();
}
function updateCanvas() {
var openTime = reservationData.open.split(':');
var closeTime = reservationData.close.split(':');
var canvas = document.getElementById("reservations");
var ctx = canvas.getContext('2d');
canvas.width = (closeTime[0] - openTime[0]) * 2 * 25 + (closeTime[1] - openTime[1]) / 30 * 25 + 30;
ctx.canvas.height = reservationData.tables * 80 + 30;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i=1; i <= reservationData.tables; i++) {
drawTableUsage(ctx, i, openTime, closeTime, reservationData.reservations["T" + i]);
}
}
function drawTableUsage(ctx, tablenr, openTime, closeTime, reservations) {
var sectionWidth = 25;
var sectionHeight = 40;
var graphHeight = 80;
var offsetX = 10;
var offsetY = 30 + (tablenr - 1) * graphHeight;
var sections = (closeTime[0] - openTime[0]) * 2 + (closeTime[1] - openTime[1]) / 30;
if (ctx.canvas.width < sections * 25 + 30) {
ctx.canvas.width = sections * 25 + 30;
}
if (ctx.canvas.height < tablenr * graphHeight + 30) {
ctx.canvas.height = tablenr * graphHeight + 30;
}
// draw green area
ctx.fillStyle = "#27ae60";
ctx.fillRect(offsetX, offsetY, sections * sectionWidth, sectionHeight);
// draw reserved area
if (typeof reservations !== "undefined") {
reservations.forEach(function(reservation) {
var start = reservation.start.split(':');
var end = reservation.end.split(':');
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);
});
}
// draw selection
if (select.table == tablenr) {
if (select.startH != -1) {
ctx.fillStyle = "#f1c40f";
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);
} else {
ctx.fillRect(offsetX + (select.startH - openTime[0]) * 2 * sectionWidth + (select.startM - openTime[1]) / 30 * sectionWidth, offsetY, sectionWidth, sectionHeight);
}
}
}
// draw lines
ctx.fillStyle = "#000000";
ctx.strokeRect(offsetX, offsetY, sections * sectionWidth, sectionHeight);
ctx.beginPath();
for (var i=1; i < sections; i++) {
ctx.moveTo(i * sectionWidth + offsetX, offsetY);
ctx.lineTo(i * sectionWidth + offsetX, offsetY + sectionHeight);
}
ctx.stroke();
// draw timeline
ctx.fillText("Tisch " + tablenr, offsetX, offsetY - 10);
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(closeTime[0]+":"+closeTime[1], sections * sectionWidth + offsetX - 10, offsetY + sectionHeight + 10);
}
function initCanvasClickListener() {
document.getElementById("reservations").addEventListener("mousedown", function(e) {
var rect = document.getElementById("reservations").getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
var tablenr = getTableFromLocation(y, 30, 80);
if (tablenr == -1) {
return;
}
var section = getSectionFromLocation(x, 10, 25);
if (tablenr == -1) {
return;
}
var pixel = document.getElementById("reservations").getContext("2d").getImageData(x, y, 1, 1).data;
var hex = "#" + ((pixel[0] << 16) | (pixel[1] << 8) | pixel[2]).toString(16);
if( hex == "#cd5c5c") {
alert("Dieser Zeitraum ist schon reserviert");
return;
}
//todo check if time is reserved
var openTime = reservationData.open.split(':');
var closeTime = reservationData.close.split(':');
if (select.startH != -1) {
if(select.endH != -1) {
select.endH = -1;
// set start
select.table = tablenr;
select.startH = parseInt(openTime[0]) + Math.floor((section - 1)/2);
select.startM = parseInt(openTime[1]) + ((section - 1) % 2) * 30;
} else {
//set end
if (select.table != tablenr) {
alert("Du kannst nur einen Tisch reservieren");
return;
}
select.endH = parseInt(openTime[0]) + Math.floor(section/2);
select.endM = parseInt(openTime[1]) + (section % 2) * 30;
}
} else {
// set start
select.table = tablenr;
select.startH = parseInt(openTime[0]) + Math.floor((section - 1)/2);
select.startM = parseInt(openTime[1]) + ((section - 1) % 2) * 30;
}
updateCanvas();
});
}
function getTableFromLocation(y, offset, graphHeight) {
var tablenr = (y + offset) / graphHeight;
if (Math.abs(tablenr - Math.round(tablenr)) < 0.25) {
return Math.round(tablenr);
}
return -1;
}
function getSectionFromLocation(x, offset, sectionWidth) {
return Math.ceil((x - offset) / sectionWidth);
}
function validateReservation() {
if (document.getElementById("Vname").value == "") {
alert("Vorname muss ausgefüllt sein!");
return false;
}
if (document.getElementById("Nname").value == "") {
alert("Nachname muss ausgefüllt sein!");
return false;
}
if (document.getElementById("Addr").value != "" && document.getElementById("Plz").value == "") {
alert("Postleitzahl muss ausgefüllt sein!");
return false;
}
if (document.getElementById("Addr").value == "" && document.getElementById("Plz").value != "") {
alert("Adresse muss ausgefüllt sein!");
return false;
}
if (document.getElementById("Addr").value == "" && document.getElementById("Tel").value == "" && document.getElementById("Email").value == "") {
alert("Das Gesundheitsamt fordert eine Möglichkeit zur Kontaktaufnahme");
return false;
}
if (!document.getElementById("accept").checked) {
alert("Ohne die Speicherung der Daten ist ein Besuch im Z10 nicht möglich!");
return false;
}
if (select.startH == -1 || select.endH == -1) {
alert("Es muss eine gültige Zeitspanne ausgewählt sein");
return false;
}
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "validateReservation.php", false);
var formData = new FormData(document.getElementById("personalData"));
formData.append("date", document.getElementById("reservationDate").value);
formData.append("startTime", select.startH + ":" + select.startM);
formData.append("endTime", select.endH + ":" + select.endM);
xhttp.send(formData);
return false;
}
\ No newline at end of file
body {
margin-left: 20px;
}
input {
height: 40px;
width: 400px;
border: solid grey 1px;
}
button {
height: 40px;
width: 40%;
}
#datetime {
width: 50%;
margin-left: 0px;
}
#datetime input {
width: 100%;
margin-left: 0px;
}
#accept {
width: auto;
height: auto;
}
#js-info {
color: red;
}
\ No newline at end of file
<!DOCTYPE HTML>
<head>
<title>Datenvalidierung</title>
</head>
<body>
<h2>Die Reservierung wurde für den ... von ... bis ... angelegt</h2>
<p>Personenbezogene Daten können nun nicht mehr geändert werden. Mit folgendem Code kann jedoch die Reservierung aufgehoben werden: ...<br>
Die Daten werden automatisch spätestenz 3 Wochen nach ihrem letzten Besuch gelöscht. Falls die Reservierung nicht wahr genommen wurde,
besteht die Möglichkeit die Daten schon vorher zu löschen. Kontaktieren Sie uns dazu auf gezi@z10.info</p>
</body>
<?PHP
$user = 'apache';
$pass = 'e164AzpQx564TpJa';
$db = new PDO('mysql:host=localhost;dbname=reservation', $user, $pass);
$statement = $db -> prepare("INSERT INTO client (vname, nname, addr, plz, tel, email, date) VALUES (?, ?, ?, ?, ?, ?, ?)");
$statement->execute(array($_POST["Vname"], $_POST["Nname"], $_POST["Addr"], $_POST["Plz"], $_POST["Tel"], $_POST["Email"], date('Y-m-d')));
?>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment