From aeaf8e49ce8e60f36034bf96c05de60f3e4e79f4 Mon Sep 17 00:00:00 2001 From: Christian Beutel <> Date: Sun, 12 Jan 2025 19:02:40 +0100 Subject: [PATCH] cosmetic changes --- web/src/lib/components/share_info.svelte | 2 +- .../trail/map_with_elevation_maplibre.svelte | 41 +++++++++++-------- .../components/trail/trail_info_panel.svelte | 6 +-- web/src/lib/i18n/locales/de.json | 1 + web/src/lib/i18n/locales/en.json | 1 + web/src/lib/i18n/locales/es.json | 1 + web/src/lib/i18n/locales/fr.json | 1 + web/src/lib/i18n/locales/hu.json | 1 + web/src/lib/i18n/locales/it.json | 1 + web/src/lib/i18n/locales/nl.json | 1 + web/src/lib/i18n/locales/pl.json | 1 + web/src/lib/i18n/locales/pt.json | 1 + web/src/lib/i18n/locales/zh.json | 1 + web/src/lib/util/maplibre_util.ts | 25 ++++++++--- .../elevationprofile.ts | 2 +- web/src/routes/lists/+page.svelte | 1 + web/src/routes/settings/export/+page.svelte | 2 +- web/src/routes/trail/edit/[id]/+page.svelte | 10 +++-- 18 files changed, 69 insertions(+), 30 deletions(-) diff --git a/web/src/lib/components/share_info.svelte b/web/src/lib/components/share_info.svelte index 2f8893e4..2ce3af4d 100644 --- a/web/src/lib/components/share_info.svelte +++ b/web/src/lib/components/share_info.svelte @@ -12,7 +12,7 @@ export let large: boolean = false; export let type: "trail" | "list" - const shareData = type == "trail" ? (subject as Trail).expand.trail_share_via_trail : (subject as List).expand?.list_share_via_list + const shareData = type == "trail" ? (subject as Trail).expand?.trail_share_via_trail : (subject as List).expand?.list_share_via_list let showInfo: boolean = false; let loading: boolean = false; diff --git a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte index 9d2865f4..ceb8b57b 100644 --- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte +++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte @@ -110,6 +110,8 @@ elevationGridColor: "#ddd2", labelColor: "#ddd8", crosshairColor: "#fff5", + tooltipBackgroundColor: "#242734", + tooltipTextColor: "#fff", }); } else { epc?.toggleTheme({ @@ -117,6 +119,8 @@ elevationGridColor: "#0002", labelColor: "#0009", crosshairColor: "#0005", + tooltipBackgroundColor: "#fff", + tooltipTextColor: "#000", }); } @@ -185,10 +189,11 @@ } refreshElevationProfile(); - if (showElevation && data.length) { + if (showElevation && data.length && activeTrail !== null) { epc?.showProfile(); + } else { + epc?.hideProfile(); } - trails.forEach((t, i) => { const layerId = t.id!; addTrailLayer(t, layerId, i, data[i]); @@ -201,7 +206,7 @@ removeTrailLayer(layerId); } }); - + if ( !drawing && fitBounds !== "off" && @@ -212,13 +217,13 @@ } else { flyToBounds(); } - } else if(drawing && activeTrail !== null && mapLoaded) { - addCaretLayer(trails[activeTrail]?.id) + } else if (drawing && activeTrail !== null && mapLoaded) { + addCaretLayer(trails[activeTrail]?.id); } } - export function refreshElevationProfile() { - if (activeTrail !== null && data[activeTrail]) { + export function refreshElevationProfile() { + if (activeTrail !== null && data[activeTrail]) { epc?.setData(data[activeTrail]!, waypoints); } } @@ -350,7 +355,7 @@ highlightTrail(id, trails[activeTrail ?? -1]?.id == id); layers[id].listener.onLeave = (e) => unHighlightTrail(id); layers[id].listener.onMouseUp = (e) => { - activeTrail = trails.findIndex(t => t.id == trail.id); + activeTrail = trails.findIndex((t) => t.id == trail.id); }; layers[id].listener.onMouseMove = moveCrosshairToCursorPosition; layers[id].listener.onMouseDown = (e) => handDragStart(e, id); @@ -456,7 +461,7 @@ ) { if (showElevationMarker) { elevationMarker.setOpacity("1"); - } + } map?.setPaintProperty(id, "line-width", 7); hoveringTrail = true; // map?.setPaintProperty(id, "line-color", "#2766e3"); @@ -479,11 +484,6 @@ activeTrail = null; return; } - - const currentlyFocussedTrail = trails[activeTrail]; - if (currentlyFocussedTrail && currentlyFocussedTrail != trail) { - unFocusTrail(currentlyFocussedTrail); - } dispatch("select", trail); try { @@ -567,6 +567,10 @@ const startEndPoint = findStartAndEndPoints(geojson); + if(!startEndPoint.length) { + return; + } + layers[id].startMarker .setLngLat(startEndPoint[0] as M.LngLatLike) .addTo(map); @@ -741,6 +745,8 @@ profileLineWidth: 3, displayDistanceGrid: true, tooltipDisplayDPlus: false, + tooltipBackgroundColor: $theme == "light" ? "#fff" : "#242734", + tooltipTextColor: $theme == "light" ? "#000" : "#fff", zoom: false, container: elevationProfileContainer, onEnter: () => { @@ -749,7 +755,7 @@ onLeave: () => { elevationMarker.setOpacity("0"); }, - onMove: (data) => { + onMove: (data) => { if (!hoveringTrail) { elevationMarker.setLngLat( data.position as M.LngLatLike, @@ -856,11 +862,14 @@ } :global(.maplibregl-popup-content) { - @apply bg-background rounded-md; + @apply bg-background rounded-md shadow-xl pt-5; } :global(.maplibregl-popup-close-button) { top: 4px; right: 8px; + line-height: 0; + padding-bottom: 2.5px; + @apply bg-menu-item-background-focus w-3 aspect-square rounded-full; } diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte index 36e5e18f..35c3e4cc 100644 --- a/web/src/lib/components/trail/trail_info_panel.svelte +++ b/web/src/lib/components/trail/trail_info_panel.svelte @@ -161,7 +161,7 @@ alt="" />
{#if (trail.public || trailIsShared) && pb.authStore.model}
{#if trail.public && pb.authStore.model} @@ -180,7 +180,7 @@ {/if} {#if trailIsShared} - {/if}
diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json index 543db179..7e35ff61 100644 --- a/web/src/lib/i18n/locales/de.json +++ b/web/src/lib/i18n/locales/de.json @@ -222,6 +222,7 @@ "removed-trail-from": "Route entfernt aus", "required": "Pflichtfeld", "reset-password": "Passwort zurücksetzen", + "route-point": "", "save": "Speichern", "save-list": "Liste speichern", "save-trail": "Route speichern", diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json index 071a62cf..1da47f00 100644 --- a/web/src/lib/i18n/locales/en.json +++ b/web/src/lib/i18n/locales/en.json @@ -222,6 +222,7 @@ "removed-trail-from": "Removed trail from", "required": "Required", "reset-password": "Reset Password", + "route-point": "Route Point", "save": "Save", "save-list": "Save List", "save-trail": "Save Trail", diff --git a/web/src/lib/i18n/locales/es.json b/web/src/lib/i18n/locales/es.json index e9eff65c..b2ffe236 100644 --- a/web/src/lib/i18n/locales/es.json +++ b/web/src/lib/i18n/locales/es.json @@ -222,6 +222,7 @@ "removed-trail-from": "Ruta borrada de", "required": "Obligatorio", "reset-password": "Restablecer Contraseña", + "route-point": "", "save": "Guardar", "save-list": "Guardar Lista", "save-trail": "Guardar Ruta", diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json index c84bd3d3..d3c74ef5 100644 --- a/web/src/lib/i18n/locales/fr.json +++ b/web/src/lib/i18n/locales/fr.json @@ -222,6 +222,7 @@ "removed-trail-from": "Enlever l'itinéraire de", "required": "Requis", "reset-password": "Réinitialiser le mot de passe", + "route-point": "", "save": "Sauvegarder", "save-list": "Sauvegarder la liste", "save-trail": "Sauvegarder l'itinéraire", diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json index dbfea04d..406622fa 100644 --- a/web/src/lib/i18n/locales/hu.json +++ b/web/src/lib/i18n/locales/hu.json @@ -222,6 +222,7 @@ "removed-trail-from": "Eltávolított nyomvonal a", "required": "Kötelező", "reset-password": "Reset Password", + "route-point": "", "save": "Mentés", "save-list": "Save List", "save-trail": "Útvonal mentése", diff --git a/web/src/lib/i18n/locales/it.json b/web/src/lib/i18n/locales/it.json index 6cd216f4..f268e43a 100644 --- a/web/src/lib/i18n/locales/it.json +++ b/web/src/lib/i18n/locales/it.json @@ -222,6 +222,7 @@ "removed-trail-from": "Percorso rimosso da", "required": "Obbligatorio", "reset-password": "Ripristinare Password", + "route-point": "", "save": "Salva", "save-list": "Salta Lista", "save-trail": "Salva percorso", diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json index 80985e65..9f31beff 100644 --- a/web/src/lib/i18n/locales/nl.json +++ b/web/src/lib/i18n/locales/nl.json @@ -222,6 +222,7 @@ "removed-trail-from": "De wandelroute is verwijderd van", "required": "Verplicht", "reset-password": "Reset Password", + "route-point": "", "save": "Bewaren", "save-list": "Save List", "save-trail": "Wandelroute bewaren", diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json index 261b10dd..f5cb3353 100644 --- a/web/src/lib/i18n/locales/pl.json +++ b/web/src/lib/i18n/locales/pl.json @@ -222,6 +222,7 @@ "removed-trail-from": "Usunięto szlak z", "required": "Wymagane", "reset-password": "Resetuj hasło", + "route-point": "", "save": "Zapisz", "save-list": "Zapisz listę", "save-trail": "Zapisz szlak", diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json index 749072f1..b9249891 100644 --- a/web/src/lib/i18n/locales/pt.json +++ b/web/src/lib/i18n/locales/pt.json @@ -222,6 +222,7 @@ "removed-trail-from": "Trilha removida de", "required": "Obrigatório", "reset-password": "Reset Password", + "route-point": "", "save": "Guardar", "save-list": "Gravar lista", "save-trail": "Guardar trilho", diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json index d92f092a..522a142f 100644 --- a/web/src/lib/i18n/locales/zh.json +++ b/web/src/lib/i18n/locales/zh.json @@ -222,6 +222,7 @@ "removed-trail-from": "路线已删除自", "required": "必填", "reset-password": "重置密码", + "route-point": "", "save": "保存", "save-list": "保存列表", "save-trail": "保存路线", diff --git a/web/src/lib/util/maplibre_util.ts b/web/src/lib/util/maplibre_util.ts index 4ee3f2b0..8a4b2d5b 100644 --- a/web/src/lib/util/maplibre_util.ts +++ b/web/src/lib/util/maplibre_util.ts @@ -59,7 +59,7 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker } - const popup = new M.Popup({ offset: 25, closeButton: false }).setDOMContent( + const popup = new M.Popup({ offset: 25 }).setDOMContent( content ); marker @@ -86,12 +86,27 @@ export function createAnchorMarker(lat: number, lon: number, index: number, } ); marker.setLngLat([lon, lat]); + const popup = new M.Popup() + + const popupContent = document.createElement("div"); + const anchorH = document.createElement("h5") + anchorH.classList.add("text-base", "font-medium"); + anchorH.textContent = get(_)("route-point") + " #" + index; const deleteButton = document.createElement("button"); - deleteButton.className = "fa fa-trash text-red-500 rounded-full aspect-square h-8 text-lg"; + deleteButton.className = "btn-secondary w-full mt-2 text-sm"; + const deleteButtonIcon = document.createElement("i") + deleteButtonIcon.classList.add("fa", "fa-trash", "mr-2") + deleteButton.appendChild(deleteButtonIcon) + const deleteButtonText = document.createElement("span") + deleteButtonText.textContent = get(_)("delete") + deleteButton.appendChild(deleteButtonIcon) + deleteButton.appendChild(deleteButtonText) deleteButton.addEventListener("click", onDeleteClick) - const popup = new M.Popup({ closeButton: false }) - popup.setDOMContent(deleteButton) + + popupContent.appendChild(anchorH) + popupContent.appendChild(deleteButton) + popup.setDOMContent(popupContent) marker.setPopup(popup); marker.on("dragstart", onDragStart); @@ -111,7 +126,7 @@ export function createPopupFromTrail(trail: Trail) { : get(theme) === "light" ? emptyStateTrailLight : emptyStateTrailDark; - const popup = new M.Popup({ maxWidth: "320px", closeButton: false }); + const popup = new M.Popup({ maxWidth: "320px" }); // Create a container element for the popup content const linkElement = document.createElement("a"); linkElement.href = `/map/trail/${trail.id}`; // Set href safely diff --git a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts index c9cc8a19..434c90d2 100644 --- a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts +++ b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts @@ -619,7 +619,7 @@ export class ElevationProfile { tooltipInfo.push( `After: ${this.cumulatedDistanceAdjustedUnit[ tooltipItem.dataIndex - ].toFixed(4)} ${distanceUnit} ${this.cumulatedTime.length ? '(' + formatTimeHHMM(this.cumulatedTime[tooltipItem.dataIndex]) + ')' : ''}` + ].toFixed(2)} ${distanceUnit} ${this.cumulatedTime.length ? '(' + formatTimeHHMM(this.cumulatedTime[tooltipItem.dataIndex]) + ')' : ''}` ); } diff --git a/web/src/routes/lists/+page.svelte b/web/src/routes/lists/+page.svelte index b02732dd..a80c15af 100644 --- a/web/src/routes/lists/+page.svelte +++ b/web/src/routes/lists/+page.svelte @@ -138,6 +138,7 @@ function selectTrail(trail: Trail) { selectedTrail = trail; + mapWithElevation.unHighlightTrail(trail.id!); window.scrollTo({ top: 0 }); } diff --git a/web/src/routes/settings/export/+page.svelte b/web/src/routes/settings/export/+page.svelte index a829cfd9..dd97c9c2 100644 --- a/web/src/routes/settings/export/+page.svelte +++ b/web/src/routes/settings/export/+page.svelte @@ -80,7 +80,7 @@ const file = files[i]; try { uploadProgress.set((progress += 100 / (files.length * 2))); - // await trails_upload(file); + await trails_upload(file); } catch (e) { errorsThrown += 1; show_toast({ diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte index ae4b2900..f1c9be30 100644 --- a/web/src/routes/trail/edit/[id]/+page.svelte +++ b/web/src/routes/trail/edit/[id]/+page.svelte @@ -644,7 +644,9 @@ } if (anchorIndex == 0) { deleteFromRoute(anchorIndex); - updateTrailWithRouteData(); + if ($formData.expand?.gpx_data) { + updateTrailWithRouteData(); + } } else if (anchorIndex == anchors.length) { deleteFromRoute(anchorIndex - 1); updateTrailWithRouteData(); @@ -694,8 +696,9 @@ if (previousRouteSegment) { editRoute(anchorIndex - 1, previousRouteSegment); } - - updateTrailWithRouteData(); + if ($formData.expand?.gpx_data) { + updateTrailWithRouteData(); + } } catch (e) { console.error(e); show_toast({ @@ -775,6 +778,7 @@ $formData.elevation_gain = totals.elevationGain; $formData.elevation_loss = totals.elevationLoss; $formData.expand!.gpx_data = route.toString(); + if (!$formData.id) { $formData.id = cryptoRandomString({ length: 15 }); }