update cctv backend code

2 files changed, 26 insertions, 19 deletions

diff --git a/ui/index.html b/ui/index.html
index ac379f7..2af3cd2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -39,20 +39,6 @@
 							</div>
 						</li>
 						<li class="list-item"> 
-							<span id="cctvValue" class="dot"></span> CCTV
-							<div class="buttons">
-								<button value="preset1" onclick="api.msg.send.cctv(this)">Preset 1</button>
-								<button value="preset2" onclick="api.msg.send.cctv(this)">Preset 2</button>
-								<button value="preset3" onclick="api.msg.send.cctv(this)">Preset 3</button>
-								<button value="preset4" onclick="api.msg.send.cctv(this)">Preset 4</button>
-								<button value="preset5" onclick="api.msg.send.cctv(this)">Preset 5</button>
-								<button value="preset6" onclick="api.msg.send.cctv(this)">Preset 6</button>
-								<button value="preset7" onclick="api.msg.send.cctv(this)">Preset 7</button>
-								<button value="preset8" onclick="api.msg.send.cctv(this)">Preset 8</button>
-								<button value="preset9" onclick="api.msg.send.cctv(this)">Preset 9</button>
-							</div>
-						</li>
-						<li class="list-item"> 
 							<span id="barrierValue" class="dot"></span> Slagboom
 							<div class="buttons">
 								<button value="true" onclick="api.msg.send.barrier(this)">Open</button>
@@ -90,12 +76,31 @@
 				</div>
 			</details>
 
+			<details open>
+				<summary>CCTV Presets</summary>
+				<div>
+					Huidige preset: <span id="cctvPresetValue">??</span>
+				</div>
+				<div class="buttons">
+					<button value="preset1" onclick="api.msg.send.cctv(this)">Preset 1</button>
+					<button value="preset2" onclick="api.msg.send.cctv(this)">Preset 2</button>
+					<button value="preset3" onclick="api.msg.send.cctv(this)">Preset 3</button>
+					<button value="preset4" onclick="api.msg.send.cctv(this)">Preset 4</button>
+					<button value="preset5" onclick="api.msg.send.cctv(this)">Preset 5</button>
+					<button value="preset6" onclick="api.msg.send.cctv(this)">Preset 6</button>
+					<button value="preset7" onclick="api.msg.send.cctv(this)">Preset 7</button>
+					<button value="preset8" onclick="api.msg.send.cctv(this)">Preset 8</button>
+					<button value="preset9" onclick="api.msg.send.cctv(this)">Preset 9</button>
+				</div>
+			</details>
+
 			<details>
 				<summary>WebSocket Demo</summary>
 				<div class="websocket_demo">
 					<button onclick="api.msg.send.helloWorld()">Hello World!</button>
 				</div>
 			</details>
+
 		</div>
 
 		<div class="section notifications" id="sectionNotifications">
diff --git a/ui/js/api.js b/ui/js/api.js
index d8c527b..647cbd6 100644
--- a/ui/js/api.js
+++ b/ui/js/api.js
@@ -27,7 +27,9 @@ const api = {
 		},
 		matrix: state => document.getElementById("matrixValue").value = state,
 		photocell: on => setPolkaDot(document.getElementById("photocellValue"), on),
-		cctv: on => setPolkaDot(document.getElementById("cctvValue"), on),
+		cctv: preset => {
+			document.getElementById("cctvPresetValue").innerText = preset;
+		},
 		carSpeed: speed => {
 			for (let i = 0; i < 4; i++)
 				document.getElementById(`zone${i+1}SpeedValue`).innerText = speed[i];
@@ -96,9 +98,9 @@ const api = {
 				api.update.photocell(on);
 			},
 			cctv: el => {
-				var on = el.value == "true";
-				send({ type: 'cctv', on });
-				api.update.cctv(on);
+				var preset = el.value;
+				send({ type: 'cctv', preset });
+				api.update.cctv(preset);
 			},
 			sos: el => {
 				var statusSOS = el.value == "true";
@@ -117,7 +119,7 @@ const api = {
 			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),
+			cctv: msg => api.update.cctv(msg.preset),
 			autoPerZone: msg => api.update.carCount(msg.autos),
 			sosBericht: msg => api.update.notifications(msg),
 			lfvReady: msg => api.update.lfvReady(msg),