Refactoring of various stuff

big mess, I don't remember what I was trying to accomplish there
This commit is contained in:
ThePetrovich 2025-12-14 18:06:17 +08:00
parent ffb27c2e0a
commit 8e3dfa54f9
22 changed files with 1083 additions and 647 deletions

View file

@ -4,19 +4,21 @@
import Navbar from "$lib/components/Navbar.svelte";
import PanelContainer from "$lib/components/PanelContainer.svelte";
import ScenarioPanel from "$lib/components/ScenarioPanel.svelte";
import TabComponent from "$lib/components/TabComponent.svelte";
import PointEditor from "$lib/components/PointEditor.svelte";
import TabComponent from "$lib/components/ui/TabComponent.svelte";
import PointEditor from "$lib/components/editors/PointEditor.svelte";
import { onMount } from "svelte";
import { PredictionStore } from "$lib/stores";
import { addToast, removeToast } from "$lib/components/Toast.svelte";
import ToastContainer from '$lib/components/Toast.svelte';
import { addToast, removeToast } from "$lib/components/ui/Toast.svelte";
import ToastContainer from '$lib/components/ui/Toast.svelte';
import L, { point } from "leaflet";
import GenericPanel from "$lib/components/GenericPanel.svelte";
let map: Map | null = null;
let panelContainer: PanelContainer | null = null;
let controlPanel: ControlPanel | null = null;
let selectionToastId: string | null = null;
let activeTab: 'control' | 'scenario' | 'settings' | 'about' = 'scenario';
let activeTabLeft: 'control' | 'scenario' | 'about' = 'scenario';
let activeTabRight: 'layers' | 'settings' | 'results' = 'results';
onMount(() => {
PredictionStore.subscribe((data) => {
@ -73,29 +75,47 @@
<Navbar />
<div style="height: var(--navbar-height);"></div> <!-- Spacer for fixed navbar -->
<Map bind:this={map} mode="prediction" bind:data={$PredictionStore} on:coordinatesSelected={handleCoordinateSelection}>
<PanelContainer bind:this={panelContainer} >
<PanelContainer bind:this={panelContainer} position="left">
<TabComponent
tabs={[
{ id: 'scenario', icon: 'file-earmark-play', label: 'Сценарий' },
{ id: 'control', icon: 'sliders', label: 'Условия' },
{ id: 'settings', icon: 'gear', label: 'Настройки' },
{ id: 'about', icon: 'info-circle', label: 'О проекте' }
]}
bind:activeTab
bind:activeTab={activeTabLeft}
/>
<div>
{#if activeTab === 'control'}
{#if activeTabLeft === 'control'}
<ControlPanel onSelectOnMapClick={handleClickSelectOnMap} bind:this={controlPanel} />
{:else if activeTab === 'scenario'}
{:else if activeTabLeft === 'scenario'}
<ScenarioPanel />
{:else if activeTab === 'settings'}
<!-- <SettingsPanel /> -->
{:else if activeTab === 'about'}
{:else if activeTabLeft === 'about'}
<!-- <AboutPanel /> -->
{/if}
</div>
</PanelContainer>
<PanelContainer position="right">
<TabComponent
justify="end"
tabs={[
{ id: 'results', icon: 'bar-chart-line', label: 'Результаты' },
{ id: 'layers', icon: 'layers', label: 'Слои' },
{ id: 'settings', icon: 'gear', label: 'Настройки' },
]}
bind:activeTab={activeTabRight}
/>
<div>
{#if activeTabRight === 'results'}
<GenericPanel />
{:else if activeTabRight === 'layers'}
<GenericPanel />
{:else if activeTabLeft === 'settings'}
<!-- <SettingsPanel /> -->
{/if}
</div>
</PanelContainer>
<ToastContainer />
</Map>
</main>