feat(directions): include Saved Points in destination search results (filtered by query)
All checks were successful
CI / test-and-build (push) Successful in 43s
All checks were successful
CI / test-and-build (push) Successful in 43s
This commit is contained in:
parent
a7955c0636
commit
4de3e31708
@ -214,6 +214,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const canCalculate = $derived(!!origin && !!destination && hasGraph && !computing);
|
const canCalculate = $derived(!!origin && !!destination && hasGraph && !computing);
|
||||||
|
// Saved points filtered by the destination query (shown inside the results).
|
||||||
|
const savedMatches = $derived(() => {
|
||||||
|
const q = destQuery.trim().toLowerCase();
|
||||||
|
if (!q) return savedPoints.filter((p) => !!p.label); // with a label when not searching
|
||||||
|
return savedPoints.filter((p) => {
|
||||||
|
const hay = (p.label || `${p.lat}, ${p.lon}`).toLowerCase();
|
||||||
|
return hay.includes(q);
|
||||||
|
});
|
||||||
|
});
|
||||||
const turns = $derived<{ list: TurnStep[]; total: number } | null>(
|
const turns = $derived<{ list: TurnStep[]; total: number } | null>(
|
||||||
mode === 'drive' && result?.turns?.length
|
mode === 'drive' && result?.turns?.length
|
||||||
? { list: result.turns, total: result.turns.reduce((a, t) => a + t.distanceM, 0) }
|
? { list: result.turns, total: result.turns.reduce((a, t) => a + t.distanceM, 0) }
|
||||||
@ -253,8 +262,16 @@
|
|||||||
oninput={() => { showDestResults = true; void inputDestSearch(); }}
|
oninput={() => { showDestResults = true; void inputDestSearch(); }}
|
||||||
onfocus={() => (showDestResults = true)}
|
onfocus={() => (showDestResults = true)}
|
||||||
/>
|
/>
|
||||||
{#if showDestResults && (destSearchResults.length || destGeoResults.length || destSearching)}
|
{#if showDestResults && (destSearchResults.length || destGeoResults.length || destSearching || savedMatches().length)}
|
||||||
<ul class="dest-results">
|
<ul class="dest-results">
|
||||||
|
{#if savedMatches().length}
|
||||||
|
<li class="sept">Saved points</li>
|
||||||
|
{#each savedMatches() as p (p.id)}
|
||||||
|
<li><button type="button" onclick={() => { onPickSavedPoint?.(p); setDestination(p.lat, p.lon, p.label || 'Saved point'); }}>
|
||||||
|
<span class="saved-dot"></span>{p.label || `${p.lat.toFixed(4)}, ${p.lon.toFixed(4)}`}
|
||||||
|
</button></li>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
{#if destSearchResults.length}
|
{#if destSearchResults.length}
|
||||||
<li class="sept">From your data</li>
|
<li class="sept">From your data</li>
|
||||||
{#each destSearchResults as r (r.item.id)}
|
{#each destSearchResults as r (r.item.id)}
|
||||||
@ -272,7 +289,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if savedPoints.length}
|
{#if savedPoints.length && !destQuery.trim()}
|
||||||
<div class="dest-saved">
|
<div class="dest-saved">
|
||||||
<span class="sept-label">— or a saved point —</span>
|
<span class="sept-label">— or a saved point —</span>
|
||||||
{#each savedPoints as p (p.id)}
|
{#each savedPoints as p (p.id)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user