new commands

6 files changed, 69 insertions, 73 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
index 8b2201a..1f51921 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -103,6 +103,7 @@ ul {
 	width: calc(20% - 5px);
 	height: calc(40% - 5px);
 	background-color: #ccc;
+	position: relative;
 }
 .traffic-light {
 	width: 20px;
@@ -121,30 +122,10 @@ ul {
 	left: 5px;
 }
 
-/* Styles for the text inside the squares */
-.square-text-first-row {
-	position: absolute;
-	top: 5px;
-	left: 5px;
-}
-
-.square-text-second-row{
-	position: absolute;
-	top: 30px;
-	left: 5px;
-}
-
-.square-text-third-row{
-	position: absolute;
-	top: 55px;
-	left: 5px;
-}
-
 /* Styles for the inner content of the squares */
 .inner-content {
-	position: relative;
-	width: 100%;
-	height: 100%;
+	position: absolute;
+	inset: 8px;
 }
 
 details {
diff --git a/ui/index.html b/ui/index.html
index 61723a1..e93a711 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -55,8 +55,8 @@
 			<details open>
 				<summary>Verlichting</summary>
 				<div class="light_controls">
-					<input type="range" min="0" max="100" step="1" value="0" oninput="api.msg.send.lights(this)"/>
-					<div>Felheid: <span id="lightsValue">0</span>%</div>
+					<input id="lightsInput" type="range" min="0" max="100" step="1" value="0" oninput="api.msg.send.lights(this)"/>
+					<div>Felheid: <span id="lightsValue">??</span>%</div>
 				</div>
 			</details>
 
@@ -65,7 +65,7 @@
 				<div class="traffic_light_controls">
 					<button value="red" onclick="api.msg.send.trafficLights(this)">Rood</button>
 					<button value="off" onclick="api.msg.send.trafficLights(this)">Uit</button>
-					<div>Status: <span id="trafficLightsValue"></span></div>
+					<div>Status: <span id="trafficLightsValue">??</span></div>
 				</div>
 			</details>
 
@@ -78,13 +78,10 @@
 		</div>
 
 		<div class="section notifications" id="sectionNotifications">
-			<div class="button-wrapper">
-				<button id="addRowBtn">Add Row</button>
-			</div>
 			<div class="table-wrapper">
 				<table id="myTable">
 					<tr>
-						<th>Column 1</th>
+						<th>Meldingen</th>
 					</tr>
 				</table>
 			</div>
@@ -94,27 +91,28 @@
 			<p>Start</p>
 			<div class="canvas-square" id="myCanvas1">
 				<div class="inner-content">
-					<div class="traffic-light"></div>
-					<div class="barrier"></div>
-					<span class="square-text-first-row">Light <span id="light-one">1</span></span>
-					<span class="square-text-second-row">Amount <span id="amount-one">1</span></span>
-					<span class="square-text-third-row"><span id="speed-one">1</span>km/h</span>
+					<!-- <div class="traffic-light"></div>
+					<div class="barrier"></div> -->
+					<div>Autos: <span id="zone1CarsValue">??</span></div>
+					<div>Gem.S.: <span id="zone1SpeedValue">??</span> km/h</div>
 				</div>
 			</div>
 			<div class="canvas-square" id="myCanvas2">
 				<div class="inner-content">
-					<span class="square-text-first-row">Light <span id="light-two">1</span></span>
+					<div>Autos: <span id="zone2CarsValue">??</span></div>
+					<div>Gem.S.: <span id="zone2SpeedValue">??</span> km/h</div>
 				</div>
 			</div>
 			<div class="canvas-square" id="myCanvas3">
 				<div class="inner-content">
-					<span class="square-text-first-row">Light <span id="light-three">1</span></span>
-					<span class="square-text-second-row">Amount <span id="amount-two">1</span></span>
+					<div>Autos: <span id="zone3CarsValue">??</span></div>
+					<div>Gem.S.: <span id="zone3SpeedValue">??</span> km/h</div>
 				</div>
 			</div>
 			<div class="canvas-square" id="myCanvas4">
 				<div class="inner-content">
-					<span class="square-text-first-row">Light <span id="light-four">1</span></span>
+					<div>Autos: <span id="zone4CarsValue">??</span></div>
+					<div>Gem.S.: <span id="zone4SpeedValue">??</span> km/h</div>
 				</div>
 			</div>
 			<p>End</p>	 
diff --git a/ui/js/api.js b/ui/js/api.js
index 319d8c2..3a08c8d 100644
--- a/ui/js/api.js
+++ b/ui/js/api.js
@@ -10,14 +10,43 @@ function setPolkaDot(el, bool) {
 	el.classList.add(bool ? "on" : "off");
 }
 
+Array.prototype.average = function() {
+	var sum = 0;
+	for (let i = 0; i < this.length; i++)
+		sum += this[i];
+	return sum / this.length;
+}
+
 const api = {
 	update: {
 		barrier: open => setPolkaDot(document.getElementById("barrierValue"), open),
 		trafficLights: state => document.getElementById("trafficLightsValue").innerText = state,
-		lights: value => document.getElementById("lightsValue").innerText = value,
+		lights: value => {
+			document.getElementById("lightsValue").innerText = value;
+			document.getElementById("lightsInput").value = value;
+		},
 		matrix: state => document.getElementById("matrixValue").value = state,
 		photocell: on => setPolkaDot(document.getElementById("photocellValue"), on),
 		cctv: on => setPolkaDot(document.getElementById("cctvValue"), on),
+		carSpeed: speed => {
+			for (let i = 0; i < 4; i++)
+				document.getElementById(`zone${i+1}SpeedValue`).innerText = speed[i];
+		},
+		carCount: count => {
+			for (let i = 0; i < 4; i++)
+				document.getElementById(`zone${i+1}CarsValue`).innerText = count[i];
+		},
+		notifications: msg => {
+			var table = document.getElementById("myTable");
+			var row = table.insertRow(1); // Insert row at the top of the table
+			var cell = row.insertCell(0); // Insert cell into the row
+			cell.innerHTML = msg; // Add content to the cell with incremented counter
+			var size = table.rows.length;
+			var lastRowIndex = table.rows.length - 1; // Index of the last row
+			if (size > 11) { // Check if there is more than one row (excluding the header row)
+				table.deleteRow(lastRowIndex); // Delete the last row
+			}
+		},
 	},
 	msg: {
 		send: {
@@ -49,14 +78,26 @@ const api = {
 			},
 			cctv: el => {
 				var on = el.value == "true";
-				send({ type: 'barrier', on });
+				send({ type: 'cctv', on });
 				api.update.cctv(on);
 			},
 		},
 		handle: {
-			helloWorld: msg => {
-				console.log(msg);
-			},
+			helloWorld: msg => console.log(msg),
+			barrier: msg => api.update.barrier(msg.on),
+			trafficLights: msg => api.update.trafficLights(msg.state),
+			lights: msg => api.update.lights(msg.value),
+			matrix: msg => api.update.matrix(msg.state),
+			photocell: msg => api.update.photocell(msg.on),
+			cctv: msg => api.update.cctv(msg.on),
+			snelheidAutoPerZone: msg => api.update.carSpeed([
+				msg.snelHedenToegang.average(),
+				msg.snelHedeningang.average(),
+				msg.snelHedencentrale.average(),
+				msg.snelHedenverlating.average(),
+			]),
+			autoPerZone: msg => api.update.carCount(msg.autos),
+			sosBericht: msg => api.update.notifications(msg.storingBericht),
 		},
 	},
 };
diff --git a/ui/js/main.js b/ui/js/main.js
index 91572e4..033b0bb 100644
--- a/ui/js/main.js
+++ b/ui/js/main.js
@@ -3,28 +3,3 @@ import './socket.js';
 import api from './api.js';
 window.api = api; // export api to inline JS handlers
 
-// Initialize a counter to keep track of the row number
-var rowCount = 1;
-
-// JavaScript for adding a row dynamically at the top
-document.getElementById("addRowBtn").addEventListener("click", () => {
-	var table = document.getElementById("myTable");
-	var row = table.insertRow(1); // Insert row at the top of the table
-	var cell = row.insertCell(0); // Insert cell into the row
-	cell.innerHTML = "Hallo siem ik ben dit aan het testen. er blijven maar 10 statussen in deze tabel " + rowCount++; // Add content to the cell with incremented counter
-	var size = table.rows.length;
-	var lastRowIndex = table.rows.length - 1; // Index of the last row
-	if (size > 11) { // Check if there is more than one row (excluding the header row)
-		table.deleteRow(lastRowIndex); // Delete the last row
-	}
-});
-
-function onOffButton(btn) {
-	var newState = !!Number(btn.value); // Boolean("0") == true
-	var dot = btn.parentNode.parentNode.querySelector('.dot');
-	dot.classList.remove("on");
-	dot.classList.remove("off");
-	dot.classList.add(newState ? "on" : "off");
-}
-window.onOffButton = onOffButton;
-
diff --git a/ui/js/socket.js b/ui/js/socket.js
index ec4fe53..0203b43 100644
--- a/ui/js/socket.js
+++ b/ui/js/socket.js
@@ -1,7 +1,5 @@
 import api from './api.js';
 
-const msgTypeKey = "functie";
-
 var ws = new WebSocket('ws://localhost:8081/');
 export default ws;
 
@@ -10,13 +8,13 @@ ws.addEventListener("message", ev => {
 	const msg = JSON.parse(ev.data);
 
 	// check if api.msg.handle has a handler for message type
-	if (!api.msg.handle.hasOwnProperty(msg[msgTypeKey])) {
-		console.warn(`No message handler for type ${msg[msgTypeKey]}`, msg);
+	if (!api.msg.handle.hasOwnProperty(msg.type)) {
+		console.warn(`No message handler for type ${msg.type}`, msg);
 		return;
 	}
 
 	// run the appropriate message handler
-	api.msg.handle[msg[msgTypeKey]](msg);
+	api.msg.handle[msg.type](msg);
 });
 
 ws.addEventListener("close", () => {
diff --git a/ui/websocket_input.json b/ui/websocket_input.json
new file mode 100644
index 0000000..abddf82
--- /dev/null
+++ b/ui/websocket_input.json
@@ -0,0 +1,3 @@
+{ "type": "snelheidAutoPerZone", "snelHedenToegang": [ 20, 30, 40, 100 ], "snelHedeningang": [ 20, 30 ], "snelHedencentrale": [ 20, 30, 20, 100 ], "snelHedenverlating": [ 20, 30, 40 ] }
+{ "type": "autoPerZone", "autos": [ 40, 22, 2, 13 ] }
+{ "type": "sosBericht", "statusSOS": true, "storingBericht": "storing door een gesprongen leiding" }