diff options
Diffstat (limited to 'frontend/admin')
| -rw-r--r-- | frontend/admin/admin-style.css | 5 | ||||
| -rw-r--r-- | frontend/admin/admin.js | 33 | ||||
| -rw-r--r-- | frontend/admin/panel.html | 14 |
3 files changed, 51 insertions, 1 deletions
diff --git a/frontend/admin/admin-style.css b/frontend/admin/admin-style.css index e04a047..9c866ff 100644 --- a/frontend/admin/admin-style.css +++ b/frontend/admin/admin-style.css @@ -28,6 +28,11 @@ width: 128px; } +.admin-machine-container > div > span { + text-align: center; + font-weight: 600; +} + .admin-machine-container > h2 { writing-mode: vertical-lr; transform: rotate(180deg); diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js index 6f1ebce..ff1c463 100644 --- a/frontend/admin/admin.js +++ b/frontend/admin/admin.js @@ -38,9 +38,42 @@ async function panelLoginCheck() { if (await checkLoginStatus()) { msg.style.display = "none"; authDiv.style.display = "inherit"; + return true; } else { msg.style.display = "inherit"; authDiv.style.display = "none"; + return false; + } +} + +async function syncMachineStatus() { + const response = await fetch(`${API_URL}/admin_machine_status`, { + method: "POST", + credentials: "include", + }); + const data = await response.json(); + + for (let b = 0; b < data.length; b++) { + for (let m = 0; m < data[b].length; m++) { + const img = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()+"img"); + const dropdown = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()); + + if (data[b][m] != "OUTOFSERVICE") { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_off.png"; + } else { + img.src = "/assets/img/washer_off.png"; + } + dropdown.selectedIndex = 0; + } else { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_down.png"; + } else { + img.src = "/assets/img/washer_down.png"; + } + dropdown.selectedIndex = 1; + } + } } } diff --git a/frontend/admin/panel.html b/frontend/admin/panel.html index 1169c30..4813c06 100644 --- a/frontend/admin/panel.html +++ b/frontend/admin/panel.html @@ -14,6 +14,7 @@ <div class="admin-machine-container" style="background-color: lightyellow;"> <h2>Block H2</h2> <div> + <span>Dryer 1</span> <img id="h2m1img" src="/assets/img/dryer_off.png" alt=""> <select id="h2m1" name="" onchange="overrideMachineStatus(2, 1);"> <option value="normal">Normal</option> @@ -21,6 +22,7 @@ </select> </div> <div> + <span>Washer 1</span> <img id="h2m2img" src="/assets/img/washer_off.png" alt=""> <select id="h2m2" name="" onchange="overrideMachineStatus(2, 2);"> <option value="normal">Normal</option> @@ -28,6 +30,7 @@ </select> </div> <div> + <span>Dryer 2</span> <img id="h2m3img" src="/assets/img/dryer_off.png" alt=""> <select id="h2m3" name="" onchange="overrideMachineStatus(2, 3);"> <option value="normal">Normal</option> @@ -35,6 +38,7 @@ </select> </div> <div> + <span>Washer 2</span> <img id="h2m4img" src="/assets/img/washer_off.png" alt=""> <select id="h2m4" name="" onchange="overrideMachineStatus(2, 4);"> <option value="normal">Normal</option> @@ -45,6 +49,7 @@ <div class="admin-machine-container" style="background-color: skyblue;"> <h2>Block H1</h2> <div> + <span>Dryer 1</span> <img id="h1m1img" src="/assets/img/dryer_off.png" alt=""> <select id="h1m1" name="" onchange="overrideMachineStatus(1, 1);"> <option value="normal">Normal</option> @@ -52,6 +57,7 @@ </select> </div> <div> + <span>Washer 1</span> <img id="h1m2img" src="/assets/img/washer_off.png" alt=""> <select id="h1m2" name="" onchange="overrideMachineStatus(1, 2);"> <option value="normal">Normal</option> @@ -59,6 +65,7 @@ </select> </div> <div> + <span>Dryer 2</span> <img id="h1m3img" src="/assets/img/dryer_off.png" alt=""> <select id="h1m3" name="" onchange="overrideMachineStatus(1, 3);"> <option value="normal">Normal</option> @@ -66,6 +73,7 @@ </select> </div> <div> + <span>Washer 2</span> <img id="h1m4img" src="/assets/img/washer_off.png" alt=""> <select id="h1m4" name="" onchange="overrideMachineStatus(1, 4);"> <option value="normal">Normal</option> @@ -77,7 +85,11 @@ </div> <script src="admin.js"></script> <script> - panelLoginCheck(); + (async () => { + if (await panelLoginCheck()) { + syncMachineStatus(); + } + })(); </script> </body> </html> |