2
0
mirror of https://github.com/9ParsonsB/Pulsar.git synced 2025-07-04 01:23:42 -04:00

Add test ui code

This commit is contained in:
2024-05-10 13:06:42 +01:00
parent bcc15de82b
commit bc958e7679
11 changed files with 405 additions and 76 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>