From f2119adcef11a50d2e85a0ceaef2810644dba1e2 Mon Sep 17 00:00:00 2001
From: Felix Homa <felix.homa@cs.tu-dortmund.de>
Date: Thu, 14 Sep 2023 23:41:03 +0200
Subject: [PATCH] Added Notes and Dark-Mode

Fixed Parsing issue, causing the clock to break
Be aware Notes do not persist!
---
 Klausur.html | 51 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/Klausur.html b/Klausur.html
index 78fa31c..15d2458 100644
--- a/Klausur.html
+++ b/Klausur.html
@@ -36,6 +36,7 @@
 					<li>Die blauen Plätze in der Abbildung nutzen</li>
 				</ul>
 			</div>
+			<textarea id="notes" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="display:none; font-size: 4vh; border: 0px; margin-top: 5vh;width:100%; height: 100%; background-color: #0000;"></textarea>
 		</div>
 		<div id="right">
 			<div id="inputs" style="display: block; overflow-y: scroll">
@@ -72,6 +73,10 @@
 						<tr>
 							<td colspan="100%" style="font-size: 70%"><label for="inputHelpSheet">Ein Wert von 0 Seiten blendet die Info zum Hilfszettel vollständig aus</label></td>
 						</tr>
+						<tr>
+							<td><label for="inputDarkMode">Dark-Mode</label></td>
+							<td><input id="inputDarkMode" name="inputDarkMode" type="checkbox" required="required" /><label for="inputDarkMode"></label></td>
+						</tr>
 						<tr>
 							<!--- -------------------------------- -->
 							<td colspan="100%"><h5>Sitzordnung</h2></td>
@@ -173,6 +178,10 @@
 					var sp = item.split("=");
 					get_params[sp[0]] = decodeURIComponent(sp[1]);
 					switch(sp[0]) {
+						case "inputDarkMode":
+							document.getElementById(sp[0]).checked=get_params[sp[0]];
+							console.log("Loaded IDM: " + sp[0] + " => " + get_params[sp[0]]);
+							break;
 						case "inputExamDuration":
 						case "inputExtraDuration":
 						case "inputEarlyCutoff":
@@ -185,8 +194,13 @@
 							console.log("Loaded: " + sp[0] + " => " + get_params[sp[0]]);
 							break;
 						default:
-							document.getElementById(sp[0]).value=get_params[sp[0]];
-							console.log("Loaded: " + sp[0] + " => " + get_params[sp[0]]);
+							try {
+								document.getElementById(sp[0]).value=get_params[sp[0]];
+								console.log("Loaded: " + sp[0] + " => " + get_params[sp[0]]);
+							}
+							catch (e) {
+								console.log(e);
+							}
 							break;
 					}
 				});
@@ -198,7 +212,7 @@
 			var on_load_time = new Date();
 			console.log(on_load_time.toLocaleString('sv'));
 			
