frontend refactor

packages/backend/src/tracks/import/track-import.processor.ts

@@ -95,7 +95,7 @@ export class TrackImportProcessor extends WorkerHost {
     const { stdout, stderr } = await runCmd("gopro2gpx", [
       "--skip-dop",
       "--dop-limit",
-      "500",
+      "1000",
       "-s",
       filePath,
       filePath,

packages/frontend/package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/node": "^22.5.5",
+		"geojson": "^0.5.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
@@ -27,6 +28,7 @@
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"@fortawesome/svelte-fontawesome": "^0.2.2",
 		"@turf/bbox": "^7.1.0",
+		"@turf/circle": "^7.1.0",
 		"@turf/point-to-line-distance": "^7.1.0",
 		"devalue": "^5.0.0",
 		"just-flush": "^2.3.0",

packages/frontend/src/lib/components/DateFilter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte"
 
-  export let value = new Date()
+  export let value: number = 0
 
   let inputElement: HTMLInputElement
 
@@ -15,20 +15,20 @@
 
   function updateSelectedDate(newValue: string) {
     if (newValue === "") return
-    value = new Date(newValue)
+    value = new Date(newValue).getTime()
   }
 
-  $: inputElement && (inputElement.value = toLocalISOString(value))
+  $: inputElement && (inputElement.value = toLocalISOString(new Date(value)))
 
   onMount(() => {
-    const initialValue = toLocalISOString(value)
+    const initialValue = toLocalISOString(new Date(value))
     inputElement.value = initialValue
-    inputElement.max = initialValue
   })
 </script>
 
 <input
   {...$$restProps}
   bind:this={inputElement}
   type="datetime-local"
-  on:change={(e) => updateSelectedDate(e.currentTarget.value)} />
+  on:change={(e) => updateSelectedDate(e.currentTarget.value)}
+/>

packages/frontend/src/lib/components/SequenceViewer.svelte

@@ -41,18 +41,30 @@
 </script>
 
 <div class="sequence-viewer" transition:fly={{ duration: 500, y: 500 }}>
-  <button class="close" on:click={() => dispatch("close")}>
+  <button
+    title="Close Image Viewer"
+    class="close"
+    on:click={() => dispatch("close")}
+  >
     <FontAwesomeIcon icon={faXmark} />
   </button>
 
   <div class="controls">
-    <button disabled={!hasPrevious} on:click={() => dispatch("previous")}>
+    <button
+      title="Previous Image"
+      disabled={!hasPrevious}
+      on:click={() => dispatch("previous")}
+    >
       <FontAwesomeIcon icon={faArrowLeft} />
     </button>
-    <button on:click={downloadImage}>
+    <button title="Download Image" on:click={downloadImage}>
       <FontAwesomeIcon icon={faDownload} />
     </button>
-    <button disabled={!hasNext} on:click={() => dispatch("next")}>
+    <button
+      title="Next Image"
+      disabled={!hasNext}
+      on:click={() => dispatch("next")}
+    >
       <FontAwesomeIcon icon={faArrowRight} />
     </button>
   </div>

packages/frontend/src/lib/components/TrackExplorer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" context="module">
+  export interface TrackProps {
+    name: string
+    captureDate: number
+    filePath: string
+    fileHash: string
+    hasImages: boolean
+  }
+</script>
+
+<script lang="ts">
+  import type { FeatureCollection, Feature, LineString } from "geojson"
+  import TrackExplorerMap from "./TrackExplorerMap.svelte"
+  import { onMount } from "svelte"
+
+  let tracks: FeatureCollection<LineString, TrackProps> = {
+    type: "FeatureCollection",
+    features: [],
+  }
+
+  let selectedTrack: Feature<LineString, TrackProps> | null = null
+
+  const filters: { [key: string]: any } = {
+    start: new Date(0),
+    end: new Date(),
+  }
+
+  async function load() {
+    const params = new URLSearchParams({
+      format: "geojson",
+      order: "ASC",
+    }).toString()
+
+    const response = await fetch(`/api/tracks?${params}`)
+    const resp = (await response.json()) as FeatureCollection<
+      LineString,
+      TrackProps
+    >
+
+    resp.features = resp.features.filter(
+      (track) => track.geometry.coordinates.length > 1
+    )
+
+    resp.features.forEach((track) => {
+      track.properties.captureDate = new Date(
+        track.properties.captureDate
+      ).getTime()
+    })
+
+    tracks = resp
+  }
+
+  onMount(() => {
+    load()
+  })
+</script>
+
+<TrackExplorerMap {tracks} bind:selectedTrack />

packages/frontend/src/lib/components/TrackExplorerMap.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { FeatureCollection, Feature, LineString } from "geojson"
+  import type { TrackProps } from "./TrackExplorer.svelte"
+  import {
+    MapLibre,
+    Control,
+    ControlButton,
+    ControlGroup,
+  } from "svelte-maplibre"
+  import TrackSelector from "./TrackSelector.svelte"
+  import bbox from "@turf/bbox"
+  import TrackViewer from "./TrackViewer.svelte"
+  import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome"
+  import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
+  import { fly } from "svelte/transition"
+
+  export let tracks: FeatureCollection<LineString, TrackProps>
+  export let selectedTrack: Feature<LineString, TrackProps> | null = null
+
+  let map: maplibregl.Map
+  let initialZoom = true
+
+  function fitToTrackBounds() {
+    if (tracks.features.length === 0 && selectedTrack === null) {
+      return
+    }
+
+    const boundingBox = bbox(selectedTrack ?? tracks)
+    map.fitBounds(boundingBox as any, {
+      padding: 100,
+      duration: initialZoom ? 0 : 1000,
+    })
+
+    initialZoom = false
+  }
+
+  $: map && (tracks || selectedTrack) && fitToTrackBounds()
+</script>
+
+<MapLibre
+  bind:map
+  style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+  class="full-map"
+>
+  {#if selectedTrack === null}
+    <TrackSelector {tracks} bind:selectedTrack />
+  {:else}
+    <Control position="top-left">
+      <div transition:fly={{ x: "-100%" }}>
+        <ControlGroup>
+          <ControlButton on:click={() => (selectedTrack = null)}>
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </ControlButton>
+        </ControlGroup>
+      </div>
+    </Control>
+
+    <TrackViewer track={selectedTrack} />
+  {/if}
+
+  <slot />
+</MapLibre>
+
+<style>
+  :global(.full-map) {
+    height: 100%;
+  }
+</style>

packages/frontend/src/lib/components/TrackFilterControl.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import DateFilter from "./DateFilter.svelte"
+
+  export let filters: { [key: string]: any } = {
+    start: 0,
+    end: new Date().getTime(),
+  }
+
+  function loadLastMonth() {
+    const now = new Date()
+    filters.start = now.setDate(now.getDate() - 30)
+    filters.end = new Date().getTime()
+  }
+</script>
+
+<div class="input-group">
+  <label for="from-date">From</label>
+  <DateFilter id="from-date" bind:value={filters.start} />
+</div>
+
+<div class="input-group">
+  <label for="to-date">To</label>
+  <DateFilter id="to-date" bind:value={filters.end} />
+</div>
+
+<div class="input-group">
+  <button on:click={loadLastMonth}>Preset: Last 30 Days</button>
+</div>
+
+<style>
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.5em;
+  }
+
+  .input-group button {
+    background-color: revert !important;
+  }
+
+  label {
+    font-weight: bold;
+  }
+</style>