diff options
| -rw-r--r-- | ui/css/style.css | 25 | ||||
| -rw-r--r-- | ui/index.html | 30 | ||||
| -rw-r--r-- | ui/js/api.js | 51 | ||||
| -rw-r--r-- | ui/js/main.js | 25 | ||||
| -rw-r--r-- | ui/js/socket.js | 8 | ||||
| -rw-r--r-- | ui/websocket_input.json | 3 |
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" } |