From b78f1aab06cf8dfd6e806494380e686458ecfde3 Mon Sep 17 00:00:00 2001 From: Jannik Date: Sat, 27 Sep 2025 13:28:52 +0200 Subject: [PATCH] feat(stores): sync vehicles --- .../components/lnv/AddVehicleDrawer.svelte | 8 +++--- src/lib/components/lnv/VehicleSelector.svelte | 10 +++---- src/lib/services/stores.svelte.ts | 16 +++++++---- src/lib/vehicles/vehicles.svelte.ts | 27 ++++++++++--------- 4 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/lib/components/lnv/AddVehicleDrawer.svelte b/src/lib/components/lnv/AddVehicleDrawer.svelte index a930fab..036d908 100644 --- a/src/lib/components/lnv/AddVehicleDrawer.svelte +++ b/src/lib/components/lnv/AddVehicleDrawer.svelte @@ -10,10 +10,9 @@ } from "@lucide/svelte"; import Button, { buttonVariants } from "../ui/button/button.svelte"; import { + addVehicle, isValidFuel, selectVehicle, - setVehicles, - vehicles, type Vehicle, type VehicleType, } from "$lib/vehicles/vehicles.svelte"; @@ -183,9 +182,10 @@ alert(m["vehicles.add.errors.select-fuel"]()); return; } - setVehicles([...vehicles, vehicle]); + // setVehicles([...vehicles.current, vehicle]); + addVehicle(vehicle); selectVehicle(vehicle); - location.reload(); // TODO + // location.reload(); // TODO }} > diff --git a/src/lib/components/lnv/VehicleSelector.svelte b/src/lib/components/lnv/VehicleSelector.svelte index b171875..ace0baf 100644 --- a/src/lib/components/lnv/VehicleSelector.svelte +++ b/src/lib/components/lnv/VehicleSelector.svelte @@ -55,18 +55,18 @@ >
- {#each vehicles as vehicle (vehicle.name)} + {#each vehicles.current as vehicle (vehicle.name)} {/each} diff --git a/src/lib/services/stores.svelte.ts b/src/lib/services/stores.svelte.ts index 38d682f..1af4446 100644 --- a/src/lib/services/stores.svelte.ts +++ b/src/lib/services/stores.svelte.ts @@ -17,6 +17,12 @@ export interface StoreInfo { name: string; type: StoreType; } +export interface WrappedValue { + current: T; +} +export type StoreValue = { + data: T; +} & Omit; interface TCDB extends DBSchema { stores: { @@ -145,25 +151,25 @@ export async function updateStore(info: StoreInfo, data: object | null) { // return state; // } -export function stores(type: StoreType) { - const state = $state([]); +export function stores(type: StoreType): WrappedValue[]> { + const state = $state[]>([]); eventTarget.addEventListener("store-updated", async (event) => { const customEvent = event as CustomEvent; const updatedStore = customEvent.detail as Store; if(updatedStore.type === type) { const stores = await db.getAllFromIndex("stores", "by-type", type); - state.splice(0, state.length, ...(stores.map(store => JSON.parse(store.data) as T).filter(store => store !== null))); + state.splice(0, state.length, ...(stores.map(store => ({ ...store, data: JSON.parse(store.data) as T })).filter(store => store.data !== null))); } }); (async () => { const stores = await db.getAllFromIndex("stores", "by-type", type); - state.splice(0, state.length, ...(stores.map(store => JSON.parse(store.data) as T).filter(store => store !== null))); + state.splice(0, state.length, ...(stores.map(store => ({ ...store, data: JSON.parse(store.data) as T })).filter(store => store.data !== null))); })(); return { get current() { return state; }, - set current(newValue: T[]) { + set current(newValue: StoreValue[]) { state.splice(0, state.length, ...newValue); } } diff --git a/src/lib/vehicles/vehicles.svelte.ts b/src/lib/vehicles/vehicles.svelte.ts index 21ab6a0..c061b25 100644 --- a/src/lib/vehicles/vehicles.svelte.ts +++ b/src/lib/vehicles/vehicles.svelte.ts @@ -1,4 +1,5 @@ import { m } from "$lang/messages"; +import { stores, updateStore, type StoreValue, type WrappedValue } from "$lib/services/stores.svelte"; /* Valhalla costing: @@ -71,11 +72,7 @@ export const DefaultVehicle: Vehicle = { interface StateValue { v: T; } -export const vehicles: Vehicle[] = $state( - localStorage.getItem("vehicles") - ? JSON.parse(localStorage.getItem("vehicles")!) - : [], -); +export const vehicles: WrappedValue[]> = stores("vehicle"); export const selectedVehicleIdx: StateValue = $state({ v: localStorage.getItem("selectedVehicle") ? parseInt(localStorage.getItem("selectedVehicle")!) @@ -83,23 +80,27 @@ export const selectedVehicleIdx: StateValue = $state({ }); export const selectedVehicle: () => Vehicle | null = () => { return ( - vehicles[selectedVehicleIdx.v !== null ? selectedVehicleIdx.v : 0] || null + vehicles.current[selectedVehicleIdx.v !== null ? selectedVehicleIdx.v : 0]?.data ?? null ); }; -export function setVehicles(_vehicles: Vehicle[]) { - // vehicles = _vehicles; - // Hack to update without reassigning the array - vehicles.length = 0; - _vehicles.forEach((vehicle) => vehicles.push(vehicle)); - localStorage.setItem("vehicles", JSON.stringify(vehicles)); +// export function setVehicles(_vehicles: Vehicle[]) { +// // vehicles = _vehicles; +// // Hack to update without reassigning the array +// vehicles.current.length = 0; +// // _vehicles.forEach((vehicle) => vehicles.current.push({ data: vehicle })); +// // localStorage.setItem("vehicles", JSON.stringify(vehicles)); +// } + +export async function addVehicle(vehicle: Vehicle) { + await updateStore({ name: vehicle.name, type: "vehicle" }, vehicle); } export function selectVehicle(vehicle: Vehicle | null) { if (vehicle == null) { selectedVehicleIdx.v = null; } else { - selectedVehicleIdx.v = vehicles.findIndex((v) => v.name === vehicle.name); + selectedVehicleIdx.v = vehicles.current.findIndex((v) => v.name === vehicle.name); if (selectedVehicleIdx.v === -1) { selectedVehicleIdx.v = null; }