From 9c85a014dab2aee74c764e94e4ab7ad25acae937 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 4 Sep 2024 19:34:28 +0200
Subject: [PATCH] clarify elevation vs elevation gain/loss

---
 .../src/lib/components/GPXStatistics.svelte   | 150 +++++++++---------
 .../src/lib/components/toolbar/Toolbar.svelte | 114 ++++++-------
 website/src/locales/en.json                   |   2 +-
 3 files changed, 136 insertions(+), 130 deletions(-)

diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index cfb6c480..0db2142d 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -1,84 +1,90 @@
 <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 * as Card from '$lib/components/ui/card';
+    import Tooltip from '$lib/components/Tooltip.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 type { GPXStatistics } from 'gpx';
-	import type { Writable } from 'svelte/store';
-	import { settings } from '$lib/db';
+    import { _ } from 'svelte-i18n';
+    import type { GPXStatistics } from 'gpx';
+    import type { Writable } from 'svelte/store';
+    import { settings } from '$lib/db';
 
-	export let gpxStatistics: Writable<GPXStatistics>;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let orientation: 'horizontal' | 'vertical';
-	export let panelSize: number;
+    export let gpxStatistics: Writable<GPXStatistics>;
+    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+    export let orientation: 'horizontal' | 'vertical';
+    export let panelSize: number;
 
-	const { velocityUnits } = settings;
+    const { velocityUnits } = settings;
 
-	let statistics: GPXStatistics;
+    let statistics: GPXStatistics;
 
-	$: if ($slicedGPXStatistics !== undefined) {
-		statistics = $slicedGPXStatistics[0];
-	} else {
-		statistics = $gpxStatistics;
-	}
+    $: if ($slicedGPXStatistics !== undefined) {
+        statistics = $slicedGPXStatistics[0];
+    } else {
+        statistics = $gpxStatistics;
+    }
 </script>
 
 <Card.Root
-	class="h-full {orientation === 'vertical'
-		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
-		: 'w-full'} border-none shadow-none"
+    class="h-full {orientation === 'vertical'
+        ? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
+        : 'w-full'} border-none shadow-none"
 >
-	<Card.Content
-		class="h-full flex {orientation === 'vertical'
-			? 'flex-col justify-center'
-			: 'flex-row w-full justify-between'} gap-4  p-0"
-	>
-		<Tooltip>
-			<span slot="data" class="flex flex-row items-center">
-				<Ruler size="18" class="mr-1" />
-				<WithUnits value={statistics.global.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={statistics.global.elevation.gain} type="elevation" />
-				<MoveDownRight size="18" class="mx-1" />
-				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
-			</span>
-			<span slot="tooltip">{$_('quantities.elevation')}</span>
-		</Tooltip>
-		{#if panelSize > 120 || orientation === 'horizontal'}
-			<Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
-				<span slot="data" class="flex flex-row items-center">
-					<Zap size="18" class="mr-1" />
-					<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
-					<span class="mx-1">/</span>
-					<WithUnits value={statistics.global.speed.total} type="speed" />
-				</span>
-				<span slot="tooltip"
-					>{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
-						'quantities.moving'
-					)} / {$_('quantities.total')})</span
-				>
-			</Tooltip>
-		{/if}
-		{#if panelSize > 160 || orientation === 'horizontal'}
-			<Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
-				<span slot="data" class="flex flex-row items-center">
-					<Timer size="18" class="mr-1" />
-					<WithUnits value={statistics.global.time.moving} type="time" />
-					<span class="mx-1">/</span>
-					<WithUnits value={statistics.global.time.total} type="time" />
-				</span>
-				<span slot="tooltip"
-					>{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})</span
-				>
-			</Tooltip>
-		{/if}
-	</Card.Content>
+    <Card.Content
+        class="h-full flex {orientation === 'vertical'
+            ? 'flex-col justify-center'
+            : 'flex-row w-full justify-between'} gap-4  p-0"
+    >
+        <Tooltip>
+            <span slot="data" class="flex flex-row items-center">
+                <Ruler size="18" class="mr-1" />
+                <WithUnits value={statistics.global.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={statistics.global.elevation.gain} type="elevation" />
+                <MoveDownRight size="18" class="mx-1" />
+                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
+            </span>
+            <span slot="tooltip">{$_('quantities.elevation_gain_loss')}</span>
+        </Tooltip>
+        {#if panelSize > 120 || orientation === 'horizontal'}
+            <Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
+                <span slot="data" class="flex flex-row items-center">
+                    <Zap size="18" class="mr-1" />
+                    <WithUnits
+                        value={statistics.global.speed.moving}
+                        type="speed"
+                        showUnits={false}
+                    />
+                    <span class="mx-1">/</span>
+                    <WithUnits value={statistics.global.speed.total} type="speed" />
+                </span>
+                <span slot="tooltip"
+                    >{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+                        'quantities.moving'
+                    )} / {$_('quantities.total')})</span
+                >
+            </Tooltip>
+        {/if}
+        {#if panelSize > 160 || orientation === 'horizontal'}
+            <Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
+                <span slot="data" class="flex flex-row items-center">
+                    <Timer size="18" class="mr-1" />
+                    <WithUnits value={statistics.global.time.moving} type="time" />
+                    <span class="mx-1">/</span>
+                    <WithUnits value={statistics.global.time.total} type="time" />
+                </span>
+                <span slot="tooltip"
+                    >{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
+                        'quantities.total'
+                    )})</span
+                >
+            </Tooltip>
+        {/if}
+    </Card.Content>
 </Card.Root>
