From 0b968f1c524c0071d908be929085baf3c95bd226 Mon Sep 17 00:00:00 2001
From: TJ Horner <me@tjhorner.com>
Date: Sun, 15 Sep 2024 18:20:58 -0700
Subject: [PATCH] ok

---
 packages/backend/.vscode/settings.json        |   5 +-
 .../backend/src/{lib => tracks}/gpx-smooth.ts |   0
 .../src/tracks/track-import.processor.ts      |   2 +-
 packages/backend/src/tracks/track.entity.ts   |   2 +-
 .../backend/src/tracks/tracks.controller.ts   |  11 +-
 packages/backend/src/tracks/tracks.service.ts |   2 +-
 packages/frontend/src/app.css                 |   7 +-
 .../src/lib/components/RecentImports.svelte   |  77 +++++++
 .../src/lib/components/TrackMap.svelte        | 194 +++++++++++-------
 packages/frontend/src/routes/+page.svelte     |  22 +-
 10 files changed, 239 insertions(+), 83 deletions(-)
 rename packages/backend/src/{lib => tracks}/gpx-smooth.ts (100%)
 create mode 100644 packages/frontend/src/lib/components/RecentImports.svelte

diff --git a/packages/backend/.vscode/settings.json b/packages/backend/.vscode/settings.json
index 3662b37..1098673 100644
--- a/packages/backend/.vscode/settings.json
+++ b/packages/backend/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
\ No newline at end of file
diff --git a/packages/backend/src/lib/gpx-smooth.ts b/packages/backend/src/tracks/gpx-smooth.ts
similarity index 100%
rename from packages/backend/src/lib/gpx-smooth.ts
rename to packages/backend/src/tracks/gpx-smooth.ts
diff --git a/packages/backend/src/tracks/track-import.processor.ts b/packages/backend/src/tracks/track-import.processor.ts
index 0b0dfd7..b45a3e2 100644
--- a/packages/backend/src/tracks/track-import.processor.ts
+++ b/packages/backend/src/tracks/track-import.processor.ts
@@ -9,7 +9,7 @@ import * as crypto from "crypto"
 import * as fs from "fs/promises"
 import * as path from "path"
 import { forwardRef, Inject } from "@nestjs/common"
