mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-02 08:42:31 +00:00
65 lines
1.9 KiB
Svelte
65 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import * as Card from '$lib/components/ui/card';
|
|
import Tooltip from '$lib/components/Tooltip.svelte';
|
|
|
|
import { GPXStatistics } from 'gpx';
|
|
|
|
import { selectedFiles } from '$lib/stores';
|
|
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
|
|
|
|
let gpxData: GPXStatistics = new GPXStatistics();
|
|
|
|
$: {
|
|
gpxData = new GPXStatistics();
|
|
$selectedFiles.forEach((file) => {
|
|
gpxData.mergeWith(file.statistics);
|
|
});
|
|
}
|
|
|
|
function toHHMMSS(seconds: number) {
|
|
var hours = Math.floor(seconds / 3600);
|
|
var minutes = Math.floor(seconds / 60) % 60;
|
|
var seconds = Math.round(seconds % 60);
|
|
|
|
return [hours, minutes, seconds]
|
|
.map((v) => (v < 10 ? '0' + v : v))
|
|
.filter((v, i) => v !== '00' || i > 0)
|
|
.join(':');
|
|
}
|
|
</script>
|
|
|
|
<Card.Root class="h-full overflow-hidden border-none">
|
|
<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center">
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Ruler size="18" class="mr-1" />
|
|
{gpxData.distance.total.toFixed(2)} km
|
|
</span>
|
|
<span slot="tooltip">Distance</span>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<MoveUpRight size="18" class="mr-1" />
|
|
{gpxData.elevation.gain.toFixed(0)} m
|
|
<MoveDownRight size="18" class="mx-1" />
|
|
{gpxData.elevation.loss.toFixed(0)} m
|
|
</span>
|
|
<span slot="tooltip">Elevation</span>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Zap size="18" class="mr-1" />
|
|
{gpxData.speed.moving.toFixed(2)} km/h
|
|
</span>
|
|
<span slot="tooltip">Speed</span>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<span slot="data" class="flex flex-row items-center">
|
|
<Timer size="18" class="mr-1" />
|
|
{toHHMMSS(gpxData.time.moving)} / {toHHMMSS(gpxData.time.total)}
|
|
</span>
|
|
<span slot="tooltip">Moving time / Total time</span>
|
|
</Tooltip>
|
|
</Card.Content>
|
|
</Card.Root>
|