show alphabetically sorted list of POI icons

This commit is contained in:
vcoppe
2024-08-11 19:43:28 +02:00
parent 62a7087552
commit 795b85da13

View File

@@ -12,7 +12,7 @@
import * as Select from '$lib/components/ui/select'; import * as Select from '$lib/components/ui/select';
import { selection } from '$lib/components/file-list/Selection'; import { selection } from '$lib/components/file-list/Selection';
import { Waypoint } from 'gpx'; import { Waypoint } from 'gpx';
import { _ } from 'svelte-i18n'; import { _, locale } from 'svelte-i18n';
import { ListWaypointItem } from '$lib/components/file-list/FileList'; import { ListWaypointItem } from '$lib/components/file-list/FileList';
import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db'; import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
@@ -156,6 +156,10 @@
longitude = e.lngLat.lng.toFixed(6); longitude = e.lngLat.lng.toFixed(6);
} }
$: sortedSymbols = Object.entries(symbols).sort((a, b) => {
return $_(`gpx.symbol.${a[0]}`).localeCompare($_(`gpx.symbol.${b[0]}`), $locale ?? 'en');
});
onMount(() => { onMount(() => {
let m = get(map); let m = get(map);
m?.on('click', setCoordinates); m?.on('click', setCoordinates);
@@ -186,7 +190,7 @@
<Select.Value /> <Select.Value />
</Select.Trigger> </Select.Trigger>
<Select.Content class="max-h-60 overflow-y-scroll"> <Select.Content class="max-h-60 overflow-y-scroll">
{#each Object.entries(symbols) as [key, symbol]} {#each sortedSymbols as [key, symbol]}
<Select.Item value={symbol.value}> <Select.Item value={symbol.value}>
<span> <span>
{#if symbol.icon} {#if symbol.icon}