add more websocket communication specs

4 files changed, 94 insertions, 69 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
index 7b8f8d2..8b2201a 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -160,3 +160,7 @@ details[open] summary {
 	border-bottom: 1px solid #0008;
 }
 
+input[type="range"] {
+	width: 100%;
+}
+
diff --git a/ui/index.html b/ui/index.html
index 07c4141..61723a1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -18,47 +18,33 @@
 				<div class="state_controls">
 					<ul>
 						<li class="list-item"> 
-							<span class="dot"></span> Fotocellen
+							<span id="photocellValue" class="dot"></span> Fotocellen
 							<div class="buttons">
-								<button onclick="onOffButton(this)" value="1">On</button>
-								<button onclick="onOffButton(this)" value="0">Off</button>
+								<button value="true" onclick="api.msg.send.photocell(this)">On</button>
+								<button value="false" onclick="api.msg.send.photocell(this)">Off</button>
 							</div>
 						</li>
 						<li class="list-item"> 
-							<span class="dot"></span> CCTV
+							<span id="cctvValue" class="dot"></span> CCTV
 							<div class="buttons">
-								<button onclick="onOffButton(this)" value="1">On</button>
-								<button onclick="onOffButton(this)" value="0">Off</button>
+								<button value="true" onclick="api.msg.send.cctv(this)">On</button>
+								<button value="false" onclick="api.msg.send.cctv(this)">Off</button>
 							</div>
 						</li>
 						<li class="list-item"> 
-							<span class="dot"></span> Verlichting
+							<span id="barrierValue" class="dot"></span> Slagboom
 							<div class="buttons">
-								<button onclick="onOffButton(this)" value="1">On</button>
-								<button onclick="onOffButton(this)" value="0">Off</button>
+								<button value="true" onclick="api.msg.send.barrier(this)">Open</button>
+								<button value="false" onclick="api.msg.send.barrier(this)">Close</button>
 							</div>
 						</li>
 						<li class="list-item"> 
-							<span class="dot"></span> Verkeerslicht
+							Matrixbord
 							<div class="buttons">
-								<button onclick="onOffButton(this)" value="1">On</button>
-								<button onclick="onOffButton(this)" value="0">Off</button>
-							</div>
-						</li>
-						<li class="list-item"> 
-							<span class="dot"></span> Slagboom
-							<div class="buttons">
-								<button onclick="onOffButton(this)" value="1">On</button>
-								<button onclick="onOffButton(this)" value="0">Off</button>
-							</div>
-						</li>
-						<li class="list-item"> 
-							<span class="dot"></span> Matrixbord
-							<div class="buttons">
-								<select class="dropdown">
-									<option value="wegafsluiting">Wegafsluiting</option>
-									<option value="werkzaamheden">Werkzaamheden</option>
-									<option value="uitschakelen">Uitschakelen</option>
+								<select class="dropdown" id="matrixValue" onchange="api.msg.send.matrix(this)">
+									<option value="road_closed">Wegafsluiting</option>
+									<option value="construction">Werkzaamheden</option>
+									<option value="disabled">Uitschakelen</option>
 								</select>
 							</div>
 						</li>
@@ -66,48 +52,20 @@
 				</div>
 			</details>
 
-			<details>
-				<summary>Lights</summary>
+			<details open>
+				<summary>Verlichting</summary>
 				<div class="light_controls">
-					<ul>
-						<li><button onclick="setPercentage(0)">0%</button></li>
-						<li><button onclick="setPercentage(10)">10%</button></li>
-						<li><button onclick="setPercentage(20)">20%</button></li>
-					</ul>
-					<div id="percentageDisplay">Percentage: 0%</div>
-					<script>
-						function setPercentage(percentage) {
-							document.getElementById('percentageDisplay').innerText = `Percentage: ${percentage}%`;
-						}
-					</script>
+					<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>
 				</div>
 			</details>
 
-			<details>
-				<summary>Traffic lights</summary>
+			<details open>
+				<summary>Stoplichten</summary>
 				<div class="traffic_light_controls">
