steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

start of vertical view

Browse Source
This commit is contained in:
vcoppe
2024-05-16 18:18:42 +02:00
parent a6637d5e27
commit c0c0b14728
6 changed files with 99 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
website/src/lib/components/App.svelte
View File

@@ -8,22 +8,26 @@
import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
import { Toaster } from '$lib/components/ui/sonner';
import FileList2 from './file-list/FileList2.svelte';
</script>
<div class="flex flex-col w-screen h-screen">
<div class="grow relative">
<Menu />
<Toolbar />
<Map class="h-full" />
<LayerControl />
<GPXLayers />
<FileList />
<Toaster richColors />
</div>
<div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXStatistics />
<ElevationProfile />
<div class="flex flex-row w-screen h-screen">
<div class="flex flex-col grow h-full min-w-0">
<div class="grow relative">
<Menu />
<Toolbar />
<Map class="h-full" />
<LayerControl />
<GPXLayers />
<FileList />
<Toaster richColors />
</div>
<div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXStatistics />
<ElevationProfile />
</div>
</div>
<FileList2 />
</div>
<style lang="postcss">

3
website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
View File

@@ -2,9 +2,12 @@
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
export let side: 'left' | 'right' = 'right';
let open = writable<Record<string, boolean>>({});
setContext('collapsible-tree-state', open);
setContext('collapsible-tree-side', side);
</script>
<slot />

12
website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
View File

@@ -8,6 +8,7 @@
export let id: string;
let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
let side = getContext<'left' | 'right'>('collapsible-tree-side');
open.update((value) => {
if (!value.hasOwnProperty(id)) {
@@ -21,14 +22,21 @@
<Collapsible.Trigger class="w-full">
<Button
variant="ghost"
class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background"
class="w-full flex flex-row {side === 'right'
? 'justify-between'
: 'justify-start'} py-0 px-1 h-fit hover:bg-background"
>
<slot name="trigger" />
{#if side === 'right'}
<slot name="trigger" />
{/if}
{#if $open[id]}
<ChevronUp size="16" />
{:else}
<ChevronDown size="16" />
{/if}
{#if side === 'left'}
<slot name="trigger" />
{/if}
</Button>
</Collapsible.Trigger>
<Collapsible.Content class="ml-1">

14
website/src/lib/components/file-list/FileList2.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import FileListItem from '$lib/components/file-list/FileListItem.svelte';
import { fileObservers } from '$lib/db';
</script>
<ScrollArea class="w-fit p-1 pr-4">
<div class="w-60">
{#each Array.from($fileObservers.values()) as file}
<FileListItem {file} />
{/each}
</div>
</ScrollArea>

15
website/src/lib/components/file-list/FileListItem.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
import FileListNode from '$lib/components/file-list/FileListNode.svelte';
import type { GPXFileWithStatistics } from '$lib/db';
import type { Readable } from 'svelte/store';
export let file: Readable<GPXFileWithStatistics | undefined>;
</script>
{#if $file}
<CollapsibleTree side="left">
<FileListNode node={$file.file} id={$file.file._data.id} />
</CollapsibleTree>
{/if}

40
website/src/lib/components/file-list/FileListNode.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
export let node: GPXTreeElement<AnyGPXTreeElement>;
export let id: string;
export let index: number = 0;
</script>
{#if node instanceof GPXFile}
<CollapsibleTreeNode {id}>
<span slot="trigger">{node.metadata.name}</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.children as child, i}
<svelte:self node={child} id={`${id}-track-${i}`} index={i} />
{/each}
<CollapsibleTreeNode id={`${id}-wpt`}>
<span slot="trigger">Waypoints</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.wpt as wpt, i}
<span class="ml-1 truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span>
{/each}
</div>
</CollapsibleTreeNode>
</div>
</CollapsibleTreeNode>
{:else if node instanceof Track}
<CollapsibleTreeNode {id}>
<span slot="trigger" class="truncate">{node.name ?? `Track ${index + 1}`}</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.children as child, i}
<svelte:self node={child} id={`${id}-segment-${i}`} index={i} />
{/each}
</div>
</CollapsibleTreeNode>
{:else if node instanceof TrackSegment}
<span class="ml-1">
{`Segment ${index + 1}`}
</span>
{/if}