Adds option to mark trail as completed (#920)

* initial commit

* add completed for komoot tours

* mark hammerhead activities as completed

* fix review suggestions

* adds completed modal to trail edit page

---------

Co-authored-by: Christian Beutel <>
Co-authored-by: slothful-vassal <89943360+slothful-vassal@users.noreply.github.com>

web/src/routes/trail/edit/[id]/+page.svelte

@@ -101,6 +101,7 @@
     import { z } from "zod";
     import Track from "$lib/models/gpx/track.js";
     import TrackSegment from "$lib/models/gpx/track-segment.js";
+    import ConfirmModal from "$lib/components/confirm_modal.svelte";
 
     let { data } = $props();
 
@@ -112,6 +113,7 @@
     let waypointModal: WaypointModal;
     let summitLogModal: SummitLogModal;
     let listSelectModal: ListSearchModal;
+    let markTrailAsCompletedModal: ConfirmModal;
 
     let loading = $state(false);
 
@@ -452,7 +454,8 @@
         if (!$formData.expand!.waypoints_via_trail?.length) {
             $formData.expand!.waypoints_via_trail = [];
         }
-        $formData.expand!.waypoints_via_trail = $formData.expand!.waypoints_via_trail;
+        $formData.expand!.waypoints_via_trail =
+            $formData.expand!.waypoints_via_trail;
 
         // updateTrailOnMap();
     }
@@ -464,7 +467,8 @@
             ) ?? -1;
 
         if (editedWaypointIndex >= 0) {
-            $formData.expand!.waypoints_via_trail![editedWaypointIndex] = savedWaypoint;
+            $formData.expand!.waypoints_via_trail![editedWaypointIndex] =
+                savedWaypoint;
         } else {
             savedWaypoint.id = cryptoRandomString({ length: 15 });
             $formData.expand!.waypoints_via_trail = [
@@ -479,7 +483,9 @@
     function moveMarker(marker: M.Marker, wpId?: string) {
         const position = marker.getLngLat();
         const editableWaypointIndex =
-            $formData.expand!.waypoints_via_trail?.findIndex((w) => w.id == wpId) ?? -1;
+            $formData.expand!.waypoints_via_trail?.findIndex(
+                (w) => w.id == wpId,
+            ) ?? -1;
         const editableWaypoint =
             $formData.expand!.waypoints_via_trail![editableWaypointIndex];
         if (!editableWaypoint) {
@@ -487,7 +493,9 @@
         }
         editableWaypoint.lat = position.lat;
         editableWaypoint.lon = position.lng;
-        $formData.expand!.waypoints_via_trail = [...($formData.expand!.waypoints_via_trail ?? [])];
+        $formData.expand!.waypoints_via_trail = [
+            ...($formData.expand!.waypoints_via_trail ?? []),
+        ];
         // updateTrailOnMap();
     }
 
@@ -515,6 +523,13 @@
                 log,
             ];
         }
+
+        if (
+            $formData.expand?.summit_logs_via_trail?.length == 1 &&
+            !$formData.completed
+        ) {
+            markTrailAsCompletedModal.openModal();
+        }
     }
 
     function handleSummitLogMenuClick(
@@ -1167,6 +1182,10 @@
         initRouteAnchors(valhallaStore.route, true);
         updateTrailWithRouteData();
     }
+
+    function markTrailAsCompleted() {
+        setFields("completed", true);
+    }
 </script>
 
 <svelte:head>
@@ -1180,7 +1199,7 @@
 <main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
     <form
         id="trail-form"
-        class="overflow-y-auto overflow-x-hidden flex flex-col gap-4 px-8 order-1 md:order-none mt-8 md:mt-0"
+        class="overflow-y-auto overflow-x-hidden flex flex-col gap-4 px-8 order-1 md:order-0 mt-8 md:mt-0"
         use:form
     >
         <Search
@@ -1360,6 +1379,11 @@
             ></Select>
         </div>
 
+        <Toggle
+            name="completed"
+            label={$formData.completed ? $_("completed") : $_("not-completed")}
+            icon={$formData.completed ? "flag-checkered" : "compass-drafting"}
+        ></Toggle>
         <Toggle
             name="public"
             label={$formData.public ? $_("public") : $_("private")}
@@ -1525,6 +1549,15 @@
     bind:this={listSelectModal}
     onchange={(e) => handleListSelection(e)}
 ></ListSearchModal>
+<ConfirmModal
+    id="mark-trail-as-completed-modal"
+    title={$_("mark-trail-as-completed")}
+    text={$_("mark-trail-as-completed-modal-text")}
+    action={$_("yes")}
+    deny={$_("no")}
+    bind:this={markTrailAsCompletedModal}
+    onconfirm={markTrailAsCompleted}
+></ConfirmModal>
 
 <style>
     #trail-map {