82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<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>
|