steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

clarify elevation vs elevation gain/loss

Browse Source
This commit is contained in:
vcoppe
2024-09-04 19:34:28 +02:00
parent f55a3c0224
commit 9c85a014da
3 changed files with 136 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
website/src/lib/components/GPXStatistics.svelte
View File

@@ -1,84 +1,90 @@
<script lang="ts"> <script lang="ts">
import * as Card from '$lib/components/ui/card'; import * as Card from '$lib/components/ui/card';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import WithUnits from '$lib/components/WithUnits.svelte'; import WithUnits from '$lib/components/WithUnits.svelte';
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte'; import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import type { GPXStatistics } from 'gpx'; import type { GPXStatistics } from 'gpx';
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
import { settings } from '$lib/db'; import { settings } from '$lib/db';
export let gpxStatistics: Writable<GPXStatistics>; export let gpxStatistics: Writable<GPXStatistics>;
export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>; export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
export let orientation: 'horizontal' | 'vertical'; export let orientation: 'horizontal' | 'vertical';
export let panelSize: number; export let panelSize: number;
const { velocityUnits } = settings; const { velocityUnits } = settings;
let statistics: GPXStatistics; let statistics: GPXStatistics;
$: if ($slicedGPXStatistics !== undefined) { $: if ($slicedGPXStatistics !== undefined) {
statistics = $slicedGPXStatistics[0]; statistics = $slicedGPXStatistics[0];
} else { } else {
statistics = $gpxStatistics; statistics = $gpxStatistics;
} }
</script> </script>
<Card.Root <Card.Root
class="h-full {orientation === 'vertical' class="h-full {orientation === 'vertical'
? 'min-w-44 sm:min-w-52 text-sm sm:text-base' ? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
: 'w-full'} border-none shadow-none" : 'w-full'} border-none shadow-none"
> >
<Card.Content <Card.Content
class="h-full flex {orientation === 'vertical' class="h-full flex {orientation === 'vertical'
? 'flex-col justify-center' ? 'flex-col justify-center'
: 'flex-row w-full justify-between'} gap-4 p-0" : 'flex-row w-full justify-between'} gap-4 p-0"
> >
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<Ruler size="18" class="mr-1" /> <Ruler size="18" class="mr-1" />
<WithUnits value={statistics.global.distance.total} type="distance" /> <WithUnits value={statistics.global.distance.total} type="distance" />
</span> </span>
<span slot="tooltip">{$_('quantities.distance')}</span> <span slot="tooltip">{$_('quantities.distance')}</span>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<MoveUpRight size="18" class="mr-1" /> <MoveUpRight size="18" class="mr-1" />
<WithUnits value={statistics.global.elevation.gain} type="elevation" /> <WithUnits value={statistics.global.elevation.gain} type="elevation" />
<MoveDownRight size="18" class="mx-1" /> <MoveDownRight size="18" class="mx-1" />
<WithUnits value={statistics.global.elevation.loss} type="elevation" /> <WithUnits value={statistics.global.elevation.loss} type="elevation" />
</span> </span>
<span slot="tooltip">{$_('quantities.elevation')}</span> <span slot="tooltip">{$_('quantities.elevation_gain_loss')}</span>
</Tooltip> </Tooltip>
{#if panelSize > 120 || orientation === 'horizontal'} {#if panelSize > 120 || orientation === 'horizontal'}
<Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}> <Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<Zap size="18" class="mr-1" /> <Zap size="18" class="mr-1" />
<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} /> <WithUnits
<span class="mx-1">/</span> value={statistics.global.speed.moving}
<WithUnits value={statistics.global.speed.total} type="speed" /> type="speed"
</span> showUnits={false}
<span slot="tooltip" />
>{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_( <span class="mx-1">/</span>
'quantities.moving' <WithUnits value={statistics.global.speed.total} type="speed" />
)} / {$_('quantities.total')})</span </span>
> <span slot="tooltip"
</Tooltip> >{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
{/if} 'quantities.moving'
{#if panelSize > 160 || orientation === 'horizontal'} )} / {$_('quantities.total')})</span
<Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}> >
<span slot="data" class="flex flex-row items-center"> </Tooltip>
<Timer size="18" class="mr-1" /> {/if}
<WithUnits value={statistics.global.time.moving} type="time" /> {#if panelSize > 160 || orientation === 'horizontal'}
<span class="mx-1">/</span> <Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
<WithUnits value={statistics.global.time.total} type="time" /> <span slot="data" class="flex flex-row items-center">
</span> <Timer size="18" class="mr-1" />
<span slot="tooltip" <WithUnits value={statistics.global.time.moving} type="time" />
>{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})</span <span class="mx-1">/</span>
> <WithUnits value={statistics.global.time.total} type="time" />
</Tooltip> </span>
{/if} <span slot="tooltip"
</Card.Content> >{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
'quantities.total'
)})</span
>
</Tooltip>
{/if}
</Card.Content>
</Card.Root> </Card.Root>

