diff options
| author | lonkaars <loek@pipeframe.xyz> | 2024-04-08 19:07:00 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2024-04-08 19:07:08 +0200 |
| commit | c443ee613b0ece6f66288f718fadcc3b00797a5e (patch) | |
| tree | 2c495d75ed74e36a18875b7954a2170104568f20 | |
| parent | dcdb47f24057f42b600856064ab2e45ac252f9dd (diff) | |
implement SOS dialog
| -rw-r--r-- | ui/css/style.css | 23 | ||||
| -rw-r--r-- | ui/index.html | 4 | ||||
| -rw-r--r-- | ui/js/api.js | 14 | ||||
| -rw-r--r-- | ui/websocket_output.json | 1 |
4 files changed, 39 insertions, 3 deletions
diff --git a/ui/css/style.css b/ui/css/style.css index 1f51921..12ef3fd 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -54,7 +54,6 @@ body, html { position: sticky; top: 0; /* Stick the table header to the top */ background-color: #f0f0f0; /* Set background color for the sticky header */ - z-index: 1; /* Ensure it stays above other content */ width: 100%; /* Ensure table header takes full width */ } @@ -145,3 +144,25 @@ input[type="range"] { width: 100%; } +dialog { + z-index: 999; + min-width: 320px; + text-align: center; +} +::backdrop { + background-color: #000; + opacity: 0.75; +} + +dialog h1 { + animation-name: blink; + animation-duration: 150ms; + animation-direction: alternate; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes blink { + from { color: red; } + to { color: black; } +} diff --git a/ui/index.html b/ui/index.html index 0da8172..df66853 100644 --- a/ui/index.html +++ b/ui/index.html @@ -10,6 +10,10 @@ </head> <body> + <dialog id="sosDialog"> + <h1>SOS!!!</h1> + <button value="false" onclick="api.msg.send.sos(this)">stop!!</button> + </dialog> <div class="container"> <div class="section overview_control"> diff --git a/ui/js/api.js b/ui/js/api.js index 7f11c17..9660d08 100644 --- a/ui/js/api.js +++ b/ui/js/api.js @@ -40,13 +40,18 @@ const api = { 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 + cell.innerHTML = msg.storingBericht; // 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 } + + api.update.sos(msg.statusSOS); }, + sos: on => { + document.getElementById("sosDialog")[on ? "showModal" : "close"](); + } }, msg: { send: { @@ -82,6 +87,11 @@ const api = { send({ type: 'cctv', on }); api.update.cctv(on); }, + sos: el => { + var statusSOS = el.value == "true"; + send({ type: 'sosBericht', statusSOS }); + api.update.sos(statusSOS); + } }, handle: { helloWorld: msg => console.log(msg), @@ -98,7 +108,7 @@ const api = { msg.snelHedenverlating.average(), ]), autoPerZone: msg => api.update.carCount(msg.autos), - sosBericht: msg => api.update.notifications(msg.storingBericht), + sosBericht: msg => api.update.notifications(msg), }, }, }; diff --git a/ui/websocket_output.json b/ui/websocket_output.json index 071e37b..c3d5668 100644 --- a/ui/websocket_output.json +++ b/ui/websocket_output.json @@ -15,3 +15,4 @@ { "type": "helloWorld" } { "type": "helloWorld" } { "type": "allState" } +{ "type":"sosBericht", "statusSOS":false } |