Initial commit

webapp/modules/router.js

@@ -0,0 +1,78 @@
+import { loadDashboard } from "./dashboard.js";
+import { loadSettings } from "./settings.js";
+import { loadCommands } from "./commands.js";
+import { renderHeader } from "./header.js";
+import { renderNav } from "./nav.js";
+import { apiFetch } from "../api.js";
+
+let currentSection = "dashboard"; // Локальная переменная в модуле
+
+export async function initRouter() {
+  const app = document.getElementById("app");
+  app.innerHTML = "";
+
+  // Загрузка header и nav
+  const headerHtml = await fetch("components/header.html").then((res) =>
+    res.text()
+  );
+  app.insertAdjacentHTML("beforeend", headerHtml);
+  renderHeader(1000); // Начальное значение до получения настроек
+
+  const navHtml = await fetch("components/nav.html").then((res) => res.text());
+  app.insertAdjacentHTML("beforeend", navHtml);
+  renderNav(currentSection);
+
+  // Основной контейнер
+  app.insertAdjacentHTML(
+    "beforeend",
+    '<div class="main-container"><div id="main-params" class="main-params"></div><div id="content" class="content"></div></div><footer id="footer"></footer>'
+  );
+
+  // Загрузка main-params
+  const mainParamsHtml = await fetch("pages/main-params.html").then((res) =>
+    res.text()
+  );
+  document.getElementById("main-params").innerHTML = mainParamsHtml;
+
+  // Футер
+  updateFooter();
+
+  // Навигация
+  document.querySelectorAll("nav button").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      currentSection = btn.dataset.section;
+      renderNav(currentSection); // Обновляем навигацию
+      loadSection();
+    });
+  });
+
+  // Обработка события обновления хедера
+  window.addEventListener("updateHeader", (event) => {
+    renderHeader(event.detail); // Обновляем хедер с полученным pollingIntervalMs
+  });
+
+  loadSection();
+}
+
+async function loadSection() {
+  switch (currentSection) {
+    case "dashboard":
+      loadDashboard();
+      break;
+    case "settings":
+      loadSettings();
+      break;
+    case "commands":
+      loadCommands();
+      break;
+  }
+}
+
+async function updateFooter() {
+  const phrases = await apiFetch("/dashboard/recent-phrases?limit=5");
+  const footer = document.getElementById("footer");
+  footer.innerHTML =
+    '== RECENT PHRASES ==<div class="phrases">' +
+    phrases.map((p) => `<p>${p.text}</p>`).join("") +
+    "</div>";
+}