Add ruler tool and fix types

src/lib/components/ScenarioPanel.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import {
+        Card,
+        CardHeader,
+        CardBody,
+        Button,
+        FormGroup,
+        Label,
+        Input,
+        InputGroup,
+        InputGroupText,
+        Icon,
+    } from "@sveltestrap/sveltestrap";
+
+    import { PROFILE_MAP } from "$lib/types";
+    import { FlightParametersStore, writeLocalStorage } from "$lib/stores";
+
+    let isCollapsed = false;
+
+    export const collapsePanel = () => {
+        isCollapsed = true;
+    };
+
+    export const expandPanel = () => {
+        isCollapsed = false;
+    };
+
+    export const togglePanel = () => {
+        isCollapsed = !isCollapsed;
+    };
+</script>
+
+<Card>
+    <CardHeader
+        class="bg-primary text-white d-flex justify-content-between align-items-center card-header p-1 px-3"
+        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)}
+        >
+            <b class="card-title mb-0 text-white p-0">Сценарий прогнозирования</b>
+            <Button class="p-0" size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}>
+                {#if isCollapsed}
+                    <Icon name="caret-left-fill" class="text-white" />
+                {:else}
+                    <Icon name="caret-down-fill" class="text-white" />
+                {/if}
+            </Button>
+        </button>
+    </CardHeader>
+    {#if !isCollapsed}
+        <CardBody>
+            <FormGroup spacing="mb-2">
+                <Label for="scenarioName" class="form-label">Название сценария:</Label>
+                <InputGroup size="sm">
+                    <Input id="scenarioName" type="text" />
+                </InputGroup>
+            </FormGroup>
+
+            <div class="d-flex gap-2 mb-2">
+                <Button class="flex-fill" color="secondary" size="sm">
+                    Сохранить
+                    <Icon name="save" />
+                </Button>
+                <Button class="flex-fill" color="secondary" size="sm">
+                    Загрузить
+                    <Icon name="folder2-open" />
+                </Button>
+            </div>
+            
+            <Button
+                color="primary"
+                size="sm"
+                class="mb-2 w-100"
+            >
+                Редактировать сохраненные сценарии
+                <Icon name="journal-bookmark-fill" />
+            </Button>
+
+            <FormGroup spacing="mb-2">
+                <Label for="scenarioMode" class="form-label">Режим сценария:</Label>
+                <InputGroup size="sm">
+                    <Input type="select" id="scenarioMode">
+                        <option>Обычный</option>
+                        <option>Почасовой</option>
+                        <option>Ансамблевый</option>
+                    </Input>
+                </InputGroup>
+            </FormGroup>
+
+            <FormGroup spacing="mb-0">
+                <Label for="export" class="form-label">Экспортировать:</Label>
+                <InputGroup size="sm">
+                    <Input type="select" id="export">
+                        <option>JSON</option>
+                        <option>CSV</option>
+                        <option>KML</option>
+                    </Input>
+                    <Button
+                        color="primary"
+                        title="Edit Saved Locations"
+                        on:click={() => console.log("Not implemented yet")}
+                    >
+                        <span>Экспорт</span>
+                        <Icon name="file-earmark-arrow-down" />
+                    </Button>
+                </InputGroup>
+            </FormGroup>
+        </CardBody>
+    {/if}
+</Card>