brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds create waypoint map popup

Browse Source
This commit is contained in:
Christian Beutel
2025-03-14 18:54:08 +01:00
parent ec15392c31
commit 4ad1cf3e09
12 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/lib/i18n/locales/de.json
View File

@@ -53,6 +53,7 @@
"contribute": "Mitwirken",
"copy-link": "Link kopieren",
"create-new-list": "Neue Liste erstellen",
"create-waypoint": "",
"creation-date": "Erstellungsdatum",
"current-password": "Aktuelles Passwort",
"cycling": "Radfahren",

1
web/src/lib/i18n/locales/en.json
View File

@@ -53,6 +53,7 @@
"contribute": "Contribute",
"copy-link": "Copy Link",
"create-new-list": "Create new list",
"create-waypoint": "Create waypoint",
"creation-date": "Creation date",
"current-password": "Current password",
"cycling": "Cycling",

1
web/src/lib/i18n/locales/es.json
View File

@@ -53,6 +53,7 @@
"contribute": "Contribuir",
"copy-link": "Copiar Enlace",
"create-new-list": "Crear una nueva lista",
"create-waypoint": "",
"creation-date": "Fecha de creación",
"current-password": "Contraseña actual",
"cycling": "Ciclismo",

1
web/src/lib/i18n/locales/fr.json
View File

@@ -53,6 +53,7 @@
"contribute": "Contribuer",
"copy-link": "Copier le lien",
"create-new-list": "Créer une nouvelle liste",
"create-waypoint": "",
"creation-date": "Date de création",
"current-password": "Mot de passe actuel",
"cycling": "Vélo",

1
web/src/lib/i18n/locales/hu.json
View File

@@ -53,6 +53,7 @@
"contribute": "Hozzájárulás",
"copy-link": "Copy Link",
"create-new-list": "Új lista létrehozása",
"create-waypoint": "",
"creation-date": "létrehozás dátuma",
"current-password": "Current password",
"cycling": "Cycling",

1
web/src/lib/i18n/locales/it.json
View File

@@ -53,6 +53,7 @@
"contribute": "Contribuisci",
"copy-link": "Copia link",
"create-new-list": "Crea nuova lista",
"create-waypoint": "",
"creation-date": "Data di creazione",
"current-password": "Password attuale",
"cycling": "Ciclismo",

1
web/src/lib/i18n/locales/nl.json
View File

@@ -53,6 +53,7 @@
"contribute": "Bijdragen",
"copy-link": "Copy Link",
"create-new-list": "Nieuwe lijst",
"create-waypoint": "",
"creation-date": "Aanmaakdatum",
"current-password": "Huidig wachtwoord",
"cycling": "Fietsen",

1
web/src/lib/i18n/locales/pl.json
View File

@@ -53,6 +53,7 @@
"contribute": "Kontrybuuj",
"copy-link": "Kopiuj link",
"create-new-list": "Stwórz nową listę",
"create-waypoint": "",
"creation-date": "Data dodania",
"current-password": "Obecne hasło",
"cycling": "Rower",

1
web/src/lib/i18n/locales/pt.json
View File

@@ -53,6 +53,7 @@
"contribute": "Contribuir",
"copy-link": "Copiar ligação",
"create-new-list": "Criar nova lista",
"create-waypoint": "",
"creation-date": "Data de criação",
"current-password": "Senha atual",
"cycling": "Ciclismo",

1
web/src/lib/i18n/locales/zh.json
View File

@@ -53,6 +53,7 @@
"contribute": "贡献",
"copy-link": "复制链接",
"create-new-list": "创建新列表",
"create-waypoint": "",
"creation-date": "创建日期",
"current-password": "当前密码",
"cycling": "骑行",

29
web/src/lib/util/maplibre_util.ts
View File

@@ -136,6 +136,35 @@ export function createAnchorMarker(lat: number, lon: number, index: number,
return marker
}
export function createEditTrailMapPopup(lnglat: M.LngLat, onCreateWaypointClick: () => void) {
const popup = new M.Popup({ closeOnClick: false })
.setLngLat(lnglat)
const popupContent = document.createElement("div");
popupContent.className = "pt-1 pb-3 pl-3"
const popupH = document.createElement("h5")
popupH.classList.add("text-base", "font-medium", "mb-2");
popupH.textContent = `${lnglat.lat.toFixed(4)}, ${lnglat.lng.toFixed(4)}`;
const createWaypointButton = document.createElement("button");
createWaypointButton.className = "btn-secondary w-full mt-2 text-sm";
const deleteButtonIcon = document.createElement("i")
deleteButtonIcon.classList.add("fa", "fa-location-dot", "mr-2")
createWaypointButton.appendChild(deleteButtonIcon)
const createWaypointButtonText = document.createElement("span")
createWaypointButtonText.textContent = get(_)("create-waypoint")
createWaypointButton.appendChild(deleteButtonIcon)
createWaypointButton.appendChild(createWaypointButtonText)
createWaypointButton.addEventListener("click", onCreateWaypointClick)
popupContent.appendChild(popupH)
popupContent.appendChild(createWaypointButton)
popup.setDOMContent(popupContent)
return popup
}
export function createPopupFromTrail(trail: Trail) {
const thumbnail = trail.photos.length
? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])

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

@@ -53,14 +53,23 @@
} from "$lib/util/format_util";
import { fromFile, gpx2trail } from "$lib/util/gpx_util";
import { page } from "$app/state";
import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
import Search, {
type SearchItem,
} from "$lib/components/base/search.svelte";
import {
searchLocationReverse,
searchLocations,
} from "$lib/stores/search_store.js";
import { theme } from "$lib/stores/theme_store.js";
import { country_codes } from "$lib/util/country_code_util.js";
import { createAnchorMarker } from "$lib/util/maplibre_util";
import { getIconForLocation } from "$lib/util/icon_util.js";
import {
createAnchorMarker,
createEditTrailMapPopup,
} from "$lib/util/maplibre_util";
import { validator } from "@felte/validator-zod";
import cryptoRandomString from "crypto-random-string";
import { createForm } from "felte";
@@ -70,17 +79,11 @@
import { backInOut } from "svelte/easing";
import { scale } from "svelte/transition";
import { z } from "zod";
import { page } from "$app/state";
import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
import {
searchLocationReverse,
searchLocations,
} from "$lib/stores/search_store.js";
import { getIconForLocation } from "$lib/util/icon_util.js";
let { data } = $props();
let map: M.Map | undefined = $state();
let mapPopup: M.Popup | undefined;
let mapTrail: Trail[] = $state([]);
let lists = $state(data.lists);
@@ -389,12 +392,12 @@
}
}
function beforeWaypointModalOpen() {
function beforeWaypointModalOpen(lat?: number, lon?: number) {
if (!map) {
return;
}
const mapCenter = map.getCenter();
waypoint.set(new Waypoint(mapCenter.lat, mapCenter.lng));
waypoint.set(new Waypoint(lat ?? mapCenter.lat, lon ?? mapCenter.lng));
waypointModal.openModal();
}
@@ -537,13 +540,23 @@
async function handleMapClick(e: M.MapMouseEvent) {
if (!drawingActive) {
return;
}
const anchorCount = anchors.length;
if (anchorCount == 0) {
addAnchor(e.lngLat.lat, e.lngLat.lng, anchors.length);
if ((e.originalEvent.target as HTMLElement).tagName.toLowerCase() !== "canvas") {
return;
}
mapPopup?.remove();
mapPopup = createEditTrailMapPopup(e.lngLat, () => {
mapPopup?.remove();
beforeWaypointModalOpen(e.lngLat.lat, e.lngLat.lng);
});
mapPopup.addTo(map!);
} else {
await addAnchorAndRecalculate(e.lngLat.lat, e.lngLat.lng);
const anchorCount = anchors.length;
if (anchorCount == 0) {
addAnchor(e.lngLat.lat, e.lngLat.lng, anchors.length);
} else {
await addAnchorAndRecalculate(e.lngLat.lat, e.lngLat.lng);
}
}
}
@@ -1030,7 +1043,7 @@
<button
class="btn-secondary"
type="button"
onclick={beforeWaypointModalOpen}
onclick={() => beforeWaypointModalOpen()}
><i class="fa fa-plus mr-2"></i>{$_("add-waypoint")}</button
>
<hr class="border-separator" />