Display a warning icon and N/A instead of "undefinedW" when sensor da…

…ta is missing
Jalle19 · May 22, 2024 · 55a0277 · 55a0277
1 parent 8032aa7
commit 55a0277
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/webif/src/lib/assets/warning.svg b/webif/src/lib/assets/warning.svg
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { formatPf } from '$lib/format'
   import type { PowerSensorData } from '$lib/types'
+  import warning from '$lib/assets/warning.svg'
 
   export let sensorData: PowerSensorData[]
 </script>
@@ -30,7 +31,13 @@
         <td>{data.circuit.phase ?? ''}</td>
         <td>{data.circuit.type}</td>
         <td>{data.circuit.sensor.type}</td>
-        <td class="cell-right-align">{data.power}W</td>
+        <td class="cell-right-align">
+          {#if data.power !== undefined}
+            {data.power}W
+          {:else}
+            <img src={warning} alt="Warning" /> N/A
+          {/if}
+        </td>
         <td class="cell-right-align">
           {#if data.apparentPower }
             {data.apparentPower}VA

diff --git a/webif/src/routes/styles.css b/webif/src/routes/styles.css
@@ -11,6 +11,7 @@
         --color: #aaa;
         --component-background: #3b3b3b;
         --highlight-color: #ff3d00;
+        --warning-color: #bb962f;
     }
 
     nav {
@@ -32,6 +33,10 @@
         border: 0;
     }
 
+    .pure-table td img {
+        vertical-align: bottom;
+    }
+
     .pure-table-striped tr:nth-child(2n-1) td {
         background-color: #2e2e2e;
     }