disable poi form inputs if no selection

This commit is contained in:
vcoppe
2024-09-30 13:10:15 +02:00
parent 4cacafa381
commit db881cbaf1

View File

@@ -20,7 +20,7 @@
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { map } from '$lib/stores'; import { map } from '$lib/stores';
import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils'; import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
import { CirclePlus, CircleX, Save } from 'lucide-svelte'; import { MapPin, CircleX, Save } from 'lucide-svelte';
import { getSymbolKey, symbols } from '$lib/assets/symbols'; import { getSymbolKey, symbols } from '$lib/assets/symbols';
let name: string; let name: string;
@@ -181,12 +181,21 @@
<div class="flex flex-col gap-3 w-full max-w-96 {$$props.class ?? ''}"> <div class="flex flex-col gap-3 w-full max-w-96 {$$props.class ?? ''}">
<fieldset class="flex flex-col gap-2"> <fieldset class="flex flex-col gap-2">
<Label for="name">{$_('menu.metadata.name')}</Label> <Label for="name">{$_('menu.metadata.name')}</Label>
<Input bind:value={name} id="name" class="font-semibold h-8" /> <Input
bind:value={name}
id="name"
class="font-semibold h-8"
disabled={!canCreate && !$selectedWaypoint}
/>
<Label for="description">{$_('menu.metadata.description')}</Label> <Label for="description">{$_('menu.metadata.description')}</Label>
<Textarea bind:value={description} id="description" /> <Textarea
bind:value={description}
id="description"
disabled={!canCreate && !$selectedWaypoint}
/>
<Label for="symbol">{$_('toolbar.waypoint.icon')}</Label> <Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
<Select.Root bind:selected={selectedSymbol}> <Select.Root bind:selected={selectedSymbol}>
<Select.Trigger id="symbol" class="w-full h-8"> <Select.Trigger id="symbol" class="w-full h-8" disabled={!canCreate && !$selectedWaypoint}>
<Select.Value /> <Select.Value />
</Select.Trigger> </Select.Trigger>
<Select.Content class="max-h-60 overflow-y-scroll"> <Select.Content class="max-h-60 overflow-y-scroll">
@@ -209,7 +218,7 @@
</Select.Content> </Select.Content>
</Select.Root> </Select.Root>
<Label for="link">{$_('toolbar.waypoint.link')}</Label> <Label for="link">{$_('toolbar.waypoint.link')}</Label>
<Input bind:value={link} id="link" class="h-8" /> <Input bind:value={link} id="link" class="h-8" disabled={!canCreate && !$selectedWaypoint} />
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<div class="grow"> <div class="grow">
<Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label> <Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
@@ -220,7 +229,8 @@
step={1e-6} step={1e-6}
min={-90} min={-90}
max={90} max={90}
class="text-xs h-8 " class="text-xs h-8"
disabled={!canCreate && !$selectedWaypoint}
/> />
</div> </div>
<div class="grow"> <div class="grow">
@@ -233,6 +243,7 @@
min={-180} min={-180}
max={180} max={180}
class="text-xs h-8" class="text-xs h-8"
disabled={!canCreate && !$selectedWaypoint}
/> />
</div> </div>
</div> </div>
@@ -248,7 +259,7 @@
<Save size="16" class="mr-1 shrink-0" /> <Save size="16" class="mr-1 shrink-0" />
{$_('menu.metadata.save')} {$_('menu.metadata.save')}
{:else} {:else}
<CirclePlus size="16" class="mr-1 shrink-0" /> <MapPin size="16" class="mr-1 shrink-0" />
{$_('toolbar.waypoint.create')} {$_('toolbar.waypoint.create')}
{/if} {/if}
</Button> </Button>