mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 23:53:25 +00:00
simplify specifying drive ids
This commit is contained in:
vcoppe
@@ -1,264 +1,272 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
||||||
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
||||||
import FileList from '$lib/components/file-list/FileList.svelte';
|
import FileList from '$lib/components/file-list/FileList.svelte';
|
||||||
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
||||||
import Map from '$lib/components/Map.svelte';
|
import Map from '$lib/components/Map.svelte';
|
||||||
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
||||||
import OpenIn from '$lib/components/embedding/OpenIn.svelte';
|
import OpenIn from '$lib/components/embedding/OpenIn.svelte';
|
||||||
import {
|
import {
|
||||||
gpxStatistics,
|
gpxStatistics,
|
||||||
slicedGPXStatistics,
|
slicedGPXStatistics,
|
||||||
embedding,
|
embedding,
|
||||||
loadFile,
|
loadFile,
|
||||||
map,
|
map,
|
||||||
updateGPXData
|
updateGPXData
|
||||||
} from '$lib/stores';
|
} from '$lib/stores';
|
||||||
import { onDestroy, onMount } from 'svelte';
|
import { onDestroy, onMount } from 'svelte';
|
||||||
import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
|
import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
|
||||||
import { readable } from 'svelte/store';
|
import { readable } from 'svelte/store';
|
||||||
import type { GPXFile } from 'gpx';
|
import type { GPXFile } from 'gpx';
|
||||||
import { selection } from '$lib/components/file-list/Selection';
|
import { selection } from '$lib/components/file-list/Selection';
|
||||||
import { ListFileItem } from '$lib/components/file-list/FileList';
|
import { ListFileItem } from '$lib/components/file-list/FileList';
|
||||||
import { allowedEmbeddingBasemaps, type EmbeddingOptions } from './Embedding';
|
import {
|
||||||
import { mode, setMode } from 'mode-watcher';
|
allowedEmbeddingBasemaps,
|
||||||
|
getFilesFromEmbeddingOptions,
|
||||||
|
type EmbeddingOptions
|
||||||
|
} from './Embedding';
|
||||||
|
import { mode, setMode } from 'mode-watcher';
|
||||||
|
|
||||||
$embedding = true;
|
$embedding = true;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentBasemap,
|
currentBasemap,
|
||||||
distanceUnits,
|
distanceUnits,
|
||||||
velocityUnits,
|
velocityUnits,
|
||||||
temperatureUnits,
|
temperatureUnits,
|
||||||
fileOrder,
|
fileOrder,
|
||||||
distanceMarkers,
|
distanceMarkers,
|
||||||
directionMarkers
|
directionMarkers
|
||||||
} = settings;
|
} = settings;
|
||||||
|
|
||||||
export let useHash = true;
|
export let useHash = true;
|
||||||
export let options: EmbeddingOptions;
|
export let options: EmbeddingOptions;
|
||||||
export let hash: string;
|
export let hash: string;
|
||||||
|
|
||||||
let prevSettings = {
|
let prevSettings = {
|
||||||
distanceMarkers: false,
|
distanceMarkers: false,
|
||||||
directionMarkers: false,
|
directionMarkers: false,
|
||||||
distanceUnits: 'metric',
|
distanceUnits: 'metric',
|
||||||
velocityUnits: 'speed',
|
velocityUnits: 'speed',
|
||||||
temperatureUnits: 'celsius',
|
temperatureUnits: 'celsius',
|
||||||
theme: 'system'
|
theme: 'system'
|
||||||
};
|
};
|
||||||
|
|
||||||
function applyOptions() {
|
function applyOptions() {
|
||||||
fileObservers.update(($fileObservers) => {
|
fileObservers.update(($fileObservers) => {
|
||||||
$fileObservers.clear();
|
$fileObservers.clear();
|
||||||
return $fileObservers;
|
return $fileObservers;
|
||||||
});
|
});
|
||||||
|
|
||||||
let downloads: Promise<GPXFile | null>[] = [];
|
let downloads: Promise<GPXFile | null>[] = [];
|
||||||
options.files.forEach((url) => {
|
getFilesFromEmbeddingOptions(options).forEach((url) => {
|
||||||
downloads.push(
|
downloads.push(
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
.then((blob) => new File([blob], url.split('/').pop() ?? url))
|
.then((blob) => new File([blob], url.split('/').pop() ?? url))
|
||||||
.then(loadFile)
|
.then(loadFile)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.all(downloads).then((files) => {
|
Promise.all(downloads).then((files) => {
|
||||||
let ids: string[] = [];
|
let ids: string[] = [];
|
||||||
let bounds = {
|
let bounds = {
|
||||||
southWest: {
|
southWest: {
|
||||||
lat: 90,
|
lat: 90,
|
||||||
lon: 180
|
lon: 180
|
||||||
},
|
},
|
||||||
northEast: {
|
northEast: {
|
||||||
lat: -90,
|
lat: -90,
|
||||||
lon: -180
|
lon: -180
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fileObservers.update(($fileObservers) => {
|
fileObservers.update(($fileObservers) => {
|
||||||
files.forEach((file, index) => {
|
files.forEach((file, index) => {
|
||||||
if (file === null) {
|
if (file === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let id = `gpx-${index}-embed`;
|
let id = `gpx-${index}-embed`;
|
||||||
file._data.id = id;
|
file._data.id = id;
|
||||||
let statistics = new GPXStatisticsTree(file);
|
let statistics = new GPXStatisticsTree(file);
|
||||||
|
|
||||||
$fileObservers.set(
|
$fileObservers.set(
|
||||||
id,
|
id,
|
||||||
readable({
|
readable({
|
||||||
file,
|
file,
|
||||||
statistics
|
statistics
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
ids.push(id);
|
ids.push(id);
|
||||||
let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
|
let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
|
||||||
|
.bounds;
|
||||||
|
|
||||||
bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
|
bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
|
||||||
bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
|
bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
|
||||||
bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
|
bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
|
||||||
bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
|
bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
|
||||||
});
|
});
|
||||||
|
|
||||||
return $fileObservers;
|
return $fileObservers;
|
||||||
});
|
});
|
||||||
|
|
||||||
$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
|
$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
|
||||||
|
|
||||||
selection.update(($selection) => {
|
selection.update(($selection) => {
|
||||||
$selection.clear();
|
$selection.clear();
|
||||||
ids.forEach((id) => {
|
ids.forEach((id) => {
|
||||||
$selection.toggle(new ListFileItem(id));
|
$selection.toggle(new ListFileItem(id));
|
||||||
});
|
});
|
||||||
return $selection;
|
return $selection;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (hash.length === 0) {
|
if (hash.length === 0) {
|
||||||
map.subscribe(($map) => {
|
map.subscribe(($map) => {
|
||||||
if ($map) {
|
if ($map) {
|
||||||
$map.fitBounds(
|
$map.fitBounds(
|
||||||
[
|
[
|
||||||
bounds.southWest.lon,
|
bounds.southWest.lon,
|
||||||
bounds.southWest.lat,
|
bounds.southWest.lat,
|
||||||
bounds.northEast.lon,
|
bounds.northEast.lon,
|
||||||
bounds.northEast.lat
|
bounds.northEast.lat
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
padding: 80,
|
padding: 80,
|
||||||
linear: true,
|
linear: true,
|
||||||
easing: () => 1
|
easing: () => 1
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
|
if (
|
||||||
$currentBasemap = options.basemap;
|
options.basemap !== $currentBasemap &&
|
||||||
}
|
allowedEmbeddingBasemaps.includes(options.basemap)
|
||||||
|
) {
|
||||||
|
$currentBasemap = options.basemap;
|
||||||
|
}
|
||||||
|
|
||||||
if (options.distanceMarkers !== $distanceMarkers) {
|
if (options.distanceMarkers !== $distanceMarkers) {
|
||||||
$distanceMarkers = options.distanceMarkers;
|
$distanceMarkers = options.distanceMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.directionMarkers !== $directionMarkers) {
|
if (options.directionMarkers !== $directionMarkers) {
|
||||||
$directionMarkers = options.directionMarkers;
|
$directionMarkers = options.directionMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.distanceUnits !== $distanceUnits) {
|
if (options.distanceUnits !== $distanceUnits) {
|
||||||
$distanceUnits = options.distanceUnits;
|
$distanceUnits = options.distanceUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.velocityUnits !== $velocityUnits) {
|
if (options.velocityUnits !== $velocityUnits) {
|
||||||
$velocityUnits = options.velocityUnits;
|
$velocityUnits = options.velocityUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.temperatureUnits !== $temperatureUnits) {
|
if (options.temperatureUnits !== $temperatureUnits) {
|
||||||
$temperatureUnits = options.temperatureUnits;
|
$temperatureUnits = options.temperatureUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.theme !== $mode) {
|
if (options.theme !== $mode) {
|
||||||
setMode(options.theme);
|
setMode(options.theme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
prevSettings.distanceMarkers = $distanceMarkers;
|
prevSettings.distanceMarkers = $distanceMarkers;
|
||||||
prevSettings.directionMarkers = $directionMarkers;
|
prevSettings.directionMarkers = $directionMarkers;
|
||||||
prevSettings.distanceUnits = $distanceUnits;
|
prevSettings.distanceUnits = $distanceUnits;
|
||||||
prevSettings.velocityUnits = $velocityUnits;
|
prevSettings.velocityUnits = $velocityUnits;
|
||||||
prevSettings.temperatureUnits = $temperatureUnits;
|
prevSettings.temperatureUnits = $temperatureUnits;
|
||||||
prevSettings.theme = $mode ?? 'system';
|
prevSettings.theme = $mode ?? 'system';
|
||||||
});
|
});
|
||||||
|
|
||||||
$: if (options) {
|
$: if (options) {
|
||||||
applyOptions();
|
applyOptions();
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if ($fileOrder) {
|
$: if ($fileOrder) {
|
||||||
updateGPXData();
|
updateGPXData();
|
||||||
}
|
}
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
if ($distanceMarkers !== prevSettings.distanceMarkers) {
|
if ($distanceMarkers !== prevSettings.distanceMarkers) {
|
||||||
$distanceMarkers = prevSettings.distanceMarkers;
|
$distanceMarkers = prevSettings.distanceMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($directionMarkers !== prevSettings.directionMarkers) {
|
if ($directionMarkers !== prevSettings.directionMarkers) {
|
||||||
$directionMarkers = prevSettings.directionMarkers;
|
$directionMarkers = prevSettings.directionMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($distanceUnits !== prevSettings.distanceUnits) {
|
if ($distanceUnits !== prevSettings.distanceUnits) {
|
||||||
$distanceUnits = prevSettings.distanceUnits;
|
$distanceUnits = prevSettings.distanceUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($velocityUnits !== prevSettings.velocityUnits) {
|
if ($velocityUnits !== prevSettings.velocityUnits) {
|
||||||
$velocityUnits = prevSettings.velocityUnits;
|
$velocityUnits = prevSettings.velocityUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($temperatureUnits !== prevSettings.temperatureUnits) {
|
if ($temperatureUnits !== prevSettings.temperatureUnits) {
|
||||||
$temperatureUnits = prevSettings.temperatureUnits;
|
$temperatureUnits = prevSettings.temperatureUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($mode !== prevSettings.theme) {
|
if ($mode !== prevSettings.theme) {
|
||||||
setMode(prevSettings.theme);
|
setMode(prevSettings.theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
$selection.clear();
|
$selection.clear();
|
||||||
$fileObservers.clear();
|
$fileObservers.clear();
|
||||||
$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
|
$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
|
<div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
|
||||||
<div class="grow relative">
|
<div class="grow relative">
|
||||||
<Map
|
<Map
|
||||||
class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
|
class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
|
||||||
accessToken={options.token}
|
accessToken={options.token}
|
||||||
geocoder={false}
|
geocoder={false}
|
||||||
geolocate={false}
|
geolocate={false}
|
||||||
hash={useHash}
|
hash={useHash}
|
||||||
/>
|
/>
|
||||||
<OpenIn bind:files={options.files} />
|
<OpenIn bind:files={options.files} bind:ids={options.ids} />
|
||||||
<LayerControl />
|
<LayerControl />
|
||||||
<GPXLayers />
|
<GPXLayers />
|
||||||
{#if $fileObservers.size > 1}
|
{#if $fileObservers.size > 1}
|
||||||
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
||||||
<FileList orientation="horizontal" />
|
<FileList orientation="horizontal" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
||||||
style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
|
style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
|
||||||
>
|
>
|
||||||
<GPXStatistics
|
<GPXStatistics
|
||||||
{gpxStatistics}
|
{gpxStatistics}
|
||||||
{slicedGPXStatistics}
|
{slicedGPXStatistics}
|
||||||
panelSize={options.elevation.height}
|
panelSize={options.elevation.height}
|
||||||
orientation={options.elevation.show ? 'vertical' : 'horizontal'}
|
orientation={options.elevation.show ? 'vertical' : 'horizontal'}
|
||||||
/>
|
/>
|
||||||
{#if options.elevation.show}
|
{#if options.elevation.show}
|
||||||
<ElevationProfile
|
<ElevationProfile
|
||||||
{gpxStatistics}
|
{gpxStatistics}
|
||||||
{slicedGPXStatistics}
|
{slicedGPXStatistics}
|
||||||
additionalDatasets={[
|
additionalDatasets={[
|
||||||
options.elevation.speed ? 'speed' : null,
|
options.elevation.speed ? 'speed' : null,
|
||||||
options.elevation.hr ? 'hr' : null,
|
options.elevation.hr ? 'hr' : null,
|
||||||
options.elevation.cad ? 'cad' : null,
|
options.elevation.cad ? 'cad' : null,
|
||||||
options.elevation.temp ? 'temp' : null,
|
options.elevation.temp ? 'temp' : null,
|
||||||
options.elevation.power ? 'power' : null
|
options.elevation.power ? 'power' : null
|
||||||
].filter((dataset) => dataset !== null)}
|
].filter((dataset) => dataset !== null)}
|
||||||
elevationFill={options.elevation.fill}
|
elevationFill={options.elevation.fill}
|
||||||
panelSize={options.elevation.height}
|
panelSize={options.elevation.height}
|
||||||
showControls={options.elevation.controls}
|
showControls={options.elevation.controls}
|
||||||
class="py-2"
|
class="py-2"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,140 +2,147 @@ import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
|
|||||||
import { basemaps } from '$lib/assets/layers';
|
import { basemaps } from '$lib/assets/layers';
|
||||||
|
|
||||||
export type EmbeddingOptions = {
|
export type EmbeddingOptions = {
|
||||||
token: string;
|
token: string;
|
||||||
files: string[];
|
files: string[];
|
||||||
basemap: string;
|
ids: string[];
|
||||||
elevation: {
|
basemap: string;
|
||||||
show: boolean;
|
elevation: {
|
||||||
height: number;
|
show: boolean;
|
||||||
controls: boolean;
|
height: number;
|
||||||
fill: 'slope' | 'surface' | undefined;
|
controls: boolean;
|
||||||
speed: boolean;
|
fill: 'slope' | 'surface' | undefined;
|
||||||
hr: boolean;
|
speed: boolean;
|
||||||
cad: boolean;
|
hr: boolean;
|
||||||
temp: boolean;
|
cad: boolean;
|
||||||
power: boolean;
|
temp: boolean;
|
||||||
};
|
power: boolean;
|
||||||
distanceMarkers: boolean;
|
};
|
||||||
directionMarkers: boolean;
|
distanceMarkers: boolean;
|
||||||
distanceUnits: 'metric' | 'imperial' | 'nautical';
|
directionMarkers: boolean;
|
||||||
velocityUnits: 'speed' | 'pace';
|
distanceUnits: 'metric' | 'imperial' | 'nautical';
|
||||||
temperatureUnits: 'celsius' | 'fahrenheit';
|
velocityUnits: 'speed' | 'pace';
|
||||||
theme: 'system' | 'light' | 'dark';
|
temperatureUnits: 'celsius' | 'fahrenheit';
|
||||||
|
theme: 'system' | 'light' | 'dark';
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultEmbeddingOptions = {
|
export const defaultEmbeddingOptions = {
|
||||||
token: '',
|
token: '',
|
||||||
files: [],
|
files: [],
|
||||||
basemap: 'mapboxOutdoors',
|
ids: [],
|
||||||
elevation: {
|
basemap: 'mapboxOutdoors',
|
||||||
show: true,
|
elevation: {
|
||||||
height: 170,
|
show: true,
|
||||||
controls: true,
|
height: 170,
|
||||||
fill: undefined,
|
controls: true,
|
||||||
speed: false,
|
fill: undefined,
|
||||||
hr: false,
|
speed: false,
|
||||||
cad: false,
|
hr: false,
|
||||||
temp: false,
|
cad: false,
|
||||||
power: false
|
temp: false,
|
||||||
},
|
power: false
|
||||||
distanceMarkers: false,
|
},
|
||||||
directionMarkers: false,
|
distanceMarkers: false,
|
||||||
distanceUnits: 'metric',
|
directionMarkers: false,
|
||||||
velocityUnits: 'speed',
|
distanceUnits: 'metric',
|
||||||
temperatureUnits: 'celsius',
|
velocityUnits: 'speed',
|
||||||
theme: 'system'
|
temperatureUnits: 'celsius',
|
||||||
|
theme: 'system'
|
||||||
};
|
};
|
||||||
|
|
||||||
export function getDefaultEmbeddingOptions(): EmbeddingOptions {
|
export function getDefaultEmbeddingOptions(): EmbeddingOptions {
|
||||||
return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
|
return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMergedEmbeddingOptions(
|
export function getMergedEmbeddingOptions(
|
||||||
options: any,
|
options: any,
|
||||||
defaultOptions: any = defaultEmbeddingOptions
|
defaultOptions: any = defaultEmbeddingOptions
|
||||||
): EmbeddingOptions {
|
): EmbeddingOptions {
|
||||||
const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
|
const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
|
||||||
for (const key in options) {
|
for (const key in options) {
|
||||||
if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
|
if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
|
||||||
mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
|
mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
|
||||||
} else {
|
} else {
|
||||||
mergedOptions[key] = options[key];
|
mergedOptions[key] = options[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return mergedOptions;
|
return mergedOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getCleanedEmbeddingOptions(
|
export function getCleanedEmbeddingOptions(
|
||||||
options: any,
|
options: any,
|
||||||
defaultOptions: any = defaultEmbeddingOptions
|
defaultOptions: any = defaultEmbeddingOptions
|
||||||
): any {
|
): any {
|
||||||
const cleanedOptions = JSON.parse(JSON.stringify(options));
|
const cleanedOptions = JSON.parse(JSON.stringify(options));
|
||||||
for (const key in cleanedOptions) {
|
for (const key in cleanedOptions) {
|
||||||
if (
|
if (
|
||||||
typeof cleanedOptions[key] === 'object' &&
|
typeof cleanedOptions[key] === 'object' &&
|
||||||
cleanedOptions[key] !== null &&
|
cleanedOptions[key] !== null &&
|
||||||
!Array.isArray(cleanedOptions[key])
|
!Array.isArray(cleanedOptions[key])
|
||||||
) {
|
) {
|
||||||
cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
|
cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
|
||||||
if (Object.keys(cleanedOptions[key]).length === 0) {
|
if (Object.keys(cleanedOptions[key]).length === 0) {
|
||||||
delete cleanedOptions[key];
|
delete cleanedOptions[key];
|
||||||
}
|
}
|
||||||
} else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
|
} else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
|
||||||
delete cleanedOptions[key];
|
delete cleanedOptions[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return cleanedOptions;
|
return cleanedOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
|
export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
|
||||||
(basemap) => !['ordnanceSurvey'].includes(basemap)
|
(basemap) => !['ordnanceSurvey'].includes(basemap)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export function getFilesFromEmbeddingOptions(options: EmbeddingOptions): string[] {
|
||||||
|
return options.files.concat(options.ids.map((id) => getURLForGoogleDriveFile(id)));
|
||||||
|
}
|
||||||
|
|
||||||
export function getURLForGoogleDriveFile(fileId: string): string {
|
export function getURLForGoogleDriveFile(fileId: string): string {
|
||||||
return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
|
return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function convertOldEmbeddingOptions(options: URLSearchParams): any {
|
export function convertOldEmbeddingOptions(options: URLSearchParams): any {
|
||||||
let newOptions: any = {
|
let newOptions: any = {
|
||||||
token: PUBLIC_MAPBOX_TOKEN,
|
token: PUBLIC_MAPBOX_TOKEN,
|
||||||
files: []
|
files: [],
|
||||||
};
|
ids: [],
|
||||||
if (options.has('state')) {
|
};
|
||||||
let state = JSON.parse(options.get('state')!);
|
if (options.has('state')) {
|
||||||
if (state.ids) {
|
let state = JSON.parse(options.get('state')!);
|
||||||
newOptions.files.push(...state.ids.map(getURLForGoogleDriveFile));
|
if (state.ids) {
|
||||||
}
|
newOptions.ids.push(...state.ids);
|
||||||
if (state.urls) {
|
}
|
||||||
newOptions.files.push(...state.urls);
|
if (state.urls) {
|
||||||
}
|
newOptions.files.push(...state.urls);
|
||||||
}
|
}
|
||||||
if (options.has('source')) {
|
}
|
||||||
let basemap = options.get('source')!;
|
if (options.has('source')) {
|
||||||
if (basemap === 'satellite') {
|
let basemap = options.get('source')!;
|
||||||
newOptions.basemap = 'mapboxSatellite';
|
if (basemap === 'satellite') {
|
||||||
} else if (basemap === 'otm') {
|
newOptions.basemap = 'mapboxSatellite';
|
||||||
newOptions.basemap = 'openTopoMap';
|
} else if (basemap === 'otm') {
|
||||||
} else if (basemap === 'ohm') {
|
newOptions.basemap = 'openTopoMap';
|
||||||
newOptions.basemap = 'openHikingMap';
|
} else if (basemap === 'ohm') {
|
||||||
}
|
newOptions.basemap = 'openHikingMap';
|
||||||
}
|
}
|
||||||
if (options.has('imperial')) {
|
}
|
||||||
newOptions.distanceUnits = 'imperial';
|
if (options.has('imperial')) {
|
||||||
}
|
newOptions.distanceUnits = 'imperial';
|
||||||
if (options.has('running')) {
|
}
|
||||||
newOptions.velocityUnits = 'pace';
|
if (options.has('running')) {
|
||||||
}
|
newOptions.velocityUnits = 'pace';
|
||||||
if (options.has('distance')) {
|
}
|
||||||
newOptions.distanceMarkers = true;
|
if (options.has('distance')) {
|
||||||
}
|
newOptions.distanceMarkers = true;
|
||||||
if (options.has('direction')) {
|
}
|
||||||
newOptions.directionMarkers = true;
|
if (options.has('direction')) {
|
||||||
}
|
newOptions.directionMarkers = true;
|
||||||
if (options.has('slope')) {
|
}
|
||||||
newOptions.elevation = {
|
if (options.has('slope')) {
|
||||||
fill: 'slope'
|
newOptions.elevation = {
|
||||||
};
|
fill: 'slope'
|
||||||
}
|
};
|
||||||
return newOptions;
|
}
|
||||||
|
return newOptions;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,15 +35,21 @@
|
|||||||
];
|
];
|
||||||
|
|
||||||
let files = options.files[0];
|
let files = options.files[0];
|
||||||
let driveIds = '';
|
$: {
|
||||||
$: if (files || driveIds) {
|
|
||||||
let urls = files.split(',');
|
let urls = files.split(',');
|
||||||
urls = urls.filter((url) => url.length > 0);
|
urls = urls.filter((url) => url.length > 0);
|
||||||
let ids = driveIds.split(',');
|
|
||||||
ids = ids.filter((id) => id.length > 0);
|
|
||||||
urls.push(...ids.map(getURLForGoogleDriveFile));
|
|
||||||
if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
|
if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
|
||||||
options.files = urls;
|
options.files = urls;
|
||||||
|
console.log(options.files);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let driveIds = '';
|
||||||
|
$: {
|
||||||
|
let ids = driveIds.split(',');
|
||||||
|
ids = ids.filter((id) => id.length > 0);
|
||||||
|
if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
|
||||||
|
options.ids = ids;
|
||||||
|
console.log(options.ids);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,18 +1,23 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import Logo from '$lib/components/Logo.svelte';
|
import Logo from '$lib/components/Logo.svelte';
|
||||||
import { getURLForLanguage } from '$lib/utils';
|
import { getURLForLanguage } from '$lib/utils';
|
||||||
import { _, locale } from 'svelte-i18n';
|
import { _, locale } from 'svelte-i18n';
|
||||||
|
|
||||||
export let files: string[];
|
export let files: string[];
|
||||||
|
export let ids: string[];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
|
class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
|
||||||
href="{getURLForLanguage($locale, '/app')}?files={encodeURIComponent(JSON.stringify(files))}"
|
href="{getURLForLanguage($locale, '/app')}?{files.length > 0
|
||||||
target="_blank"
|
? `files=${encodeURIComponent(JSON.stringify(files))}`
|
||||||
|
: ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
|
||||||
|
? `ids=${encodeURIComponent(JSON.stringify(ids))}`
|
||||||
|
: ''}"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
{$_('menu.open_in')}
|
{$_('menu.open_in')}
|
||||||
<Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
|
<Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { languages } from '$lib/languages';
|
import { languages } from '$lib/languages';
|
||||||
import { getURLForLanguage } from '$lib/utils';
|
import { getURLForLanguage } from '$lib/utils';
|
||||||
|
import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
verticalFileView,
|
verticalFileView,
|
||||||
@@ -30,11 +31,13 @@
|
|||||||
onMount(() => {
|
onMount(() => {
|
||||||
observeFilesFromDatabase();
|
observeFilesFromDatabase();
|
||||||
|
|
||||||
let files = JSON.parse($page.url.searchParams.get('files') || '[]');
|
let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
|
||||||
|
let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
|
||||||
|
let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
|
||||||
|
|
||||||
if (files.length > 0) {
|
if (urls.length > 0) {
|
||||||
let downloads: Promise<File | null>[] = [];
|
let downloads: Promise<File | null>[] = [];
|
||||||
files.forEach((url) => {
|
urls.forEach((url) => {
|
||||||
downloads.push(
|
downloads.push(
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
|
|||||||
Reference in New Issue
Block a user