adds loop to route ancho popup

web/src/lib/i18n/locales/de.json

@@ -154,6 +154,7 @@
   "login-details": "Login Details",
   "logout": "Logout",
   "longitude": "Längengrad",
+  "loop": "",
   "make-one": "Neues erstellen!",
   "make-thumbnail": "Thumbnail festlegen",
   "map": "Karte",

web/src/lib/i18n/locales/en.json

@@ -154,6 +154,7 @@
   "login-details": "Login details",
   "logout": "Logout",
   "longitude": "Longitude",
+  "loop": "Loop",
   "make-one": "Make one!",
   "make-thumbnail": "Make thumbnail",
   "map": "Map",

web/src/lib/i18n/locales/es.json

@@ -154,6 +154,7 @@
   "login-details": "Detalles de acceso",
   "logout": "Salir",
   "longitude": "Longitud",
+  "loop": "",
   "make-one": "¡Crea uno!",
   "make-thumbnail": "Generar miniaturas",
   "map": "Mapa",

web/src/lib/i18n/locales/fr.json

@@ -154,6 +154,7 @@
   "login-details": "Données de connexion",
   "logout": "Déconnexion",
   "longitude": "Longitude",
+  "loop": "",
   "make-one": "Faites-en un !",
   "make-thumbnail": "Créer une miniature",
   "map": "Carte",

web/src/lib/i18n/locales/hu.json

@@ -154,6 +154,7 @@
   "login-details": "Login details",
   "logout": "Kijelentkezés",
   "longitude": "Hosszúság",
+  "loop": "",
   "make-one": "Készítsen egyet!",
   "make-thumbnail": "Készítsen miniatűrképet",
   "map": "Térkép",

web/src/lib/i18n/locales/it.json

@@ -154,6 +154,7 @@
   "login-details": "Dettagli del login",
   "logout": "Logout",
   "longitude": "Longitudine",
+  "loop": "",
   "make-one": "Creane uno!",
   "make-thumbnail": "Imposta miniatura",
   "map": "Mappa",

web/src/lib/i18n/locales/nl.json

@@ -154,6 +154,7 @@
   "login-details": "Login details",
   "logout": "Uitloggen",
   "longitude": "Lengtegraad",
+  "loop": "",
   "make-one": "Maak er een aan!",
   "make-thumbnail": "Miniatuur maken",
   "map": "Kaart",

web/src/lib/i18n/locales/pl.json

@@ -154,6 +154,7 @@
   "login-details": "Dane logowania",
   "logout": "Wyloguj",
   "longitude": "Wysokość",
+  "loop": "",
   "make-one": "Stwórz ją!",
   "make-thumbnail": "Zrób miniaturkę",
   "map": "Mapa",

web/src/lib/i18n/locales/pt.json

@@ -154,6 +154,7 @@
   "login-details": "Detalhes de login",
   "logout": "Sair",
   "longitude": "Longitude",
+  "loop": "",
   "make-one": "Faz um!",
   "make-thumbnail": "Faça miniatura",
   "map": "Mapa",

web/src/lib/i18n/locales/zh.json

@@ -154,6 +154,7 @@
   "login-details": "登录详情",
   "logout": "登出",
   "longitude": "经度",
+  "loop": "",
   "make-one": "立刻注册！",
   "make-thumbnail": "生成缩略图",
   "map": "地图",

web/src/lib/util/maplibre_util.ts

