steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-03 01:02:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

sortable file hierarchy progress

Browse Source
This commit is contained in:
vcoppe
2024-05-17 15:02:45 +02:00
parent 4520c929e2
commit 60f3896b8b
7 changed files with 139 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,40 @@
<script lang="ts">
import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
import { Button } from '$lib/components/ui/button';
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
import type { GPXFileWithStatistics } from '$lib/db';
import type { Readable } from 'svelte/store';
import FileListNodeContent from './FileListNodeContent.svelte';
import { createEventDispatcher } from 'svelte';
export let node: GPXTreeElement<AnyGPXTreeElement>;
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
export let id: string;
export let index: number = 0;
const dispatch = createEventDispatcher();
function forwardId() {
dispatch('click', { id });
}
</script>
{#if node instanceof GPXFile}
<CollapsibleTreeNode {id}>
<span slot="trigger" class="truncate">{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}
{#if node.wpt.length > 0}
<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}
<Button variant="ghost" class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
>
{/each}
</div>
</CollapsibleTreeNode>
{#if node instanceof Map}
<FileListNodeContent {node} {id} />
{:else}
<CollapsibleTreeNode {id} on:click={forwardId}>
<span slot="trigger" class="truncate">
{#if node instanceof GPXFile}
{node.metadata.name}
{:else if node instanceof Track}
{node.name ?? `Track ${index + 1}`}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
Waypoints
{/if}
</span>
<div slot="content">
<FileListNodeContent {node} {id} />
</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}
<Button variant="ghost" class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
>{`Segment ${index + 1}`}</Button
>
{/if}