feat(stores): saving routes

src/lib/components/lnv/main/SavedRoutes.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Button from "$lib/components/ui/button/button.svelte";
+	import { stores } from "$lib/services/stores.svelte";
+	import { view } from "../view.svelte";
+
+	const saved = stores<{ name: string }>("route");
+</script>
+
+{#if saved.current.length != 0}
+	<div>
+		<h2 style="margin: 5px; margin-left: 0; font-size: 1.2em;">
+			Saved Routes
+		</h2>
+
+		<div style="display: flex; flex-direction: column; gap: 10px;">
+			{#each saved.current as save, _index (save.name)}
+				<Button
+					variant="secondary"
+					onclick={() => {
+						view.switch("trip", { route: save.data });
+					}}>{save.data.name}</Button>
+			{/each}
+		</div>
+	</div>
+{/if}

src/lib/components/lnv/sidebar/MainSidebar.svelte

@@ -16,9 +16,9 @@
 	import RequiresCapability from "../RequiresCapability.svelte";
 	import { saved } from "$lib/saved.svelte";
 	import { m } from "$lang/messages";
-	import { getSaved } from "$lib/services/lnv";
 	import { view } from "../view.svelte";
 	import * as Card from "$lib/components/ui/card";
+	import SavedRoutes from "../main/SavedRoutes.svelte";
 </script>
 
 <div
@@ -159,27 +159,8 @@
 	</Card.Root>
 {/if}
 
-<RequiresCapability capability="saved-routes">
-	{#await getSaved() then saved}
-		{#if saved.length != 0}
-			<div>
-				<h2 style="margin: 5px; margin-left: 0; font-size: 1.2em;">
-					Saved Routes
-				</h2>
-
-				<div style="display: flex; flex-direction: column; gap: 10px;">
-					{#each saved as save, _index (save.name)}
-						<Button
-							variant="secondary"
-							onclick={() => {
-								view.switch("trip", { route: JSON.parse(save.data) });
-							}}>{save.name}</Button
-						>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	{/await}
+<RequiresCapability capability="stores">
+	<SavedRoutes />
 </RequiresCapability>
 
 <RequiresCapability capability="post">

src/lib/components/lnv/sidebar/TripSidebar.svelte

@@ -10,20 +10,28 @@
 	import { RouteIcon, SaveIcon, SendIcon } from "@lucide/svelte";
 	import { map } from "../map.svelte";
 	import { m } from "$lang/messages";
-	import { deleteSaved, isSaved, putSaved } from "$lib/services/lnv";
-	import { view } from "../view.svelte";
 	import RequiresCapability from "../RequiresCapability.svelte";
+	import { hasStore, updateStore } from "$lib/services/stores.svelte";
 
-	let {
+	const {
 		route,
 	}: {
 		route: Trip;
 	} = $props();
 
-	onMount(() => {
+	onMount(async () => {
 		removeAllRoutes();
 		drawRoute(route);
+
+		if(route) {
+			isSaved = await hasStore({
+				name: route.locations.map((l) => l.lat + "-" + l.lon).join(";"),
+				type: "route",
+			});
+		}
 	});
+
+	let isSaved = $state(false);
 </script>
 
 <SidebarHeader
@@ -46,25 +54,34 @@
 		<RouteIcon />
 		{m["sidebar.trip.start"]()}
 	</Button>
-	<RequiresCapability capability="saved-routes">
-		{#await isSaved($state.snapshot(route)) then saved}
-			<Button
-				variant="secondary"
-				onclick={async () => {
-					if (saved) {
-						await deleteSaved(saved);
-						view.back();
-					} else {
-						const name = prompt("Trip name?");
-						if (!name) return;
-						await putSaved(name, route);
-					}
-				}}
-			>
-				<SaveIcon />
-				{saved ? m.unsave() : m["sidebar.trip.save"]()}
-			</Button>
-		{/await}
+	<RequiresCapability capability="stores">
+		<Button
+			variant="secondary"
+			onclick={async () => {
+				if (isSaved) {
+					await updateStore({
+						name: route.locations.map(l => l.lat + "-" + l.lon).join(";"),
+						type: "route"
+					}, null);
+					isSaved = false;
+					// view.back();
+				} else {
+					const name = prompt("Trip name?");
+					if (!name) return;
+					await updateStore({
+						name: route.locations.map(l => l.lat + "-" + l.lon).join(";"),
+						type: "route"
+					}, {
+						...route,
+						name
+					})
+					isSaved = true;
+				}
+			}}
+		>
+			<SaveIcon />
+			{isSaved ? m.unsave() : m["sidebar.trip.save"]()}
+		</Button>
 	</RequiresCapability>
 	<Button variant="secondary" disabled>
 		<SendIcon />

src/lib/services/stores.svelte.ts

@@ -159,7 +159,13 @@ export async function updateStore(info: StoreInfo, data: object | null) {
 		info.type,
 	]);
 	if (!store) {
-		if (data === null) return;
+		if (data === null) {
+			console.warn(
+				"[STORES] [updateStore] Tried to delete non-existing store",
+				info,
+			);
+			return;
+		}
 		return await createStore(info, data);
 	}
 	// Update the store data
@@ -176,6 +182,14 @@ export async function updateStore(info: StoreInfo, data: object | null) {
 	return store;
 }
 
+export async function hasStore(info: StoreInfo) {
+	const store = await db.getFromIndex("stores", "by-name-and-type", [
+		info.name,
+		info.type,
+	]);
+	return store !== undefined;
+}
+
 // export async function store<T extends object>(info: StoreInfo) {
 // 	const store = await db.getFromIndex("stores", "by-name-and-type", [info.name, info.type]);
 // 	if (!store) {