1 files changed, 46 insertions, 5 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),
 		},
 	},
 };