hash navigation & fixes

vnau · Nov 17, 2024 · d2a75b2 · d2a75b2
1 parent df375bd
commit d2a75b2
Show file tree

Hide file tree

Showing 12 changed files with 2,113 additions and 2,318 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,7 +12,7 @@
     "cy:e2e": "npx cypress run"
   },
   "devDependencies": {
-    "@picocss/pico": "^2.0.0-alpha1",
+    "@picocss/pico": "^2.0.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tsconfig/svelte": "^5.0.2",
     "bootstrap": "^5.3.2",
@@ -21,7 +21,6 @@
     "sass": "^1.69.5",
     "svelte": "^4.2.19",
     "svelte-check": "^3.6.0",
-    "tinro": "^0.6.12",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "vite": "^5.4.6",

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
   import "./app.scss";
-  import { Route, active } from "tinro";
 
   import PageRouterLogin from "./Pages/PageRouterLogin.svelte";
   import PageSensors from "./Pages/PageSensors.svelte";
   import PageThermostats from "./Pages/PageThermostats.svelte";
   import WaitBox from "./lib/WaitBox.svelte";
-  import type { ApiService, SensorStatus, StatusData } from "./interfaces";
+  import type { ApiService, StatusData } from "./interfaces";
   import github from "./assets/github-mark.svg";
 
   export let api: ApiService;
-  export let baseUrl: string;
-  let data: StatusData;
+  let state: StatusData | undefined = undefined;
+  let page: string = location.hash;
   let busy = false;
   let timer: NodeJS.Timeout;
 
+  function routeChange() {
+    console.log(location.hash);
+    page = location.hash;
+  }
+
   function requestNotifications() {
     Notification.requestPermission(function (result) {
       if (result === "granted") {
@@ -31,22 +35,26 @@
         return;
       }
 
-      newData.sensors?.forEach((s) => {
-        // fix rssi 0 to undefined (not connected)
-        s.rssi = s.rssi ? s.rssi : undefined!;
-      });
-
-      if (data) {
+      if (state) {
         var newSensors = newData.sensors.filter(
-          (v) => !data.sensors.find((ns) => ns.name == v.name)
+          (v) => !state?.sensors.find((ns) => ns.name == v.name)
         );
         if (newSensors.length > 0) {
           new Notification(
             "Found a new sensor(s): " + newSensors.map((v) => v.name).join(", ")
           );
         }
       }
-      data = newData;
+
+      state = {
+        fritz: { ...newData.fritz },
+        sensors: newData.sensors.map((v) => ({
+          ...v,
+          rssi: v.rssi ? v.rssi : undefined!,
+        })),
+        thermostats: newData.thermostats.map((v) => ({ ...v })),
+      };
+
       busy = false;
     } catch {
       busy = true;
@@ -58,6 +66,7 @@
   fetchData();
 </script>
 
+<svelte:window on:hashchange={routeChange} />
 <main>
   <nav>
     <ul>
@@ -69,14 +78,13 @@
     <ul>
       <!-- <li><button on:click={requestNotifications}>Notifications</button></li> -->
       <li>
-        <a use:active class="secondary" href={baseUrl + "/sensors"}>Sensors</a>
+        <a class="secondary" href={"#sensors"}>Sensors</a>
       </li>
       <li>
-        <a use:active class="secondary" href={baseUrl + "/heating"}>Heating</a>
+        <a class="secondary" href={"#heating"}>Heating</a>
       </li>
       <li>
         <a
-          use:active
           class="secondary"
           href="https://github.com/vnau/FritzGate"
           target="_blank"
@@ -89,19 +97,14 @@
       </li>
     </ul>
   </nav>
-  {#if !data}
+  {#if !state}
     <WaitBox
       message="trying to connect to the FritzGate"
       details="this buddy gossips too much with sensors"
     />
-  {:else}
-    <Route path={baseUrl + "/"} redirect={baseUrl + "/sensors"} />
-    <Route path={baseUrl + "/sensors"}><PageSensors {data} /></Route>
-    <Route path={baseUrl + "/heating"}
-      ><PageThermostats {api} {data} {baseUrl} /></Route
-    >
-    <Route path={baseUrl + "/setup"}
-      ><PageRouterLogin {api} {data} {baseUrl} /></Route
-    >
+  {:else if page === "#sensors"}<PageSensors data={state} />
+  {:else if page === "#heating"}<PageThermostats {api} data={state} />
+  {:else if page === "#setup"}<PageRouterLogin {api} data={state} />
+  {:else}<PageSensors data={state} />
   {/if}
 </main>
diff --git a/frontend/src/Pages/PageRouterLogin.svelte b/frontend/src/Pages/PageRouterLogin.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { router } from "tinro";
   import iotSvg from "../assets/iot.svg";
   import WaitBox from "../lib/WaitBox.svelte";
   import { type ApiService, type StatusData, Status } from "../interfaces";
 
   export let api: ApiService;
   export let data: StatusData;
-  export let baseUrl: string;
 
   let host: string;
   let pass: string;
   let status: string;
   let user: string;
 
   let submitForm = async (e: any): Promise<boolean> => {
-    console.log("submit");
     await api.setConfig(host, user, pass);
-    status = "CONFIGURED";
+    status = Status.configured;
     return false;
   };
 
@@ -27,7 +24,7 @@
       status !== data?.fritz?.status &&
       data?.fritz?.status === Status.connected
     ) {
-      router.goto(baseUrl + "/heating");
+      location.hash = "#heating";
     } else {
       status = data?.fritz?.status;
       host ??= data?.fritz?.host;
@@ -47,61 +44,75 @@
   />
 {:else}
   <article>
-    <hgroup>
-      <div class="message-splash">
-        <img src={iotSvg} class="wait-image" alt="" />
-        <h4>
-          {status === "CONNECTED"
-            ? "update credentials for FRITZ!Box"
-            : "connect to FRITZ!Box"}
-        </h4>
-        <p>
-          Set up a hostname (in most cases <i>fritz.box</i> or
-          <i>192.168.178.1</i>), username and password to connect to the
-          FRITZ!Box SmartHome.
-        </p>
+    <div class="row">
+      <div class="col-12 col-md-6 col-lg-6 col-xl-6">
+        <hgroup>
+          <div class="message-splash">
+            <img src={iotSvg} class="wait-image" alt="" />
+            <h4>
+              {status === Status.connected
+                ? "update credentials for FRITZ!Box"
+                : "connect to FRITZ!Box"}
+            </h4>
+          </div>
+        </hgroup>
       </div>
-    </hgroup>
-    {#if status === Status.failure}
-      <center
-        ><p>
-          <mark
-            >failed to connect to FRITZ!Box with the provided credentials</mark
+      <div class="col-12 col-md-6 col-lg-6 col-xl-6">
+        <hgroup>
+          <div class="message-splash">
+            <p>
+              Set up a hostname (in most cases <i>fritz.box</i> or
+              <i>192.168.178.1</i>), username and password to connect to the
+              FRITZ!Box SmartHome.
+            </p>
+          </div>
+        </hgroup>
+        {#if status === Status.failure}
+          <center
+            ><p>
+              <mark
+                >failed to connect to FRITZ!Box with the provided credentials</mark
+              >
+            </p></center
           >
-        </p></center
-      >
-    {/if}
-    <form on:submit|preventDefault={submitForm} autocomplete="off">
-      <input
-        type="text"
-        name="ip"
-        placeholder="Router address (should be 192.168.179.1 or fritz.box for most FRITZ!Boxes)"
-        required
-        bind:value={host}
-        autocomplete="off"
-      />
-      <input
-        type="text"
-        name="login"
-        placeholder="FRITZ!Box username"
-        required
-        bind:value={user}
-        autocomplete="off"
-      />
-      <input
-        type="password"
-        name="pass"
-        placeholder="Password"
-        required
-        bind:value={pass}
-        autocomplete="off"
-      />
+        {/if}
+        <form
+          class="fritzform"
+          on:submit|preventDefault={submitForm}
+          autocomplete="off"
+        >
+          <input
+            type="text"
+            name="ip"
+            placeholder="Router address (should be 192.168.179.1 or fritz.box for most FRITZ!Boxes)"
+            required
+            bind:value={host}
+            autocomplete="off"
+          />
+          <input
+            type="text"
+            name="login"
+            placeholder="FRITZ!Box username"
+            required
+            bind:value={user}
+            autocomplete="off"
+          />
+          <input
+            type="password"
+            name="pass"
+            placeholder="Password"
+            required
+            bind:value={pass}
+            autocomplete="off"
+          />
 
-      <input
-        type="submit"
-        disabled={!host || !user || !pass}
-        value="Connect FritzGate to FRITZ!Box"
-      />
-    </form>
+          <input
+            type="submit"
+            disabled={!host || !user || !pass}
+            value="Connect FritzGate to FRITZ!Box"
+          />
+        </form>
+      </div>
+    </div>
   </article>
 {/if}
diff --git a/frontend/src/Pages/PageSensors.svelte b/frontend/src/Pages/PageSensors.svelte
@@ -35,7 +35,7 @@
 {:else if sensors.length === 0}
   <WaitBox
     message="trying hard to find sensors nearby"
-    details="Fritzgate uses the Theengs Decoder, which supports over 70 models of temperature sensors."
+    details="FritzGate uses the Theengs Decoder to support over 70 models of temperature sensors."
   />
 {:else}
   <article class="devices-list">

diff --git a/frontend/src/Pages/PageThermostats.svelte b/frontend/src/Pages/PageThermostats.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-  import type {
-    ApiService,
-    DeviceStatus,
-    SensorStatus,
-    StatusData,
+  import {
+    Status,
+    type ApiService,
+    type DeviceStatus,
+    type SensorStatus,
+    type StatusData,
   } from "../interfaces";
   import DevicesList from "../lib/DevicesList.svelte";
   import WaitBox from "../lib/WaitBox.svelte";
-  import { router } from "tinro";
 
   export let api: ApiService;
-  export let baseUrl: string;
   export let data: StatusData;
 
   let thermostats: DeviceStatus[] = [];
@@ -20,12 +19,12 @@
   $: {
     if (data) {
       if (
-        data?.fritz?.status == "FAILURE" ||
-        data?.fritz?.status == "NOT_CONFIGURED" ||
-        data?.fritz?.status == "CONFIGURED" ||
-        data?.fritz?.status == "CONNECTING"
+        data?.fritz?.status == Status.failure ||
+        data?.fritz?.status == Status.unconfigured ||
+        data?.fritz?.status == Status.configured ||
+        data?.fritz?.status == Status.connecting
       ) {
-        router.goto(baseUrl + "/setup");
+        location.hash = "#setup";
       }
       ({ thermostats, sensors } = data);
       timestamp =

diff --git a/frontend/src/app.scss b/frontend/src/app.scss
@@ -25,7 +25,6 @@
   text-align: center;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 2rem;
   max-width: 26em;
 }