From 5b167b09db6b22664653a2268fc36dae37e8a006 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sun, 9 Jun 2024 17:22:41 +0200
Subject: [PATCH] toggle elevation profile

---
 website/src/lib/components/App.svelte           |  8 +++++---
 website/src/lib/components/GPXStatistics.svelte | 14 +++++++++++---
 website/src/lib/components/Map.svelte           |  4 ++--
 website/src/lib/components/Menu.svelte          |  7 ++++++-
 website/src/lib/db.ts                           |  1 +
 website/src/locales/en.json                     |  1 +
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/website/src/lib/components/App.svelte b/website/src/lib/components/App.svelte
index e730510d..aa9eef62 100644
--- a/website/src/lib/components/App.svelte
+++ b/website/src/lib/components/App.svelte
@@ -11,7 +11,7 @@
 
 	import { settings } from '$lib/db';
 
-	const { verticalFileView } = settings;
+	const { verticalFileView, elevationProfile } = settings;
 </script>
 
 <div class="flex flex-row w-screen h-screen">
@@ -29,9 +29,11 @@
 				</div>
 			{/if}
 		</div>
-		<div class="h-48 flex flex-row gap-2 overflow-hidden">
+		<div class="{$elevationProfile ? 'h-48' : 'h-10'} flex flex-row gap-2 overflow-hidden">
 			<GPXStatistics />
-			<ElevationProfile />
+			{#if $elevationProfile}
+				<ElevationProfile />
+			{/if}
 		</div>
 	</div>
 	{#if $verticalFileView}
diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index 3febeeb2..bf6a3f21 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -10,11 +10,19 @@
 
 	import { _ } from 'svelte-i18n';
 
-	const { velocityUnits } = settings;
+	const { velocityUnits, elevationProfile } = settings;
 </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">
+<Card.Root
+	class="h-full {$elevationProfile
+		? ''
+		: 'w-full pr-4'} overflow-hidden border-none shadow-none min-w-48 pl-4"
+>
+	<Card.Content
+		class="h-full flex {$elevationProfile
+			? 'flex-col justify-center'
+			: 'flex-row w-full justify-between'} flex-wrap gap-4  p-0"
+	>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Ruler size="18" class="mr-1" />
diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index bacc74f5..094519e9 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -21,7 +21,7 @@
 		easing: () => 1
 	};
 
-	const { distanceUnits, verticalFileView } = settings;
+	const { distanceUnits, elevationProfile, verticalFileView } = settings;
 	let scaleControl = new mapboxgl.ScaleControl({
 		unit: $distanceUnits
 	});
@@ -117,7 +117,7 @@
 		scaleControl.setUnit($distanceUnits);
 	}
 
-	$: if ($map && !$verticalFileView) {
+	$: if ($map && (!$verticalFileView || !$elevationProfile)) {
 		$map.resize();
 	}
 </script>
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 6d1f807a..e41c95fc 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -24,7 +24,8 @@
 		Sun,
 		Moon,
 		Rows3,
-		Layers3
+		Layers3,
+		MountainSnow
 	} from 'lucide-svelte';
 
 	import {
@@ -49,6 +50,7 @@
 		distanceUnits,
 		velocityUnits,
 		temperatureUnits,
+		elevationProfile,
 		verticalFileView,
 		mode,
 		currentBasemap,
@@ -175,6 +177,9 @@
 			<Menubar.Menu>
 				<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
 				<Menubar.Content class="border-none">
+					<Menubar.CheckboxItem bind:checked={$elevationProfile}>
+						<MountainSnow size="16" class="mr-1" />{$_('menu.elevation_profile')}
+					</Menubar.CheckboxItem>
 					<Menubar.CheckboxItem bind:checked={$verticalFileView}>
 						<Rows3 size="16" class="mr-1" />{$_('menu.vertical_file_view')}
 					</Menubar.CheckboxItem>
diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts
index a95ea5f6..65f9016f 100644
--- a/website/src/lib/db.ts
+++ b/website/src/lib/db.ts
@@ -78,6 +78,7 @@ export const settings = {
     distanceUnits: dexieSettingStore<'metric' | 'imperial'>('distanceUnits', 'metric'),
     velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
     temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
+    elevationProfile: dexieSettingStore('elevationProfile', true),
     verticalFileView: dexieSettingStore<boolean>('fileView', false),
     mode: dexieSettingStore('mode', (() => {
         let currentMode: string | undefined = get(mode);
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index e8f6976f..9eed5ba4 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -15,6 +15,7 @@
         "delete_all": "Delete all",
         "select_all": "Select all",
         "view": "View",
+        "elevation_profile": "Elevation profile",
         "vertical_file_view": "Vertical file list",
         "switch_basemap": "Switch to previous basemap",
         "toggle_overlays": "Toggle overlays",