reformat frontend and refactor gps mode display

This commit is contained in:
Markus Unterwaditzer
2026-05-15 21:28:58 +02:00
committed by Will Greenberg
parent 3aa3ce89c8
commit 0033b762d9
5 changed files with 88 additions and 21 deletions

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { type ReportMetadata } from '$lib/analysis.svelte';
import type { ManifestEntry } from '$lib/manifest.svelte';
import { GpsMode } from '$lib/utils.svelte';
import { gpsModeLabel } from '$lib/utils.svelte';
import { AnalysisManager } from '$lib/analysisManager.svelte';
import AnalysisTable from './AnalysisTable.svelte';
import ReAnalyzeButton from './ReAnalyzeButton.svelte';
@@ -73,7 +73,7 @@
{/if}
<p>
<b>GPS Mode:</b>
{(entry.gps_mode ?? GpsMode.Disabled) === GpsMode.Disabled ? 'Disabled' : entry.gps_mode === GpsMode.Fixed ? 'Fixed coordinates' : 'API endpoint'}
{gpsModeLabel(entry.gps_mode)}
</p>
</div>
{#if metadata && metadata.analyzers}

View File

@@ -784,15 +784,22 @@
<div class="border-t pt-4 mt-6 space-y-3">
<h3 class="text-lg font-semibold text-gray-800 mb-4">GPS Settings</h3>
<div>
<label for="gps_mode" class="block text-sm font-medium text-gray-700 mb-1">GPS Mode</label>
<select id="gps_mode" bind:value={config.gps_mode} class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue">
<label for="gps_mode" class="block text-sm font-medium text-gray-700 mb-1"
>GPS Mode</label
>
<select
id="gps_mode"
bind:value={config.gps_mode}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
>
<option value={GpsMode.Disabled}>Disabled</option>
<option value={GpsMode.Fixed}>Fixed coordinates</option>
<option value={GpsMode.Api}>API endpoint</option>
</select>
<p class="text-xs text-gray-500 mt-1">
{#if config.gps_mode === GpsMode.Api}
POST latitude, longitude, and timestamp to <code>/api/gps</code> from any device on the network.
POST latitude, longitude, and timestamp to <code>/api/gps</code> from
any device on the network.
{:else if config.gps_mode === GpsMode.Fixed}
GPS coordinates are fixed to the values below.
{:else}
@@ -802,17 +809,41 @@
</div>
{#if config.gps_mode === GpsMode.Fixed}
<div>
<label for="gps_fixed_latitude" class="block text-sm font-medium text-gray-700 mb-1">Fixed Latitude</label>
<input id="gps_fixed_latitude" type="number" min="-90" max="90" step="any" required
bind:value={config.gps_fixed_latitude} placeholder="e.g. 37.7749"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" />
<label
for="gps_fixed_latitude"
class="block text-sm font-medium text-gray-700 mb-1"
>Fixed Latitude</label
>
<input
id="gps_fixed_latitude"
type="number"
min="-90"
max="90"
step="any"
required
bind:value={config.gps_fixed_latitude}
placeholder="e.g. 37.7749"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
/>
<p class="text-xs text-gray-500 mt-1">Decimal degrees, -90 to 90</p>
</div>
<div>
<label for="gps_fixed_longitude" class="block text-sm font-medium text-gray-700 mb-1">Fixed Longitude</label>
<input id="gps_fixed_longitude" type="number" min="-180" max="180" step="any" required
bind:value={config.gps_fixed_longitude} placeholder="e.g. -122.4194"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" />
<label
for="gps_fixed_longitude"
class="block text-sm font-medium text-gray-700 mb-1"
>Fixed Longitude</label
>
<input
id="gps_fixed_longitude"
type="number"
min="-180"
max="180"
step="any"
required
bind:value={config.gps_fixed_longitude}
placeholder="e.g. -122.4194"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
/>
<p class="text-xs text-gray-500 mt-1">Decimal degrees, -180 to 180</p>
</div>
{/if}

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { ManifestEntry } from '$lib/manifest.svelte';
import { GpsMode } from '$lib/utils.svelte';
import { gpsModeLabel } from '$lib/utils.svelte';
import { AnalysisManager } from '$lib/analysisManager.svelte';
import DownloadLink from '$lib/components/DownloadLink.svelte';
import DeleteButton from '$lib/components/DeleteButton.svelte';
@@ -89,7 +89,7 @@
{/if}
{#if entry.gps_mode !== undefined}
<div class="text-sm text-gray-500">
GPS: {entry.gps_mode === GpsMode.Disabled ? 'Disabled' : entry.gps_mode === GpsMode.Fixed ? 'Fixed coordinates' : 'API endpoint'}
GPS: {gpsModeLabel(entry.gps_mode)}
</div>
{/if}
<div class="flex flex-row justify-between lg:justify-end gap-1 mt-2 overflow-x-auto">

View File

@@ -34,6 +34,16 @@ export enum GpsMode {
Api = 2,
}
export function gpsModeLabel(mode: GpsMode | undefined | null): string {
switch (mode) {
case GpsMode.Fixed:
return 'Fixed coordinates';
case GpsMode.Api:
return 'API endpoint';
default:
return 'Disabled';
}
}
export interface Config {
device: string;

View File

@@ -1,6 +1,13 @@
<script lang="ts">
import { ManifestEntry } from '$lib/manifest.svelte';
import { get_manifest, get_system_stats, get_gps, get_config, GpsMode, type GpsData } from '$lib/utils.svelte';
import {
get_manifest,
get_system_stats,
get_gps,
get_config,
GpsMode,
type GpsData,
} from '$lib/utils.svelte';
import ManifestTable from '$lib/components/ManifestTable.svelte';
import Card from '$lib/components/ManifestCard.svelte';
import type { SystemStats } from '$lib/systemStats';
@@ -289,15 +296,32 @@
<SystemStatsTable stats={system_stats!} />
</div>
{#if gps_mode !== GpsMode.Disabled}
<div class="bg-white border border-gray-200 drop-shadow rounded-md p-4 flex flex-col gap-2">
<div
class="bg-white border border-gray-200 drop-shadow rounded-md p-4 flex flex-col gap-2"
>
<span class="text-lg font-semibold flex flex-row items-center gap-2">
<svg class="w-5 h-5 text-rayhunter-blue" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z" clip-rule="evenodd" />
<svg
class="w-5 h-5 text-rayhunter-blue"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
clip-rule="evenodd"
/>
</svg>
GPS Status
</span>
{#if gps_data}
{@const gps_date_formatter = new Intl.DateTimeFormat(undefined, { timeStyle: 'long', dateStyle: 'short' })}
{@const gps_date_formatter = new Intl.DateTimeFormat(undefined, {
timeStyle: 'long',
dateStyle: 'short',
})}
<table class="w-full text-sm">
<tbody>
<tr class="border-b border-gray-100">
@@ -312,7 +336,9 @@
<td class="py-1 pr-4 text-gray-500 font-medium">GPS Timestamp</td>
<td class="py-1 font-mono">
{gps_data.timestamp > 0
? gps_date_formatter.format(new Date(gps_data.timestamp * 1000))
? gps_date_formatter.format(
new Date(gps_data.timestamp * 1000)
)
: 'Fixed'}
</td>
</tr>