steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve routing menu

Browse Source
This commit is contained in:
vcoppe
2024-05-07 17:19:53 +02:00
parent 95d6993cfe
commit d35b702011
7 changed files with 169 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -3,11 +3,22 @@
import * as Select from '$lib/components/ui/select';
import { Switch } from '$lib/components/ui/switch';
import { Label } from '$lib/components/ui/label/index.js';
import * as Alert from '$lib/components/ui/alert';
import { CircleHelp } from 'lucide-svelte';
import { Button } from '$lib/components/ui/button';
import Help from '$lib/components/Help.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import {
Bike,
Footprints,
Waves,
TrainFront,
Route,
TriangleAlert,
ArrowRightLeft,
Home
} from 'lucide-svelte';
import { map, selectedFiles, Tool } from '$lib/stores';
import { settings } from '$lib/db';
import { dbUtils, settings } from '$lib/db';
import { brouterProfiles, routingProfileSelectItem } from './Routing';
import { _ } from 'svelte-i18n';
@@ -17,6 +28,7 @@
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import { fileObservers } from '$lib/db';
import { slide } from 'svelte/transition';
let routingControls: Map<string, RoutingControls> = new Map();
let popupElement: HTMLElement;
@@ -83,39 +95,100 @@
</script>
<ToolbarItemMenu tool={Tool.ROUTING} bind:active>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label>{$_('toolbar.routing.activity')}</Label>
<Select.Root bind:selected={$routingProfileSelectItem}>
<Select.Trigger class="h-8 w-40">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(brouterProfiles) as profile}
<Select.Item value={profile}>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
<Tooltip>
<div slot="data" class="w-full flex flex-row justify-between items-center gap-2">
<Label for="routing" class="flex flex-row gap-1"
><Route size="16" />{$_('toolbar.routing.use_routing')}</Label
>
<Switch id="routing" class="scale-90" bind:checked={$routing} />
</div>
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
</Tooltip>
{#if $routing}
<div class="flex flex-col gap-3" in:slide>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label class="flex flex-row gap-1">
{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')}
<Bike size="16" />
{:else if $routingProfileSelectItem.value.includes('foot')}
<Footprints size="16" />
{:else if $routingProfileSelectItem.value.includes('water')}
<Waves size="16" />
{:else if $routingProfileSelectItem.value.includes('railway')}
<TrainFront size="16" />
{/if}
{$_('toolbar.routing.activity')}
</Label>
<Select.Root bind:selected={$routingProfileSelectItem}>
<Select.Trigger class="h-8 w-full">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(brouterProfiles) as profile}
<Select.Item value={profile}
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
>
{/each}
</Select.Content>
</Select.Root>
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="private" class="flex flex-row gap-1"
><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</Label
>
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
</div>
</div>
{/if}
<div class="flex flex-row justify-center gap-2">
<Tooltip>
<Button
slot="data"
variant="outline"
on:click={() => dbUtils.applyToSelectedFiles((file) => file.reverse())}
>
<ArrowRightLeft size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.reverse_tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
disabled={$selectedFiles.size != 1}
on:click={() => {
const fileId = get(selectedFiles).values().next().value;
routingControls.get(fileId)?.routeToStart();
}}
>
<Home size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.route_back_to_start_tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
disabled={$selectedFiles.size != 1}
on:click={() => {
const fileId = get(selectedFiles).values().next().value;
routingControls.get(fileId)?.createRoundTrip();
}}
>
<Home size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.round_trip_tooltip')}</span>
</Tooltip>
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
<Switch id="routing" class="scale-90" bind:checked={$routing} />
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
</div>
<Alert.Root class="max-w-64">
<CircleHelp size="16" />
<Alert.Description>
{#if $selectedFiles.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selectedFiles.size == 0}
<div>{$_('toolbar.routing.help_no_file')}</div>
{:else}
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Alert.Description>
</Alert.Root>
<Help class="max-w-60">
{#if $selectedFiles.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selectedFiles.size == 0}
<div>{$_('toolbar.routing.help_no_file')}</div>
{:else}
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Help>
</ToolbarItemMenu>
<RoutingControlPopup bind:element={popupElement} />