mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-09 11:47:51 +00:00
37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import type { TrackPoint } from 'gpx';
|
||
|
|
import type { PopupItem } from '$lib/components/MapPopup';
|
||
|
|
import * as Card from '$lib/components/ui/card';
|
||
|
|
import WithUnits from '$lib/components/WithUnits.svelte';
|
||
|
|
import { Compass, Mountain, Timer } from 'lucide-svelte';
|
||
|
|
import { df } from '$lib/utils';
|
||
|
|
|
||
|
|
export let trackpoint: PopupItem<TrackPoint>;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Card.Root class="border-none shadow-md text-base p-2">
|
||
|
|
<Card.Header class="p-0">
|
||
|
|
<Card.Title class="text-md"></Card.Title>
|
||
|
|
</Card.Header>
|
||
|
|
<Card.Content class="flex flex-col p-0 text-xs gap-1">
|
||
|
|
<div class="flex flex-row items-center gap-1">
|
||
|
|
<Compass size="14" />
|
||
|
|
{trackpoint.item.getLatitude().toFixed(6)}° {trackpoint.item
|
||
|
|
.getLongitude()
|
||
|
|
.toFixed(6)}°
|
||
|
|
</div>
|
||
|
|
{#if trackpoint.item.ele !== undefined}
|
||
|
|
<div class="flex flex-row items-center gap-1">
|
||
|
|
<Mountain size="14" />
|
||
|
|
<WithUnits value={trackpoint.item.ele} type="elevation" />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
{#if trackpoint.item.time}
|
||
|
|
<div class="flex flex-row items-center gap-1">
|
||
|
|
<Timer size="14" />
|
||
|
|
{df.format(trackpoint.item.time)}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</Card.Content>
|
||
|
|
</Card.Root>
|