steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 01:22:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

waypoint popup info

Browse Source
This commit is contained in:
vcoppe
2024-05-13 19:43:10 +02:00
parent 7eb3dc07a0
commit 57ebefcb38
6 changed files with 97 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
website/src/lib/components/gpx-layer/WaypointPopup.svelte
View File

@@ -1,13 +1,43 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import { waypointPopup, currentWaypoint } from './WaypointPopup';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Dot } from 'lucide-svelte';
import { onMount } from 'svelte';
import { _ } from 'svelte-i18n';
export let element: HTMLElement;
let popupElement: HTMLDivElement;
onMount(() => {
waypointPopup.setDOMContent(popupElement);
popupElement.classList.remove('hidden');
});
</script>
<div bind:this={element} class="hidden">
<Card.Root class="border-none shadow-md text-base">
<Card.Content class="flex flex-col p-1">Waypoint info (TODO)</Card.Content>
</Card.Root>
<div bind:this={popupElement} class="hidden">
{#if $currentWaypoint}
<Card.Root class="border-none shadow-md text-base max-w-72 p-2">
<Card.Header class="p-0">
<Card.Title class="text-md">{$currentWaypoint.name}</Card.Title>
</Card.Header>
<Card.Content class="flex flex-col p-0 text-sm">
<div class="flex flex-row items-center text-muted-foreground">
{$currentWaypoint.getLatitude().toFixed(6)}&deg; {$currentWaypoint
.getLongitude()
.toFixed(6)}&deg;
{#if $currentWaypoint.ele !== undefined}
<Dot size="16" />
<WithUnits value={$currentWaypoint.ele} type="elevation" />
{/if}
</div>
{#if $currentWaypoint.desc}
<span>{$currentWaypoint.desc}</span>
{/if}
{#if $currentWaypoint.cmt}
<span>{$currentWaypoint.cmt}</span>
{/if}
</Card.Content>
</Card.Root>
{/if}
</div>