From 34d3242022a0563fec9331f7cf250023c944619d Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 24 Apr 2024 18:02:35 +0200
Subject: [PATCH] more localization

---
 .../lib/components/ElevationProfile.svelte    | 18 +++++++++-------
 website/src/lib/components/GPXData.svelte     | 21 +++++++++++++------
 website/src/lib/components/WithUnits.svelte   | 21 ++++++++++---------
 website/src/locales/en.json                   | 15 ++++++++++++-
 4 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index d5ba9be2..7791a2e7 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -419,13 +419,13 @@
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="slope">
 				<Tooltip>
 					<TriangleRight slot="data" size="16" />
-					<span slot="tooltip">Show slope</span>
+					<span slot="tooltip">{$_('chart.show_slope')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="surface">
 				<Tooltip>
 					<BrickWall slot="data" size="16" />
-					<span slot="tooltip">Show surface</span>
+					<span slot="tooltip">{$_('chart.show_surface')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 		</ToggleGroup.Root>
@@ -434,31 +434,35 @@
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="speed">
 				<Tooltip>
 					<Zap slot="data" size="16" />
-					<span slot="tooltip">Show speed</span>
+					<span slot="tooltip"
+						>{$settings.velocityUnits === 'speed'
+							? $_('chart.show_speed')
+							: $_('chart.show_pace')}</span
+					>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="hr">
 				<Tooltip>
 					<HeartPulse slot="data" size="16" />
-					<span slot="tooltip">Show heart rate</span>
+					<span slot="tooltip">{$_('chart.show_heartrate')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="cad">
 				<Tooltip>
 					<Orbit slot="data" size="16" />
-					<span slot="tooltip">Show cadence</span>
+					<span slot="tooltip">{$_('chart.show_cadence')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="atemp">
 				<Tooltip>
 					<Thermometer slot="data" size="16" />
-					<span slot="tooltip">Show temperature</span>
+					<span slot="tooltip">{$_('chart.show_temperature')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="power">
 				<Tooltip>
 					<SquareActivity slot="data" size="16" />
-					<span slot="tooltip">Show power</span>
+					<span slot="tooltip">{$_('chart.show_power')}</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 		</ToggleGroup.Root>
diff --git a/website/src/lib/components/GPXData.svelte b/website/src/lib/components/GPXData.svelte
index a50c3cae..d23f7971 100644
--- a/website/src/lib/components/GPXData.svelte
+++ b/website/src/lib/components/GPXData.svelte
@@ -5,9 +5,11 @@
 
 	import { GPXStatistics } from 'gpx';
 
-	import { fileCollection, selectedFiles } from '$lib/stores';
+	import { fileCollection, selectedFiles, settings } from '$lib/stores';
 	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
 
+	import { _ } from 'svelte-i18n';
+
 	let gpxData: GPXStatistics = new GPXStatistics();
 
 	$: {
@@ -27,7 +29,7 @@
 				<Ruler size="18" class="mr-1" />
 				<WithUnits value={gpxData.distance.total} type="distance" />
 			</span>
-			<span slot="tooltip">Distance</span>
+			<span slot="tooltip">{$_('quantities.distance')}</span>
 		</Tooltip>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
@@ -36,14 +38,19 @@
 				<MoveDownRight size="18" class="mx-1" />
 				<WithUnits value={gpxData.elevation.loss} type="elevation" />
 			</span>
-			<span slot="tooltip">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={gpxData.speed.moving} type="speed" />
+				<WithUnits value={gpxData.speed.moving} type="speed" showUnits={false} /> /
+				<WithUnits value={gpxData.speed.total} type="speed" />
 			</span>
-			<span slot="tooltip">Speed</span>
+			<span slot="tooltip"
+				>{$settings.velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+					'quantities.moving'
+				)} / {$_('quantities.total')})</span
+			>
 		</Tooltip>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
@@ -52,7 +59,9 @@
 				<span class="mx-1">/</span>
 				<WithUnits value={gpxData.time.total} type="time" />
 			</span>
-			<span slot="tooltip">Moving time / Total time</span>
+			<span slot="tooltip"
+				>{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})</span
+			>
 		</Tooltip>
 	</Card.Content>
 </Card.Root>
diff --git a/website/src/lib/components/WithUnits.svelte b/website/src/lib/components/WithUnits.svelte
index ea3a148e..339ff30c 100644
--- a/website/src/lib/components/WithUnits.svelte
+++ b/website/src/lib/components/WithUnits.svelte
@@ -12,39 +12,40 @@
 
 	export let value: number;
 	export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
+	export let showUnits: boolean = true;
 </script>
 
 {#if type === 'distance'}
 	{#if $settings.distanceUnits === 'metric'}
-		{value.toFixed(2)} {$_('units.kilometers')}
+		{value.toFixed(2)} {showUnits ? $_('units.kilometers') : ''}
 	{:else}
-		{kilometersToMiles(value).toFixed(2)} {$_('units.miles')}
+		{kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles') : ''}
 	{/if}
 {:else if type === 'elevation'}
 	{#if $settings.distanceUnits === 'metric'}
-		{value.toFixed(0)} {$_('units.meters')}
+		{value.toFixed(0)} {showUnits ? $_('units.meters') : ''}
 	{:else}
-		{metersToFeet(value).toFixed(0)} {$_('units.feet')}
+		{metersToFeet(value).toFixed(0)} {showUnits ? $_('units.feet') : ''}
 	{/if}
 {:else if type === 'speed'}
 	{#if $settings.distanceUnits === 'metric'}
 		{#if $settings.velocityUnits === 'speed'}
-			{value.toFixed(2)} {$_('units.kilometers_per_hour')}
+			{value.toFixed(2)} {showUnits ? $_('units.kilometers_per_hour') : ''}
 		{:else}
 			{secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))}
-			{$_('units.minutes_per_kilometer')}
+			{showUnits ? $_('units.minutes_per_kilometer') : ''}
 		{/if}
 	{:else if $settings.velocityUnits === 'speed'}
-		{kilometersToMiles(value).toFixed(2)} {$_('units.miles_per_hour')}
+		{kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles_per_hour') : ''}
 	{:else}
 		{secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))}
-		{$_('units.minutes_per_mile')}
+		{showUnits ? $_('units.minutes_per_mile') : ''}
 	{/if}
 {:else if type === 'temperature'}
 	{#if $settings.temperatureUnits === 'celsius'}
-		{value} {$_('units.celsius')}
+		{value} {showUnits ? $_('units.celsius') : ''}
 	{:else}
-		{celsiusToFahrenheit(value)} {$_('units.fahrenheit')}
+		{celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
 	{/if}
 {:else if type === 'time'}
 	{secondsToHHMMSS(value)}
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 993b2db5..1cc62330 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -94,6 +94,16 @@
             "waymarkedTrailsWinter": "Winter"
         }
     },
+    "chart": {
+        "show_slope": "Show slope",
+        "show_surface": "Show surface",
+        "show_speed": "Show speed",
+        "show_pace": "Show pace",
+        "show_heartrate": "Show heart rate",
+        "show_cadence": "Show cadence",
+        "show_temperature": "Show temperature",
+        "show_power": "Show power"
+    },
     "quantities": {
         "distance": "Distance",
         "elevation": "Elevation",
@@ -104,7 +114,10 @@
         "cadence": "Cadence",
         "power": "Power",
         "slope": "Slope",
-        "surface": "Surface"
+        "surface": "Surface",
+        "time": "Time",
+        "moving": "Moving",
+        "total": "Total"
     },
     "units": {
         "meters": "m",