Add GPX export and import

Adds a minimal cycloops-io custom element with two icon buttons (export
and import) that sit below the notes list at low opacity, appearing fully
on hover to keep the UI uncluttered.

- src/gpx.ts: notesToGpx / gpxToNotes – round-trip serialisation using
  the browser's DOMParser; XML-escapes note text on export
- src/components/io.ts: CycloopsIO element – export triggers a .gpx
  download; import reads a user-selected file and inserts parsed
  waypoints into IndexedDB via Dexie
- src/gpx.test.ts: 9 unit tests covering serialisation, XML escaping,
  round-trips and error handling
- src/components/io.test.ts: 6 component tests covering rendering,
  export blob/click flow, and import file handling

https://claude.ai/code/session_014HTZYifdsUs2YDGwHTP4PQ

Author: claude

index.html

@@ -19,6 +19,8 @@
 
     <ol is="cycloops-list"></ol>
 
+    <cycloops-io></cycloops-io>
+
     <div is="cycloops-map"></div>
 
     <script type="module" src="/src/main.ts"></script>

src/components/io.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { notes } from "../state";
+import { CycloopsIO } from "./io";
+import type { Note } from "../db";
+import { db } from "../db";
+import { notesToGpx, gpxToNotes } from "../gpx";
+
+customElements.define("cycloops-io", CycloopsIO);
+
+// Mock db
+vi.mock("../db", () => ({
+  db: {
+    notes: {
+      add: vi.fn(),
+    },
+  },
+}));
+
+// Mock gpx module so we can control its output
+vi.mock("../gpx", () => ({
+  notesToGpx: vi.fn(() => "<gpx/>"),
+  gpxToNotes: vi.fn(() => [
+    { lat: 51.5, lon: -0.1, text: "Imported note", time: 1000000 },
+  ]),
+}));
+
+const mockNotes: Note[] = [
+  { id: 1, time: 1000, text: "Note A", lat: 10, lon: 20 },
+];
+
+describe("CycloopsIO component", () => {
+  let io: CycloopsIO;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    notes.value = mockNotes;
+    io = document.createElement("cycloops-io") as CycloopsIO;
+    document.body.appendChild(io);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders an export button and an import button", () => {
+    const buttons = io.querySelectorAll("button");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].title).toBe("Export GPX");
+    expect(buttons[1].title).toBe("Import GPX");
+  });
+
+  it("renders a hidden file input for import", () => {
+    const input = io.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.style.display).toBe("none");
+    expect(input.accept).toContain(".gpx");
+  });
+
+  describe("handleExport", () => {
+    it("creates a downloadable blob URL and triggers a click", () => {
+      vi.mocked(notesToGpx).mockReturnValue("<gpx>data</gpx>");
+
+      const mockUrl = "blob:mock-url";
+      const createObjectURL = vi
+        .spyOn(URL, "createObjectURL")
+        .mockReturnValue(mockUrl);
+      const revokeObjectURL = vi
+        .spyOn(URL, "revokeObjectURL")
+        .mockImplementation(() => {});
+
+      const clickSpy = vi.fn();
+      const origCreate = document.createElement.bind(document);
+      vi.spyOn(document, "createElement").mockImplementation((tag: string) => {
+        const el = origCreate(tag);
+        if (tag === "a") el.click = clickSpy;
+        return el;
+      });
+
+      io.handleExport();
+
+      expect(notesToGpx).toHaveBeenCalledWith(mockNotes);
+      expect(createObjectURL).toHaveBeenCalledOnce();
+      expect(clickSpy).toHaveBeenCalledOnce();
+      expect(revokeObjectURL).toHaveBeenCalledWith(mockUrl);
+    });
+  });
+
+  describe("handleImport", () => {
+    it("reads a file and adds parsed notes to the db", async () => {
+      const fakeGpxContent = "<gpx/>";
+      const fakeFile = new File([fakeGpxContent], "ride.gpx", {
+        type: "application/gpx+xml",
+      });
+
+      const input = io.querySelector('input[type="file"]') as HTMLInputElement;
+      Object.defineProperty(input, "files", {
+        value: [fakeFile],
+        configurable: true,
+      });
+
+      await io.handleImport(input);
+
+      expect(gpxToNotes).toHaveBeenCalledOnce();
+      expect(db.notes.add).toHaveBeenCalledOnce();
+      expect(db.notes.add).toHaveBeenCalledWith({
+        lat: 51.5,
+        lon: -0.1,
+        text: "Imported note",
+        time: 1000000,
+      });
+    });
+
+    it("does nothing when no file is selected", async () => {
+      const input = io.querySelector('input[type="file"]') as HTMLInputElement;
+      Object.defineProperty(input, "files", {
+        value: [],
+        configurable: true,
+      });
+
+      await io.handleImport(input);
+
+      expect(db.notes.add).not.toHaveBeenCalled();
+    });
+
+    it("resets the input value after import", async () => {
+      const fakeFile = new File(["<gpx/>"], "ride.gpx");
+      const input = io.querySelector('input[type="file"]') as HTMLInputElement;
+      Object.defineProperty(input, "files", {
+        value: [fakeFile],
+        configurable: true,
+      });
+
+      await io.handleImport(input);
+
+      expect(input.value).toBe("");
+    });
+  });
+});

