Refactor of map & other components
This commit is contained in:
ThePetrovich
parent
527d4417ff
commit
c7df38e6ce
10 changed files with 532 additions and 466 deletions
6
.prettierrc
Normal file
6
.prettierrc
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"endOfLine": "lf",
|
||||
"printWidth": 120,
|
||||
"useTabs": false
|
||||
}
|
||||
|
|
@ -1,62 +1,10 @@
|
|||
import { writable } from "svelte/store"
|
||||
import { writable } from "svelte/store";
|
||||
import type { LatLngExpression } from "leaflet";
|
||||
import L from "leaflet";
|
||||
|
||||
import { getCsrfToken } from "./auth";
|
||||
|
||||
|
||||
interface TrajectoryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
interface PredictionStage {
|
||||
stage: string;
|
||||
trajectory: TrajectoryPoint[];
|
||||
}
|
||||
|
||||
interface ParsedPrediction {
|
||||
flight_path: [number, number, number][];
|
||||
launch: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
burst: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
landing: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
profile: string;
|
||||
flight_time: number;
|
||||
}
|
||||
|
||||
|
||||
export const latestPrediction = writable({
|
||||
metadata: {
|
||||
complete_datetime: "",
|
||||
start_datetime: ""
|
||||
},
|
||||
prediction: [
|
||||
{
|
||||
stage: "",
|
||||
trajectory: [
|
||||
{
|
||||
altitude: 0.0,
|
||||
datetime: "",
|
||||
latitude: 0.0,
|
||||
longitude: 0.0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const latestPredictionParsed = writable({} as ParsedPrediction);
|
||||
import type { PredictionStage, Prediction, ParsedPrediction } from "./types";
|
||||
import { latestPrediction, latestPredictionParsed } from "./stores";
|
||||
|
||||
function getLatestDataset() {
|
||||
const now = new Date();
|
||||
|
|
@ -72,22 +20,22 @@ function getLatestDataset() {
|
|||
// Subtract 6 hours to account for the lag
|
||||
roundedDate.setUTCHours(roundedDate.getUTCHours() - 6);
|
||||
|
||||
return roundedDate.toISOString();
|
||||
return roundedDate.toISOString();
|
||||
}
|
||||
|
||||
function formatLaunchDateTime(dateObj: string | Date, timeStr: string): string {
|
||||
// Ensure date is a Date object
|
||||
const date = new Date(dateObj);
|
||||
|
||||
|
||||
// Extract date components
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
|
||||
// Format time (ensure it has seconds)
|
||||
let formattedTime = timeStr;
|
||||
if (timeStr.split(':').length === 2) {
|
||||
formattedTime += ':00'; // Add seconds if missing
|
||||
if (timeStr.split(":").length === 2) {
|
||||
formattedTime += ":00"; // Add seconds if missing
|
||||
}
|
||||
|
||||
// Combine into ISO string
|
||||
|
|
@ -96,12 +44,11 @@ function formatLaunchDateTime(dateObj: string | Date, timeStr: string): string {
|
|||
return isoString;
|
||||
}
|
||||
|
||||
export const getForecast = async (flightParameters: Record<string, any>, startDate: string, startTime: string): Promise<void> => {
|
||||
const launch_datetime = formatLaunchDateTime(startDate, startTime);
|
||||
|
||||
export const getForecast = async (
|
||||
flightParameters: Record<string, any>,
|
||||
): Promise<void> => {
|
||||
// Create request object
|
||||
flightParameters.dataset = getLatestDataset();
|
||||
flightParameters.launch_datetime = launch_datetime;
|
||||
|
||||
console.log("Sending request:", flightParameters);
|
||||
|
||||
|
|
@ -109,17 +56,17 @@ export const getForecast = async (flightParameters: Record<string, any>, startDa
|
|||
// Example POST request - replace with your actual API endpoint
|
||||
const csrfToken = await getCsrfToken();
|
||||
if (!csrfToken) {
|
||||
throw new Error('CSRF token not found');
|
||||
throw new Error("CSRF token not found");
|
||||
}
|
||||
|
||||
const response = await fetch('http://localhost:8000/api/predictions', {
|
||||
method: 'POST',
|
||||
const response = await fetch("http://localhost:8000/api/predictions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": csrfToken,
|
||||
},
|
||||
body: JSON.stringify(flightParameters),
|
||||
credentials: 'include'
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
|
|
@ -133,7 +80,7 @@ export const getForecast = async (flightParameters: Record<string, any>, startDa
|
|||
latestPredictionParsed.set(parsePrediction(data.result.prediction));
|
||||
|
||||
alert("Forecast request successful!");
|
||||
// Handle the response data as needed
|
||||
// Handle the response data as needed
|
||||
} catch (error) {
|
||||
console.error("Error sending forecast request:", error);
|
||||
alert("Error getting forecast: " + error);
|
||||
|
|
|
|||
23
src/lib/stores.ts
Normal file
23
src/lib/stores.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { writable } from "svelte/store";
|
||||
import type { FlightParameters, Telemetry, ParsedTelemetry } from "./types";
|
||||
import type { Prediction, ParsedPrediction } from "./types";
|
||||
|
||||
export const flightParametersStore = writable<FlightParameters>({
|
||||
ascent_rate: 5.0,
|
||||
burst_altitude: 30000.0,
|
||||
dataset: "",
|
||||
descent_rate: 5.0,
|
||||
format: "json",
|
||||
launch_altitude: 0.0,
|
||||
launch_datetime: "",
|
||||
launch_latitude: 62.1234,
|
||||
launch_longitude: 129.1234,
|
||||
profile: "standard_profile",
|
||||
version: 2,
|
||||
});
|
||||
|
||||
export const latestTelemetry = writable({} as Telemetry);
|
||||
export const latestTelemetryParsed = writable({} as ParsedTelemetry);
|
||||
|
||||
export const latestPrediction = writable({} as Prediction);
|
||||
export const latestPredictionParsed = writable({} as ParsedPrediction);
|
||||
|
|
@ -1,42 +1,7 @@
|
|||
import { writable } from "svelte/store"
|
||||
import type { LatLngExpression } from "leaflet";
|
||||
|
||||
import L from "leaflet";
|
||||
|
||||
interface TelemetryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
payload: string;
|
||||
}
|
||||
|
||||
interface ParsedTelemetry {
|
||||
flight_path: [number, number, number][];
|
||||
launch: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
datapoints: TelemetryPoint[];
|
||||
}
|
||||
|
||||
export const latestTelemetry = writable({
|
||||
metadata: {
|
||||
complete_datetime: "",
|
||||
start_datetime: ""
|
||||
},
|
||||
telemetry: [
|
||||
{
|
||||
altitude: 0.0,
|
||||
datetime: "",
|
||||
latitude: 0.0,
|
||||
longitude: 0.0,
|
||||
payload: ""
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const latestTelemetryParsed = writable({} as ParsedTelemetry);
|
||||
import type { TelemetryPoint, ParsedTelemetry } from "./types";
|
||||
|
||||
export function parseTelemetry(telemetry: TelemetryPoint[]): ParsedTelemetry {
|
||||
const flight_path: [number, number, number][] = telemetry.map((point) => [
|
||||
|
|
|
|||
91
src/lib/types.ts
Normal file
91
src/lib/types.ts
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import type { LatLngExpression } from "leaflet";
|
||||
|
||||
export const PROFILE_MAP = {
|
||||
Normal: "standard_profile",
|
||||
Float: "float_profile",
|
||||
Reverse: "reverse_profile",
|
||||
Custom: "custom_profile",
|
||||
};
|
||||
|
||||
export type ProfileName = keyof typeof PROFILE_MAP;
|
||||
|
||||
export interface FlightParameters {
|
||||
ascent_rate: number;
|
||||
burst_altitude: number;
|
||||
dataset: string;
|
||||
descent_rate: number;
|
||||
format: "json";
|
||||
launch_altitude: number;
|
||||
launch_datetime: string;
|
||||
launch_latitude: number;
|
||||
launch_longitude: number;
|
||||
profile: (typeof PROFILE_MAP)[ProfileName];
|
||||
version: number;
|
||||
}
|
||||
|
||||
export interface TelemetryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
payload: string;
|
||||
}
|
||||
|
||||
export interface ParsedTelemetry {
|
||||
flight_path: [number, number, number][];
|
||||
launch: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
datapoints: TelemetryPoint[];
|
||||
}
|
||||
|
||||
export interface ParsedTelemetryMetadata {
|
||||
complete_datetime: string;
|
||||
start_datetime: string;
|
||||
}
|
||||
|
||||
export interface Telemetry {
|
||||
metadata: ParsedTelemetryMetadata;
|
||||
telemetry: TelemetryPoint[];
|
||||
}
|
||||
|
||||
export interface TrajectoryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
export interface PredictionStage {
|
||||
stage: string;
|
||||
trajectory: TrajectoryPoint[];
|
||||
}
|
||||
|
||||
export interface ParsedPrediction {
|
||||
flight_path: [number, number, number][];
|
||||
launch: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
burst: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
landing: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
profile: string;
|
||||
flight_time: number;
|
||||
}
|
||||
|
||||
export interface ParsedPredictionMetadata {
|
||||
complete_datetime: string;
|
||||
start_datetime: string;
|
||||
}
|
||||
|
||||
export interface Prediction {
|
||||
metadata: ParsedPredictionMetadata;
|
||||
prediction: PredictionStage[];
|
||||
}
|
||||
|
|
@ -1,170 +1,270 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { getForecast } from '../lib/prediction.ts';
|
||||
const dispatch = createEventDispatcher();
|
||||
<script lang="ts">
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
Button,
|
||||
FormGroup,
|
||||
Label,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
|
||||
import { getForecast } from "$lib/prediction";
|
||||
import type { FlightParameters, ProfileName } from "$lib/types";
|
||||
import { PROFILE_MAP } from "$lib/types";
|
||||
import { flightParametersStore } from '$lib/stores';
|
||||
|
||||
let isCollapsed = false;
|
||||
let selectedProfile: ProfileName = "Normal";
|
||||
let startPoint = "Custom";
|
||||
|
||||
const profileMap = {
|
||||
'Normal': 'standard_profile',
|
||||
'Float': 'float_profile',
|
||||
'Reverse (ascent only)': 'reverse_profile',
|
||||
'Custom': 'custom_profile'
|
||||
};
|
||||
let profile = 'Normal';
|
||||
|
||||
let mouseLat = 0;
|
||||
let mouseLng = 0;
|
||||
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
|
||||
|
||||
let startPoint = 'Custom';
|
||||
let 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
|
||||
let inputLat = $flightParametersStore.launch_latitude.toString();
|
||||
let inputLng = $flightParametersStore.launch_longitude.toString();
|
||||
|
||||
let flightParameters = {
|
||||
ascent_rate: 5.0,
|
||||
burst_altitude: 30000.0,
|
||||
dataset: "",
|
||||
descent_rate: 5.0,
|
||||
format: "json",
|
||||
launch_altitude: 0.0,
|
||||
launch_datetime: "",
|
||||
launch_latitude: 62.1234,
|
||||
launch_longitude: 129.1234,
|
||||
profile: "standard_profile",
|
||||
version: 2
|
||||
};
|
||||
$: $flightParametersStore.profile = PROFILE_MAP[selectedProfile];
|
||||
|
||||
const get_prediction = () => {
|
||||
getForecast(flightParameters, startDate, startTime).then((response) => {
|
||||
const handleGetPrediction = async () => {
|
||||
console.log("Fetching prediction with parameters:", $flightParametersStore);
|
||||
console.log(startDate, startTime);
|
||||
|
||||
$flightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
|
||||
|
||||
try {
|
||||
const response = await getForecast($flightParametersStore);
|
||||
console.log(response);
|
||||
}).catch((error) => {
|
||||
// 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.
|
||||
}
|
||||
};
|
||||
|
||||
const get_map_position = () => {
|
||||
dispatch('getMapPosition', { lat: mouseLat, lng: mouseLng });
|
||||
const applyCoordinatesFromInput = () => {
|
||||
const lat = parseFloat(inputLat);
|
||||
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);
|
||||
} else {
|
||||
console.error("Invalid coordinate input");
|
||||
// TODO: Show a validation error to the user.
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the launch coordinates.
|
||||
* @param {number} lat The new latitude.
|
||||
* @param {number} lng The new longitude.
|
||||
*/
|
||||
export const updateLaunchPosition = (lat: number, lng: number) => {
|
||||
$flightParametersStore.launch_latitude = lat;
|
||||
$flightParametersStore.launch_longitude = lng;
|
||||
console.log("Launch position updated:", lat, lng);
|
||||
inputLat = lat.toString();
|
||||
inputLng = lng.toString();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="card shadow-lg position-absolute bottom-0 end-0 m-3" style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h6 class="card-title mb-0">Параметры прогнозирования</h6>
|
||||
<button class="btn btn-sm btn-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}
|
||||
<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)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{#if !isCollapsed}
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<label for="startPoint" class="form-label small">Точка старта:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="startPoint" class="form-select" bind:value={startPoint}>
|
||||
<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>
|
||||
</select>
|
||||
<button class="btn btn-secondary" title="Edit Saved Locations" on:click={() => dispatch('openLocationsEditor')}>
|
||||
</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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="latitude" class="form-label small">Широта/Долгота:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input id="latitude" type="text" class="form-control" bind:value={flightParameters.launch_latitude} placeholder="Latitude">
|
||||
<span class="input-group-text">/</span>
|
||||
<input id="longitude" type="text" class="form-control" bind:value={flightParameters.launch_longitude} placeholder="Longitude">
|
||||
<button on:click={handleUpdatePosition} class="btn btn-success btn-sm">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="mb-2">
|
||||
<button class="btn btn-outline-secondary btn-sm w-100" on:click={() => {
|
||||
get_map_position();
|
||||
}}>Указать на карте</button>
|
||||
</div>
|
||||
<FormGroup spacing="mb-2">
|
||||
<Button
|
||||
color="outline-secondary"
|
||||
size="sm"
|
||||
class="w-100"
|
||||
on:click={() => console.log("Select on map clicked")}>Указать на карте</Button
|
||||
>
|
||||
</FormGroup>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="startHeight" class="form-label small">Высота точки старта:</label>
|
||||
<input type="number" id="startHeight" class="form-control form-control-sm" bind:value={flightParameters.launch_altitude}>
|
||||
<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">
|
||||
<div class="flex-fill">
|
||||
<label for="startTime" class="form-label small">Время старта (UTC):</label>
|
||||
<input type="time" id="startTime" class="form-control form-control-sm" bind:value={startTime}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="startDate" class="form-label small">Дата старта:</label>
|
||||
<input type="date" id="startDate" class="form-control form-control-sm" bind:value={startDate}>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<div class="flex-fill">
|
||||
<label for="ascentRate" class="form-label small">Скорость подъема (м/c):</label>
|
||||
<input type="number" id="ascentRate" class="form-control form-control-sm" bind:value={flightParameters.ascent_rate}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="descentRate" class="form-label small">Скорость спуска (м/с):</label>
|
||||
<input type="number" id="descentRate" class="form-control form-control-sm" bind:value={flightParameters.descent_rate}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="burstAltitude" class="form-label small">Высота разрыва (м):</label>
|
||||
<input type="number" id="burstAltitude" class="form-control form-control-sm" bind:value={flightParameters.burst_altitude}>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="flightProfile" class="form-label small">Профиль полета:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="flightProfile" class="form-select" bind:value={profile} on:change={() => flightParameters.profile = profileMap[profile] || 'standard_profile'}>
|
||||
<option>Normal</option>
|
||||
<option>Float</option>
|
||||
<option>Reverse (ascent only)</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary btn-sm" title="Edit profile" disabled={flightParameters.profile !== '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>
|
||||
</div>
|
||||
</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 class="btn btn-outline-secondary btn-sm">Показать график высоты</button>
|
||||
<button class="btn btn-secondary btn-sm">Сохранить как шаблон</button>
|
||||
<button class="btn btn-sm btn-primary" on:click={get_prediction}>Выполнить прогнозирование</button>
|
||||
<Button color="outline-secondary" size="sm">Показать график высоты</Button>
|
||||
<Button color="secondary" size="sm">Сохранить как шаблон</Button>
|
||||
<Button size="sm" color="primary" on:click={handleGetPrediction}>Выполнить прогнозирование</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,239 +1,173 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import * as L from 'leaflet';
|
||||
import type { Map as LeafletMap } from 'leaflet';
|
||||
import type { Marker } from 'leaflet';
|
||||
import type { LatLng } from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import VelocityLayer from './velocity.svelte';
|
||||
import { distHaversine } from '../lib/mathutil.ts';
|
||||
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 { latestPredictionParsed } from '../lib/prediction.ts';
|
||||
import { latestTelemetryParsed } from '../lib/telemetry.ts';
|
||||
interface Point {
|
||||
latlng: LatLngLiteral & { alt: number };
|
||||
datetime: Date;
|
||||
}
|
||||
|
||||
let map: typeof LeafletMap;
|
||||
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'}
|
||||
*/
|
||||
export let mode: "prediction" | "telemetry" = "prediction";
|
||||
export let data: PredictionData | TelemetryData | null = null;
|
||||
|
||||
let map: typeof LeafletMap | undefined;
|
||||
let mapContainer: HTMLDivElement;
|
||||
let plotLayerGroup: typeof LayerGroup;
|
||||
let mouseLat = 0;
|
||||
let mouseLng = 0;
|
||||
let inputLat = '56.3576';
|
||||
let inputLng = '39.8666';
|
||||
let mapContainer;
|
||||
let isSelecting = false;
|
||||
|
||||
let velocityOptions = {
|
||||
displayValues: true,
|
||||
displayOptions: {
|
||||
velocityType: 'Global Wind',
|
||||
position: 'bottomleft',
|
||||
emptyString: 'No velocity data',
|
||||
velocityType: "Global Wind",
|
||||
position: "bottomleft",
|
||||
emptyString: "No velocity data",
|
||||
},
|
||||
data: null, // здесь будут ваши данные
|
||||
data: null,
|
||||
};
|
||||
let marker: typeof Marker | null = null;
|
||||
|
||||
export { mouseLat, mouseLng, inputLat, inputLng, updateMapPosition };
|
||||
const dispatch = createEventDispatcher<{ coordinatesSelected: { lat: number; lng: number } }>();
|
||||
|
||||
const updateMapPosition = () => {
|
||||
const lat = parseFloat(inputLat);
|
||||
const lng = parseFloat(inputLng);
|
||||
|
||||
if (isNaN(lat)) {
|
||||
alert("Please enter a valid latitude");
|
||||
return;
|
||||
}
|
||||
if (isNaN(lng)) {
|
||||
alert("Please enter a valid longitude");
|
||||
return;
|
||||
}
|
||||
if (lat < -90 || lat > 90) {
|
||||
alert("Latitude must be between -90 and 90");
|
||||
return;
|
||||
}
|
||||
if (lng < -180 || lng > 180) {
|
||||
alert("Longitude must be between -180 and 180");
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove existing marker if it exists
|
||||
if (marker) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
// Create new marker
|
||||
marker = L.marker([lat, lng]).addTo(map)
|
||||
.bindPopup("Launch Point");
|
||||
|
||||
// Center map on new coordinates
|
||||
map.setView([lat, lng], map.getZoom());
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
map = L.map('map').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
if (!mapContainer) return;
|
||||
|
||||
map = L.map(mapContainer).setView([51.505, -0.09], 13);
|
||||
plotLayerGroup = L.layerGroup().addTo(map);
|
||||
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(map);
|
||||
|
||||
// Загрузка данных для velocity (пример)
|
||||
const response = await fetch('src/routes/testVelo.json');
|
||||
const response = await fetch("src/routes/testVelo.json");
|
||||
velocityOptions.data = await response.json();
|
||||
|
||||
map.on('mousemove', (e: any) => {
|
||||
mouseLat = e.latlng.lat.toFixed(6);
|
||||
mouseLng = e.latlng.lng.toFixed(6);
|
||||
map.on("mousemove", (e: any) => {
|
||||
mouseLat = e.latlng.lat;
|
||||
mouseLng = e.latlng.lng;
|
||||
});
|
||||
|
||||
marker = L.marker([56.3576, 39.8666]).addTo(map)
|
||||
.bindPopup(() => {
|
||||
return `
|
||||
<b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
|
||||
`;
|
||||
});
|
||||
|
||||
latestPredictionParsed.subscribe((prediction) => {
|
||||
if (prediction) {
|
||||
plotPrediction(prediction);
|
||||
map.on("click", (e: any) => {
|
||||
if (isSelecting) {
|
||||
dispatch("coordinatesSelected", { lat: e.latlng.lat, lng: e.latlng.lng });
|
||||
stopSelection();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const plotPrediction = (prediction: any) => {
|
||||
console.log("Flight data parsed, creating map plot...");
|
||||
$: if (map && data) {
|
||||
plotData(data);
|
||||
} else if (map) {
|
||||
clearMapLayers();
|
||||
}
|
||||
|
||||
// Clear existing map items
|
||||
if (marker) {
|
||||
map.eachLayer((layer: any) => {
|
||||
if (layer instanceof L.Marker || layer instanceof L.Polyline) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
export const startSelection = () => {
|
||||
isSelecting = true;
|
||||
if (mapContainer) mapContainer.style.cursor = "crosshair";
|
||||
};
|
||||
|
||||
export const stopSelection = () => {
|
||||
isSelecting = false;
|
||||
if (mapContainer) mapContainer.style.cursor = "";
|
||||
};
|
||||
|
||||
export const plotData = (plotData: PredictionData | TelemetryData) => {
|
||||
if (mode === "prediction") {
|
||||
plotPrediction(plotData as PredictionData);
|
||||
} else if (mode === "telemetry") {
|
||||
plotTelemetry(plotData as TelemetryData);
|
||||
}
|
||||
};
|
||||
|
||||
export const clearMapLayers = () => {
|
||||
plotLayerGroup?.clearLayers();
|
||||
};
|
||||
|
||||
const launchIcon = L.icon({ iconUrl: "target-blue.png", iconSize: [10, 10], iconAnchor: [5, 5] });
|
||||
const landIcon = L.icon({ iconUrl: "target-red.png", iconSize: [10, 10], iconAnchor: [5, 5] });
|
||||
const burstIcon = L.icon({ iconUrl: "pop-marker.png", iconSize: [16, 16], iconAnchor: [8, 8] });
|
||||
const telemetryIcon = L.icon({ iconUrl: "marker-sm-red.png", iconSize: [10, 10], iconAnchor: [5, 5] });
|
||||
|
||||
const plotPrediction = (prediction: PredictionData) => {
|
||||
const { launch, landing, burst, flight_path, flight_time } = prediction;
|
||||
|
||||
// Calculate range and time of flight
|
||||
const range = distHaversine(launch.latlng, landing.latlng, 1);
|
||||
const f_hours = Math.floor(flight_time / 3600);
|
||||
const f_minutes = Math.floor(((flight_time % 86400) % 3600) / 60).toString().padStart(2, '0');
|
||||
const f_minutes = Math.floor((flight_time % 3600) / 60).toString().padStart(2, "0");
|
||||
const flighttime = `${f_hours}hr${f_minutes}`;
|
||||
console.log(`Range: ${range}, Flight Time: ${flighttime}`);
|
||||
|
||||
// Create custom icons
|
||||
const launchIcon = L.icon({
|
||||
iconUrl: 'target-blue.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
L.marker(launch.latlng, { title: `Launch`, icon: launchIcon }).addTo(plotLayerGroup);
|
||||
L.marker(landing.latlng, { title: `Landing`, icon: landIcon }).addTo(plotLayerGroup);
|
||||
L.marker(burst.latlng, { title: `Burst`, icon: burstIcon }).addTo(plotLayerGroup);
|
||||
|
||||
const landIcon = L.icon({
|
||||
iconUrl: 'target-red.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
L.polyline(flight_path, { weight: 3, color: "#000000" }).addTo(plotLayerGroup);
|
||||
|
||||
const burstIcon = L.icon({
|
||||
iconUrl: 'pop-marker.png',
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8],
|
||||
});
|
||||
|
||||
// Add markers to the map
|
||||
const launchMarker = L.marker(launch.latlng, {
|
||||
title: `Launch (${launch.latlng.lat.toFixed(4)}, ${launch.latlng.lng.toFixed(4)}) at ${launch.datetime.toUTCString()}`,
|
||||
icon: launchIcon,
|
||||
}).addTo(map);
|
||||
|
||||
const landMarker = L.marker(landing.latlng, {
|
||||
title: `Landing (${landing.latlng.lat.toFixed(4)}, ${landing.latlng.lng.toFixed(4)}) at ${landing.datetime.toUTCString()}`,
|
||||
icon: landIcon,
|
||||
}).addTo(map);
|
||||
|
||||
const burstMarker = L.marker(burst.latlng, {
|
||||
title: `Burst (${burst.latlng.lat.toFixed(4)}, ${burst.latlng.lng.toFixed(4)} at altitude ${burst.latlng.alt.toFixed(0)}) at ${burst.datetime.toUTCString()}`,
|
||||
icon: burstIcon,
|
||||
}).addTo(map);
|
||||
|
||||
// Add flight path polyline
|
||||
const pathPolyline = L.polyline(flight_path, {
|
||||
weight: 3,
|
||||
color: "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
// Center the map on the launch point
|
||||
map.setView(launch.latlng, 8);
|
||||
map?.fitBounds(L.latLngBounds(flight_path));
|
||||
};
|
||||
|
||||
const plotTelemetryTrack = (telemetry: any) => {
|
||||
console.log("Telemetry data parsed, creating map plot...");
|
||||
const plotTelemetry = (telemetry: TelemetryData) => {
|
||||
L.marker(telemetry.launch.latlng, { title: `Launch`, icon: launchIcon }).addTo(plotLayerGroup);
|
||||
|
||||
// Clear existing map items
|
||||
if (marker) {
|
||||
map.eachLayer((layer: any) => {
|
||||
if (layer instanceof L.Marker || layer instanceof L.Polyline) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Create custom icons for telemetry markers
|
||||
const telemetryIcon = L.icon({
|
||||
iconUrl: 'marker-sm-red.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
|
||||
const launchIcon = L.icon({
|
||||
iconUrl: 'target-blue.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
|
||||
// Add markers to the map
|
||||
const launchMarker = L.marker(telemetry.launch.latlng, {
|
||||
title: `Launch (${telemetry.launch.latlng.lat.toFixed(4)}, ${telemetry.launch.latlng.lng.toFixed(4)}) at ${telemetry.launch.datetime.toUTCString()}`,
|
||||
icon: launchIcon,
|
||||
}).addTo(map);
|
||||
|
||||
// interface TelemetryPoint {
|
||||
// altitude: number;
|
||||
// datetime: string;
|
||||
// latitude: number;
|
||||
// longitude: number;
|
||||
// payload: string;
|
||||
// }
|
||||
|
||||
// Add telemetry markers to the map
|
||||
telemetry.datapoints.forEach((point: any) => {
|
||||
const telemetryMarker = L.marker([point.latitude, point.longitude], {
|
||||
title: `Telemetry (${point.latitude.toFixed(4)}, ${point.longitude.toFixed(4)}) at ${point.datetime}`,
|
||||
telemetry.datapoints.forEach((point) => {
|
||||
L.marker([point.latitude, point.longitude], {
|
||||
title: `Telemetry at ${point.datetime}`,
|
||||
icon: telemetryIcon,
|
||||
}).addTo(map)
|
||||
.bindPopup(() => {
|
||||
return `
|
||||
<b>Telemetry Point</b><br>, Lat: ${point.latitude.toFixed(6)}<br>, Lon: ${point.longitude.toFixed(6)}<br>
|
||||
`;
|
||||
});
|
||||
})
|
||||
.bindPopup(`<b>Telemetry Point</b><br>Lat: ${point.latitude.toFixed(6)}<br>Lon: ${point.longitude.toFixed(6)}`)
|
||||
.addTo(plotLayerGroup);
|
||||
});
|
||||
|
||||
// Add flight path polyline
|
||||
const pathPolyline = L.polyline(telemetry.flight_path, {
|
||||
weight: 3,
|
||||
color: "#000000",
|
||||
}).addTo(map);
|
||||
};
|
||||
L.polyline(telemetry.flight_path, { weight: 3, color: "#000000" }).addTo(plotLayerGroup);
|
||||
|
||||
map?.fitBounds(L.latLngBounds(telemetry.flight_path));
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="map-container">
|
||||
<div id="map"></div>
|
||||
<div class="map-container" bind:this={mapContainer}>
|
||||
<div class="card coordinates-display">
|
||||
<p class="card-text"><b>Lat:</b> {mouseLat}, <b>Lon:</b> {mouseLng}</p>
|
||||
<p class="card-text">
|
||||
<b>Lat:</b>
|
||||
{mouseLat.toFixed(6)},
|
||||
<b>Lon:</b>
|
||||
{mouseLng.toFixed(6)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="panel-container">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div bind:this={mapContainer} style="width: 100%; height: 100vh;">
|
||||
{#if map}
|
||||
<VelocityLayer {map} {velocityOptions} />
|
||||
{/if}
|
||||
{#if map}
|
||||
<VelocityLayer {map} {velocityOptions} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -243,26 +177,19 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px); /* Adjust height to account for navbar */
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.coordinates-display {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
right: 10px;
|
||||
background: #fff; /* Remove transparency */
|
||||
padding: 3px 8px; /* Reduce padding */
|
||||
background: #fff;
|
||||
padding: 3px 8px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
z-index: 1000; /* Ensure it's above the map */
|
||||
z-index: 1000;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #ccc; /* Add card border */
|
||||
width: 150px; /* Fixed width */
|
||||
border: 1px solid #ccc;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.panel-container {
|
||||
|
|
@ -271,4 +198,4 @@
|
|||
right: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<script>
|
||||
import Map from '../map.svelte';
|
||||
<script lang="ts">
|
||||
import Map from '../Map.svelte';
|
||||
import ControlPanel from '../ControlPanel.svelte';
|
||||
import Navbar from '../Navbar.svelte';
|
||||
// import BurstCalculator from './BurstCalculator.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { latestPredictionParsed } from '$lib/stores';
|
||||
import { Modal } from '@sveltestrap/sveltestrap';
|
||||
|
||||
let coordinates = {
|
||||
lat: '56.3576',
|
||||
lng: '39.8666'
|
||||
}
|
||||
let map: { plotData?: (prediction: any) => void } | null = null;
|
||||
|
||||
function handlePositionUpdate(event) {
|
||||
coordinates.lat = event.detail.lat;
|
||||
coordinates.lng = event.detail.lng;
|
||||
}
|
||||
onMount(() => {
|
||||
latestPredictionParsed.subscribe((prediction) => {
|
||||
if (prediction && map) {
|
||||
map.plotData?.(prediction);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Navbar />
|
||||
<Map bind:coordinates>
|
||||
<ControlPanel
|
||||
{coordinates}
|
||||
on:updatePosition={handlePositionUpdate}
|
||||
<Map bind:this={map} mode="prediction">
|
||||
<ControlPanel
|
||||
/>
|
||||
</Map>
|
||||
</main>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import Map from '../map.svelte';
|
||||
import Map from '../Map.svelte';
|
||||
import TelemetryPanel from '../TelemetryPanel.svelte';
|
||||
import Navbar from '../Navbar.svelte';
|
||||
// import BurstCalculator from './BurstCalculator.svelte';
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<main>
|
||||
<Navbar />
|
||||
<Map bind:coordinates>
|
||||
<Map>
|
||||
<TelemetryPanel
|
||||
/>
|
||||
</Map>
|
||||
|
|
|
|||
|
|
@ -40,4 +40,11 @@
|
|||
}
|
||||
.navbar {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue