embedding progress

2025-09-02 16:52:31 +00:00 · 2024-07-11 18:42:49 +02:00
parent 24cf98d68f
commit 030f08abfd
21 changed files with 760 additions and 251 deletions
--- a/website/src/routes/[...language]/+layout.svelte
+++ b/website/src/routes/[...language]/+layout.svelte
@@ -12,14 +12,14 @@
 		locale.set($page.params.language.replace('/', ''));
 	}

-	const appRoute = '/[...language]/app';
+	const appRoutes = ['/[...language]/app', '/[...language]/embed'];
 </script>

 <Head />
 <ModeWatcher />

 {#if !$isLoading}
-	{#if $page.route.id === appRoute}
+	{#if $page.route.id !== null && appRoutes.includes($page.route.id)}
 		<slot />
 	{:else}
 		<Nav />
--- a/website/src/routes/[...language]/+page.svelte
+++ b/website/src/routes/[...language]/+page.svelte
@@ -5,15 +5,13 @@
 	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
 	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
 	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-	import { settings } from '$lib/db';
 	import { BookOpenText, Heart, LineChart, Map, PencilRuler, Route, Scale } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 	import { exampleGPXFile } from '$lib/assets/example';
 	import { writable } from 'svelte/store';
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
-	import { getURLForLanguage } from '$lib/utils';
 	import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
 	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
 	import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
@@ -27,8 +25,6 @@
 	let additionalDatasets = writable(['speed', 'atemp']);
 	let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);

-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-
 	onMount(() => {
 		currentTool.set(Tool.SCISSORS);
 	});
@@ -46,15 +42,11 @@
 				{$_('metadata.description')}
 			</div>
 			<div class="w-full flex flex-row justify-center gap-3">
-				<Button href={getURLForLanguage($locale, '/app')} class="w-1/3 min-w-fit">
+				<Button href="./app" class="w-1/3 min-w-fit">
 					<Map size="18" class="mr-1.5" />
 					{$_('homepage.app')}
 				</Button>
-				<Button
-					variant="secondary"
-					href={getURLForLanguage($locale, '/help')}
-					class="w-1/3 min-w-fit"
-				>
+				<Button variant="secondary" href="./help" class="w-1/3 min-w-fit">
 					<BookOpenText size="18" class="mr-1.5" />
 					<span>{$_('menu.help')}</span>
 				</Button>
@@ -161,9 +153,6 @@
 				additionalDatasets={$additionalDatasets}
 				elevationFill={$elevationFill}
 				panelSize={200}
-				distanceUnits={$distanceUnits}
-				velocityUnits={$velocityUnits}
-				temperatureUnits={$temperatureUnits}
 			/>
 		</div>
 		<div class="flex flex-col items-center">
@@ -173,7 +162,6 @@
 					{slicedGPXStatistics}
 					panelSize={192}
 					orientation={'horizontal'}
-					velocityUnits={$velocityUnits}
 				/>
 			</div>
 		</div>
--- a/website/src/routes/[...language]/app/+page.svelte
+++ b/website/src/routes/[...language]/app/+page.svelte
@@ -1,5 +1,108 @@
 <script lang="ts">
-	import App from '$lib/components/App.svelte';
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import Map from '$lib/components/Map.svelte';
+	import Menu from '$lib/components/Menu.svelte';
+	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import Resizer from '$lib/components/Resizer.svelte';
+	import { Toaster } from '$lib/components/ui/sonner';
+
+	import { observeFilesFromDatabase, settings } from '$lib/db';
+	import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+
+	const {
+		verticalFileView,
+		elevationProfile,
+		bottomPanelSize,
+		rightPanelSize,
+		additionalDatasets,
+		elevationFill
+	} = settings;
+
+	onMount(() => {
+		observeFilesFromDatabase();
+
+		let files = JSON.parse($page.url.searchParams.get('files') || '[]');
+
+		if (files.length > 0) {
+			let downloads: Promise<File | null>[] = [];
+			files.forEach((url) => {
+				downloads.push(
+					fetch(url)
+						.then((response) => response.blob())
+						.then((blob) => new File([blob], url.split('/').pop()))
+				);
+			});
+
+			Promise.all(downloads).then((files) => {
+				files = files.filter((file) => file !== null);
+				loadFiles(files);
+			});
+		}
+	});
 </script>

-<App />
+<div class="fixed flex flex-row w-screen h-screen h-dvh">
+	<div class="flex flex-col grow h-full min-w-0">
+		<div class="grow relative">
+			<Menu />
+			<div
+				class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none"
+			>
+				<Toolbar />
+			</div>
+			<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
+			<StreetViewControl />
+			<LayerControl />
+			<GPXLayers />
+			<Toaster richColors />
+			{#if !$verticalFileView}
+				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+					<FileList orientation="horizontal" />
+				</div>
+			{/if}
+		</div>
+		{#if $elevationProfile}
+			<Resizer orientation="row" bind:after={$bottomPanelSize} minAfter={100} maxAfter={300} />
+		{/if}
+		<div
+			class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+			style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
+		>
+			<GPXStatistics
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				panelSize={$bottomPanelSize}
+				orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+			/>
+			{#if $elevationProfile}
+				<ElevationProfile
+					{gpxStatistics}
+					{slicedGPXStatistics}
+					bind:additionalDatasets={$additionalDatasets}
+					bind:elevationFill={$elevationFill}
+					panelSize={$bottomPanelSize}
+					class="py-2"
+				/>
+			{/if}
+		</div>
+	</div>
+	{#if $verticalFileView}
+		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
+		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
+	{/if}
+</div>
+
+<style lang="postcss">
+	div :global(.toaster.group) {
+		@apply absolute;
+		@apply right-2;
+		--offset: 50px !important;
+	}
+</style>
--- a/website/src/routes/[...language]/embed/+page.svelte
+++ b/website/src/routes/[...language]/embed/+page.svelte
@@ -0,0 +1,231 @@
+<script lang="ts">
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import MapComponent from '$lib/components/Map.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import OpenIn from '$lib/components/OpenIn.svelte';
+
+	import { gpxStatistics, slicedGPXStatistics, embedding, loadFile, map } from '$lib/stores';
+	import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+	import { readable } from 'svelte/store';
+	import type { GPXFile } from 'gpx';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { ListFileItem } from '$lib/components/file-list/FileList';
+
+	$embedding = true;
+
+	const { currentBasemap, distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+	let elevationProfile = true;
+	let bottomPanelSize = 170;
+	let additionalDatasets: string[] = [];
+	let elevationFill: 'slope' | 'surface' | undefined = undefined;
+	let elevationControls = true;
+
+	let files: string[] = [];
+
+	let prevUnits = {
+		distance: '',
+		velocity: '',
+		temperature: ''
+	};
+
+	onMount(() => {
+		let options = $page.url.searchParams.get('options');
+		if (options === null) {
+			return;
+		}
+		options = JSON.parse(options);
+		if (options === null) {
+			return;
+		}
+
+		if (options.files && Array.isArray(options.files)) {
+			files = options.files;
+			let downloads: Promise<GPXFile | null>[] = [];
+			options.files.forEach((url) => {
+				downloads.push(
+					fetch(url)
+						.then((response) => response.blob())
+						.then((blob) => new File([blob], url.split('/').pop()))
+						.then(loadFile)
+				);
+			});
+
+			Promise.all(downloads).then((files) => {
+				let ids: string[] = [];
+				let bounds = {
+					southWest: {
+						lat: 90,
+						lon: 180
+					},
+					northEast: {
+						lat: -90,
+						lon: -180
+					}
+				};
+
+				files.forEach((file, index) => {
+					if (file === null) {
+						return;
+					}
+
+					let id = `gpx-${index}`;
+					file._data.id = id;
+					let statistics = new GPXStatisticsTree(file);
+
+					fileObservers.update(($fileObservers) => {
+						$fileObservers.set(
+							id,
+							readable({
+								file,
+								statistics
+							})
+						);
+						return $fileObservers;
+					});
+
+					ids.push(id);
+					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
+
+					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+				});
+
+				selection.update(($selection) => {
+					$selection.clear();
+					ids.forEach((id) => {
+						$selection.toggle(new ListFileItem(id));
+					});
+					return $selection;
+				});
+
+				if ($page.url.hash.length === 0) {
+					map.subscribe(($map) => {
+						if ($map) {
+							$map.fitBounds(
+								[
+									bounds.southWest.lon,
+									bounds.southWest.lat,
+									bounds.northEast.lon,
+									bounds.northEast.lat
+								],
+								{
+									padding: 80,
+									linear: true,
+									easing: () => 1
+								}
+							);
+						}
+					});
+				}
+			});
+		}
+
+		if (options.basemap !== undefined && typeof options.basemap === 'string') {
+			currentBasemap.set(options.basemap);
+		}
+
+		if (options.elevation !== undefined && typeof options.elevation === 'object') {
+			const elevationOptions = options.elevation;
+			if (elevationOptions.show !== undefined && typeof elevationOptions.show === 'boolean') {
+				elevationProfile = elevationOptions.show;
+			}
+
+			if (elevationOptions.data && Array.isArray(elevationOptions.data)) {
+				elevationOptions.data.forEach((dataset) => {
+					if (['speed', 'hr', 'cad', 'temp', 'power'].includes(dataset)) {
+						additionalDatasets.push(dataset);
+					}
+				});
+			}
+
+			if (elevationOptions.fill === 'slope' || elevationOptions.fill === 'surface') {
+				elevationFill = elevationOptions.fill;
+			}
+
+			if (elevationOptions.height !== undefined && typeof elevationOptions.height === 'number') {
+				bottomPanelSize = elevationOptions.height;
+			}
+
+			if (
+				elevationOptions.controls !== undefined &&
+				typeof elevationOptions.controls === 'boolean'
+			) {
+				elevationControls = elevationOptions.controls;
+			}
+		}
+
+		prevUnits.distance = $distanceUnits;
+		prevUnits.velocity = $velocityUnits;
+		prevUnits.temperature = $temperatureUnits;
+
+		if (options.distanceUnits === 'metric' || options.distanceUnits === 'imperial') {
+			$distanceUnits = options.distanceUnits;
+		}
+
+		if (options.velocityUnits === 'speed' || options.velocityUnits === 'pace') {
+			$velocityUnits = options.velocityUnits;
+		}
+
+		if (options.temperatureUnits === 'celsius' || options.temperatureUnits === 'fahrenheit') {
+			$temperatureUnits = options.temperatureUnits;
+		}
+	});
+
+	onDestroy(() => {
+		if ($distanceUnits !== prevUnits.distance) {
+			$distanceUnits = prevUnits.distance;
+		}
+
+		if ($velocityUnits !== prevUnits.velocity) {
+			$velocityUnits = prevUnits.velocity;
+		}
+
+		if ($temperatureUnits !== prevUnits.temperature) {
+			$temperatureUnits = prevUnits.temperature;
+		}
+	});
+</script>
+
+<div class="fixed flex flex-col h-full w-full border rounded-xl overflow-clip">
+	<div class="grow relative">
+		<MapComponent class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}" geocoder={false} />
+		<OpenIn bind:files />
+		<LayerControl />
+		<GPXLayers />
+		{#if $fileObservers.size > 1}
+			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+				<FileList orientation="horizontal" />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="{elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+		style={elevationProfile ? `height: ${bottomPanelSize}px` : ''}
+	>
+		<GPXStatistics
+			{gpxStatistics}
+			{slicedGPXStatistics}
+			panelSize={bottomPanelSize}
+			orientation={elevationProfile ? 'vertical' : 'horizontal'}
+		/>
+		{#if elevationProfile}
+			<ElevationProfile
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				{additionalDatasets}
+				{elevationFill}
+				panelSize={bottomPanelSize}
+				showControls={elevationControls}
+				class="py-2"
+			/>
+		{/if}
+	</div>
+</div>
--- a/website/src/routes/[...language]/help/+layout.svelte
+++ b/website/src/routes/[...language]/help/+layout.svelte
@@ -8,12 +8,12 @@
 </script>

 <div class="p-12 flex flex-row gap-24">
-	<div class="hidden md:flex flex-col gap-1 w-40 sticky top-[105px] self-start">
+	<div class="hidden md:flex flex-col gap-2 w-40 sticky top-[105px] self-start shrink-0">
 		{#each Object.keys(guides) as guide}
 			<Button
 				variant="link"
 				href={getURLForLanguage($locale, `/help/${guide}`)}
-				class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start {$page
+				class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
 					.params.guide === guide
 					? 'font-semibold text-foreground'
 					: ''}"
@@ -24,7 +24,7 @@
 				<Button
 					variant="link"
 					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-					class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start ml-3 {$page
+					class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
 						.params.guide ===
 					guide + '/' + subGuide
 						? 'font-semibold text-foreground'