mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-02 08:42:31 +00:00
63 lines
2.1 KiB
Svelte
63 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import * as Card from '$lib/components/ui/card';
|
|
import Tooltip from '$lib/components/Tooltip.svelte';
|
|
import WithUnits from '$lib/components/WithUnits.svelte';
|
|
|
|
import { GPXStatistics } from 'gpx';
|
|
|
|
import { gpxData, settings } from '$lib/stores';
|
|
|
|
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
|
|
|
|
import { _ } from 'svelte-i18n';
|
|
|
|
let data: GPXStatistics;
|
|
|
|
$: data = $gpxData.statistics;
|
|
</script>
|
|
|
|
<Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4">
|
|
<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center p-0">
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Ruler size="18" class="mr-1" />
|
|
<WithUnits value={data.distance.total} type="distance" />
|
|
</span>
|
|
<span slot="tooltip">{$_('quantities.distance')}</span>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<MoveUpRight size="18" class="mr-1" />
|
|
<WithUnits value={data.elevation.gain} type="elevation" />
|
|
<MoveDownRight size="18" class="mx-1" />
|
|
<WithUnits value={data.elevation.loss} type="elevation" />
|
|
</span>
|
|
<span slot="tooltip">{$_('quantities.elevation')}</span>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Zap size="18" class="mr-1" />
|
|
<WithUnits value={data.speed.total} type="speed" showUnits={false} />
|
|
<span class="mx-1">/</span>
|
|
<WithUnits value={data.speed.moving} type="speed" />
|
|
</span>
|
|
<span slot="tooltip"
|
|
>{$settings.velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
|
|
'quantities.total'
|
|
)} / {$_('quantities.moving')})</span
|
|
>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Timer size="18" class="mr-1" />
|
|
<WithUnits value={data.time.total} type="time" />
|
|
<span class="mx-1">/</span>
|
|
<WithUnits value={data.time.moving} type="time" />
|
|
</span>
|
|
<span slot="tooltip"
|
|
>{$_('quantities.time')} ({$_('quantities.total')} / {$_('quantities.moving')})</span
|
|
>
|
|
</Tooltip>
|
|
</Card.Content>
|
|
</Card.Root>
|