From afc45cc9cc443e6f13fc96400b00783c68576bef Mon Sep 17 00:00:00 2001
From: ThePetrovich <thepetrovich@yktaero.space>
Date: Sat, 5 Apr 2025 22:44:34 +0800
Subject: [PATCH] Add routes

---
 src/lib/telemetry.ts             |  58 ++++++++++++++++++++++++
 src/routes/+page.svelte          |  19 --------
 src/routes/Navbar.svelte         |   4 +-
 src/routes/TelemetryPanel.svelte |  74 +++++++++++++++++++++++++++++++
 src/routes/map.svelte            |  60 +++++++++++++++++++++++++
 src/routes/predict/+page.svelte  |  26 +++++++++++
 src/routes/predict/+page.ts      |   1 +
 src/routes/track/+page.svelte    |  19 ++++++++
 src/routes/track/+page.ts        |   1 +
 static/marker-sm-red.png         | Bin 0 -> 421 bytes
 10 files changed, 241 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/telemetry.ts
 create mode 100644 src/routes/TelemetryPanel.svelte
 create mode 100644 src/routes/predict/+page.svelte
 create mode 100644 src/routes/predict/+page.ts
 create mode 100644 src/routes/track/+page.svelte
 create mode 100644 src/routes/track/+page.ts
 create mode 100644 static/marker-sm-red.png

