From 35c7c559777f67872510841a9cc876b4c413c769 Mon Sep 17 00:00:00 2001
From: Freek Bes <36384333+FreekBes@users.noreply.github.com>
Date: Mon, 18 Nov 2019 10:13:11 +0100
Subject: [PATCH] reserveringen kunnen nu worden geannuleerd

---
 import/cancel-cb.php |  68 ++++++++++++++++++++++++
 import/db.php        |  27 +++++++++-
 import/schedule.js   |  16 ++++--
 opmaak.css           |  52 ++++++++++++++++++-
 portal.php           | 120 ++++++++++++++++++++++++++++++++-----------
 5 files changed, 248 insertions(+), 35 deletions(-)
 create mode 100644 import/cancel-cb.php

diff --git a/import/cancel-cb.php b/import/cancel-cb.php
new file mode 100644
index 0000000..aae976f
--- /dev/null
+++ b/import/cancel-cb.php
@@ -0,0 +1,68 @@
+<?PHP
+    header('Content-Type: text/html; charset=utf-8');
+	header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
+	header("Cache-Control: post-check=0, pre-check=0", false);
+	header("Pragma: no-cache");
+
+    $data = array();
+	$data["type"] = "error";
+	$data["message"] = "Onbekende error";
+	$data["data"] = array();
+	
+	function returnError($msg) {
+		global $data;
+		$data["type"] = "error";
+		$data["message"] = $msg;
+		$data["data"] = array();
+		header('Content-Type: application/json; charset=utf-8');
+		echo json_encode($data, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
+		die();
+	}
+	
+	function returnWarning($msg) {
+		global $data;
+		$data["type"] = "warning";
+		$data["message"] = $msg;
+		$data["data"] = array();
+		header('Content-Type: application/json; charset=utf-8');
+		echo json_encode($data, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
+		die();
+	}
+	
+	function returnData($msg, $stuff) {
+		global $data;
+		$data["type"] = "success";
+		$data["message"] = $msg;
+		$data["data"] = $stuff;
+		header('Content-Type: application/json; charset=utf-8');
+		echo json_encode($data, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
+		die();
+    }
+
+    session_start();
+
+    if (!isset($_SESSION["zermelo_access_token"]) || empty($_SESSION["zermelo_access_token"])) {
+        returnError("Je bent niet (meer) ingelogd! Log opnieuw in.");
+    }
+    else {
+        if (!isset($_POST["id"]) || empty($_POST["id"])) {
+            returnError("Geen reservering-ID opgegeven. Geef een reservering-ID op via POST id.");
+        }
+
+        require_once("db.php");
+        $damstedeDB = new DamstedeDB();
+
+        $reservation = $damstedeDB->getCartReservation($_POST["id"]);
+        if ($reservation["user"] === $_SESSION["user"]["code"]) {
+            if ($damstedeDB->cancelReservation($_POST["id"])) {
+                returnData("De reservering is geannuleerd.", $damstedeDB->makeSafe($_POST["id"]));
+            }
+            else {
+                returnError("Kon reservering niet annuleren. Probeer het later opnieuw.");
+            }
+        }
+        else {
+            returnError("Je kunt alleen reserveringen annuleren die je zelf hebt gemaakt.");
+        }
+    }
+?>
\ No newline at end of file
diff --git a/import/db.php b/import/db.php
index 432479b..f2d2d8b 100644
--- a/import/db.php
+++ b/import/db.php
@@ -61,7 +61,7 @@ public function getDeviceCart($cartId) {
         }
 
         public function isReserved($cartId, $date, $hour) {
-            $result = $this->runQuery("SELECT * FROM damstede.cartreservations WHERE cart_id='".intval($cartId)."' AND DATE(date)=STR_TO_DATE('".$this->makeSafe($date)."', '%Y-%m-%d') AND hour='".intval($hour)."' LIMIT 1");
+            $result = $this->runQuery("SELECT * FROM damstede.cartreservations WHERE cart_id='".intval($cartId)."' AND DATE(date)=STR_TO_DATE('".$this->makeSafe($date)."', '%Y-%m-%d') AND hour='".intval($hour)."' AND cancelled=0 LIMIT 1");
             if ($result != false) {
                 if (mysqli_num_rows($result) > 0) {
                     return $this->formatReservation(mysqli_fetch_assoc($result));
@@ -95,6 +95,21 @@ public function reserveCart($cartId, $date, $hour, $location, $user, $teacher) {
             }
         }
 
+        public function cancelReservation($reservationId) {
+            $result = $this->runQuery("UPDATE damstede.cartreservations SET cancelled=1 WHERE id='".$this->makeSafe($reservationId)."' LIMIT 1");
+            if ($result != false) {
+                if (mysqli_affected_rows($this->connection) > 0) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
+
         private function formatReservation($res) {
             $res["id"] = intval($res["id"]);
             $res["cart_id"] = intval($res["cart_id"]);
@@ -118,5 +133,15 @@ public function getCartReservations($cartId, $year, $week) {
             }
             return $reservations;
         }
+
+        public function getCartReservation($reservationId) {
+            $result = $this->runQuery("SELECT * FROM damstede.cartreservations WHERE id='".$this->makeSafe($reservationId)."' LIMIT 1");
+            if (mysqli_num_rows($result) > 0) {
+                return $this->formatReservation(mysqli_fetch_assoc($result));
+            }
+            else {
+                return false;
+            }
+        }
     }
 ?>
\ No newline at end of file
diff --git a/import/schedule.js b/import/schedule.js
index 71cc80b..a8db1fb 100644
--- a/import/schedule.js
+++ b/import/schedule.js
@@ -1,11 +1,13 @@
 var schedule = {
+    user: null,
     defaults: null,
     carts: [],
     dates: ["", "", "", "", ""],
     currentlyLoaded: [0, 0],
 
-    init: function() {
+    init: function(user) {
         return new Promise(function(resolve, reject) {
+            schedule["user"] = user;
             schedule["defaults"] = document.getElementsByClassName("schedule")[0].innerHTML;
 
             var cartsReq = new XMLHttpRequest();
@@ -123,11 +125,19 @@ var schedule = {
     createResElem: function(res) {
         var resElem = document.createElement("div");
         resElem.className = "reservation";
-        resElem.setAttribute("title", 'Reservering voor kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + ') op ' + new Date(Date.parse(res["date"])).toLocaleDateString() + ', het ' + res["hour"] + 'e uur');
         if (res["cancelled"]) {
             resElem.className += " cancelled";
+            resElem.setAttribute("title", 'Geannuleerde reservering voor kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + ') op ' + new Date(Date.parse(res["date"])).toLocaleDateString() + ', het ' + res["hour"] + 'e uur');
         }
-        var contents = '<b>Kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + '),<span class="extra-info"> lokaal</span> '+res["location"]+'</b><br/>' + res["user"];
+        else {
+            resElem.setAttribute("title", 'Reservering voor kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + ') op ' + new Date(Date.parse(res["date"])).toLocaleDateString() + ', het ' + res["hour"] + 'e uur');
+        }
+        var contents = '';
+        if (res["user"] === schedule["user"] && !res["cancelled"]) {
+            resElem.className += " cancellable";
+            contents += '<a class="reservation-cancel" title="Reservering annuleren" href="javascript:void(0)" onclick="setUpReservationCanceller('+res["id"]+'); showAction(\'reservationcancel\');">&#x2716;</a>';
+        }
+        contents += '<b>Kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + '),<span class="extra-info"> lokaal</span> '+res["location"]+'</b><br/>' + res["user"];
         if (res["teacher"] != null) {
             contents += ', namens:<br/><i>' + res["teacher"] + '</i>';
         }
diff --git a/opmaak.css b/opmaak.css
index 81f449c..4aae5e3 100644
--- a/opmaak.css
+++ b/opmaak.css
@@ -483,6 +483,7 @@ label {
 }
 
 .reservation {
+	position: relative;
 	background: #DEDEDE;
 	border: solid 1px #9E9E9E;
 	border-radius: 2px;
@@ -493,6 +494,39 @@ label {
 	min-height: 44px;
 }
 
+.reservation .reservation-cancel {
+	display: block;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	text-align: center;
+
+	cursor: not-allowed;
+	color: #1A1A1A !important;
+	text-decoration: none;
+	pointer-events: none;
+	opacity: 0;
+	transition: 0.15s;
+}
+
+.reservation.cancellable .reservation-cancel {
+	cursor: pointer;
+	color: #E31832 !important;
+}
+
+.reservation.cancellable .reservation-cancel:hover {
+	color: #EB4358 !important;
+}
+
+.reservation.cancellable:hover .reservation-cancel {
+	opacity: 1;
+	pointer-events: all;
+	transition: 0.05s;
+}
+
 .reservation.cancelled {
 	background: #DE8E8E;
 	border-color: #9E4E4E;
@@ -514,7 +548,6 @@ label {
 	padding: 0px 6px;
 	margin: 0px 4px;
 	opacity: 0;
-	transition: 0.15s;
 	pointer-events: none;
 }
 
@@ -583,6 +616,11 @@ label {
 	.extra-info {
 		display: none;
 	}
+
+	.week-changer a {
+		display: inline-block;
+		padding: 8px 4px;
+	}
 }
 
 @media screen and (max-width: 650px) {
@@ -594,4 +632,16 @@ label {
 		display: inline-block;
 		padding: 12px 4px;
 	}
+
+	.reservation .reservation-cancel {
+		width: 26px;
+		height: 26px;
+		line-height: 26px;
+		top: 4px;
+		right: 4px;
+		font-size: larger;
+		background: rgba(0,0,0,0.1);
+		border-radius: 4px;
+		opacity: 0.4;
+	}
 }
\ No newline at end of file
diff --git a/portal.php b/portal.php
index cff547b..f763746 100644
--- a/portal.php
+++ b/portal.php
@@ -151,37 +151,67 @@ function setUpReservationAdder(lessonDate, lessonHour) {
     }
 
     function reservationSubmit() {
-            console.log("Reservation form submit");
-            document.getElementById('loading').style.display = 'table';
-            var form = document.getElementById('reservation-form');
-            var reservationError = document.getElementById("reservation-error-msg");
-            var data = new FormData(form);
-            var xhr = new XMLHttpRequest();
-            xhr.open('POST', form.getAttribute('action'), true);
-            xhr.onload = function() {
-                document.getElementById('loading').style.display = 'none';
-                if (xhr.status !== 200) {
-                    reservationError.innerHTML = "Serverfout "+xhr.statusText+". Probeer het later opnieuw.";
-                    showAction('reservationerror');
-                }
-                else {
-                    var loginResponse = JSON.parse(xhr.responseText);
-                    switch (loginResponse.type) {
-                        case "success": {
-                            schedule.reload();
-                            showAction('reservationsuccess');
-                            break;
-                        }
-                        default: {
-                            reservationError.innerHTML = loginResponse.message;
-                            showAction('reservationerror');
-                            break;
-                        }
+        console.log("Reservation form submit");
+        document.getElementById('loading').style.display = 'table';
+        var form = document.getElementById('reservation-form');
+        var reservationError = document.getElementById("reservation-error-msg");
+        var data = new FormData(form);
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', form.getAttribute('action'), true);
+        xhr.onload = function() {
+            document.getElementById('loading').style.display = 'none';
+            if (xhr.status !== 200) {
+                reservationError.innerHTML = xhr.statusText+". Probeer het later opnieuw.";
+                showAction('reservationerror');
+            }
+            else {
+                var loginResponse = JSON.parse(xhr.responseText);
+                switch (loginResponse.type) {
+                    case "success": {
+                        schedule.reload();
+                        showAction('reservationsuccess');
+                        break;
+                    }
+                    default: {
+                        reservationError.innerHTML = loginResponse.message;
+                        showAction('reservationerror');
+                        break;
                     }
                 }
-            };
-            xhr.send(data);
-        }
+            }
+        };
+        xhr.send(data);
+    }
+
+    function setUpReservationCanceller(reservationId) {
+        document.getElementById("cancel-id").value = reservationId;
+    }
+
+    function cancelSubmit() {
+        console.log("Cancel form submit");
+        document.getElementById('loading').style.display = 'table';
+        var form = document.getElementById('cancel-form');
+        var cancelMessage = document.getElementById("cancel-message");
+        var data = new FormData(form);
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', form.getAttribute('action'), true);
+        xhr.onload = function() {
+            document.getElementById('loading').style.display = 'none';
+            if (xhr.status !== 200) {
+                cancelMessage.innerHTML = xhr.statusText+". Probeer het later opnieuw.";
+                showAction('cancelmessage');
+            }
+            else {
+                var cancelResponse = JSON.parse(xhr.responseText);
+                cancelMessage.innerHTML = cancelResponse.message;
+                showAction('cancelmessage');
+                if (cancelResponse.type == "success") {
+                    schedule.reload();
+                }
+            }
+        };
+        xhr.send(data);
+    }
     </script>
 
     <div class="action" id="reservationadder" style="display: none;">
@@ -274,6 +304,36 @@ function reservationSubmit() {
         </div>
     </div>
 
+    <div class="action" id="cancelmessage" style="display: none;">
+        <div class="inneraction">
+            <div class="actioncontent">
+                <div class="actionheader">Reservering annuleren</div>
+                <div class="actionclose" data-action="cancelmessage" onclick="hideAction(this);">&#x2716;</div>
+                <p id="cancel-message">Er is een onbekende fout opgetreden. Probeer het later opnieuw.</p>
+                <div class="actionbuttons">
+                    <input class="button" type="button" value="Oké" data-action="cancelmessage" onclick="hideAction(this);" />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="action" id="reservationcancel" style="display: none;">
+        <div class="inneraction">
+            <div class="actioncontent">
+                <form id="cancel-form" action="import/cancel-cb.php" method="get" target="_self" accept-charset="utf-8" autocomplete="off" onsubmit="">
+                    <div class="actionheader">Reservering annuleren</div>
+                    <div class="actionclose" data-action="reservationcancel" onclick="hideAction(this);">&#x2716;</div>
+                    <p>Weet je zeker dat je deze reservering wilt annuleren?</p>
+                    <input type="hidden" id="cancel-id" name="id" value="" />
+                    <div class="actionbuttons">
+                        <input class="button" type="button" value="Nee" data-action="reservationcancel" onclick="hideAction(this);" />
+                        <input class="button" type="button" value="Ja" data-action="reservationcancel" onclick="hideAction(this); cancelSubmit();" />
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
     <div id="loading" style="display: table; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.8);">
 		<div style="display: table-cell; vertical-align: middle;">
 			<div style="margin-left: auto; margin-right: auto; text-align: center;">
@@ -283,7 +343,7 @@ function reservationSubmit() {
 	</div>
     
     <script>
-    schedule.init().then(function() {
+    schedule.init("<?PHP echo $_SESSION["user"]["code"]; ?>").then(function() {
         schedule.getCurrentWeekInfo().then(function(weekInfo) {
             schedule.get(weekInfo[0], weekInfo[1]).then(function(reservations) {
                 schedule.load(reservations);