mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-02 16:52:31 +00:00
polish toolbar and routing menu
This commit is contained in:
vcoppe
@@ -14,7 +14,10 @@
|
||||
TriangleAlert,
|
||||
ArrowRightLeft,
|
||||
Home,
|
||||
RouteOff
|
||||
RouteOff,
|
||||
Repeat,
|
||||
Maximize2,
|
||||
Minimize2
|
||||
} from 'lucide-svelte';
|
||||
|
||||
import { map, routingControls } from '$lib/stores';
|
||||
@@ -29,12 +32,13 @@
|
||||
import { slide } from 'svelte/transition';
|
||||
import { selection } from '$lib/components/file-list/Selection';
|
||||
import { ListRootItem, type ListItem } from '$lib/components/file-list/FileList';
|
||||
import { flyAndScale } from '$lib/utils';
|
||||
|
||||
export let popup: mapboxgl.Popup;
|
||||
export let popupElement: HTMLElement;
|
||||
let selectedItem: ListItem | null = null;
|
||||
|
||||
const { privateRoads, routing } = settings;
|
||||
const { minimizeRoutingMenu, privateRoads, routing } = settings;
|
||||
|
||||
$: if ($map) {
|
||||
// remove controls for deleted files
|
||||
@@ -62,106 +66,124 @@
|
||||
$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
|
||||
</script>
|
||||
|
||||
<div class=" flex flex-col gap-3">
|
||||
<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">
|
||||
{#if $routing}
|
||||
<Route size="16" />
|
||||
{:else}
|
||||
<RouteOff size="16" />
|
||||
{/if}
|
||||
{$_('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"
|
||||
disabled={!validSelection}
|
||||
on:click={dbUtils.reverseSelection}
|
||||
>
|
||||
<ArrowRightLeft size="16" />
|
||||
</Button>
|
||||
<span slot="tooltip">{$_('toolbar.routing.reverse_tooltip')}</span>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Button
|
||||
slot="data"
|
||||
variant="outline"
|
||||
disabled={$selection.size != 1 || !validSelection}
|
||||
on:click={() => {
|
||||
const fileId = get(selection).getSelected()[0].getFileId();
|
||||
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={$selection.size != 1 || !validSelection}
|
||||
on:click={() => {
|
||||
const fileId = get(selection).getSelected()[0].getFileId();
|
||||
routingControls.get(fileId)?.createRoundTrip();
|
||||
}}
|
||||
>
|
||||
<Home size="16" />
|
||||
</Button>
|
||||
<span slot="tooltip">{$_('toolbar.routing.round_trip_tooltip')}</span>
|
||||
</Tooltip>
|
||||
{#if $minimizeRoutingMenu}
|
||||
<div class="-m-1.5 -mb-2">
|
||||
<Button variant="ghost" class="px-1 h-[26px]" on:click={() => ($minimizeRoutingMenu = false)}>
|
||||
<Maximize2 size="18" />
|
||||
</Button>
|
||||
</div>
|
||||
<Help class="max-w-60">
|
||||
{#if $selection.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selection.size == 0 || !validSelection}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Help>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-3 max-w-80" in:flyAndScale={{ x: -2, y: 0, duration: 50 }}>
|
||||
<div class="w-full flex flex-row gap-2 justify-between">
|
||||
<div class="grow flex flex-col gap-3">
|
||||
<Tooltip>
|
||||
<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<span class="flex flex-row gap-1">
|
||||
{#if $routing}
|
||||
<Route size="16" />
|
||||
{:else}
|
||||
<RouteOff size="16" />
|
||||
{/if}
|
||||
{$_('toolbar.routing.use_routing')}
|
||||
</span>
|
||||
|
||||
<Switch class="scale-90" bind:checked={$routing} />
|
||||
</Label>
|
||||
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
|
||||
</Tooltip>
|
||||
{#if $routing}
|
||||
<div class="flex flex-col gap-3" in:slide>
|
||||
<Label class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<span class="shrink-0 flex flex-row items-center 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')}
|
||||
</span>
|
||||
<Select.Root bind:selected={$routingProfileSelectItem}>
|
||||
<Select.Trigger class="h-8 grow">
|
||||
<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>
|
||||
</Label>
|
||||
<Label class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<span class="flex flex-row gap-1"
|
||||
><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</span
|
||||
>
|
||||
<Switch class="scale-90" bind:checked={$privateRoads} />
|
||||
</Label>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Button variant="ghost" class="px-1 h-6" on:click={() => ($minimizeRoutingMenu = true)}>
|
||||
<Minimize2 size="14" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap justify-center gap-1">
|
||||
<Tooltip>
|
||||
<Button
|
||||
slot="data"
|
||||
variant="outline"
|
||||
class="flex flex-row gap-1 text-xs px-2"
|
||||
disabled={!validSelection}
|
||||
on:click={dbUtils.reverseSelection}
|
||||
>
|
||||
<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
|
||||
</Button>
|
||||
<span slot="tooltip">{$_('toolbar.routing.reverse.tooltip')}</span>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Button
|
||||
slot="data"
|
||||
variant="outline"
|
||||
class="flex flex-row gap-1 text-xs px-2"
|
||||
disabled={$selection.size != 1 || !validSelection}
|
||||
on:click={() => {
|
||||
const fileId = get(selection).getSelected()[0].getFileId();
|
||||
routingControls.get(fileId)?.routeToStart();
|
||||
}}
|
||||
>
|
||||
<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
|
||||
</Button>
|
||||
<span slot="tooltip">{$_('toolbar.routing.route_back_to_start.tooltip')}</span>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Button
|
||||
slot="data"
|
||||
variant="outline"
|
||||
class="flex flex-row gap-1 text-xs px-2"
|
||||
disabled={$selection.size != 1 || !validSelection}
|
||||
on:click={() => {
|
||||
const fileId = get(selection).getSelected()[0].getFileId();
|
||||
routingControls.get(fileId)?.createRoundTrip();
|
||||
}}
|
||||
>
|
||||
<Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
|
||||
</Button>
|
||||
<span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Help>
|
||||
{#if $selection.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selection.size == 0 || !validSelection}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Help>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user