New panel layout

src/lib/components/TelemetryPanel.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import {
+        Card,
+        CardHeader,
+        CardBody,
+        Button,
+        FormGroup,
+        Label,
+        Input,
+        InputGroup,
+    } from '@sveltestrap/sveltestrap';
+    //import { telemetryStore } from '../lib/telemetry.ts'; // Import your telemetry store
+
+    let telemetry: { latitude?: number; longitude?: number; altitude?: number } = {};
+    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>
+
+<Card>
+    <CardHeader
+        class="bg-primary text-white d-flex justify-content-between align-items-center p-1 px-3"
+        style="cursor:pointer;"
+    >
+        <b class="card-title mb-0 p-0">Последние данные телеметрии</b>
+        <Button class="p-0" 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>
+    </CardHeader>
+    {#if !isCollapsed}
+        <CardBody>
+            <FormGroup spacing="mb-2">
+                <Label class="small">Широта:</Label>
+                <InputGroup size="sm">
+                    <Input type="text" value={telemetry.latitude || 'N/A'} readonly />
+                </InputGroup>
+            </FormGroup>
+
+            <FormGroup spacing="mb-2">
+                <Label class="small">Долгота:</Label>
+                <InputGroup size="sm">
+                    <Input type="text" value={telemetry.longitude || 'N/A'} readonly />
+                </InputGroup>
+            </FormGroup>
+
+            <FormGroup spacing="mb-2">
+                <Label class="small">Высота (м):</Label>
+                <InputGroup size="sm">
+                    <Input type="text" value={telemetry.altitude || 'N/A'} readonly />
+                </InputGroup>
+            </FormGroup>
+        </CardBody>
+    {/if}
+</Card>
+