-import { smoothTrackSegment } from "src/lib/gpx-smooth"
+import { smoothTrackSegment } from "src/tracks/gpx-smooth"
 
 export interface TrackImportPayload {
   filePath: string
diff --git a/packages/backend/src/tracks/track.entity.ts b/packages/backend/src/tracks/track.entity.ts
index b6f16ca..be52486 100644
--- a/packages/backend/src/tracks/track.entity.ts
+++ b/packages/backend/src/tracks/track.entity.ts
@@ -29,8 +29,8 @@ export class Track {
   toGeoJSON(): Feature {
     return {
       type: "Feature",
+      id: this.id,
       properties: {
-        id: this.id,
         name: this.name,
         captureDate: this.captureDate,
         filePath: this.filePath,
diff --git a/packages/backend/src/tracks/tracks.controller.ts b/packages/backend/src/tracks/tracks.controller.ts
index b1f2a35..b667d24 100644
--- a/packages/backend/src/tracks/tracks.controller.ts
+++ b/packages/backend/src/tracks/tracks.controller.ts
@@ -1,4 +1,11 @@
-import { Body, Controller, Get, Post, Query } from "@nestjs/common"
+import {
+  Body,
+  Controller,
+  Get,
+  ParseIntPipe,
+  Post,
+  Query,
+} from "@nestjs/common"
 import { TracksService } from "./tracks.service"
 import { JobType } from "bullmq"
 
@@ -29,7 +36,7 @@ export class TracksController {
 
   @Get("imports")
   async listImports(
-    @Query("limit") limit: number = 10,
+    @Query("limit", ParseIntPipe) limit: number = 10,
     @Query("state") state?: JobType,
   ) {
     const jobs = await this.tracksService.listImports(limit, state)
diff --git a/packages/backend/src/tracks/tracks.service.ts b/packages/backend/src/tracks/tracks.service.ts
index 68d61dd..c3e1d4e 100644
--- a/packages/backend/src/tracks/tracks.service.ts
+++ b/packages/backend/src/tracks/tracks.service.ts
@@ -68,7 +68,7 @@ export class TracksService {
     return this.trackImportQueue.getJobs(
       state ?? ["wait", "waiting", "active", "completed", "failed", "paused"],
       0,
-      limit,
+      limit - 1,
     )
   }
 
diff --git a/packages/frontend/src/app.css b/packages/frontend/src/app.css
index d434c0e..122d50e 100644
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -1,6 +1,9 @@
-body, html {
+body,
+html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
-}
\ No newline at end of file
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+}
diff --git a/packages/frontend/src/lib/components/RecentImports.svelte b/packages/frontend/src/lib/components/RecentImports.svelte
new file mode 100644
index 0000000..503f12d
--- /dev/null
+++ b/packages/frontend/src/lib/components/RecentImports.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  let imports: Promise<Import[]> = loadImports()
+
+  interface Import {
+    id: string
+    name: string
+    finishedAt: string
+  }
+
+  async function loadImports() {
+    const response = await fetch("/api/tracks/imports?state=completed&limit=25")
+    return (await response.json()) as Import[]
+  }
+</script>
+
+<div class="container">
+  <h3>Recently Imported</h3>
+
+  {#await imports}
+    <p>Loading...</p>
+  {:then imports}
+    {#if imports.length === 0}
+      <p>No imports found.</p>
+    {:else}
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Finished At</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each imports as trackImport}
+            <tr>
+              <td>{trackImport.name}</td>
+              <td>{new Date(trackImport.finishedAt).toLocaleString()}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    {/if}
+  {/await}
+</div>
+
+<style>
+  .container {
+    padding: 1rem;
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+
+  tr:hover {
+    background-color: #f5f5f5;
+  }
+</style>
diff --git a/packages/frontend/src/lib/components/TrackMap.svelte b/packages/frontend/src/lib/components/TrackMap.svelte
index 242456a..b9c5749 100644
--- a/packages/frontend/src/lib/components/TrackMap.svelte
+++ b/packages/frontend/src/lib/components/TrackMap.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
   import bbox from "@turf/bbox"
-  import type { FeatureCollection } from "geojson"
+  import type { Feature, FeatureCollection } from "geojson"
   import { onMount } from "svelte"
-  import { MapLibre, GeoJSON, LineLayer, Control, Popup } from "svelte-maplibre"
+  import {
+    MapLibre,
+    GeoJSON,
+    LineLayer,
+    Control,
+    Popup,
+    type LayerClickInfo,
+  } from "svelte-maplibre"
   import flush from "just-flush"
   import DateFilter from "./DateFilter.svelte"
 
-  let selectedTrack: any
+  let selectedTrack: Feature | undefined
 
   let minDate: number = Number.MAX_SAFE_INTEGER
   let maxDate: number = 0
@@ -14,19 +21,19 @@
   let map: maplibregl.Map
   let data: FeatureCollection = {
     type: "FeatureCollection",
-    features: []
+    features: [],
   }
 
   const filters: { [key: string]: any } = {
     start: new Date(0),
-    end: new Date()
+    end: new Date(),
   }
 
   function serializeFilters() {
     return {
       start: filters.start.toISOString(),
       end: filters.end.toISOString(),
-      bbox: map.getBounds().toArray().flat()
+      bbox: map.getBounds().toArray().flat(),
     }
   }
 
@@ -40,19 +47,23 @@
   async function load() {
     const params = new URLSearchParams({
       format: "geojson",
-      ...flush(serializeFilters())
+      ...flush(serializeFilters()),
     }).toString()
 
     const response = await fetch(`/api/tracks?${params}`)
-    const tracks = await response.json() as FeatureCollection<any, any>
+    const tracks = (await response.json()) as FeatureCollection<any, any>
 
-    tracks.features = tracks.features.filter((track) => track.geometry.coordinates.length > 1)
+    tracks.features = tracks.features.filter(
+      (track) => track.geometry.coordinates.length > 1
+    )
 
     minDate = Number.MAX_SAFE_INTEGER
     maxDate = 0
 
     tracks.features.forEach((track) => {
-      track.properties.captureDate = new Date(track.properties.captureDate).getTime()
+      track.properties.captureDate = new Date(
+        track.properties.captureDate
+      ).getTime()
       minDate = Math.min(minDate, track.properties.captureDate)
       maxDate = Math.max(maxDate, track.properties.captureDate)
     })
@@ -64,58 +75,38 @@
     data = tracks
   }
 
-  onMount(async () => {
-    await load()
-
-    const boundingBox = bbox(data)
-    map.fitBounds(boundingBox as any, { padding: 50, duration: 0 })
-  })
-</script>
-
-<style>
-  :global(.full-map) {
-    width: 100%;
-    height: 100%;
-  }
+  function handleSelectFeature(event: CustomEvent<LayerClickInfo>) {
+    console.log(event)
 
-  .control-group {
-    display: flex;
-    flex-direction: column;
-    padding: 0.5em 1em;
-    background-color: white;
-    border-radius: 0.5em;
-    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    margin-bottom: 0.5em;
-  }
+    const feature = event.detail.features[0]
+    if (!feature) return
 
-  .input-group {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 0.5em;
-  }
+    if (selectedTrack) {
+      event.detail.map.setFeatureState(
+        { source: "tracks", id: selectedTrack.id },
+        { selected: false }
+      )
+    }
 
-  .filters label {
-    font-weight: bold;
-  }
+    event.detail.map.setFeatureState(
+      { source: "tracks", id: feature.id },
+      { selected: true }
+    )
 
-  .track-props {
-    width: 100%;
-    border-collapse: collapse;
+    selectedTrack = feature
   }
 
-  .track-props th,
-  .track-props td {
-    padding: 0.5em;
-  }
+  onMount(async () => {
+    console.log(map)
+    await load()
 
-  .track-props th {
-    text-align: left;
-  }
-</style>
+    const boundingBox = bbox(data)
+    map.fitBounds(boundingBox as any, { padding: 50, duration: 0 })
+  })
+</script>
 
 <MapLibre
-  bind:map={map}
+  bind:map
   style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
   class="full-map"
   standardControls
@@ -143,43 +134,56 @@
   </Control>
 
   {#if data.features.length > 0}
-    <GeoJSON id="tracks" data={data}>
+    <GeoJSON id="tracks" {data}>
+      <LineLayer
+        id="selected"
+        layout={{ "line-cap": "round", "line-join": "round" }}
+        filter={["boolean", ["feature-state", "selected"], false]}
+        paint={{
+          "line-width": 5,
+          "line-color": "#FF0000",
+          "line-opacity": 1,
+        }}
+      />
+
       <LineLayer
         manageHoverState
         hoverCursor="pointer"
-        layout={{ 'line-cap': 'round', 'line-join': 'round' }}
-        on:click={(e) => selectedTrack = e.detail.features?.[0]?.properties}
+        layout={{ "line-cap": "round", "line-join": "round" }}
+        on:click={handleSelectFeature}
+        filter={["!", ["to-boolean", ["feature-state", "selected"]]]}
         paint={{
-          'line-width': 5,
-          'line-color': [
-            'case',
-            ['==', ['get', 'name'], selectedTrack?.name ?? ""],
-            '#FF0000',
-            [
-              'interpolate',
-              ['linear'],
-              ['get', 'captureDate'],
-              minDate, '#004D00',
-              maxDate, '#00FF00'
-            ]
+          "line-width": 5,
+          "line-color": [
+            "interpolate",
+            ["linear"],
+            ["get", "captureDate"],
+            minDate,
+            "#004D00",
+            maxDate,
+            "#00FF00",
           ],
-          'line-opacity': 1
+          "line-opacity": 1,
         }}
       >
-        <Popup openOn="click" closeButton let:data>
+        <Popup openOn="manual" open={!!selectedTrack} let:data>
           <table class="track-props">
             <tbody>
               <tr>
                 <th>Name</th>
-                <td>{selectedTrack?.name}</td>
+                <td>{selectedTrack?.properties?.name}</td>
               </tr>
               <tr>
                 <th>Capture Date</th>
-                <td>{new Date(selectedTrack?.captureDate).toLocaleString()}</td>
+                <td
+                  >{new Date(
+                    selectedTrack?.properties?.captureDate
+                  ).toLocaleString()}</td
+                >
               </tr>
               <tr>
                 <th>File Path</th>
-                <td>{selectedTrack?.filePath}</td>
+                <td>{selectedTrack?.properties?.filePath}</td>
               </tr>
             </tbody>
           </table>
@@ -187,4 +191,46 @@
       </LineLayer>
     </GeoJSON>
   {/if}
-</MapLibre>
\ No newline at end of file
+</MapLibre>
+
+<style>
+  :global(.full-map) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .control-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em 1em;
+    background-color: white;
+    border-radius: 0.5em;
+    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 0.5em;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.5em;
+  }
+
+  .filters label {
+    font-weight: bold;
+  }
+
+  .track-props {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .track-props th,
+  .track-props td {
+    padding: 0.5em;
+  }
+
+  .track-props th {
+    text-align: left;
+  }
+</style>
diff --git a/packages/frontend/src/routes/+page.svelte b/packages/frontend/src/routes/+page.svelte
index 3825cf3..7f7834f 100644
--- a/packages/frontend/src/routes/+page.svelte
+++ b/packages/frontend/src/routes/+page.svelte
@@ -1,6 +1,26 @@
 <script>
   import "../app.css"
   import TrackMap from "$lib/components/TrackMap.svelte"
+  import RecentImports from "$lib/components/RecentImports.svelte"
 </script>
 
-<TrackMap />
\ No newline at end of file
+<div class="split">
+  <div class="left"><TrackMap /></div>
+  <div class="right"><RecentImports /></div>
+</div>
+
+<style>
+  .split {
+    display: flex;
+    height: 100%;
+  }
+
+  .left {
+    flex: 1;
+  }
+
+  .right {
+    min-width: 300px;
+    overflow-y: scroll;
+  }
+</style>