schedule clearer toegevoegd

damstede · Nov 11, 2019 · 6a15625 · 6a15625
1 parent 349ebe5
commit 6a15625
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 7 deletions.
diff --git a/import/schedule.js b/import/schedule.js
@@ -1,11 +1,31 @@
 var schedule = {
-    default: null,
+    defaults: null,
+    carts: [],
+
     init: function() {
+        return new Promise(function(resolve, reject) {
+            schedule["defaults"] = document.getElementsByClassName("schedule")[0].innerHTML;
 
+            var cartsReq = new XMLHttpRequest();
+            cartsReq.open('POST', 'import/dcarts.php');
+            cartsReq.onload = function() {
+                try {
+                    var response = JSON.parse(cartsReq.responseText);
+                    for (var i = 0; i < response["data"].length; i++) {
+                        schedule.carts[response["data"][i]["id"]] = response["data"][i];
+                    }
+                    resolve();
+                }
+                catch(e) {
+                    reject(e);
+                }
+            };
+            cartsReq.send();
+        });
     },
 
     clear: function() {
-
+        document.getElementsByClassName("schedule")[0].innerHTML = schedule["defaults"];
     },
 
     get: function(year, week) {
@@ -61,6 +81,7 @@ var schedule = {
         for (var i = 0; i < reservationCount; i++) {
             document.getElementById("week-hour-"+reservations[i]["hour"]).children[reservations[i]["day"]+1].appendChild(schedule.createResElem(reservations[i]));
         }
+        schedule.fillInResAddBtns();
     },
 
     createResElem: function(res) {
@@ -69,7 +90,26 @@ var schedule = {
         if (res["cancelled"]) {
             resElem.className += " cancelled";
         }
-        resElem.innerHTML = "Kar " + res["cart_id"] + ", gereserveerd door " + res["user"] + " namens " + res["teacher"] + " in lokaal " + res["location"];
+        var contents = '<b>Kar ' + res["cart_id"] + ' (' + schedule.carts[res["cart_id"]]["dev_type"] + '),<span class="location-prefix"> lokaal</span> '+res["location"]+'</b><br/>' + res["user"];
+        if (res["teacher"] != null) {
+            contents += ', namens:<br/><i>' + res["teacher"] + '</i>';
+        }
+        resElem.innerHTML = contents;
         return resElem;
+    },
+
+    fillInResAddBtns: function() {
+        var resAddBtn = document.createElement("div");
+        resAddBtn.className = "reservation add-btn";
+        resAddBtn.innerHTML = "+";
+        resAddBtn.setAttribute("title", "Kar reserveren");
+
+        var lessons = document.getElementsByClassName("lesson");
+        var lessonCount = lessons.length;
+        for (var i = 0; i < lessonCount; i++) {
+            if (lessons[i].className.indexOf("break") < 0) {
+                lessons[i].appendChild(resAddBtn.cloneNode(true));
+            }
+        }
     }
 };
diff --git a/opmaak.css b/opmaak.css
@@ -7,14 +7,14 @@ html {
 	padding: 0px;
 	margin: 0px;
 	background-color: #2A2A2A;
+	overflow-y: scroll;
 }
 
 body {
 	background-color: #333333;
 	color: #EDEDED;
 	font-family: Roboto, Verdana, Arial, Sans-Serif;
 	padding: 0px;
-	margin: 0px;
 	cursor: default;
 	width: 100%;
 	max-width: 900px;
@@ -400,6 +400,7 @@ label {
 .schedule {
 	width: 100%;
 	background: rgba(255,255,255,0.1);
+	user-select: none;
 }
 
 .schedule th, .schedule td {
@@ -436,6 +437,56 @@ label {
 	background: rgba(255,255,255,0.1);
 	height: 48px;
 	width: 19%;
+	padding: 0px;
+	vertical-align: top;
+}
+
+.reservation {
+	background: #DEDEDE;
+	border: solid 1px #9E9E9E;
+	border-radius: 2px;
+	color: #1A1A1A;
+	font-size: 12px;
+	margin: 4px;
+	padding: 3px 6px;
+	min-height: 44px;
+}
+
+.reservation.cancelled {
+	background: #DE8E8E;
+	border-color: #9E4E4E;
+	text-decoration: line-through;
+}
+
+.reservation.add-btn {
+	display: block;
+	background: rgba(255,255,255,0.1);
+	border-color: rgba(0,0,0,0.2);
+	color: #ffffff;
+	cursor: pointer;
+	transition: 0.15s;
+	text-align: center;
+	height: 0px;
+	min-height: initial;
+	line-height: 14px;
+	font-size: 24px;
+	padding: 0px 6px;
+	opacity: 0;
+	transition: 0.15s;
+	pointer-events: none;
+}
+
+.reservation.add-btn:hover {
+	background: rgba(255,255,255,0.3);
+	transition: 0.05s;
+}
+
+.lesson:hover .reservation.add-btn {
+	opacity: 1;
+	height: initial;
+	padding: 12px 6px;
+	transition: 0.05s;
+	pointer-events: initial;
 }
 
 #spinner {
@@ -483,4 +534,10 @@ label {
 	color: #FFFFFF;
 	background-color: rgba(181, 19, 27, 0.99);
 	text-shadow: none;
+}
+
+@media screen and (max-width: 850px) {
+	.location-prefix {
+		display: none;
+	}
 }
diff --git a/portal.php b/portal.php
@@ -116,9 +116,11 @@
         </table>
     </div>
     <script>
-    schedule.getCurrentWeekInfo().then(function(weekInfo) {
-        schedule.get(weekInfo[0], weekInfo[1]).then(function(reservations) {
-            schedule.load(reservations);
+    schedule.init().then(function() {
+        schedule.getCurrentWeekInfo().then(function(weekInfo) {
+            schedule.get(weekInfo[0], weekInfo[1]).then(function(reservations) {
+                schedule.load(reservations);
+            });
         });
     });
     </script>