diff --git a/website/src/lib/components/toolbar/Toolbar.svelte b/website/src/lib/components/toolbar/Toolbar.svelte
index 6674b30c..0dde38f2 100644
--- a/website/src/lib/components/toolbar/Toolbar.svelte
+++ b/website/src/lib/components/toolbar/Toolbar.svelte
@@ -1,63 +1,63 @@
 <script lang="ts">
-	import { Tool } from '$lib/stores';
-	import ToolbarItem from './ToolbarItem.svelte';
-	import {
-		Group,
-		CalendarClock,
-		Pencil,
-		SquareDashedMousePointer,
-		Ungroup,
-		MapPin,
-		Filter,
-		Scissors,
-		MountainSnow
-	} from 'lucide-svelte';
+    import { Tool } from '$lib/stores';
+    import ToolbarItem from './ToolbarItem.svelte';
+    import {
+        Group,
+        CalendarClock,
+        Pencil,
+        SquareDashedMousePointer,
+        Ungroup,
+        MapPin,
+        Filter,
+        Scissors,
+        MountainSnow
+    } from 'lucide-svelte';
 
-	import { _ } from 'svelte-i18n';
-	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
+    import { _ } from 'svelte-i18n';
+    import ToolbarItemMenu from './ToolbarItemMenu.svelte';
 </script>
 
 <div class="flex flex-row w-full items-center pr-12">
-	<div
-		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}>
-			<Pencil slot="icon" size="18" class="h-" />
-			<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.WAYPOINT}>
-			<MapPin slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.SCISSORS}>
-			<Scissors slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.TIME}>
-			<CalendarClock slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.MERGE}>
-			<Group slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.EXTRACT}>
-			<Ungroup slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.ELEVATION}>
-			<MountainSnow slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.elevation.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.REDUCE}>
-			<Filter slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
-		</ToolbarItem>
-		<ToolbarItem tool={Tool.CLEAN}>
-			<SquareDashedMousePointer slot="icon" size="18" />
-			<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
-		</ToolbarItem>
-	</div>
-	<ToolbarItemMenu class={$$props.class ?? ''} />
+    <div
+        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}>
+            <Pencil slot="icon" size="18" class="h-" />
+            <span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.WAYPOINT}>
+            <MapPin slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.SCISSORS}>
+            <Scissors slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.TIME}>
+            <CalendarClock slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.MERGE}>
+            <Group slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.EXTRACT}>
+            <Ungroup slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.ELEVATION}>
+            <MountainSnow slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.elevation.button')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.REDUCE}>
+            <Filter slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
+        </ToolbarItem>
+        <ToolbarItem tool={Tool.CLEAN}>
+            <SquareDashedMousePointer slot="icon" size="18" />
+            <span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
+        </ToolbarItem>
+    </div>
+    <ToolbarItemMenu class={$$props.class ?? ''} />
 </div>
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 76a05848..f2688919 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -185,7 +185,6 @@
             "help_invalid_selection": "Your selection must contain items with multiple traces to extract them."
         },
         "elevation": {
-            "tooltip": "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_no_selection": "Select a file item to request elevation data."
@@ -356,6 +355,7 @@
     "quantities": {
         "distance": "Distance",
         "elevation": "Elevation",
+        "elevation_gain_loss": "Elevation gain and loss",
         "temperature": "Temperature",
         "speed": "Speed",
         "pace": "Pace",