From 55a02778dabe089935e0f85dbbea7c8a1f1c6aa2 Mon Sep 17 00:00:00 2001
From: Sam Stenvall <sam.stenvall@nitor.com>
Date: Wed, 22 May 2024 10:09:47 +0300
Subject: [PATCH] Display a warning icon and N/A instead of "undefinedW" when
 sensor data is missing

---
 webif/src/lib/assets/warning.svg | 1 +
 webif/src/routes/Circuits.svelte | 9 ++++++++-
 webif/src/routes/styles.css      | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 webif/src/lib/assets/warning.svg

diff --git a/webif/src/lib/assets/warning.svg b/webif/src/lib/assets/warning.svg
new file mode 100644
index 0000000..e7e9788
--- /dev/null
+++ b/webif/src/lib/assets/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BB962FFF"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
\ No newline at end of file
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
index bdb69ba..c42cf09 100644
--- 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
index 902e6f4..91320a1 100644
--- 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;
     }