mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

Minimal error handling

Browse source
This commit is contained in:
ThePetrovich 2025-07-02 19:00:26 +08:00
parent 1a89d49e8a
commit 1e09b2d7ef
4 changed files with 184 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

287
src/lib/components/ControlPanel.svelte
View file

@ -13,53 +13,105 @@
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
import { getForecast } from "$lib/prediction"; import { getForecast } from "$lib/prediction";
import type { FlightParameters, ProfileName } from "$lib/types"; import type { FlightParameters, ProfileName, ProfileIdentifier } from "$lib/types";
import { PROFILE_MAP } from "$lib/types"; import { PROFILE_MAP, PROFILE_NAMES } from "$lib/types";
import { SavedPointsStore, FlightParametersStore, writeLocalStorage } from "$lib/stores"; import { SavedPointsStore, FlightParametersStore, writeLocalStorage } from "$lib/stores";
import { getSavedPoints } from "$lib/api/points"; import { getSavedPoints } from "$lib/api/points";
import type { SavedPoint } from "$lib/types";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { addToast } from "$lib/components/Toast.svelte";
let isCollapsed = false; // TODO: Move to $lib/utils/datetime.js
let selectedProfile: ProfileName = "Normal"; // function getCurrentDateTime() {
let startPoint = "Custom"; // const now = new Date();
// return {
// date: now.toISOString().split("T")[0],
// time: now.toISOString().split("T")[1].split(".")[0]
// };
// }
let element: HTMLDivElement | null = null; // TODO: Move to $lib/utils/validation.js
// function validateCoordinates(lat: string, lng: string): { isValid: boolean; lat?: number; lng?: number } {
// const latNum = parseFloat(lat);
// const lngNum = parseFloat(lng);
// if (isNaN(latNum) || isNaN(lngNum)) {
// return { isValid: false };
// }
// return { isValid: true, lat: latNum, lng: lngNum };
// }
// TODO: Move to $lib/components/PredictionService.js
// async function handlePredictionRequest(params: FlightParameters) {
// try {
// const response = await getForecast(params);
// // Emit event or update store
// return response;
// } catch (error) {
// console.error("Error fetching forecast:", error);
// throw error;
// }
// }
interface Props {
handleClickSelectOnMap?: () => void;
handleClickPointListModal?: () => void;
}
let {
handleClickSelectOnMap = () => console.log("Select on map clicked"),
handleClickPointListModal = () => console.log("Open Point List Modal")
}: Props = $props();
// State
let isCollapsed = $state(false);
let startPoint = $state("Custom");
// Initialize date/time
const now = new Date(); const now = new Date();
let startDate = now.toISOString().split("T")[0]; // YYYY-MM-DD let startDate = $state(now.toISOString().split("T")[0]);
let startTime = now.toISOString().split("T")[1].split(".")[0]; // HH:MM:SS let startTime = $state(now.toISOString().split("T")[1].split(".")[0]);
let inputLat = $FlightParametersStore.launch_latitude.toFixed(6).toString(); // Coordinate inputs
let inputLng = $FlightParametersStore.launch_longitude.toFixed(6).toString(); let inputLat = $state($FlightParametersStore.launch_latitude.toFixed(6));
let inputLng = $state($FlightParametersStore.launch_longitude.toFixed(6));
$: $FlightParametersStore = { // Reactive effects
...$FlightParametersStore, $effect(() => {
profile: PROFILE_MAP[selectedProfile], $FlightParametersStore;
}; });
$: $SavedPointsStore, setCoordinatesFromSavedPoint(); $effect(() => {
// Watch for saved points changes
$SavedPointsStore;
// This effect also depends on startPoint, which is changed by setCoordinatesFromSavedPoint
// via other state variables. To avoid an infinite loop, we only call this when startPoint changes.
const sp = startPoint;
setCoordinatesFromSavedPoint();
});
// Functions
function setCoordinatesFromSavedPoint() { function setCoordinatesFromSavedPoint() {
console.log("Start point changed:", startPoint); const lat = parseFloat(inputLat);
const lng = parseFloat(inputLng);
if (startPoint === "Custom") { if (!isNaN(lat) && !isNaN(lng)) {
$FlightParametersStore.launch_latitude = parseFloat(inputLat); $FlightParametersStore.launch_latitude = lat;
$FlightParametersStore.launch_longitude = parseFloat(inputLng); $FlightParametersStore.launch_longitude = lng;
} else { }
else {
const selectedOption = document.querySelector( const selectedOption = document.querySelector(
`#startPoint option[value="${startPoint}"]` `#startPoint option[value="${startPoint}"]`
) as HTMLOptionElement; ) as HTMLOptionElement;
if (selectedOption) { if (selectedOption) {
const lat = parseFloat(selectedOption.getAttribute("data-lat") || "0"); const lat = parseFloat(selectedOption.getAttribute("data-lat") || "0");
const lng = parseFloat(selectedOption.getAttribute("data-lng") || "0"); const lng = parseFloat(selectedOption.getAttribute("data-lng") || "0");
const alt = parseFloat(selectedOption.getAttribute("data-alt") || "0"); const alt = parseFloat(selectedOption.getAttribute("data-alt") || "0");
inputLat = lat.toFixed(6).toString();
inputLng = lng.toFixed(6).toString(); inputLat = lat.toFixed(6);
inputLng = lng.toFixed(6);
$FlightParametersStore.launch_latitude = lat; $FlightParametersStore.launch_latitude = lat;
$FlightParametersStore.launch_longitude = lng; $FlightParametersStore.launch_longitude = lng;
$FlightParametersStore.launch_altitude = alt; $FlightParametersStore.launch_altitude = alt;
console.log("Updated position from saved point:", lat, lng, alt);
} }
} }
} }
@ -67,102 +119,84 @@
function setToCustomOnChange() { function setToCustomOnChange() {
if (startPoint !== "Custom") { if (startPoint !== "Custom") {
startPoint = "Custom"; startPoint = "Custom";
console.log("Switched to Custom point");
} }
} }
onMount(async () => { function applyCoordinatesFromInput() {
// Load saved points from the server or local storage
const savedPoints = await getSavedPoints();
SavedPointsStore.set(savedPoints);
});
const handleGetPrediction = async () => {
console.log("Fetching prediction with parameters:", $FlightParametersStore);
console.log(startDate, startTime);
$FlightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
writeLocalStorage<FlightParameters>("flightParameters", $FlightParametersStore);
try {
const response = await getForecast($FlightParametersStore);
console.log(response);
// TODO: Notify other components of the new prediction.
// const dispatch = createEventDispatcher();
// dispatch('newPrediction', response);
} catch (error) {
console.error("Error fetching forecast:", error);
// TODO: Display a user-friendly error message in the UI.
}
};
export let handleClickSelectOnMap = () => {
console.log("Select on map clicked");
}
export let handleClickPointListModal = () => {
console.log("Open Point List Modal");
};
const applyCoordinatesFromInput = () => {
const lat = parseFloat(inputLat); const lat = parseFloat(inputLat);
const lng = parseFloat(inputLng); const lng = parseFloat(inputLng);
if (!isNaN(lat) && !isNaN(lng)) { if (!isNaN(lat) && !isNaN(lng)) {
$FlightParametersStore.launch_latitude = lat; $FlightParametersStore.launch_latitude = lat;
$FlightParametersStore.launch_longitude = lng; $FlightParametersStore.launch_longitude = lng;
console.log(
"Updated position:",
$FlightParametersStore.launch_latitude,
$FlightParametersStore.launch_longitude,
);
} else { } else {
console.error("Invalid coordinate input"); console.error("Invalid coordinate input");
// TODO: Show a validation error to the user. // TODO: Show validation error to user
} }
}; }
/** async function handleGetPrediction() {
* Updates the launch coordinates. $FlightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
* @param {number} lat The new latitude. writeLocalStorage<FlightParameters>("flightParameters", $FlightParametersStore);
* @param {number} lng The new longitude.
*/ getForecast($FlightParametersStore).then(
export const updateLaunchPosition = (lat: number, lng: number) => { (data) => {
console.log("Forecast request successful:", data);
addToast({
header: "Forecast Request",
body: "Forecast request successful!",
color: "success"
});
// Handle the response data as needed
}).catch((error) => {
console.error("Error getting forecast:", error);
addToast({
header: "Forecast Error",
body: `Error getting forecast: ${error.message}`,
color: "danger"
});
});
}
function toggleCollapse() {
isCollapsed = !isCollapsed;
}
// Exported functions for parent components
export function updateLaunchPosition(lat: number, lng: number) {
$FlightParametersStore.launch_latitude = lat; $FlightParametersStore.launch_latitude = lat;
$FlightParametersStore.launch_longitude = lng; $FlightParametersStore.launch_longitude = lng;
console.log("Launch position updated:", lat, lng); inputLat = lat.toFixed(6);
inputLat = lat.toFixed(6).toString(); inputLng = lng.toFixed(6);
inputLng = lng.toFixed(6).toString();
setToCustomOnChange(); setToCustomOnChange();
}; }
export const getElement = () => { export function getSelectedProfile() {
return element; return $FlightParametersStore.profile;
}; }
export const getSelectedProfile = () => { export function selectProfile(profile: ProfileName) {
return selectedProfile; $FlightParametersStore.profile = profile;
}; }
export const selectProfile = (profile: ProfileName) => { export function collapsePanel() {
selectedProfile = profile;
$FlightParametersStore.profile = PROFILE_MAP[selectedProfile];
console.log("Selected profile:", selectedProfile);
};
export const collapsePanel = () => {
isCollapsed = true; isCollapsed = true;
}; }
export const expandPanel = () => { export function expandPanel() {
isCollapsed = false; isCollapsed = false;
}; }
export const togglePanel = () => { export function togglePanel() {
isCollapsed = !isCollapsed; isCollapsed = !isCollapsed;
}; }
onMount(async () => {
const savedPoints = await getSavedPoints();
SavedPointsStore.set(savedPoints);
});
</script> </script>
<Card> <Card>
<CardHeader <CardHeader
class="bg-primary text-white d-flex justify-content-between align-items-center card-header p-1 px-3" class="bg-primary text-white d-flex justify-content-between align-items-center card-header p-1 px-3"
@ -171,12 +205,11 @@
<button <button
type="button" type="button"
class="d-flex w-100 justify-content-between align-items-center bg-transparent border-0 p-0" class="d-flex w-100 justify-content-between align-items-center bg-transparent border-0 p-0"
style="width:100%;"
aria-label="Свернуть/развернуть параметры прогнозирования" aria-label="Свернуть/развернуть параметры прогнозирования"
on:click={() => (isCollapsed = !isCollapsed)} onclick={toggleCollapse}
> >
<b class="card-title mb-0 text-white p-0">Параметры прогнозирования</b> <b class="card-title mb-0 text-white p-0">Параметры прогнозирования</b>
<Button class="p-0" size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}> <Button class="p-0" size="sm" color="primary" onclick={toggleCollapse}>
{#if isCollapsed} {#if isCollapsed}
<Icon name="caret-left-fill" class="text-white" /> <Icon name="caret-left-fill" class="text-white" />
{:else} {:else}
@ -185,6 +218,7 @@
</Button> </Button>
</button> </button>
</CardHeader> </CardHeader>
{#if !isCollapsed} {#if !isCollapsed}
<CardBody> <CardBody>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
@ -201,10 +235,10 @@
<FormGroup spacing="mb-2"> <FormGroup spacing="mb-2">
<Label for="flightProfile" class="form-label">Профиль полета:</Label> <Label for="flightProfile" class="form-label">Профиль полета:</Label>
<InputGroup size="sm"> <InputGroup size="sm">
<Input type="select" id="flightProfile" bind:value={selectedProfile}> <Input type="select" id="flightProfile" bind:value={$FlightParametersStore.profile}>
<optgroup label="Стандартные профили"> <optgroup label="Стандартные профили">
{#each Object.keys(PROFILE_MAP) as profileName} {#each Object.keys(PROFILE_MAP) as profileName}
<option value={profileName}>{profileName}</option> <option value={PROFILE_MAP[profileName as ProfileName]}>{profileName}</option>
{/each} {/each}
</optgroup> </optgroup>
<optgroup label="Пользовательские профили"> <optgroup label="Пользовательские профили">
@ -215,7 +249,7 @@
color="secondary" color="secondary"
size="sm" size="sm"
title="Edit profile" title="Edit profile"
disabled={selectedProfile !== "Custom"} disabled={$FlightParametersStore.profile !== "custom_profile"}
> >
<span>Редакт.</span> <span>Редакт.</span>
<Icon name="gear-fill" /> <Icon name="gear-fill" />
@ -226,13 +260,13 @@
<FormGroup spacing="mb-2"> <FormGroup spacing="mb-2">
<Label for="startPoint" class="form-label">Точка старта:</Label> <Label for="startPoint" class="form-label">Точка старта:</Label>
<InputGroup size="sm"> <InputGroup size="sm">
<Input type="select" id="startPoint" bind:value={startPoint} on:change={setCoordinatesFromSavedPoint}> <Input type="select" id="startPoint" bind:value={startPoint} onchange={setCoordinatesFromSavedPoint}>
<optgroup label="Сохраненные точки"> <optgroup label="Сохраненные точки">
{#each $SavedPointsStore as point} {#each $SavedPointsStore as point}
<option value={point.name} data-lat={point.lat} data-lng={point.lon} data-alt={point.alt}> <option value={point.name} data-lat={point.lat} data-lng={point.lon} data-alt={point.alt}>
{point.name} {point.name}
</option> </option>
{/each} {/each}
</optgroup> </optgroup>
<optgroup label="Задать вручную"> <optgroup label="Задать вручную">
<option value="Custom">Custom</option> <option value="Custom">Custom</option>
@ -241,7 +275,7 @@
<Button <Button
color="secondary" color="secondary"
title="Edit Saved Locations" title="Edit Saved Locations"
on:click={handleClickPointListModal} onclick={handleClickPointListModal}
> >
<span>Редакт.</span> <span>Редакт.</span>
<Icon name="journal-bookmark-fill" /> <Icon name="journal-bookmark-fill" />
@ -252,12 +286,29 @@
<FormGroup spacing="mb-2"> <FormGroup spacing="mb-2">
<Label for="latitude" class="form-label">Широта/Долгота:</Label> <Label for="latitude" class="form-label">Широта/Долгота:</Label>
<InputGroup size="sm"> <InputGroup size="sm">
<Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" on:change={setToCustomOnChange} /> <Input
id="latitude"
type="text"
bind:value={inputLat}
placeholder="Latitude"
onchange={setToCustomOnChange}
/>
<InputGroupText>/</InputGroupText> <InputGroupText>/</InputGroupText>
<Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" on:change={setToCustomOnChange} /> <Input
<Button color="success" size="sm" on:click={applyCoordinatesFromInput} title="Apply Coordinates" id="longitude"
>✓</Button type="text"
bind:value={inputLng}
placeholder="Longitude"
onchange={setToCustomOnChange}
/>
<Button
color="success"
size="sm"
onclick={applyCoordinatesFromInput}
title="Apply Coordinates"
> >
✓
</Button>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
@ -266,8 +317,10 @@
color="outline-secondary" color="outline-secondary"
size="sm" size="sm"
class="w-100" class="w-100"
on:click={ handleClickSelectOnMap }>Указать на карте</Button onclick={handleClickSelectOnMap}
> >
Указать на карте
</Button>
</FormGroup> </FormGroup>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
@ -277,7 +330,7 @@
type="number" type="number"
id="startHeight" id="startHeight"
class="form-control-sm" class="form-control-sm"
on:change={setToCustomOnChange} onchange={setToCustomOnChange}
bind:value={$FlightParametersStore.launch_altitude} bind:value={$FlightParametersStore.launch_altitude}
/> />
</FormGroup> </FormGroup>
@ -292,7 +345,7 @@
</FormGroup> </FormGroup>
</div> </div>
{#if selectedProfile != "Custom"} {#if $FlightParametersStore.profile !== "custom_profile"}
<div class="mb-2 d-flex gap-2"> <div class="mb-2 d-flex gap-2">
<FormGroup class="flex-fill w-50" spacing="mb-2"> <FormGroup class="flex-fill w-50" spacing="mb-2">
<Label for="ascentRate" class="form-label">Скорость подъема (м/с):</Label> <Label for="ascentRate" class="form-label">Скорость подъема (м/с):</Label>
@ -317,7 +370,9 @@
<div class="d-grid gap-1"> <div class="d-grid gap-1">
<Button color="outline-secondary" size="sm">Показать график высоты</Button> <Button color="outline-secondary" size="sm">Показать график высоты</Button>
<Button size="sm" color="primary" on:click={handleGetPrediction}>Выполнить прогнозирование</Button> <Button size="sm" color="primary" onclick={handleGetPrediction}>
Выполнить прогнозирование
</Button>
</div> </div>
</CardBody> </CardBody>
{/if} {/if}

2
src/lib/components/PointListModal.svelte
View file

@ -132,7 +132,7 @@
<button type="button" class="btn-close" onclick={closeModal} aria-label="Close"></button> <button type="button" class="btn-close" onclick={closeModal} aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div bind:this={table.element}> <div bind:this={table.element} class="table-responsive">
<table class="table table-sm"> <table class="table table-sm">
<thead> <thead>
<tr> <tr>

4
src/lib/prediction.ts
View file

@ -80,12 +80,10 @@ export const getForecast = async (
PredictionStore.set(parsePrediction(data.result.prediction) as Prediction); PredictionStore.set(parsePrediction(data.result.prediction) as Prediction);
writeLocalStorage("rawPrediction", data.result as RawPrediction); writeLocalStorage("rawPrediction", data.result as RawPrediction);
writeLocalStorage("prediction", parsePrediction(data.result.prediction) as Prediction); writeLocalStorage("prediction", parsePrediction(data.result.prediction) as Prediction);
alert("Forecast request successful!");
// Handle the response data as needed // Handle the response data as needed
} catch (error) { } catch (error) {
console.error("Error sending forecast request:", error); console.error("Error sending forecast request:", error);
alert("Error getting forecast: " + error); return Promise.reject(new Error(`${error}`));
} }
}; };

10
src/lib/types.ts
View file

@ -7,8 +7,18 @@ export const PROFILE_MAP = {
Custom: "custom_profile", Custom: "custom_profile",
}; };
// Map of profile names to their string identifiers
export const PROFILE_NAMES = {
standard_profile: "Normal",
float_profile: "Float",
reverse_profile: "Reverse",
custom_profile: "Custom",
};
export type ProfileName = keyof typeof PROFILE_MAP; export type ProfileName = keyof typeof PROFILE_MAP;
export type ProfileIdentifier = keyof typeof PROFILE_NAMES;
export interface FlightParameters { export interface FlightParameters {
ascent_rate: number; ascent_rate: number;
burst_altitude: number; burst_altitude: number;