114
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -1,63 +1,63 @@
<script lang="ts"> <script lang="ts">
import { Tool } from '$lib/stores'; import { Tool } from '$lib/stores';
import ToolbarItem from './ToolbarItem.svelte'; import ToolbarItem from './ToolbarItem.svelte';
import { import {
Group, Group,
CalendarClock, CalendarClock,
Pencil, Pencil,
SquareDashedMousePointer, SquareDashedMousePointer,
Ungroup, Ungroup,
MapPin, MapPin,
Filter, Filter,
Scissors, Scissors,
MountainSnow MountainSnow
} from 'lucide-svelte'; } from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import ToolbarItemMenu from './ToolbarItemMenu.svelte'; import ToolbarItemMenu from './ToolbarItemMenu.svelte';
</script> </script>
<div class="flex flex-row w-full items-center pr-12"> <div class="flex flex-row w-full items-center pr-12">
<div <div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ?? class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
''}" ''}"
> >
<ToolbarItem tool={Tool.ROUTING}> <ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" class="h-" /> <Pencil slot="icon" size="18" class="h-" />
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span> <span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.WAYPOINT}> <ToolbarItem tool={Tool.WAYPOINT}>
<MapPin slot="icon" size="18" /> <MapPin slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span> <span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.SCISSORS}> <ToolbarItem tool={Tool.SCISSORS}>
<Scissors slot="icon" size="18" /> <Scissors slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span> <span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.TIME}> <ToolbarItem tool={Tool.TIME}>
<CalendarClock slot="icon" size="18" /> <CalendarClock slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time.tooltip')}</span> <span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.MERGE}> <ToolbarItem tool={Tool.MERGE}>
<Group slot="icon" size="18" /> <Group slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.merge.tooltip')}</span> <span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.EXTRACT}> <ToolbarItem tool={Tool.EXTRACT}>
<Ungroup slot="icon" size="18" /> <Ungroup slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.extract.tooltip')}</span> <span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.ELEVATION}> <ToolbarItem tool={Tool.ELEVATION}>
<MountainSnow slot="icon" size="18" /> <MountainSnow slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.elevation.tooltip')}</span> <span slot="tooltip">{$_('toolbar.elevation.button')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.REDUCE}> <ToolbarItem tool={Tool.REDUCE}>
<Filter slot="icon" size="18" /> <Filter slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span> <span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.CLEAN}> <ToolbarItem tool={Tool.CLEAN}>
<SquareDashedMousePointer slot="icon" size="18" /> <SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span> <span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
</ToolbarItem> </ToolbarItem>
</div> </div>
<ToolbarItemMenu class={$$props.class ?? ''} /> <ToolbarItemMenu class={$$props.class ?? ''} />
</div> </div>

2
website/src/locales/en.json
View File

@@ -185,7 +185,6 @@
"help_invalid_selection": "Your selection must contain items with multiple traces to extract them." "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
}, },
"elevation": { "elevation": {
"tooltip": "Request elevation data",
"button": "Request elevation data", "button": "Request elevation data",
"help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.", "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
"help_no_selection": "Select a file item to request elevation data." "help_no_selection": "Select a file item to request elevation data."
@@ -356,6 +355,7 @@
"quantities": { "quantities": {
"distance": "Distance", "distance": "Distance",
"elevation": "Elevation", "elevation": "Elevation",
"elevation_gain_loss": "Elevation gain and loss",
"temperature": "Temperature", "temperature": "Temperature",
"speed": "Speed", "speed": "Speed",
"pace": "Pace", "pace": "Pace",