-			var inputs=["inputExamDuration","inputExtraDuration","inputEarlyCutoff","inputHelpSheet","inputSeatingRowsUsed","inputSeatingRowsFree","inputSeatingSeatsFree","inputExamTitle"];
+			var inputs=["inputExamDuration","inputExtraDuration","inputEarlyCutoff","inputHelpSheet","inputSeatingRowsUsed","inputSeatingRowsFree","inputSeatingSeatsFree","inputExamTitle","inputDarkMode"];
 			function start_exam() {
 				document.getElementById("start_btn").onclick=""; // Aktion für den Start-Button deaktivieren
 				document.getElementById("start_btn").innerHTML=""; // Start-Button entfernen
@@ -255,7 +269,7 @@
 				 */
 				var queryString="";
 				for(var i in inputs) {
-					queryString+="&"+inputs[i]+"="+encodeURIComponent(document.getElementById(inputs[i]).value); // Hier werden Zahlen erwartet ... die müssen nicht encoded werden
+					queryString+="&"+inputs[i]+"="+encodeURIComponent(document.getElementById(inputs[i]).value);
 				}
 				queryString+="&inputExamStart="+encodeURIComponent(document.getElementById("inputExamStart").value);
 				queryString="?"+queryString.substr(1);
@@ -268,7 +282,7 @@
 				document.getElementById("inExamExamStart").innerHTML=examStartTime.getHours()+":"+(examStartTime.getMinutes()<10?"0":"")+examStartTime.getMinutes();
 				document.getElementById("inExamEarlyCutoff").innerHTML=examCutoffTime.getHours()+":"+(examCutoffTime.getMinutes()<10?"0":"")+examCutoffTime.getMinutes();
 				document.getElementById("inExamEnd").innerHTML=endTime.getHours()+":"+(endTime.getMinutes()<10?"0":"")+endTime.getMinutes();
-				
+				document.getElementById("notes").style.display="block";
 				if(early_cutoff==0) {
 					document.getElementById("inExamEarlyCutoffRow").style.display="none";
 				}
@@ -304,7 +318,11 @@
 				 * Bearbeitungszeit zu ende: rot
 				 */
 				if(endTime!=null && now>endTime) {
-					document.body.style.backgroundColor="#faa";
+					if(document.getElementById("inputDarkMode").checked) {
+						document.body.style.backgroundColor="#dff"; // color-inversion!
+					} else {
+						document.body.style.backgroundColor="#faa";
+					}
 				}
 				else if(endTime!=null && now>halfHourWarningTime && now<=halfHourWarningTime2 && now.getMilliseconds()<500) {
 					document.body.style.backgroundColor="#ffa";
@@ -321,7 +339,7 @@
 				var rowInterval = rowsFree+rowsUsed;
 				var seatsFree = document.getElementById("inputSeatingSeatsFree").valueAsNumber;
 				// Tabelleninhalt
-				var so = "<tr><td colspan=\"100%\" style=\"text-align: center;\">Tafel (vorne)</td></tr>";
+				var so = "<tr><td colspan=\"100%\" style=\"text-align: center;color:#888\">Tafel (vorne)</td></tr>";
 				for(var row=0;row<10;row++) {
 					var r = row % rowInterval;
 					so+="<tr>";
@@ -440,7 +458,7 @@
 			document.getElementById("inputExamTitle").onchange=updateTitle;
 			document.getElementById("inputExamTitle").oninput=updateTitle;
 			updateTitle();
-			setInterval(clockUpdate, 50);
+			console.log("Clock: " + setInterval(clockUpdate, 50));
 			document.getElementById("start_btn").onclick=start_exam;
 			document.getElementById("start_btn").firstChild.onsubmit=start_exam;
 			
@@ -452,6 +470,19 @@
 			document.getElementById("fullscreen_btn").onclick=fullscreenFunc;
 			document.getElementById("fullscreen_btn").firstChild.onsubmit=fullscreenFunc;
 
+			
+			document.getElementById("inputDarkMode").onchange=function() {
+				if(document.getElementById("inputDarkMode").checked) {
+					document.body.style.filter="invert()";
+					document.getElementById("sitzordnung").style.filter="invert()";
+				}
+				else {
+					document.body.style.filter="";
+					document.getElementById("sitzordnung").style.filter="";
+				}
+				document.getElementById("inputDarkMode").value=document.getElementById("inputDarkMode").checked;
+			}
+			document.getElementById("inputDarkMode").onchange();
 			if(("inputExamStart" in get_params)) {
 				console.log(document.getElementById("fullscreen_btn").style.display="block");
 				settingsFormSubmitFunc();
@@ -561,10 +592,10 @@
 				width: 2vh;
 			}
 			#sitzordnung .ok {
-				background-color: #88f;
+				background-color: #00f8;
 			}
 			#sitzordnung .nok {
-				background-color: #f88;
+				background-color: #f008;
 			}
 			
 			#start_btn {