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

edit metadata

Browse Source
This commit is contained in:
vcoppe
2024-06-18 15:32:54 +02:00
parent 4019d5c23b
commit b0373b2858
6 changed files with 94 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,8 @@
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
| ReadonlyArray<Readonly<Waypoint>>
| Readonly<Waypoint>;
export let item: ListItem;
let recursive = getContext<boolean>('recursive');
@@ -63,12 +64,12 @@
{#if node instanceof Map}
<FileListNodeContent {node} {item} />
{:else if node instanceof TrackSegment}
<FileListNodeLabel {item} {label} />
<FileListNodeLabel {node} {item} {label} />
{:else if node instanceof Waypoint}
<FileListNodeLabel {item} {label} />
<FileListNodeLabel {node} {item} {label} />
{:else if recursive}
<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
<FileListNodeLabel {item} {label} slot="trigger" />
<FileListNodeLabel {node} {item} {label} slot="trigger" />
<div slot="content">
{#key node}
<FileListNodeContent {node} {item} />
@@ -76,5 +77,5 @@
</div>
</CollapsibleTreeNode>
{:else}
<FileListNodeLabel {item} {label} />
<FileListNodeLabel {node} {item} {label} />
{/if}

3
website/src/lib/components/file-list/FileListNodeContent.svelte
View File

@@ -28,7 +28,8 @@
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
| ReadonlyArray<Readonly<Waypoint>>
| Readonly<Waypoint>;
export let item: ListItem;
export let waypointRoot: boolean = false;

80
website/src/lib/components/file-list/FileListNodeLabel.svelte
View File

@@ -1,9 +1,13 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Textarea } from '$lib/components/ui/textarea';
import { Label } from '$lib/components/ui/label/index.js';
import * as ContextMenu from '$lib/components/ui/context-menu';
import * as Popover from '$lib/components/ui/popover';
import Shortcut from '$lib/components/Shortcut.svelte';
import { dbUtils, getFile, settings } from '$lib/db';
import { Copy, MapPin, Plus, Trash2, Waypoints } from 'lucide-svelte';
import { Copy, Info, MapPin, Plus, Save, Trash2, Waypoints } from 'lucide-svelte';
import {
ListFileItem,
ListLevel,
@@ -13,17 +17,44 @@
} from './FileList';
import { selectItem, selection } from './Selection';
import { _ } from 'svelte-i18n';
import { getContext } from 'svelte';
import { getContext, onMount } from 'svelte';
import { get } from 'svelte/store';
import { gpxLayers } from '$lib/stores';
import { Track, TrackSegment } from 'gpx';
import {
GPXTreeElement,
Track,
TrackSegment,
type AnyGPXTreeElement,
Waypoint,
GPXFile
} from 'gpx';
export let node:
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>
| Readonly<Waypoint>;
export let item: ListItem;
export let label: string | undefined;
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
const { verticalFileView } = settings;
$: singleSelection = $selection.size === 1;
let openEditMetadata: boolean = false;
let name: string =
node instanceof GPXFile
? node.metadata.name ?? ''
: node instanceof Track
? node.name ?? ''
: '';
let description: string =
node instanceof GPXFile
? node.metadata.desc ?? ''
: node instanceof Track
? node.desc ?? ''
: '';
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -43,6 +74,36 @@
? 'h-fit'
: 'h-9 px-1.5 shadow-md'}"
>
{#if item instanceof ListFileItem || item instanceof ListTrackItem}
<Popover.Root bind:open={openEditMetadata}>
<Popover.Trigger />
<Popover.Content side="top" sideOffset={22} class="flex flex-col gap-3">
<Label for="name">{$_('menu.metadata.name')}</Label>
<Input bind:value={name} id="name" class="font-semibold h-8" />
<Label for="description">{$_('menu.metadata.description')}</Label>
<Textarea bind:value={description} id="description" />
<Button
variant="outline"
on:click={() => {
dbUtils.applyToFile(item.getFileId(), (file) => {
if (item instanceof ListFileItem && node instanceof GPXFile) {
file.metadata.name = name;
file.metadata.desc = description;
} else if (item instanceof ListTrackItem && node instanceof Track) {
file.trk[item.getTrackIndex()].name = name;
file.trk[item.getTrackIndex()].desc = description;
}
return file;
});
openEditMetadata = false;
}}
>
<Save size="16" class="mr-1" />
{$_('menu.metadata.save')}
</Button>
</Popover.Content>
</Popover.Root>
{/if}
<span
class="w-full text-left truncate py-1 flex flex-row items-center"
on:contextmenu={(e) => {
@@ -86,9 +147,10 @@
</Button>
</ContextMenu.Trigger>
<ContextMenu.Content>
{#if $verticalFileView && $selection.size === 1}
{#if $verticalFileView}
{#if item instanceof ListFileItem}
<ContextMenu.Item
disabled={!singleSelection}
on:click={() =>
dbUtils.applyToFile(
item.getFileId(),
@@ -98,9 +160,9 @@
<Plus size="16" class="mr-1" />
{$_('menu.new_track')}
</ContextMenu.Item>
<ContextMenu.Separator />
{:else if item instanceof ListTrackItem}
<ContextMenu.Item
disabled={!singleSelection}
on:click={() => {
let trackIndex = item.getTrackIndex();
dbUtils.applyToFile(
@@ -118,9 +180,15 @@
<Plus size="16" class="mr-1" />
{$_('menu.new_segment')}
</ContextMenu.Item>
<ContextMenu.Separator />
{/if}
{/if}
{#if item instanceof ListFileItem || item instanceof ListTrackItem}
<ContextMenu.Item disabled={!singleSelection} on:click={() => (openEditMetadata = true)}>
<Info size="16" class="mr-1" />
{$_('menu.metadata.button')}
</ContextMenu.Item>
<ContextMenu.Separator />
{/if}
{#if item.level !== ListLevel.WAYPOINTS}
<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
<Copy size="16" class="mr-1" />

10
website/src/lib/components/toolbar/tools/Waypoint.svelte
View File

@@ -19,7 +19,7 @@
import { onDestroy, onMount } from 'svelte';
import { map } from '$lib/stores';
import { resetCursor, setCrosshairCursor } from '$lib/utils';
import { CirclePlus, CircleX, RefreshCw } from 'lucide-svelte';
import { CirclePlus, CircleX, Save } from 'lucide-svelte';
let name: string;
let description: string;
@@ -168,9 +168,9 @@
<div class="flex flex-col gap-3 w-96">
<fieldset class="flex flex-col gap-2">
<Label for="name">{$_('toolbar.waypoint.name')}</Label>
<Label for="name">{$_('menu.metadata.name')}</Label>
<Input bind:value={name} id="name" class="font-semibold h-8" />
<Label for="description">{$_('toolbar.waypoint.description')}</Label>
<Label for="description">{$_('menu.metadata.description')}</Label>
<Textarea bind:value={description} id="description" />
<div class="flex flex-row gap-2">
<div>
@@ -207,8 +207,8 @@
on:click={createOrUpdateWaypoint}
>
{#if $selectedWaypoint}
<RefreshCw size="16" class="mr-1" />
{$_('toolbar.waypoint.update')}
<Save size="16" class="mr-1" />
{$_('menu.metadata.save')}
{:else}
<CirclePlus size="16" class="mr-1" />
{$_('toolbar.waypoint.create')}

9
website/src/locales/en.json
View File

@@ -4,6 +4,12 @@
"new_filename": "new",
"new_track": "New track",
"new_segment": "New segment",
"metadata": {
"button": "Edit info",
"name": "Name",
"description": "Description",
"save": "Save"
},
"load_desktop": "Load...",
"load_drive": "Load from Google Drive...",
"duplicate": "Duplicate",
@@ -149,12 +155,9 @@
},
"waypoint": {
"tooltip": "Create and edit points of interest",
"name": "Name",
"description": "Description",
"longitude": "Longitude",
"latitude": "Latitude",
"create": "Create point of interest",
"update": "Update point of interest",
"help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
"help_no_selection": "Select a file item to create or edit points of interest"
},