ok

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"
+  }
 }

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

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,

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)

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,
     )
   }
 

packages/frontend/src/app.css

@@ -1,6 +1,9 @@
-body, html {
+body,
+html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
-}
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+}

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>