@@ -74,7 +74,8 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker
 }
 
 export function createAnchorMarker(lat: number, lon: number, index: number,
-    onDeleteClick: () => void, onDragStart: (event: Event) => void, onDragEnd: (event: Event) => void): FontawesomeMarker {
+    onDeleteClick: () => void, onLoopClick: () => void,
+    onDragStart: (event: Event) => void, onDragEnd: (event: Event) => void): FontawesomeMarker {
 
     const anchorElement = document.createElement("span")
     anchorElement.className = "route-anchor cursor-pointer rounded-full w-6 h-6 border border-black text-center bg-background-inverse text-content-inverse"
@@ -91,7 +92,7 @@ export function createAnchorMarker(lat: number, lon: number, index: number,
     const popupContent = document.createElement("div");
     const anchorH = document.createElement("h5")
     anchorH.classList.add("text-base", "font-medium");
-    anchorH.textContent = get(_)("route-point") +  " #" + index;
+    anchorH.textContent = get(_)("route-point") + " #" + index;
 
     const deleteButton = document.createElement("button");
     deleteButton.className = "btn-secondary w-full mt-2 text-sm";
@@ -104,8 +105,20 @@ export function createAnchorMarker(lat: number, lon: number, index: number,
     deleteButton.appendChild(deleteButtonText)
     deleteButton.addEventListener("click", onDeleteClick)
 
+    const loopButton = document.createElement("button");
+    loopButton.className = "btn-secondary w-full mt-2 text-sm block";
+    const loopButtonIcon = document.createElement("i")
+    loopButtonIcon.classList.add("fa", "fa-person-walking-arrow-loop-left", "mr-2")
+    loopButton.appendChild(loopButtonIcon)
+    const loopButtonText = document.createElement("span")
+    loopButtonText.textContent = get(_)("loop")
+    loopButton.appendChild(loopButtonIcon)
+    loopButton.appendChild(loopButtonText)
+    loopButton.addEventListener("click", onLoopClick)
+
     popupContent.appendChild(anchorH)
     popupContent.appendChild(deleteButton)
+    popupContent.appendChild(loopButton)
     popup.setDOMContent(popupContent)
     marker.setPopup(popup);
 

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

@@ -528,34 +528,34 @@
         if (anchorCount == 0) {
             addAnchor(e.lngLat.lat, e.lngLat.lng, anchors.length);
         } else {
-            const previousAnchor = anchors[anchorCount - 1];
+            await addAnchorAndRecalculate(e.lngLat.lat, e.lngLat.lng);
-            const anchor = addAnchor(
+        }
-                e.lngLat.lat,
+    }
-                e.lngLat.lng,
+
-                anchors.length,
+    async function addAnchorAndRecalculate(lat: number, lon: number) {
+        const previousAnchor = anchors[anchors.length - 1];
+        const anchor = addAnchor(lat, lon, anchors.length);
+        const markerText = startAnchorLoading(anchor);
+        try {
+            const routeWaypoints = await calculateRouteBetween(
+                previousAnchor.lat,
+                previousAnchor.lon,
+                lat,
+                lon,
+                selectedModeOfTransport,
+                autoRouting,
             );
-            const markerText = startAnchorLoading(anchor);
+            insertIntoRoute(routeWaypoints);
-            try {
+            updateTrailWithRouteData();
-                const routeWaypoints = await calculateRouteBetween(
+        } catch (e) {
-                    previousAnchor.lat,
+            console.error(e);
-                    previousAnchor.lon,
+            show_toast({
-                    e.lngLat.lat,
+                text: "Error calculating route",
-                    e.lngLat.lng,
+                icon: "close",
-                    selectedModeOfTransport,
+                type: "error",
-                    autoRouting,
+            });
-                );
+        } finally {
-                insertIntoRoute(routeWaypoints);
+            stopAnchorLoading(anchor, markerText);
-                updateTrailWithRouteData();
-            } catch (e) {
-                console.error(e);
-                show_toast({
-                    text: "Error calculating route",
-                    icon: "close",
-                    type: "error",
-                });
-            } finally {
-                stopAnchorLoading(anchor, markerText);
-            }
         }
     }
 
@@ -577,6 +577,14 @@
             () => {
                 removeAnchor(anchors.findIndex((a) => a.id == anchor.id));
             },
+            () => {
+                const thisAnchor = anchors.find((a) => a.id == anchor.id);
+                addAnchorAndRecalculate(
+                    thisAnchor?.lat ?? lat,
+                    thisAnchor?.lon ?? lon,
+                );
+                marker.togglePopup();
+            },
             (e) => {
                 draggingMarker = true;
             },
@@ -815,7 +823,7 @@
 
 <svelte:head>
     <title
-        >{$formData.id ? `${$formData.name} | ${$_("edit")}` : $_("new-trail")} |
+        >{$page.params.id !== "new" ? `${$formData.name} | ${$_("edit")}` : $_("new-trail")} |
         wanderer</title
     >
 </svelte:head>