From c7df38e6ce38578acf1c7e863864839165d1124c Mon Sep 17 00:00:00 2001
From: ThePetrovich <thepetrovich@yktaero.space>
Date: Fri, 27 Jun 2025 18:23:50 +0800
Subject: [PATCH] Refactor of map & other components

---
 .prettierrc                     |   6 +
 src/lib/prediction.ts           |  91 ++------
 src/lib/stores.ts               |  23 ++
 src/lib/telemetry.ts            |  37 +---
 src/lib/types.ts                |  91 ++++++++
 src/routes/ControlPanel.svelte  | 376 ++++++++++++++++++++------------
 src/routes/map.svelte           | 333 +++++++++++-----------------
 src/routes/predict/+page.svelte |  30 +--
 src/routes/track/+page.svelte   |   4 +-
 static/css/custom.css           |   7 +
 10 files changed, 532 insertions(+), 466 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 src/lib/stores.ts
 create mode 100644 src/lib/types.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..d10f057
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 4,
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "useTabs": false
+}
diff --git a/src/lib/prediction.ts b/src/lib/prediction.ts
index e9c9b26..cdda7a3 100644
--- a/src/lib/prediction.ts
+++ b/src/lib/prediction.ts
@@ -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);
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
new file mode 100644
index 0000000..4e30cff
--- /dev/null
+++ b/src/lib/stores.ts
@@ -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);
diff --git a/src/lib/telemetry.ts b/src/lib/telemetry.ts
index fb2e525..906d144 100644
--- a/src/lib/telemetry.ts
+++ b/src/lib/telemetry.ts
@@ -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) => [
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..fc0f6d4
--- /dev/null
+++ b/src/lib/types.ts
@@ -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[];
+}
\ No newline at end of file
diff --git a/src/routes/ControlPanel.svelte b/src/routes/ControlPanel.svelte
index b4adb66..3e08f65 100644
--- a/src/routes/ControlPanel.svelte
+++ b/src/routes/ControlPanel.svelte
@@ -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>
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index f2c756b..af0222b 100644
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@@ -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: '&copy; <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: '&copy; <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>
\ No newline at end of file
+</style>
diff --git a/src/routes/predict/+page.svelte b/src/routes/predict/+page.svelte
index 28445e4..9ea74b4 100644
--- a/src/routes/predict/+page.svelte
+++ b/src/routes/predict/+page.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/routes/track/+page.svelte b/src/routes/track/+page.svelte
index 29a0867..d056932 100644
--- a/src/routes/track/+page.svelte
+++ b/src/routes/track/+page.svelte
@@ -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>
diff --git a/static/css/custom.css b/static/css/custom.css
index 64f02eb..5c45836 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -40,4 +40,11 @@
 }
 .navbar {
     z-index: 1001;
+}
+
+.card {
+    transition: all 0.3s ease;
+}
+.card-header {
+    cursor: pointer;
 }
\ No newline at end of file