diff options
| author | lonkaars <loek@pipeframe.xyz> | 2024-04-09 13:34:36 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2024-04-09 13:34:36 +0200 |
| commit | 8aa0c245595620810f181a6b3f49d66a6bd6b090 (patch) | |
| tree | b514fc7b9725e756d081821d5be0d64a4465d7b6 | |
| parent | c443ee613b0ece6f66288f718fadcc3b00797a5e (diff) | |
add setup dialog on startup
| -rw-r--r-- | ui/css/style.css | 36 | ||||
| -rw-r--r-- | ui/index.html | 14 | ||||
| -rw-r--r-- | ui/js/api.js | 20 | ||||
| -rw-r--r-- | ui/js/socket.js | 2 | ||||
| -rw-r--r-- | ui/websocket_output.json | 6 |
5 files changed, 69 insertions, 9 deletions
diff --git a/ui/css/style.css b/ui/css/style.css index 12ef3fd..f0c63e8 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -5,8 +5,12 @@ body, html { display: flex; justify-content: center; align-items: center; + font-family: sans-serif; } +* { user-select: none; } +*:focus { outline: none; } + .container { display: grid; grid-template-columns: 1fr 2fr; @@ -134,6 +138,7 @@ details { details summary { user-select: none; + cursor: pointer; } details[open] summary { @@ -148,13 +153,17 @@ dialog { z-index: 999; min-width: 320px; text-align: center; + border-radius: 12px; + border: 1px solid #0006; + box-shadow: 0 4px 32px -12px #000a; } ::backdrop { - background-color: #000; - opacity: 0.75; + background-color: #0008; + /* opacity: 0.6; */ + backdrop-filter: blur(12px); } -dialog h1 { +.blink { animation-name: blink; animation-duration: 150ms; animation-direction: alternate; @@ -166,3 +175,24 @@ dialog h1 { from { color: red; } to { color: black; } } + +.padtop { margin-top: 16px; } +dialog h1 { margin-top: 0; } + +button { + font-size: 1rem; + border-radius: 8px; + border: 1px solid #0004; + padding: 4px 8px; + cursor: pointer; + background-color: #0001; +} + +button[disabled] { + cursor: not-allowed; +} + +button:not([disabled]):active { + background-color: #0004; +} + diff --git a/ui/index.html b/ui/index.html index df66853..1183672 100644 --- a/ui/index.html +++ b/ui/index.html @@ -10,9 +10,19 @@ </head> <body> + <dialog id="setupDialog"> + <h1>Setup</h1> + <div>LFV status: <span id="lfvReadyValue">offline</span></div> + <div class="padtop"> + <button disabled value="true" id="lfvReadyBtn" onclick="api.msg.send.start(this)">start LFVs</button> + </div> + </dialog> + <script>document.getElementById("setupDialog").showModal()</script> <dialog id="sosDialog"> - <h1>SOS!!!</h1> - <button value="false" onclick="api.msg.send.sos(this)">stop!!</button> + <h1 class="blink">SOS!!!</h1> + <div class="padtop"> + <button value="false" onclick="api.msg.send.sos(this)">stop!!</button> + </div> </dialog> <div class="container"> <div class="section overview_control"> diff --git a/ui/js/api.js b/ui/js/api.js index 9660d08..48bd9e5 100644 --- a/ui/js/api.js +++ b/ui/js/api.js @@ -51,11 +51,24 @@ const api = { }, sos: on => { document.getElementById("sosDialog")[on ? "showModal" : "close"](); + }, + lfvReady: msg => { + var { ready } = msg; + document.getElementById("lfvReadyValue").innerText = ready ? "online" : "offline"; + var btn = document.getElementById("lfvReadyBtn") + if (ready) { + btn.removeAttribute("disabled"); + } else { + btn.setAttribute("disabled", true); + } + }, + start: () => { + document.getElementById("setupDialog").close(); } }, msg: { send: { - allState: () => send({ type: 'allState' }), + connected: () => send({ type: 'connected' }), helloWorld: () => send({ type: 'helloWorld' }), barrier: el => { var open = el.value == "true"; // string to boolean @@ -91,6 +104,10 @@ const api = { var statusSOS = el.value == "true"; send({ type: 'sosBericht', statusSOS }); api.update.sos(statusSOS); + }, + start: el => { + send({ type: 'start' }); + api.update.start(); } }, handle: { @@ -109,6 +126,7 @@ const api = { ]), autoPerZone: msg => api.update.carCount(msg.autos), sosBericht: msg => api.update.notifications(msg), + lfvReady: msg => api.update.lfvReady(msg), }, }, }; diff --git a/ui/js/socket.js b/ui/js/socket.js index d352ab9..1942c49 100644 --- a/ui/js/socket.js +++ b/ui/js/socket.js @@ -22,6 +22,6 @@ ws.addEventListener("close", () => { }); ws.addEventListener("open", _ev => { - api.msg.send.allState(); + api.msg.send.connected(); }); diff --git a/ui/websocket_output.json b/ui/websocket_output.json index c3d5668..fffe68b 100644 --- a/ui/websocket_output.json +++ b/ui/websocket_output.json @@ -14,5 +14,7 @@ { "type": "trafficLights", "state": "red" } { "type": "helloWorld" } { "type": "helloWorld" } -{ "type": "allState" } -{ "type":"sosBericht", "statusSOS":false } +{ "type": "sosBericht", "statusSOS":false } +{ "type": "connected" } +{ "type": "lfvReady","ready": true } +{ "type": "start" } |