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:
69
Pulsar/WebApp/src/lib/Debug.svelte
Normal file
69
Pulsar/WebApp/src/lib/Debug.svelte
Normal 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>
|
||||
|
68
Pulsar/WebApp/src/lib/MissionStack.svelte
Normal file
68
Pulsar/WebApp/src/lib/MissionStack.svelte
Normal 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>
|
38
Pulsar/WebApp/src/lib/Ship.svelte
Normal file
38
Pulsar/WebApp/src/lib/Ship.svelte
Normal 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>
|
90
Pulsar/WebApp/src/lib/Status.svelte
Normal file
90
Pulsar/WebApp/src/lib/Status.svelte
Normal 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>
|
Reference in New Issue
Block a user