Update Status, Power now look nice, also shows est refuel time

Status now shows alerts when taking damage
JournalService support more journals
Added enums to frontend, not quite working
Added More examples to Explorer component

Pulsar/WebApp/src/lib/JournalLog.svelte

@@ -18,14 +18,14 @@
 
 <section>
   <div class="title">
-    <h1>Journals</h1>
+    <h1>Live Journals</h1>
   </div>
   <button
     onclick={() => {
       fetch("http://localhost:5000/api/journal");
     }}
   >
-    Refresh (debug)
+    Fetch All (debug)
   </button>
   <ul>
     {#each values as value (value.timestamp + value.event)}

Pulsar/WebApp/src/lib/Status.svelte

@@ -2,18 +2,65 @@
   import { onMount } from "svelte";
   import { statusStore } from "./stores/Status.store";
   import connection from "./stores/Connection.store";
+  import { StatusFlags, StatusFlags2 } from "../types/api/enums";
+  import type JournalBase from "../types/api/JournalBase";
+  import { slide } from "svelte/transition";
 
   const x: string | null = $state(null);
 
+  const last: number[] = $state([]);
+  let timeToMax = $state(0);
+
+  let loading = $state(true);
+
+  let alert: JournalBase[] = $state([]);
+
   onMount(async () => {
     await $connection.start();
 
+    loading = false;
+
     $connection.on("StatusUpdated", (message) => {
       statusStore.update((s) => {
         return { ...s, ...message };
       });
+
+      // only 3 in array
+      if (last.length >= 3) {
+        last.shift();
+      }
+      last.push(message.fuel?.fuelMain ?? 0);
+
+      const change = [];
+      for (let i = last.length - 1; i === 0; i--) {
+        change.push(last[i] - last[i - 1]);
+      }
+
+      const avg = change.reduce((a, b) => a + b, 0) / change.length;
+      const max = 32;
+      if ($statusStore.fuel?.fuelMain) {
+        timeToMax = (max - $statusStore.fuel?.fuelMain) / avg;
+      }
+
       console.log($statusStore);
     });
+
+    $connection.on("JournalUpdated", (message) => {
+      const journals = message as JournalBase[];
+      const targetEvents = ["HullDamage", "UnderAttack"];
+      const events = journals.filter((j) =>
+        targetEvents.find((t) => t.toLowerCase() === j.event.toLowerCase())
+      );
+      if (events.length) {
+        alert = events;
+      }
+    });
+
+    if (!$statusStore.pips) {
+      statusStore.set(
+        await (await fetch("http://localhost:5000/api/status")).json()
+      );
+    }
   });
 </script>
 
@@ -21,14 +68,48 @@
 
 <br />
 
+{#if loading}
+  <h1>LOADING ....</h1>
+{/if}
+
+{#if alert.length}
+  <h1>Alert!</h1>
+
+  {#each alert as a}
+    <input readonly value={JSON.stringify(a)} />
+  {/each}
+  <button onclick={() => (alert = [])}>Clear</button>
+{/if}
+
 <div>
   {#if $statusStore}
-    <span>Fuel%: {(($statusStore.fuel?.fuelMain ?? 0) / 32) * 100}%</span>
     <span
-      >Sys: {$statusStore?.pips?.sys ?? "?"} Eng: {$statusStore?.pips?.eng ??
-        "?"} Wep:
-      {$statusStore?.pips?.wep ?? "?"}</span
+      >Fuel%: {(($statusStore.fuel?.fuelMain ?? 0) / 32) * 100}% est: {timeToMax}s</span
     >
+    <div class="power">
+      <div class="sys">
+        {#each [...Array($statusStore?.pips?.sys ?? 0)] as sys}
+          <div class="pip" transition:slide></div>
+        {/each}
+        <div>{$statusStore?.pips?.sys ?? "?"}</div>
+        <div>Sys</div>
+      </div>
+      <div class="eng">
+        {#each [...Array($statusStore?.pips?.eng ?? 0)] as eng}
+          <div class="pip" transition:slide></div>
+        {/each}
+        <div>{$statusStore?.pips?.eng ?? "?"}</div>
+        <div>Eng</div>
+      </div>
+      <div class="wep">
+        {#each [...Array($statusStore?.pips?.wep ?? 0)] as wep}
+          <div class="pip" transition:slide></div>
+        {/each}
+        <div>{$statusStore?.pips?.wep ?? "?"}</div>
+        <div>Wep</div>
+      </div>
+    </div>
+
     <span>dest?: {$statusStore?.destination?.name}</span>
     <span>gui focus: {$statusStore.guiFocus}</span>
     <span>cargo: {$statusStore.cargo}</span>
@@ -39,9 +120,34 @@
   {/if}
 </div>
 
-<style>
+<style lang="scss">
   div {
     display: flex;
     flex-direction: column;
+    height: 100%;
+    .power {
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      align-items: flex-end;
+      div {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        div.pip {
+          min-width: 2vw;
+          min-height: 1vh;
+          background-color: #d06527;
+          border: 1px solid #96491c;
+        }
+      }
+    }
+  }
+
+  input {
+    width: 100%;
+    background-color: transparent;
+    color: white;
   }
 </style>