diff --git a/src/lib/telemetry.ts b/src/lib/telemetry.ts
new file mode 100644
index 0000000..fb2e525
--- /dev/null
+++ b/src/lib/telemetry.ts
@@ -0,0 +1,58 @@
+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);
+
+export function parseTelemetry(telemetry: TelemetryPoint[]): ParsedTelemetry {
+    const flight_path: [number, number, number][] = telemetry.map((point) => [
+        point.latitude,
+        point.longitude,
+        point.altitude
+    ]);
+
+    const launch = {
+        latlng: L.latLng(telemetry[0].latitude, telemetry[0].longitude),
+        datetime: new Date(telemetry[0].datetime)
+    };
+
+    return {
+        flight_path,
+        launch,
+        datapoints: telemetry
+    };
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 594580f..f961cbf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,26 +1,7 @@
 <script>
-    import Map from './map.svelte';
-    import ControlPanel from './ControlPanel.svelte';
     import Navbar from './Navbar.svelte';
-    // import BurstCalculator from './BurstCalculator.svelte';
-
-    let coordinates = {
-        lat: '56.3576',
-        lng: '39.8666'
-    }
-
-    function handlePositionUpdate(event) {
-        coordinates.lat = event.detail.lat;
-        coordinates.lng = event.detail.lng;
-    }
 </script>
 
 <main>
     <Navbar />
-    <Map bind:coordinates>
-        <ControlPanel 
-            {coordinates}
-            on:updatePosition={handlePositionUpdate}
-        />
-    </Map>
 </main>
\ No newline at end of file
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 5451707..6c90297 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -21,10 +21,10 @@
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
-                    <a class="nav-link nav-full-height {window.location.pathname === '/' ? 'active' : ''}" href="/">Прогнозирование</a>
+                    <a class="nav-link nav-full-height {window.location.pathname === '/predict' ? 'active' : ''}" href="/predict">Прогнозирование</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link nav-full-height {window.location.pathname === '/page2' ? 'active' : ''}" href="/page2">Слежение</a>
+                    <a class="nav-link nav-full-height {window.location.pathname === '/track' ? 'active' : ''}" href="/track">Слежение</a>
                 </li>
             </ul>
             <ul class="navbar-nav">
diff --git a/src/routes/TelemetryPanel.svelte b/src/routes/TelemetryPanel.svelte
new file mode 100644
index 0000000..20e9b19
--- /dev/null
+++ b/src/routes/TelemetryPanel.svelte
@@ -0,0 +1,74 @@
+<script>
+    import { onMount } from 'svelte';
+    //import { telemetryStore } from '../lib/telemetry.ts'; // Import your telemetry store
+
+    let telemetry = {};
+    let isCollapsed = false;
+
+    // Subscribe to the telemetry store
+    //const unsubscribe = telemetryStore.subscribe((data) => {
+    //    telemetry = data;
+    //});
+
+    telemetry = {
+        latitude: 56.3576,
+        longitude: 39.8666,
+        altitude: 1000
+    };
+
+    // onMount(() => {
+    //     return () => {
+    //         unsubscribe(); // Cleanup subscription on component destroy
+    //     };
+    // });
+</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}
+        </button>
+    </div>
+    {#if !isCollapsed}
+        <div class="card-body">
+            <div class="mb-2">
+                <label class="form-label small">Широта:</label>
+                <div class="input-group input-group-sm">
+                    <input type="text" class="form-control" value={telemetry.latitude || 'N/A'} readonly>
+                </div>
+            </div>
+
+            <div class="mb-2">
+                <label class="form-label small">Долгота:</label>
+                <div class="input-group input-group-sm">
+                    <input type="text" class="form-control" value={telemetry.longitude || 'N/A'} readonly>
+                </div>
+            </div>
+
+            <div class="mb-2">
+                <label class="form-label small">Высота (м):</label>
+                <div class="input-group input-group-sm">
+                    <input type="text" class="form-control" value={telemetry.altitude || 'N/A'} readonly>
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .card {
+        transition: all 0.3s ease;
+    }
+    .card-header {
+        cursor: pointer;
+    }
+</style>
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index 840212c..fecf55a 100644
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@@ -5,6 +5,7 @@
     import { distHaversine } from '../lib/mathutil.ts';
 
     import { latestPredictionParsed } from '../lib/prediction.ts';
+    import { latestTelemetryParsed } from '../lib/telemetry.ts';
 
     /**
         * @type {L.Map}
@@ -147,6 +148,65 @@
         map.setView(launch.latlng, 8);
     };
 
+    const plotTelemetryTrack = (telemetry) => {
+        console.log("Telemetry data parsed, creating map plot...");
+
+        // Clear existing map items
+        if (marker) {
+            map.eachLayer((layer) => {
+                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) => {
+            const telemetryMarker = L.marker([point.latitude, point.longitude], {
+                title: `Telemetry (${point.latitude.toFixed(4)}, ${point.longitude.toFixed(4)}) 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>
+                `;
+            });
+        });
+
+        // Add flight path polyline
+        const pathPolyline = L.polyline(telemetry.flight_path, {
+            weight: 3,
+            color: "#000000",
+        }).addTo(map);
+    };
+
 </script>
 
 <div class="map-container">
diff --git a/src/routes/predict/+page.svelte b/src/routes/predict/+page.svelte
new file mode 100644
index 0000000..28445e4
--- /dev/null
+++ b/src/routes/predict/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+    import Map from '../map.svelte';
+    import ControlPanel from '../ControlPanel.svelte';
+    import Navbar from '../Navbar.svelte';
+    // import BurstCalculator from './BurstCalculator.svelte';
+
+    let coordinates = {
+        lat: '56.3576',
+        lng: '39.8666'
+    }
+
+    function handlePositionUpdate(event) {
+        coordinates.lat = event.detail.lat;
+        coordinates.lng = event.detail.lng;
+    }
+</script>
+
+<main>
+    <Navbar />
+    <Map bind:coordinates>
+        <ControlPanel 
+            {coordinates}
+            on:updatePosition={handlePositionUpdate}
+        />
+    </Map>
+</main>
\ No newline at end of file
diff --git a/src/routes/predict/+page.ts b/src/routes/predict/+page.ts
new file mode 100644
index 0000000..b2463b2
--- /dev/null
+++ b/src/routes/predict/+page.ts
@@ -0,0 +1 @@
+export const ssr =false;
\ No newline at end of file
diff --git a/src/routes/track/+page.svelte b/src/routes/track/+page.svelte
new file mode 100644
index 0000000..29a0867
--- /dev/null
+++ b/src/routes/track/+page.svelte
@@ -0,0 +1,19 @@
+<script>
+    import Map from '../map.svelte';
+    import TelemetryPanel from '../TelemetryPanel.svelte';
+    import Navbar from '../Navbar.svelte';
+    // import BurstCalculator from './BurstCalculator.svelte';
+
+    let coordinates = {
+        lat: '56.3576',
+        lng: '39.8666'
+    }
+</script>
+
+<main>
+    <Navbar />
+    <Map bind:coordinates>
+        <TelemetryPanel 
+        />
+    </Map>
+</main>
\ No newline at end of file
diff --git a/src/routes/track/+page.ts b/src/routes/track/+page.ts
new file mode 100644
index 0000000..b2463b2
--- /dev/null
+++ b/src/routes/track/+page.ts
@@ -0,0 +1 @@
+export const ssr =false;
\ No newline at end of file
diff --git a/static/marker-sm-red.png b/static/marker-sm-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..62806abaff61366c78d480db4b3ee200a9ae4a48
GIT binary patch
literal 421
zcmV;W0b2fvP)<h;3K|Lk000e1NJLTq000XB000XJ1^@s6sjPP<00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10U}96K~xx(mC>P213?gg;eU3w%UzQ*O|GVjoW|e~oM~SI&pYrO
zm?{*8@C2Bm@Kq?1x{?r@iYC`Ix83d_C=H>CQ6v70_(oKfpAiuOEFgdaJN*^N&n_Yc
zC_M}fR0(DQo`Hp`CII%a1?pj*&ma2z_H{7O`(CfDy`MX%0jsLtmqnyM%=78EEC<V`
zA*4j+90|Btt=?a@+jCX@G$P_WjIN8KTs94x7_lN45jrAVWm)NABqGiLVxT(fbbLq&
zZ!IUz;jJZej#Kc?m}=jl31-vHCS=YXLT@c0CEj+s5L21~YE(4_nB1+`i?lbhB5Y#h
zqiJ|-+eLths>XwcgZk3@`M4<Br=rl?ZnwR#_E_VuvoofODIGb>e?IsHmL8Qx;KWV*
P00000NkvXXu0mjf;$N%J

literal 0
HcmV?d00001