3 files changed, 49 insertions, 35 deletions

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", () => {