-					<button onclick="setStatus('Red')">Red</button>
-					<button onclick="setStatus('Off')">Off</button>
-					<div id="statusDisplay">Status: </div>
-					<script>
-						function setStatus(status) {
-							document.getElementById('statusDisplay').innerText = `Status: ${status}`;
-						}
-					</script>
-				</div>
-			</details>
-
-			<details>
-				<summary>Barrier</summary>
-				<div class="barrier_controls">
-					<button onclick="setStatus('Open')">Open</button>
-					<button onclick="setStatus('Close')">Close</button>
-					<div id="statusDisplay">Status: </div>
-					<script>
-						function setStatus(status) {
-							document.getElementById('statusDisplay').innerText = `Status: ${status}`;
-						}
-					</script>
+					<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>
 			</details>
 
diff --git a/ui/js/api.js b/ui/js/api.js
index 5fca3cf..319d8c2 100644
--- a/ui/js/api.js
+++ b/ui/js/api.js
@@ -1,11 +1,57 @@
 import ws from './socket.js';
 
-export default {
+function send(obj) {
+	ws.send(JSON.stringify(obj));
+}
+
+function setPolkaDot(el, bool) {
+	el.classList.remove("on");
+	el.classList.remove("off");
+	el.classList.add(bool ? "on" : "off");
+}
+
+const api = {
+	update: {
+		barrier: open => setPolkaDot(document.getElementById("barrierValue"), open),
+		trafficLights: state => document.getElementById("trafficLightsValue").innerText = state,
+		lights: value => document.getElementById("lightsValue").innerText = value,
+		matrix: state => document.getElementById("matrixValue").value = state,
+		photocell: on => setPolkaDot(document.getElementById("photocellValue"), on),
+		cctv: on => setPolkaDot(document.getElementById("cctvValue"), on),
+	},
 	msg: {
 		send: {
-			helloWorld: () => {
-				ws.send(JSON.stringify({res: 'OK'}));
-			}
+			helloWorld: () => send({ type: 'helloWorld' }),
+			barrier: el => {
+				var open = el.value == "true"; // string to boolean
+				send({ type: 'barrier', open });
+				api.update.barrier(open);
+			},
+			trafficLights: el => {
+				var state = el.value;
+				send({ type: 'trafficLights', state });
+				api.update.trafficLights(el.innerText);
+			},
+			lights: el => {
+				var value = Number(el.value);
+				send({ type: 'lights', value });
+				api.update.lights(value);
+			},
+			matrix: el => {
+				var state = el.value;
+				send({ type: 'matrix', state });
+				api.update.matrix(value);
+			},
+			photocell: el => {
+				var on = el.value == "true";
+				send({ type: 'photocell', on });
+				api.update.photocell(on);
+			},
+			cctv: el => {
+				var on = el.value == "true";
+				send({ type: 'barrier', on });
+				api.update.cctv(on);
+			},
 		},
 		handle: {
 			helloWorld: msg => {
@@ -15,3 +61,4 @@ export default {
 	},
 };
 
+export default api;
diff --git a/ui/websocket_output.json b/ui/websocket_output.json
new file mode 100644
index 0000000..6b6deef
--- /dev/null
+++ b/ui/websocket_output.json
@@ -0,0 +1,16 @@
+{ "type": "photocell", "on": true }
+{ "type": "photocell", "on": false }
+{ "type": "barrier", "on": false }
+{ "type": "barrier", "on": true }
+{ "type": "barrier", "open": true }
+{ "type": "barrier", "open": false }
+{ "type": "matrix", "state": "construction" }
+{ "type": "matrix", "state": "road_closed" }
+{ "type": "matrix", "state": "disabled" }
+{ "type": "lights", "value": 0 }
+{ "type": "lights", "value": 12 }
+{ "type": "lights", "value": 100 }
+{ "type": "trafficLights", "state": "off" }
+{ "type": "trafficLights", "state": "red" }
+{ "type": "helloWorld" }
+{ "type": "helloWorld" }