reformat frontend and refactor gps mode display

daemon/web/src/lib/components/AnalysisView.svelte

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

daemon/web/src/lib/components/ConfigForm.svelte

@@ -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>
+                        <label for="gps_mode" class="block text-sm font-medium text-gray-700 mb-1"
-                        <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">
+                            >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>
+                            <label
-                            <input id="gps_fixed_latitude" type="number" min="-90" max="90" step="any" required
+                                for="gps_fixed_latitude"
-                                bind:value={config.gps_fixed_latitude} placeholder="e.g. 37.7749"
+                                class="block text-sm font-medium text-gray-700 mb-1"
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" />
+                                >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>
+                            <label
-                            <input id="gps_fixed_longitude" type="number" min="-180" max="180" step="any" required
+                                for="gps_fixed_longitude"
-                                bind:value={config.gps_fixed_longitude} placeholder="e.g. -122.4194"
+                                class="block text-sm font-medium text-gray-700 mb-1"
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue" />
+                                >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}

daemon/web/src/lib/components/ManifestCard.svelte

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

daemon/web/src/lib/utils.svelte.ts

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

daemon/web/src/routes/+page.svelte

@@ -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">
+                    <svg
-                        <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" />
+                        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>