aboutsummaryrefslogtreecommitdiff
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/css/style.css25
-rw-r--r--ui/index.html30
-rw-r--r--ui/js/api.js51
-rw-r--r--ui/js/main.js25
-rw-r--r--ui/js/socket.js8
-rw-r--r--ui/websocket_input.json3
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" }