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);