src/components/io.ts

@@ -0,0 +1,52 @@
+import { db } from "../db";
+import { notes } from "../state";
+import { notesToGpx, gpxToNotes } from "../gpx";
+
+export class CycloopsIO extends HTMLElement {
+  connectedCallback() {
+    const exportBtn = document.createElement("button");
+    exportBtn.title = "Export GPX";
+    exportBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>`;
+    exportBtn.addEventListener("click", () => this.handleExport());
+
+    const importInput = document.createElement("input");
+    importInput.type = "file";
+    importInput.accept = ".gpx,application/gpx+xml";
+    importInput.style.display = "none";
+    importInput.addEventListener("change", () => this.handleImport(importInput));
+
+    const importBtn = document.createElement("button");
+    importBtn.title = "Import GPX";
+    importBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>`;
+    importBtn.addEventListener("click", () => importInput.click());
+
+    this.appendChild(exportBtn);
+    this.appendChild(importInput);
+    this.appendChild(importBtn);
+  }
+
+  handleExport() {
+    const gpx = notesToGpx(notes.value);
+    const blob = new Blob([gpx], { type: "application/gpx+xml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "cycloops.gpx";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  async handleImport(input: HTMLInputElement) {
+    const file = input.files?.[0];
+    if (!file) return;
+
+    const text = await file.text();
+    const newNotes = gpxToNotes(text);
+
+    for (const note of newNotes) {
+      await db.notes.add(note);
+    }
+
+    input.value = "";
+  }
+}

src/gpx.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect } from "vitest";
+import type { Note } from "./db";
+import { notesToGpx, gpxToNotes } from "./gpx";
+
+const note1: Note = {
+  id: 1,
+  time: new Date("2024-06-01T10:00:00.000Z").getTime(),
+  text: "Coffee stop",
+  lat: 51.5074,
+  lon: -0.1278,
+};
+
+const note2: Note = {
+  id: 2,
+  time: new Date("2024-06-01T11:30:00.000Z").getTime(),
+  text: "Top of the hill",
+  lat: 51.52,
+  lon: -0.11,
+};
+
+describe("notesToGpx", () => {
+  it("produces valid GPX XML with waypoints", () => {
+    const gpx = notesToGpx([note1, note2]);
+
+    expect(gpx).toContain('<?xml version="1.0" encoding="UTF-8"?>');
+    expect(gpx).toContain('<gpx version="1.1" creator="Cycloops"');
+    expect(gpx).toContain(`lat="${note1.lat}" lon="${note1.lon}"`);
+    expect(gpx).toContain(`lat="${note2.lat}" lon="${note2.lon}"`);
+    expect(gpx).toContain("<name>Coffee stop</name>");
+    expect(gpx).toContain("<name>Top of the hill</name>");
+    expect(gpx).toContain("<time>2024-06-01T10:00:00.000Z</time>");
+    expect(gpx).toContain("<time>2024-06-01T11:30:00.000Z</time>");
+  });
+
+  it("escapes special XML characters in note text", () => {
+    const note: Note = {
+      id: 3,
+      time: Date.now(),
+      text: 'Café & Bakery <great> place',
+      lat: 0,
+      lon: 0,
+    };
+    const gpx = notesToGpx([note]);
+    expect(gpx).toContain("Café &amp; Bakery &lt;great&gt; place");
+    expect(gpx).not.toContain("& Bakery <great>");
+  });
+
+  it("returns empty waypoints for empty notes array", () => {
+    const gpx = notesToGpx([]);
+    expect(gpx).toContain("<gpx");
+    expect(gpx).not.toContain("<wpt");
+  });
+});
+
+describe("gpxToNotes", () => {
+  it("parses GPX waypoints into notes", () => {
+    const gpx = notesToGpx([note1, note2]);
+    const parsed = gpxToNotes(gpx);
+
+    expect(parsed).toHaveLength(2);
+    expect(parsed[0]).toMatchObject({
+      lat: note1.lat,
+      lon: note1.lon,
+      text: note1.text,
+      time: note1.time,
+    });
+    expect(parsed[1]).toMatchObject({
+      lat: note2.lat,
+      lon: note2.lon,
+      text: note2.text,
+      time: note2.time,
+    });
+  });
+
+  it("round-trips notes through GPX without data loss", () => {
+    const gpx = notesToGpx([note1, note2]);
+    const parsed = gpxToNotes(gpx);
+
+    expect(parsed[0].text).toBe(note1.text);
+    expect(parsed[0].lat).toBeCloseTo(note1.lat);
+    expect(parsed[0].lon).toBeCloseTo(note1.lon);
+    expect(parsed[0].time).toBe(note1.time);
+  });
+
+  it("unescapes XML entities back to plain text", () => {
+    const note: Note = {
+      id: 3,
+      time: Date.now(),
+      text: 'Café & Bakery <great>',
+      lat: 0,
+      lon: 0,
+    };
+    const gpx = notesToGpx([note]);
+    const parsed = gpxToNotes(gpx);
+    expect(parsed[0].text).toBe('Café & Bakery <great>');
+  });
+
+  it("returns empty array for GPX with no waypoints", () => {
+    const gpx = `<?xml version="1.0" encoding="UTF-8"?><gpx version="1.1" xmlns="http://www.topografix.com/GPX/1/1"></gpx>`;
+    const parsed = gpxToNotes(gpx);
+    expect(parsed).toHaveLength(0);
+  });
+
+  it("throws on invalid XML", () => {
+    expect(() => gpxToNotes("not xml at all <<>>")).toThrow("Invalid GPX file");
+  });
+});

src/gpx.ts

@@ -0,0 +1,39 @@
+import type { Note } from "./db";
+
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function notesToGpx(notes: Note[]): string {
+  const waypoints = notes
+    .map((note) => {
+      const time = new Date(note.time).toISOString();
+      return `  <wpt lat="${note.lat}" lon="${note.lon}">\n    <name>${escapeXml(note.text)}</name>\n    <time>${time}</time>\n  </wpt>`;
+    })
+    .join("\n");
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<gpx version="1.1" creator="Cycloops" xmlns="http://www.topografix.com/GPX/1/1">\n${waypoints}\n</gpx>`;
+}
+
+export function gpxToNotes(gpx: string): Omit<Note, "id">[] {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(gpx, "application/xml");
+
+  const parseError = doc.querySelector("parsererror");
+  if (parseError) throw new Error("Invalid GPX file");
+
+  const wpts = doc.querySelectorAll("wpt");
+
+  return Array.from(wpts).map((wpt) => {
+    const lat = parseFloat(wpt.getAttribute("lat") ?? "0");
+    const lon = parseFloat(wpt.getAttribute("lon") ?? "0");
+    const text = wpt.querySelector("name")?.textContent ?? "";
+    const timeStr = wpt.querySelector("time")?.textContent ?? "";
+    const time = timeStr ? new Date(timeStr).getTime() : Date.now();
+
+    return { lat, lon, text, time };
+  });
+}

src/main.ts

@@ -3,7 +3,9 @@ import "./style.css";
 import { CycloopsForm } from "./components/form";
 import { CycloopsList } from "./components/list";
 import { CycloopsMap } from "./components/map";
+import { CycloopsIO } from "./components/io";
 
 customElements.define("cycloops-form", CycloopsForm, { extends: "form" });
 customElements.define("cycloops-list", CycloopsList, { extends: "ol" });
 customElements.define("cycloops-map", CycloopsMap, { extends: "div" });
+customElements.define("cycloops-io", CycloopsIO);

src/style.css

@@ -92,3 +92,16 @@ li.delta {
   background-color: transparent;
   margin: auto;
 }
+
+cycloops-io {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  padding: 1em 0;
+  opacity: 0.4;
+  transition: opacity .2s;
+}
+
+cycloops-io:hover {
+  opacity: 1;
+}