adds trail edit

web/src/lib/components/base/toast.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { toast } from "$lib/stores/toast_store";
+
+    $: getBackgroundColor = () => {
+        if ($toast && $toast.type == "success") {
+            return "green-200";
+        }
+        return "";
+    };
+
+    $: getBorderColor = () => {
+        if ($toast && $toast.type == "success") {
+            return "green-500";
+        }
+        return "";
+    };
+</script>
+
+{#if $toast}
+    <div
+        class="fixed px-8 py-4 shadow-xl rounded-xl border bottom-4 right-4 bg-{getBackgroundColor()} border-{getBorderColor()}"
+        style="z-index: 1000;"
+    >
+        <i class="fa fa-{$toast.icon} mr-2"></i>
+        <span>{$toast.text}</span>
+    </div>
+{/if}

web/src/lib/components/nav_bar.svelte

@@ -12,7 +12,7 @@
         <a class="font-semibold" href="">Favorites</a>
     </menu>
     <div class="flex gap-6 items-center">
-        <a class="btn-primary btn-large" href="/new"><i class="fa fa-plus mr-2"></i>New Trail</a>
+        <a class="btn-primary btn-large" href="/trail/edit/new"><i class="fa fa-plus mr-2"></i>New Trail</a>
         <Avatar></Avatar>
     </div>
 </nav>

web/src/lib/components/summit_log/summit_log_modal.svelte

@@ -17,7 +17,7 @@
     const { form, errors, handleChange, handleSubmit } = createForm<SummitLog>({
         initialValues: $summitLog,
         validationSchema: summitLogSchema,
-        onSubmit: async (submittedValues) => {
+        onSubmit: async (submittedValues) => {           
             dispatch("save", submittedValues);
             closeModal!();
         },

web/src/lib/components/trail/trail_card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import type { Trail } from "$lib/models/trail";
-    import { getFileURL } from "$lib/util/file_util";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import Dropdown from "../base/dropdown.svelte";
 
@@ -14,7 +13,7 @@
 
 <div class="trail-card rounded-2xl shadow-md w-72 cursor-pointer">
     <div class="w-full h-48 overflow-hidden rounded-t-2xl">
-        <img src={getFileURL(trail, trail.thumbnail)} alt="" />
+        <img src={trail.thumbnail} alt="" />
     </div>
     <div class="p-4">
         <div>

web/src/lib/models/trail.ts

@@ -17,6 +17,7 @@ class Trail {
         category?: Category;
         waypoints: Waypoint[]
         summit_logs: SummitLog[]
+        gpx_data?: string
     }
     tags?: string[];
     description?: string;

web/src/lib/stores/category_store.ts

@@ -8,4 +8,6 @@ export async function categories_index() {
     const response: Category[] = (await pb.collection('categories').getFullList<Category>())
 
     categories.set(response);
+
+    return response;
 }

web/src/lib/stores/toast_store.ts

@@ -0,0 +1,10 @@
+import { writable, type Writable } from "svelte/store";
+
+export type Toast = {
+    type: "info" | "success" | "warning" | "error"
+    icon: string;
+    text: string;
+}
+
+
+export const toast: Writable<Toast> = writable();

web/src/lib/stores/trail_store.ts

@@ -2,14 +2,26 @@ import { pb } from "$lib/constants";
 import { Trail } from "$lib/models/trail";
 import { getFileURL } from "$lib/util/file_util";
 import { writable, type Writable } from "svelte/store";
+import { waypoints_create, waypoints_delete } from "./waypoint_store";
+import { summit_logs_create, summit_logs_delete } from "./summit_log_store";
+import type { Waypoint } from "$lib/models/waypoint";
+import type { SummitLog } from "$lib/models/summit_log";
 
 export const trails: Writable<Trail[]> = writable([])
 export const trail: Writable<Trail> = writable(new Trail(""));
 
+export const editTrail: Writable<Trail> = writable(new Trail(""));
+
 export async function trails_index() {
     const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
 
+    for (const trail of response) {
+        setFileURLs(trail);
+    }
+
     trails.set(response);
+
+    return response;
 }
 
 export async function trails_show(id: string, loadGPX?: boolean) {
@@ -17,26 +29,119 @@ export async function trails_show(id: string, loadGPX?: boolean) {
 
     if (loadGPX) {
         const gpxData: string = await fetchGPX(response);
-        response.gpx = gpxData;
+        response.expand.gpx_data = gpxData;
     }
 
+    setFileURLs(response);
+
+    response.expand.waypoints = response.expand.waypoints || [];
+    response.expand.summit_logs = response.expand.summit_logs || [];
+
+    response._photoFiles = [];
+
     trail.set(response);
+
+    return response;
 }
 
-export async function trails_create(bodyParams?: { [key: string]: any; } | FormData) {
-    const model = await pb
+export async function trails_create(trail: Trail, formData: { [key: string]: any; } | FormData) {
+    formData.set("category", trail.expand.category!.id);
+
+    for (const file of trail._photoFiles) {
+        formData.append("photos", file);
+    }
+
+    for (const waypoint of trail.expand.waypoints) {
+        const model = await waypoints_create({
+            ...waypoint,
+            marker: undefined,
+        });
+        formData.append("waypoints", model.id!);
+    }
+    for (const summitLog of trail.expand.summit_logs) {
+        const model = await summit_logs_create(summitLog);
+        formData.append("summit_logs", model.id!);
+    }
+    let model = await pb
         .collection("trails")
-        .create<Trail>(bodyParams);
+        .create<Trail>(formData);
+
+    const thumbnailIndex = trail.photos.findIndex(
+        (p) => p == trail.thumbnail,
+    );
+    let thumbnail: string | undefined = "/imgs/thumbnail.jpg";
+    if (thumbnailIndex >= 0) {
+        thumbnail = model.photos.at(thumbnailIndex);
+    }
+
+    model = await pb
+        .collection("trails")
+        .update<Trail>(model.id!, { thumbnail: thumbnail });
 
     return model;
 }
 
-export async function trails_update(id: string, bodyParams?: { [key: string]: any; } | FormData) {
-    const model = await pb
-        .collection("trails")
-        .update<Trail>(id, bodyParams);
+export async function trails_update(oldTrail: Trail, newTrail: Trail, formData: { [key: string]: any; } | FormData) {
 
-    return model;
+    const waypointUpdates = compareObjectArrays<Waypoint>(oldTrail.expand.waypoints ?? [], newTrail.expand.waypoints ?? []);
+
+    for (const addedWaypoint of waypointUpdates.added) {
+        const model = await waypoints_create({
+            ...addedWaypoint,
+            marker: undefined,
+        });
+        formData.append("waypoints+", model.id!);
+    }
+
+    for (const deletedWaypoint of waypointUpdates.deleted) {
+        const success = await waypoints_delete(deletedWaypoint.id!);
+    }
+
+    const summitLogUpdates = compareObjectArrays<SummitLog>(oldTrail.expand.summit_logs ?? [], newTrail.expand.summit_logs ?? []);
+
+    for (const summitLog of summitLogUpdates.added) {
+        const model = await summit_logs_create(summitLog);
+        formData.append("summit_logs+", model.id!);
+    }
+
+    for (const deletedSummitLog of summitLogUpdates.deleted) {
+        const success = await summit_logs_delete(deletedSummitLog.id!);
+    }
+
+    for (const file of newTrail._photoFiles) {
+        formData.append("photos", file);
+    }
+
+    const deletedPhotos = oldTrail.photos.filter(oldPhoto => !newTrail.photos.find(newPhoto => newPhoto === oldPhoto));
+
+    for (const deletedPhoto of deletedPhotos) {
+        formData.append("photos-", deletedPhoto.replace(/^.*[\\/]/, ''));
+    }
+
+    if (formData.get("gpx").size == 0) {
+        formData.delete("gpx");
+    }
+
+    const thumbnailIndex = newTrail.photos.findIndex(
+        (p) => p == newTrail.thumbnail,
+    );
+
+    let model = await pb
+        .collection("trails")
+        .update<Trail>(newTrail.id!, formData);
+
+    let thumbnail: string | undefined = oldTrail.thumbnail;
+    if (thumbnailIndex >= 0) {
+        thumbnail = model.photos.at(thumbnailIndex);
+    }
+
+    model = await pb
+        .collection("trails")
+        .update<Trail>(model.id!, { thumbnail: thumbnail });
+
+    trail.set(model);
+
+    // return model;
 }
 
 
@@ -57,4 +162,23 @@ async function fetchGPX(trail: Trail) {
     const gpxData = await response.text();
 
     return gpxData
-}
+}
+
+function setFileURLs(trail: Trail) {
+    trail.thumbnail = getFileURL(trail, trail.thumbnail);
+    for (let i = 0; i < trail.photos.length; i++) {
+        const photo = trail.photos[i];
+        trail.photos[i] = getFileURL(trail, photo)
+    }
+}
+
+function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {
+    const newObjects = newArray.filter(newObj => !oldArray.find(oldObj => oldObj.id === newObj.id));
+    const deletedObjects = oldArray.filter(oldObj => !newArray.find(newObj => newObj.id === oldObj.id));
+
+    return {
+        added: newObjects,
+        deleted: deletedObjects
+    };
+}
+