feat: prove the Wi-Fi, LittleFS, and HTTP vertical slice

2026-08-28 00:09:31 +03:00
parent c1fb19af53
commit 0619c6be9c
10 changed files with 409 additions and 117 deletions
@@ -0,0 +1,32 @@
+(() => {
+  const target = document.querySelector('#health');
+  const labels = {
+    uptime_ms: 'Время работы (мс)', wifi_state: 'Wi-Fi', rssi_dbm: 'RSSI (дБм)',
+    free_heap_bytes: 'Свободная память (байт)', min_free_heap_bytes: 'Мин. свободная память (байт)',
+    build_version: 'Версия сборки'
+  };
+
+  function render(health) {
+    target.replaceChildren();
+    for (const [key, label] of Object.entries(labels)) {
+      const term = document.createElement('dt');
+      const value = document.createElement('dd');
+      term.textContent = label;
+      value.textContent = health[key] ?? 'недоступно';
+      target.append(term, value);
+    }
+  }
+
+  async function refresh() {
+    try {
+      const response = await fetch('/api/health', { cache: 'no-store' });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      render(await response.json());
+    } catch (error) {
+      target.textContent = `Не удалось получить состояние: ${error.message}`;
+    }
+  }
+
+  refresh();
+  window.setInterval(refresh, 5000);
+})();
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Морской бой — ESP32</title>
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <main>
+      <h1>Морской бой</h1>
+      <p>ESP32-C6: проверка Wi-Fi, LittleFS и HTTP.</p>
+      <section aria-live="polite">
+        <h2>Состояние устройства</h2>
+        <dl id="health">Загрузка…</dl>
+      </section>
+    </main>
+    <script src="/app.js" defer></script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+:root { color-scheme: dark; font-family: system-ui, sans-serif; }
+body { margin: 0; background: #10223a; color: #f4f7fb; }
+main { max-width: 42rem; margin: 0 auto; padding: 1.5rem; }
+section { background: #19395c; border-radius: .75rem; padding: 1rem; }
+dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; }
+dt { font-weight: 700; }
+dd { margin: 0; overflow-wrap: anywhere; }