From 9e83851ddf87e76316bd151cf5b2b56665928f14 Mon Sep 17 00:00:00 2001
From: RaffaelW <rfflwlf@gmail.com>
Date: Thu, 19 Dec 2024 17:27:32 +0100
Subject: [PATCH] added status ui

---
 data/index.html | 67 +++++++++++++++++++++++++++++++++++++
 data/status.js  | 88 +++++++++++++++++++++++++++++++++++++++++++++++++
 data/style.css  | 56 +++++++++++++++++++++++++++++++
 3 files changed, 211 insertions(+)
 create mode 100644 data/status.js

diff --git a/data/index.html b/data/index.html
index 3868839..19f0e35 100644
--- a/data/index.html
+++ b/data/index.html
@@ -31,6 +31,73 @@
             </section>
 
             <section class="content hidden">
+                <div class="status">
+                    <span>RSSI: <span class="rssi"></span></span>
+                    <span>Heap: <span class="heap-percentage"></span>%</span>
+                    <span>PSRAM: <span class="psram-percentage"></span>%</span>
+                    <span>Uptime: <span class="uptime"></span></span>
+
+                    <button type="button" class="expand-status">Mehr</button>
+                </div>
+
+                <dialog class="dialog-status">
+                    <h2 class="model"></h2>
+
+                    <div class="dialog-status-content">
+                        <div class="card">
+                            <span>Signalstärke</span>
+                            <span class="rssi"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>Uptime</span>
+                            <span class="uptime"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>CPU-Taktfrequenz</span>
+                            <span><span class="cpu-freq"></span> MHz</span>
+                        </div>
+
+                        <div class="card">
+                            <span>CPU Cycle Count</span>
+                            <span class="cpu-cycle-count"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>Heap</span>
+                            <span><span class="heap-percentage"></span>%</span>
+                            <span
+                                ><span class="heap-used"></span> /
+                                <span class="heap-total"></span
+                            ></span>
+                        </div>
+
+                        <div class="card">
+                            <span>PSRAM</span>
+                            <span><span class="psram-percentage"></span>%</span>
+                            <span
+                                ><span class="psram-used"></span> /
+                                <span class="psram-total"></span
+                            ></span>
+                        </div>
+
+                        <div class="card">
+                            <span>MAC-Adresse</span>
+                            <span class="mac"></span>
+                        </div>
+
+                        <div class="card">
+                            <span>SDK-Version</span>
+                            <span class="sdk-version"></span>
+                        </div>
+                    </div>
+
+                    <form method="dialog">
+                        <button type="submit">Schließen</button>
+                    </form>
+                </dialog>
+
                 <form class="config">
                     <h1>Konfiguration</h1>
                     <fieldset>
diff --git a/data/status.js b/data/status.js
new file mode 100644
index 0000000..37da7ea
--- /dev/null
+++ b/data/status.js
@@ -0,0 +1,88 @@
+const statusDialog = document.querySelector(".dialog-status");
+const expandButton = document.querySelector(".expand-status");
+
+expandButton.addEventListener("click", () => {
+    statusDialog.showModal();
+});
+
+async function loadStatus() {
+    try {
+        const res = await fetch("/status");
+        if (!res.ok) {
+            throw new Error(
+                `Response status: ${res.status}\n${await res.text()}`
+            );
+        }
+
+        const data = await res.json();
+        console.log(data);
+
+        return data;
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
+}
+
+function setStatus(status) {
+    setValue("model", status.chip.model);
+    setValue("mac", status.chip.mac.toString(16).toUpperCase());
+    setValue("sdk-version", status.sdkVersion);
+
+    setValue("rssi", status.connection.signalStrength);
+
+    setValue("cpu-freq", status.chip.cpuFreqMHz);
+    setValue("cpu-cycle-count", status.chip.cycleCount);
+
+    const usedHeap = status.heap.total - status.heap.free;
+    setValue("heap-used", formatBytes(usedHeap));
+    setValue("heap-total", formatBytes(status.heap.total));
+    setValue(
+        "heap-percentage",
+        Math.round((usedHeap / status.heap.total) * 100)
+    );
+
+    const usedPsram = status.psram.total - status.psram.free;
+    setValue("psram-used", formatBytes(usedPsram));
+    setValue("psram-total", formatBytes(status.psram.total));
+    setValue(
+        "psram-percentage",
+        Math.round((usedPsram / status.psram.total) * 100)
+    );
+
+    setValue("uptime", parseDuration(status.uptime));
+}
+
+function setValue(className, value) {
+    document.querySelectorAll("." + className).forEach((element) => {
+        element.innerText = value;
+    });
+}
+
+function parseDuration(ms) {
+    const date = new Date(ms);
+    console.log(date);
+    const time =
+        date.getUTCHours().toString().padStart(2, "0") +
+        ":" +
+        date.getUTCMinutes().toString().padStart(2, "0") +
+        " h";
+    const days = Math.floor(date.getTime() / (1000 * 60 * 60 * 24));
+
+    return days !== 0 ? `${days} Tage, ${time}` : time;
+}
+
+function formatBytes(bytes) {
+    const units = ["Bytes", "KB", "MB", "GB"];
+
+    let value = bytes;
+    let index = 0;
+    while (value >= 1000) {
+        value /= 1000;
+        index++;
+    }
+
+    return `${Math.round(value * 10) / 10} ${units[index]}`;
+}
+
+setStatus(await loadStatus());
diff --git a/data/style.css b/data/style.css
index a595e33..a664028 100644
--- a/data/style.css
+++ b/data/style.css
@@ -2,6 +2,7 @@
     --color-primary: #087e8b;
     --color-on-primary: white;
     --color-background: #222;
+    --color-surface: #333;
     --color-danger: #fa2b58;
     --icon-button-size: 2.5rem;
 }
@@ -141,6 +142,37 @@ label.switch input:checked + .slider::before {
     translate: -100% -50%;
 }
 
+dialog {
+    width: 80%;
+    max-width: 500px;
+    max-height: 80%;
+    overflow: scroll;
+    background-color: var(--color-background);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+dialog::backdrop {
+    background-color: #000a;
+}
+
+.card {
+    background-color: var(--color-surface);
+    padding: 8px;
+    border-radius: 8px;
+}
+
+.card > * {
+    display: block;
+}
+
+.card > :first-child {
+    color: var(--color-primary);
+    margin-bottom: 8px;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;
@@ -223,3 +255,27 @@ button.reload {
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 }
+
+.status {
+    background-color: var(--color-surface);
+    padding: 8px;
+    border-radius: 8px;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+}
+
+.dialog-status-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.dialog-status button {
+    display: block;
+    margin: 0 auto;
+    margin-top: 32px;
+}