Prevent propagation on panel
This commit is contained in:
ThePetrovich
parent
52558ed3b2
commit
eb29cdc585
2 changed files with 194 additions and 172 deletions
|
|
@ -14,12 +14,14 @@
|
|||
import { getForecast } from "$lib/prediction";
|
||||
import type { FlightParameters, ProfileName } from "$lib/types";
|
||||
import { PROFILE_MAP } from "$lib/types";
|
||||
import { FlightParametersStore, writeLocalStorage } from '$lib/stores';
|
||||
import { FlightParametersStore, writeLocalStorage } from "$lib/stores";
|
||||
|
||||
let isCollapsed = false;
|
||||
let selectedProfile: ProfileName = "Normal";
|
||||
let startPoint = "Custom";
|
||||
|
||||
export let element: HTMLDivElement | null = null;
|
||||
|
||||
const now = new Date();
|
||||
let startDate = now.toISOString().split("T")[0]; // YYYY-MM-DD
|
||||
let startTime = now.toISOString().split("T")[1].split(".")[0]; // HH:MM:SS
|
||||
|
|
@ -27,7 +29,10 @@
|
|||
let inputLat = $FlightParametersStore.launch_latitude.toString();
|
||||
let inputLng = $FlightParametersStore.launch_longitude.toString();
|
||||
|
||||
$: $FlightParametersStore.profile = PROFILE_MAP[selectedProfile];
|
||||
$: $FlightParametersStore = {
|
||||
...$FlightParametersStore,
|
||||
profile: PROFILE_MAP[selectedProfile],
|
||||
};
|
||||
|
||||
const handleGetPrediction = async () => {
|
||||
console.log("Fetching prediction with parameters:", $FlightParametersStore);
|
||||
|
|
@ -55,7 +60,11 @@
|
|||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
$FlightParametersStore.launch_latitude = lat;
|
||||
$FlightParametersStore.launch_longitude = lng;
|
||||
console.log("Updated position:", $FlightParametersStore.launch_latitude, $FlightParametersStore.launch_longitude);
|
||||
console.log(
|
||||
"Updated position:",
|
||||
$FlightParametersStore.launch_latitude,
|
||||
$FlightParametersStore.launch_longitude,
|
||||
);
|
||||
} else {
|
||||
console.error("Invalid coordinate input");
|
||||
// TODO: Show a validation error to the user.
|
||||
|
|
@ -74,198 +83,206 @@
|
|||
inputLat = lat.toString();
|
||||
inputLng = lng.toString();
|
||||
};
|
||||
|
||||
export const getElement = () => {
|
||||
return element;
|
||||
};
|
||||
</script>
|
||||
|
||||
<Card
|
||||
class="shadow-lg position-absolute bottom-0 end-0 m-3"
|
||||
style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;"
|
||||
>
|
||||
<CardHeader
|
||||
class="bg-primary text-white d-flex justify-content-between align-items-center card-header"
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="d-flex w-100 justify-content-between align-items-center bg-transparent border-0 p-0"
|
||||
style="width:100%;"
|
||||
aria-label="Свернуть/развернуть параметры прогнозирования"
|
||||
on:click={() => (isCollapsed = !isCollapsed)}
|
||||
<div bind:this={element} style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;" class="position-absolute shadow-lg bottom-0 end-0 m-3">
|
||||
<Card>
|
||||
<CardHeader
|
||||
class="bg-primary text-white d-flex justify-content-between align-items-center card-header"
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
<h6 class="card-title mb-0 text-white">Параметры прогнозирования</h6>
|
||||
<Button size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}>
|
||||
{#if isCollapsed}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-caret-left-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-caret-down"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</Button>
|
||||
</button>
|
||||
</CardHeader>
|
||||
{#if !isCollapsed}
|
||||
<CardBody>
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="flightProfile" class="form-label">Профиль полета:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input type="select" id="flightProfile" bind:value={selectedProfile}>
|
||||
{#each Object.keys(PROFILE_MAP) as profileName}
|
||||
<option value={profileName}>{profileName}</option>
|
||||
{/each}
|
||||
</Input>
|
||||
<Button color="secondary" size="sm" title="Edit profile" disabled={selectedProfile !== "Custom"}>
|
||||
<span>Редакт.</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
fill="currentColor"
|
||||
class="bi bi-gear-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413-1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="startPoint" class="form-label">Точка старта:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input type="select" id="startPoint" bind:value={startPoint}>
|
||||
<option>Custom</option>
|
||||
<option>Preset 1</option>
|
||||
<option>Preset 2</option>
|
||||
</Input>
|
||||
<Button
|
||||
color="secondary"
|
||||
title="Edit Saved Locations"
|
||||
on:click={() => console.log("Not implemented yet")}
|
||||
>
|
||||
<span>Редакт.</span>
|
||||
<button
|
||||
type="button"
|
||||
class="d-flex w-100 justify-content-between align-items-center bg-transparent border-0 p-0"
|
||||
style="width:100%;"
|
||||
aria-label="Свернуть/развернуть параметры прогнозирования"
|
||||
on:click={() => (isCollapsed = !isCollapsed)}
|
||||
>
|
||||
<h6 class="card-title mb-0 text-white">Параметры прогнозирования</h6>
|
||||
<Button size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}>
|
||||
{#if isCollapsed}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-journal-bookmark-fill"
|
||||
class="bi bi-caret-left-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"
|
||||
/>
|
||||
<path
|
||||
d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"
|
||||
/>
|
||||
<path
|
||||
d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"
|
||||
d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-caret-down"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</Button>
|
||||
</button>
|
||||
</CardHeader>
|
||||
{#if !isCollapsed}
|
||||
<CardBody>
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="flightProfile" class="form-label">Профиль полета:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input type="select" id="flightProfile" bind:value={selectedProfile}>
|
||||
{#each Object.keys(PROFILE_MAP) as profileName}
|
||||
<option value={profileName}>{profileName}</option>
|
||||
{/each}
|
||||
</Input>
|
||||
<Button
|
||||
color="secondary"
|
||||
size="sm"
|
||||
title="Edit profile"
|
||||
disabled={selectedProfile !== "Custom"}
|
||||
>
|
||||
<span>Редакт.</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
fill="currentColor"
|
||||
class="bi bi-gear-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413-1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="latitude" class="form-label">Широта/Долгота:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" />
|
||||
<InputGroupText>/</InputGroupText>
|
||||
<Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" />
|
||||
<Button color="success" size="sm" on:click={applyCoordinatesFromInput} title="Apply Coordinates"
|
||||
>✓</Button
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="startPoint" class="form-label">Точка старта:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input type="select" id="startPoint" bind:value={startPoint}>
|
||||
<option>Custom</option>
|
||||
<option>Preset 1</option>
|
||||
<option>Preset 2</option>
|
||||
</Input>
|
||||
<Button
|
||||
color="secondary"
|
||||
title="Edit Saved Locations"
|
||||
on:click={() => console.log("Not implemented yet")}
|
||||
>
|
||||
<span>Редакт.</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-journal-bookmark-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"
|
||||
/>
|
||||
<path
|
||||
d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"
|
||||
/>
|
||||
<path
|
||||
d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="latitude" class="form-label">Широта/Долгота:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" />
|
||||
<InputGroupText>/</InputGroupText>
|
||||
<Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" />
|
||||
<Button color="success" size="sm" on:click={applyCoordinatesFromInput} title="Apply Coordinates"
|
||||
>✓</Button
|
||||
>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Button
|
||||
color="outline-secondary"
|
||||
size="sm"
|
||||
class="w-100"
|
||||
on:click={() => console.log("Select on map clicked")}>Указать на карте</Button
|
||||
>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Button
|
||||
color="outline-secondary"
|
||||
size="sm"
|
||||
class="w-100"
|
||||
on:click={() => console.log("Select on map clicked")}>Указать на карте</Button
|
||||
>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="startHeight" class="form-label">Высота точки старта:</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="startHeight"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.launch_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="startTime" class="form-label">Время старта (UTC):</Label>
|
||||
<Input type="time" id="startTime" class="form-control-sm" bind:value={startTime} step="1" />
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="startDate" class="form-label">Дата старта:</Label>
|
||||
<Input type="date" id="startDate" class="form-control-sm" bind:value={startDate} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="ascentRate" class="form-label">Скорость подъема (м/с):</Label>
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="startHeight" class="form-label">Высота точки старта:</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="ascentRate"
|
||||
id="startHeight"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.ascent_rate}
|
||||
bind:value={$FlightParametersStore.launch_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="descentRate" class="form-label">Скорость спуска (м/с):</Label>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="startTime" class="form-label">Время старта (UTC):</Label>
|
||||
<Input type="time" id="startTime" class="form-control-sm" bind:value={startTime} step="1" />
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="startDate" class="form-label">Дата старта:</Label>
|
||||
<Input type="date" id="startDate" class="form-control-sm" bind:value={startDate} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="ascentRate" class="form-label">Скорость подъема (м/с):</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="ascentRate"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.ascent_rate}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
<Label for="descentRate" class="form-label">Скорость спуска (м/с):</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="descentRate"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.descent_rate}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="burstAltitude" class="form-label">Высота разрыва (м):</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="descentRate"
|
||||
id="burstAltitude"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.descent_rate}
|
||||
bind:value={$FlightParametersStore.burst_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<FormGroup spacing="mb-2">
|
||||
<Label for="burstAltitude" class="form-label">Высота разрыва (м):</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="burstAltitude"
|
||||
class="form-control-sm"
|
||||
bind:value={$FlightParametersStore.burst_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div class="mb-2 d-grid gap-1">
|
||||
<Button color="outline-secondary" size="sm">Показать график высоты</Button>
|
||||
<Button color="secondary" size="sm">Сохранить как шаблон</Button>
|
||||
<Button size="sm" color="primary" on:click={handleGetPrediction}>Выполнить прогнозирование</Button>
|
||||
</div>
|
||||
</CardBody>
|
||||
{/if}
|
||||
</Card>
|
||||
<div class="mb-2 d-grid gap-1">
|
||||
<Button color="outline-secondary" size="sm">Показать график высоты</Button>
|
||||
<Button color="secondary" size="sm">Сохранить как шаблон</Button>
|
||||
<Button size="sm" color="primary" on:click={handleGetPrediction}>Выполнить прогнозирование</Button>
|
||||
</div>
|
||||
</CardBody>
|
||||
{/if}
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,14 @@
|
|||
map?.clearMapLayers();
|
||||
}
|
||||
});
|
||||
console.log('ControlPanel mounted');
|
||||
console.log(panel);
|
||||
|
||||
L.DomEvent.disableClickPropagation(panel?.$element);
|
||||
L.DomEvent.disableScrollPropagation(panel?.$element);
|
||||
if (panel) {
|
||||
let element = panel.getElement();
|
||||
L.DomEvent.disableClickPropagation(element);
|
||||
L.DomEvent.disableScrollPropagation(element);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue