Continue messing with stores
This commit is contained in:
ThePetrovich
parent
c7df38e6ce
commit
52558ed3b2
7 changed files with 148 additions and 83 deletions
|
|
@ -14,7 +14,7 @@
|
|||
import { getForecast } from "$lib/prediction";
|
||||
import type { FlightParameters, ProfileName } from "$lib/types";
|
||||
import { PROFILE_MAP } from "$lib/types";
|
||||
import { flightParametersStore } from '$lib/stores';
|
||||
import { FlightParametersStore, writeLocalStorage } from '$lib/stores';
|
||||
|
||||
let isCollapsed = false;
|
||||
let selectedProfile: ProfileName = "Normal";
|
||||
|
|
@ -24,19 +24,20 @@
|
|||
let startDate = now.toISOString().split("T")[0]; // YYYY-MM-DD
|
||||
let startTime = now.toISOString().split("T")[1].split(".")[0]; // HH:MM:SS
|
||||
|
||||
let inputLat = $flightParametersStore.launch_latitude.toString();
|
||||
let inputLng = $flightParametersStore.launch_longitude.toString();
|
||||
let inputLat = $FlightParametersStore.launch_latitude.toString();
|
||||
let inputLng = $FlightParametersStore.launch_longitude.toString();
|
||||
|
||||
$: $flightParametersStore.profile = PROFILE_MAP[selectedProfile];
|
||||
$: $FlightParametersStore.profile = PROFILE_MAP[selectedProfile];
|
||||
|
||||
const handleGetPrediction = async () => {
|
||||
console.log("Fetching prediction with parameters:", $flightParametersStore);
|
||||
console.log("Fetching prediction with parameters:", $FlightParametersStore);
|
||||
console.log(startDate, startTime);
|
||||
|
||||
$flightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
|
||||
$FlightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
|
||||
writeLocalStorage<FlightParameters>("flightParameters", $FlightParametersStore);
|
||||
|
||||
try {
|
||||
const response = await getForecast($flightParametersStore);
|
||||
const response = await getForecast($FlightParametersStore);
|
||||
console.log(response);
|
||||
// TODO: Notify other components of the new prediction.
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
|
@ -52,9 +53,9 @@
|
|||
const lng = parseFloat(inputLng);
|
||||
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
$flightParametersStore.launch_latitude = lat;
|
||||
$flightParametersStore.launch_longitude = lng;
|
||||
console.log("Updated position:", $flightParametersStore.launch_latitude, $flightParametersStore.launch_longitude);
|
||||
$FlightParametersStore.launch_latitude = lat;
|
||||
$FlightParametersStore.launch_longitude = lng;
|
||||
console.log("Updated position:", $FlightParametersStore.launch_latitude, $FlightParametersStore.launch_longitude);
|
||||
} else {
|
||||
console.error("Invalid coordinate input");
|
||||
// TODO: Show a validation error to the user.
|
||||
|
|
@ -67,8 +68,8 @@
|
|||
* @param {number} lng The new longitude.
|
||||
*/
|
||||
export const updateLaunchPosition = (lat: number, lng: number) => {
|
||||
$flightParametersStore.launch_latitude = lat;
|
||||
$flightParametersStore.launch_longitude = lng;
|
||||
$FlightParametersStore.launch_latitude = lat;
|
||||
$FlightParametersStore.launch_longitude = lng;
|
||||
console.log("Launch position updated:", lat, lng);
|
||||
inputLat = lat.toString();
|
||||
inputLng = lng.toString();
|
||||
|
|
@ -214,7 +215,7 @@
|
|||
type="number"
|
||||
id="startHeight"
|
||||
class="form-control-sm"
|
||||
bind:value={$flightParametersStore.launch_altitude}
|
||||
bind:value={$FlightParametersStore.launch_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
|
|
@ -236,7 +237,7 @@
|
|||
type="number"
|
||||
id="ascentRate"
|
||||
class="form-control-sm"
|
||||
bind:value={$flightParametersStore.ascent_rate}
|
||||
bind:value={$FlightParametersStore.ascent_rate}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-fill" spacing="mb-0">
|
||||
|
|
@ -245,7 +246,7 @@
|
|||
type="number"
|
||||
id="descentRate"
|
||||
class="form-control-sm"
|
||||
bind:value={$flightParametersStore.descent_rate}
|
||||
bind:value={$FlightParametersStore.descent_rate}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
|
@ -256,7 +257,7 @@
|
|||
type="number"
|
||||
id="burstAltitude"
|
||||
class="form-control-sm"
|
||||
bind:value={$flightParametersStore.burst_altitude}
|
||||
bind:value={$FlightParametersStore.burst_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,37 +2,12 @@
|
|||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import * as L from "leaflet";
|
||||
import type { Map as LeafletMap, LayerGroup } from "leaflet";
|
||||
type LatLngExpression = [number, number] | { lat: number; lng: number };
|
||||
type LatLngLiteral = { lat: number; lng: number };
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import VelocityLayer from "./velocity.svelte";
|
||||
import { distHaversine } from "../lib/mathutil.ts";
|
||||
import type { PredictionData, TelemetryData } from "../lib/types.ts";
|
||||
|
||||
interface Point {
|
||||
latlng: LatLngLiteral & { alt: number };
|
||||
datetime: Date;
|
||||
}
|
||||
|
||||
interface PredictionData {
|
||||
launch: Point;
|
||||
landing: Point;
|
||||
burst: Point;
|
||||
flight_path: LatLngExpression[];
|
||||
flight_time: number;
|
||||
}
|
||||
|
||||
interface TelemetryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
interface TelemetryData {
|
||||
launch: Point;
|
||||
datapoints: TelemetryPoint[];
|
||||
flight_path: LatLngExpression[];
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {'prediction' | 'telemetry'}
|
||||
|
|
@ -151,6 +126,22 @@
|
|||
|
||||
map?.fitBounds(L.latLngBounds(telemetry.flight_path));
|
||||
};
|
||||
|
||||
export const panTo = (lat: number, lng: number) => {
|
||||
if (map) {
|
||||
map.setView([lat, lng], map.getZoom());
|
||||
}
|
||||
};
|
||||
|
||||
export const zoomTo = (lat: number, lng: number, zoomLevel: number) => {
|
||||
if (map) {
|
||||
map.setView([lat, lng], zoomLevel);
|
||||
}
|
||||
};
|
||||
|
||||
export const getMap = () => {
|
||||
return map;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="map-container" bind:this={mapContainer}>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,29 @@
|
|||
import ControlPanel from '../ControlPanel.svelte';
|
||||
import Navbar from '../Navbar.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { latestPredictionParsed } from '$lib/stores';
|
||||
import { PredictionStore } from '$lib/stores';
|
||||
import { Modal } from '@sveltestrap/sveltestrap';
|
||||
import L from 'leaflet';
|
||||
|
||||
let map: { plotData?: (prediction: any) => void } | null = null;
|
||||
|
||||
let map: Map | null = null;
|
||||
let panel: ControlPanel | null = null;
|
||||
|
||||
onMount(() => {
|
||||
latestPredictionParsed.subscribe((prediction) => {
|
||||
if (prediction && map) {
|
||||
map.plotData?.(prediction);
|
||||
PredictionStore.subscribe((data) => {
|
||||
if (data) {
|
||||
map?.clearMapLayers();
|
||||
}
|
||||
});
|
||||
|
||||
L.DomEvent.disableClickPropagation(panel?.$element);
|
||||
L.DomEvent.disableScrollPropagation(panel?.$element);
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Navbar />
|
||||
<Map bind:this={map} mode="prediction">
|
||||
<ControlPanel
|
||||
/>
|
||||
<Map bind:this={map} mode="prediction" bind:data={$PredictionStore}>
|
||||
<ControlPanel bind:this={panel} />
|
||||
</Map>
|
||||
</main>
|
||||
Loading…
Add table
Add a link
Reference in a new issue