Add test ui code

Pulsar/WebApp/package.json

@@ -13,12 +13,12 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.6.4",
+		"@microsoft/signalr": "^8.0.0",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^8.56.7",
-		"@microsoft/signalr": "^8.0.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"sass": "^1.75.0",
@@ -29,5 +29,9 @@
 		"typescript-eslint": "^7.5.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@sveltestack/svelte-query": "^1.6.0",
+		"axios": "^1.6.8"
+	}
 }

Pulsar/WebApp/src/lib/Debug.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import axios from "axios";
+    import { useQuery, useQueryClient } from "@sveltestack/svelte-query";
+
+    const queryClient = useQueryClient();
+
+    const getData = async () => {
+        const response = await axios.get(
+            "http://localhost:5000/api/journal/",
+        );
+        return response.data;
+    };
+
+    const query = useQuery("journal", getData, { staleTime: Infinity });
+</script>
+
+<h1>Debug</h1>
+
+{#if $query.isLoading}
+    <span>Loading...</span>
+{:else if $query.error}
+    <span>An error has occurred: {$query.error}</span>
+{:else}
+
+    {#each $query.data as row}
+        {#if row.event == 'FSSDiscoveryScan'}
+            <textarea value={JSON.stringify(row, null, 2)}/>
+        {/if}
+    {/each}
+{/if}
+
+<style>
+    table {
+        table-layout: fixed;
+        width: 100%;
+        word-wrap: break-word;
+    }
+
+    thead {
+        background-color: #505050;
+    }
+
+    tbody tr:nth-child(odd) {
+        background-color: #23404c;
+    }
+
+    tbody tr:nth-child(even) {
+        background-color: #282828;
+    }
+
+    th, td {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        width: 200px;
+        text-wrap: wrap;
+    }
+
+    th {
+        text-align: left;
+    }
+
+    textarea {
+        /* width: 100%; */
+        /* height: 100px; */
+    }
+</style>
+

Pulsar/WebApp/src/lib/MissionStack.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import axios from "axios";
+    import { useQuery, useQueryClient } from "@sveltestack/svelte-query";
+
+    const queryClient = useQueryClient();
+
+    const getData = async () => {
+        const response = await axios.get("http://localhost:5000/api/journal/");
+        return response.data;
+    };
+
+    const query = useQuery("journal", getData, { staleTime: Infinity });
+</script>
+
+<h1>Mission Stack</h1>
+
+{#if $query.isLoading}
+    <span>Loading...</span>
+{:else if $query.error}
+    <span>An error has occurred: {$query.error}</span>
+{:else}
+    {#each $query.data as row}
+        {#if row.event == "FSSDiscoveryScan"}
+            <div>
+                <textarea value={JSON.stringify(row, null, 2)} />
+            </div>
+        {/if}
+    {/each}
+{/if}
+
+<style>
+    table {
+        table-layout: fixed;
+        width: 100%;
+        word-wrap: break-word;
+    }
+
+    thead {
+        background-color: #505050;
+    }
+
+    tbody tr:nth-child(odd) {
+        background-color: #23404c;
+    }
+
+    tbody tr:nth-child(even) {
+        background-color: #282828;
+    }
+
+    th,
+    td {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        width: 200px;
+        text-wrap: wrap;
+    }
+
+    th {
+        text-align: left;
+    }
+
+    textarea {
+        /* width: 100%;
+        height: 100px; */
+    }
+</style>

Pulsar/WebApp/src/lib/Ship.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import axios from "axios";
+    import { useQuery, useQueryClient } from "@sveltestack/svelte-query";
+
+    const queryClient = useQueryClient();
+
+    const getData = async () => {
+        const response = await axios.get(
+            "http://localhost:5000/api/modulesinfo/",
+        );
+        return response.data;
+    };
+
+    const query = useQuery("modulesinfo", getData, { staleTime: Infinity });
+</script>
+
+<h1>Ship</h1>
+
+{#if $query.isLoading}
+    <span>Loading...</span>
+{:else if $query.error}
+    <span>An error has occurred: {$query.error}</span>
+{:else}
+    {#each $query.data.modules as row}
+        <div class="module">
+            <div>{row.slot}</div>
+            <div>{row.power}</div>
+            <div>{row.priority}</div>
+        </div>
+    {/each}
+{/if}
+
+<style>
+    .module {
+        display: flex;
+        gap: 10px;
+    }
+</style>

Pulsar/WebApp/src/lib/Status.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import * as signalR from "@microsoft/signalr"
+    import {onMount} from "svelte";
+    import axios from "axios";
+    import { useQueryClient } from "@sveltestack/svelte-query";
+    import { text } from "@sveltejs/kit";
+    let x: string | null = $state(null);
+    let textarea = $state("");
+
+    interface Welcome {
+        flags:       number;
+        flags2:      number;
+        pips:        number[];
+        guiFocus:    number;
+        fuel:        Fuel;
+        cargo:       number;
+        legalState:  string;
+        balance:     number;
+        destination: Destination;
+        timestamp:   Date;
+        event:       string;
+        FireGroup:   number;
+    }
+
+    interface Destination {
+        system: number;
+        body:   number;
+        name:   string;
+    }
+
+    interface Fuel {
+        fuelMain:      number;
+        fuelReservoir: number;
+    }
+
+    const queryClient = useQueryClient();
+
+    let status: Welcome | null = $state(null);
+
+    const connection = new signalR.HubConnectionBuilder()
+        .withUrl("http://172.31.0.111:5000/api/events")
+        .configureLogging(signalR.LogLevel.Information)
+        .build();
+
+    onMount(async () => {
+        connection.onclose(async () => {
+            console.log(
+                "Lost connection to Event Hub. Attempting to reconnect...",
+            );
+            await connection.start();
+        });
+
+        connection.on("StatusUpdated", (message) => {
+            status = message as Welcome;
+            console.log(status);
+        });
+
+        await connection.start();
+    });
+
+    const getStatus = async () => {
+        var response = await axios.get("http://172.31.0.111:5000/api/status/");
+        status = response.data as Welcome;
+        textarea = status.event;
+    };
+</script>
+
+<h1>Status</h1>
+
+<button on:click={getStatus}> GetStatus </button>
+<br />
+
+<div>
+    {#if status}
+        <span>{status.event}</span>
+        <span>{status.pips.join(',')}</span>
+        <span>{status.destination.name}</span>
+        <span>{status.guiFocus}</span>
+        <span>{status.cargo}</span>
+    {:else}
+        <span>No data :(</span>
+    {/if}
+</div>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+</style>

Pulsar/WebApp/src/routes/+layout.svelte

@@ -1,32 +1,104 @@
-<nav>
-    <ul>
-        <li><a href="/">Dashboard</a></li>
-        <li><a href="/ship">Ship</a></li>
-        <li><a href="/botany">Botanist</a></li>
-        <li><a href="/explorer">Explorer</a></li>
-        <li><a href="/options">Options</a></li>
-    </ul>
-</nav>
+<script>
+    import {
+        QueryClient,
+        QueryClientProvider,
+    } from "@sveltestack/svelte-query";
+    const queryClient = new QueryClient();
+</script>
 
-<slot />
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Dashboard</a></li>
+            <li><a href="/settings">Settings</a></li>
+        </ul>
+    </nav>
+</header>
+
+<QueryClientProvider client={queryClient}>
+    <main>
+        <slot />
+    </main>
+</QueryClientProvider>
 
 <style>
-    ul {
-        display: flex;
-        list-style-type: none;
-    }
-    li {
-        padding: 1%;
+    :root {
+        --background-color: #0d0302;
+        /* #290d00; */
+        --header-color: #202225;
+        --headings-color: #ffffff;
+        --font-color: #eeeeee;
+        --border-color: #141414;
+        --line-color: #ffffff;
+        --link-color: #d06527;
+        --link-color-hover: #000000;
     }
 
     :global(body) {
-        background-color: black;
-        color: white;
-        [href] {
-            color: red;
-            &:visited {
-                color: aqua;
-            }
-        }
+        background-color: var(--background-color);
+        color: var(--font-color);
+        font-family: "Open Sans", sans-serif;
+        font-size: 1rem;
+        box-sizing: border-box;
+        margin: 0px;
+        line-height: 1.6;
     }
-</style>
+
+    :global(h1) {
+        margin: 0;
+    }
+
+    header {
+        margin-top: 10px;
+        margin-bottom: 20px;
+    }
+
+    nav {
+        border-bottom: 3px solid #d66325;
+        border-top: 3px solid #d66325;
+        max-width: 1600px;
+        margin: 0 auto;
+    }
+
+    ul {
+        display: flex;
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+        gap: 10px;
+    }
+
+    li {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        width: 200px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        background-color: #3c1e05;
+        font-weight: bold;
+        font-size: 1.125rem;
+        text-align: center;
+    }
+
+    li:hover {
+        background-color: #ef7d15;
+    }
+
+    li:hover a {
+        color: var(--link-color-hover);
+    }
+
+    a {
+        display: block;
+        width: 100%;
+        color: var(--link-color);
+        text-decoration: none;
+    }
+
+    main {
+        max-width: 1600px;
+        margin: 0 auto;
+    }
+</style>

Pulsar/WebApp/src/routes/+page.svelte

@@ -1,56 +1,44 @@
 <script lang="ts">
-    import * as signalR from "@microsoft/signalr"
-    import {onMount} from "svelte";
-    let x: string | null = $state(null);
-    let textarea = $state("");
-
-    const connection = new signalR.HubConnectionBuilder()
-        .withUrl("http://localhost:5000/api/events")
-        .configureLogging(signalR.LogLevel.Information)
-        .build();
-
-    onMount(async () => {
-
-        connection.onclose(async () => {
-            console.log("Lost connection to Event Hub. Attempting to reconnect...");
-            await connection.start();
-        });
-
-        connection.on("StatusUpdated", (message) => {
-            console.log('we did it!');
-            console.log(message);
-            textarea += JSON.stringify(message) + "\n"
-        });
-
-        await connection.start();
-    })
-
-    const getStatus = async () => {
-        var response = await fetch("http://localhost:5000/api/status", {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-                "Accept": "application/json"
-            }
-        });
-
-        if (response.ok)
-        {
-            const data = await response.text();
-            console.log(data);
-            x = data;
-        }
-
-        console.log(response);
-    }
+    import Status from "$lib/Status.svelte";
+    import Ship from "$lib/Ship.svelte";
+    import Debug from "$lib/Debug.svelte";
+    import MissionStack from "$lib/MissionStack.svelte";
 </script>
 
-<h1>Welcome to Pulsar</h1>
+<section>
+    <div>
+        <Status />
+    </div>
+    <div>
+        <!-- <Ship /> -->
+    </div>
+    <div>
+        <!-- <MissionStack /> -->
+    </div>
+    <!--<div>
+        <Debug />
+    </div>-->
+</section>
 
-<button on:click={getStatus}> GetStatus </button>
+<style>
+    div {
+        border: 2px solid #d66325;
+    }
 
-<span> {x} </span>
+    section {
+        display: flex;
+        flex-wrap: wrap;
+        /* display: grid; */
+        /* grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); */
+        gap: 20px;
 
-<br/>
+        /* display: flex; */
+        /* flex-direction: column; */
+        /* gap: 10px; */
+    }
 
-<textarea bind:value={textarea}></textarea>
+    div {
+        flex: 50%;
+        padding: 5px;
+    }
+</style>