mirror of
https://github.com/9ParsonsB/Pulsar.git
synced 2025-07-01 16:33:43 -04:00
Update Journal File Handling
Now Correctly deserializes Journal events
This commit is contained in:
10
Pulsar/WebApp/.vscode/settings.json
vendored
Normal file
10
Pulsar/WebApp/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSaveMode": "file",
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "biomejs.biome"
|
||||
},
|
||||
"[svelte]": {
|
||||
"editor.defaultFormatter": "svelte.svelte-vscode"
|
||||
}
|
||||
}
|
||||
@ -1,146 +1,66 @@
|
||||
<script lang="ts">
|
||||
import connection from "./stores/Connection.store";
|
||||
import type JournalBase from "../types/api/JournalBase";
|
||||
import connection from "./stores/Connection.store";
|
||||
|
||||
let value = $state("");
|
||||
const values: JournalBase[] = $state([]);
|
||||
|
||||
$connection.on("JournalUpdated", (journals) => {
|
||||
console.log(journals);
|
||||
value += `${JSON.stringify(journals)}\n`;
|
||||
$connection.on("JournalUpdated", (journals) => {
|
||||
console.log(journals);
|
||||
values.push(...(journals as JournalBase[]));
|
||||
values.sort((a, b) => {
|
||||
// sort based on timestamp
|
||||
if (a.timestamp < b.timestamp) return 1;
|
||||
if (a.timestamp > b.timestamp) return -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
let data: any[] = [{}, {}, {}, {}, {}];
|
||||
});
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div class="title">
|
||||
<h1>Journals</h1>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
{#each data as row}
|
||||
<div class="group">
|
||||
<div class="summary">
|
||||
<span>Body Name: Farseer Inc</span>
|
||||
<div>
|
||||
<span>Signals: 1</span>
|
||||
<span>Base Value: 11111</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="details">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flags</th>
|
||||
<th>Genus</th>
|
||||
<th>Species</th>
|
||||
<th>Seen</th>
|
||||
<th>Samples</th>
|
||||
<th>Type</th>
|
||||
<th>Possible Variants</th>
|
||||
<th>Base Value</th>
|
||||
<th>Distance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as row}
|
||||
<tr>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>500m</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="title">
|
||||
<h1>Journals</h1>
|
||||
</div>
|
||||
<button
|
||||
onclick={() => {
|
||||
fetch("http://localhost:5000/api/journal");
|
||||
}}
|
||||
>
|
||||
Refresh (debug)
|
||||
</button>
|
||||
<ul>
|
||||
{#each values as value (value.timestamp + value.event)}
|
||||
<li>
|
||||
<span class="time">{value.timestamp}</span>
|
||||
<span class="event">{value.event}</span>
|
||||
<input readonly value={JSON.stringify(value)} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
margin-top: 5px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
<style lang="scss">
|
||||
section {
|
||||
margin-top: 5px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
background-color: #c06400;
|
||||
color: var(--font-color-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.summary span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.summary div {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.details {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
table-layout: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #c06400;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #301900;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: #170c00;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
background-color: rgba(79, 42, 0, 0.85);
|
||||
}
|
||||
|
||||
th {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
text-wrap: wrap;
|
||||
text-align: left;
|
||||
color: var(--font-color-2);
|
||||
}
|
||||
|
||||
th:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
1
Pulsar/WebApp/src/lib/JournalService.ts
Normal file
1
Pulsar/WebApp/src/lib/JournalService.ts
Normal file
@ -0,0 +1 @@
|
||||
export default class JournalService {}
|
||||
@ -1,46 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { statusStore } from "./stores/Status.store";
|
||||
import connection from "./stores/Connection.store";
|
||||
import { onMount } from "svelte";
|
||||
import { statusStore } from "./stores/Status.store";
|
||||
import connection from "./stores/Connection.store";
|
||||
|
||||
const x: string | null = $state(null);
|
||||
const x: string | null = $state(null);
|
||||
|
||||
onMount(async () => {
|
||||
await $connection.start();
|
||||
onMount(async () => {
|
||||
await $connection.start();
|
||||
|
||||
$connection.on("StatusUpdated", (message) => {
|
||||
statusStore.update((s) => {
|
||||
return { ...s, ...message };
|
||||
});
|
||||
console.log($statusStore);
|
||||
});
|
||||
$connection.on("StatusUpdated", (message) => {
|
||||
statusStore.update((s) => {
|
||||
return { ...s, ...message };
|
||||
});
|
||||
console.log($statusStore);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>Status</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
{#if $statusStore}
|
||||
<span>{$statusStore.event}</span>
|
||||
<span>{(($statusStore.fuel?.fuelMain ?? 0) / 32) * 100}%</span>
|
||||
<span>{$statusStore?.pips?.join(',')}</span>
|
||||
<span>{$statusStore?.destination?.name}</span>
|
||||
<span>{$statusStore.guiFocus}</span>
|
||||
<span>{$statusStore.cargo}</span>
|
||||
{:else}
|
||||
<span>No data :(</span>
|
||||
{/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
|
||||
>
|
||||
<span>dest?: {$statusStore?.destination?.name}</span>
|
||||
<span>gui focus: {$statusStore.guiFocus}</span>
|
||||
<span>cargo: {$statusStore.cargo}</span>
|
||||
<span>flag1: {$statusStore.flags}</span>
|
||||
<span>flag2: {$statusStore.flags2}</span>
|
||||
{:else}
|
||||
<span>No data :(</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,33 +1,37 @@
|
||||
<script lang="ts">
|
||||
import Status from "$lib/Status.svelte";
|
||||
import Ship from "$lib/Ship.svelte";
|
||||
import Debug from "$lib/Debug.svelte";
|
||||
import MissionStack from "$lib/MissionStack.svelte";
|
||||
import JournalLog from "$lib/JournalLog.svelte";
|
||||
import Status from "$lib/Status.svelte";
|
||||
import Ship from "$lib/Ship.svelte";
|
||||
import Debug from "$lib/Debug.svelte";
|
||||
import MissionStack from "$lib/MissionStack.svelte";
|
||||
import JournalLog from "$lib/JournalLog.svelte";
|
||||
import Explorer from "./explorer/Explorer.svelte";
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<Status />
|
||||
</div>
|
||||
<div>
|
||||
<JournalLog />
|
||||
</div>
|
||||
<div>
|
||||
<Status />
|
||||
</div>
|
||||
<div>
|
||||
<Explorer />
|
||||
</div>
|
||||
<div>
|
||||
<JournalLog />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
div {
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
div {
|
||||
flex: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
133
Pulsar/WebApp/src/routes/explorer/Explorer.svelte
Normal file
133
Pulsar/WebApp/src/routes/explorer/Explorer.svelte
Normal file
@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
const data: unknown[] = [{}, {}, {}, {}];
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div class="title">
|
||||
<h1>Explorer</h1>
|
||||
</div>
|
||||
<div class="box">
|
||||
{#each data as row}
|
||||
<div class="group">
|
||||
<div class="summary">
|
||||
<span>Body Name: Farseer Inc</span>
|
||||
<div>
|
||||
<span>Signals: 1</span>
|
||||
<span>Base Value: 11111</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="details">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flags</th>
|
||||
<th>Genus</th>
|
||||
<th>Species</th>
|
||||
<th>Seen</th>
|
||||
<th>Samples</th>
|
||||
<th>Type</th>
|
||||
<th>Possible Variants</th>
|
||||
<th>Base Value</th>
|
||||
<th>Distance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as row}
|
||||
<tr>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>Test</td>
|
||||
<td>500m</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
margin-top: 5px;
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
background-color: #c06400;
|
||||
color: var(--font-color-2);
|
||||
font-weight: bold;
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
table-layout: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #c06400;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
background-color: #301900;
|
||||
color: #cccccc;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: #170c00;
|
||||
color: #cccccc;
|
||||
}
|
||||
tr:hover td {
|
||||
background-color: rgba(79, 42, 0, 0.85);
|
||||
}
|
||||
th {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
text-wrap: wrap;
|
||||
text-align: left;
|
||||
color: var(--font-color-2);
|
||||
}
|
||||
}
|
||||
|
||||
th:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,17 @@
|
||||
import type Destination from "./Destination";
|
||||
import type Fuel from "./Fuel";
|
||||
import type JournalBase from "./JournalBase";
|
||||
|
||||
export default interface Status {
|
||||
export default interface Status extends JournalBase {
|
||||
event: "Status";
|
||||
flags: number;
|
||||
flags2: number;
|
||||
pips: number[];
|
||||
pips: { eng: number; sys: number; wep: number };
|
||||
guiFocus: number;
|
||||
fuel: Fuel;
|
||||
cargo: number;
|
||||
legalState: string;
|
||||
balance: number;
|
||||
destination: Destination;
|
||||
timestamp: Date;
|
||||
event: string;
|
||||
FireGroup: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user