switches to nominatim

2025-01-25 17:03:29 +01:00
parent ae5c0f8f62
commit eda94f3003
25 changed files with 526 additions and 179 deletions
--- a/web/src/lib/components/base/multi_select.svelte
+++ b/web/src/lib/components/base/multi_select.svelte
@@ -8,7 +8,7 @@
        label?: string;
        name?: string;
        placeholder?: string;
-        onchange?: (value: SelectItem[]) => void
+        onchange?: (value: SelectItem[]) => void;
    }

    let {
@@ -17,7 +17,7 @@
        label = "",
        name = "",
        placeholder = "",
-        onchange
+        onchange,
    }: Props = $props();

    let showDropdown = $state(false);
@@ -51,7 +51,7 @@
    {/if}
    <div
        role="presentation"
-        class="min-w-44 w-full flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        class="relative min-w-44 w-full flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 cursor-pointer pr-6"
        onclick={() => (showDropdown = !showDropdown)}
    >
        {#if value.length === 0}
@@ -71,13 +71,17 @@
                </button>
            </div>
        {/each}
+        <i
+            class="fa fa-caret-down absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 transition-transform"
+            class:rotate-180={showDropdown}
+        ></i>
    </div>

    <!-- Dropdown menu -->
    {#if showDropdown}
        <div
            bind:this={dropdownRef}
-            class="absolute z-10 mt-1 w-full bg-menu-background border border-input-border rounded-md max-h-40 overflow-y-auto"
+            class="absolute z-10 mt-1 w-full bg-menu-background border border-input-border rounded-md max-h-40 overflow-y-auto shadow-lg"
        >
            {#each items as item}
                <button
--- a/web/src/lib/components/base/search.svelte
+++ b/web/src/lib/components/base/search.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script module lang="ts">
    export type SearchItem = {
        text: string;
@@ -38,14 +37,16 @@
        clearAfterSelect = true,
        prepend,
        onupdate,
-        onclick
+        onclick,
    }: Props = $props();

    let lastSearch: string = "";
    let searching: boolean = $state(false);
    let typingTimer!: any;

-    let dropDownOpen = $derived(value.length > 0 && items.length > 0 && searching);
+    let dropDownOpen = $derived(
+        value.length > 0 && items.length > 0 && searching,
+    );

    function onSearchType() {
        clearTimeout(typingTimer);
@@ -131,8 +132,8 @@
                    onmousedown={(e) => handleItemClick(e, item)}
                    onkeydown={(e) => handleItemClick(e, item)}
                >
-                    {#if prepend}{@render prepend({ item, })}{:else}
-                        <i class="fa fa-{item.icon} mr-6"></i>
+                    {#if prepend}{@render prepend({ item })}{:else}
+                        <i class="fa fa-{item.icon} basis-8 shrink-0"></i>
                    {/if}

                    <div>
--- a/web/src/lib/components/trail/trail_filter_panel.svelte
+++ b/web/src/lib/components/trail/trail_filter_panel.svelte
@@ -15,6 +15,8 @@
    import Slider from "../base/slider.svelte";
    import UserSearch from "../user_search.svelte";
    import { pb } from "$lib/pocketbase";
+    import { searchLocations } from "$lib/stores/search_store";
+    import { getIconForLocation } from "$lib/util/icon_util";

    interface Props {
        categories: Category[];
@@ -114,19 +116,13 @@

            return;
        }
-        const r = await fetch("/api/v1/search/cities500", {
-            method: "POST",
-            body: JSON.stringify({ q: q, options: { limit: 5 } }),
-        });
-        const result = await r.json();
+        const r = await searchLocations(q, 5);

-        searchDropdownItems = result.hits.map((h: Record<string, any>) => ({
+        searchDropdownItems = r.map((h) => ({
            text: h.name,
-            description: `${h.division ? `${h.division} | ` : ""}${
-                country_codes[h["country code"] as keyof typeof country_codes]
-            }`,
+            description: h.description,
            value: h,
-            icon: "city",
+            icon: getIconForLocation(h),
        }));
    }

@@ -221,7 +217,7 @@
                    <Search
                        items={searchDropdownItems}
                        label={$_("near")}
-                        placeholder="{$_('search-cities')}..."
+                        placeholder="{$_('search-places')}..."
                        clearAfterSelect={false}
                        bind:value={citySearchQuery}
                        onupdate={(q) => searchCities(q)}
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -80,7 +80,7 @@
  "edit": "Bearbeiten",
  "edit-entry": "Eintrag bearbeiten",
  "edit-list": "Liste bearbeiten",
-  "edit-route": "",
+  "edit-route": "Route bearbeiten",
  "edit-waypoint": "Wegpunkt bearbeiten",
  "edited": "bearbeitet",
  "elevation-gain": "Höhenunterschied (aufw.)",
@@ -154,7 +154,7 @@
  "login-details": "Login Details",
  "logout": "Logout",
  "longitude": "Längengrad",
-  "loop": "",
+  "loop": "Rundweg",
  "make-one": "Neues erstellen!",
  "make-thumbnail": "Thumbnail festlegen",
  "map": "Karte",
@@ -223,13 +223,14 @@
  "removed-trail-from": "Route entfernt aus",
  "required": "Pflichtfeld",
  "reset-password": "Passwort zurücksetzen",
-  "route-point": "",
+  "route-point": "Routenpunkt",
  "save": "Speichern",
  "save-list": "Liste speichern",
  "save-trail": "Route speichern",
  "save-your-trail-first": "Route zuerst speichern",
  "search-cities": "Städte suchen",
  "search-for-trails-places": "Suche nach Routen, Orten",
+  "search-places": "Orte suchen",
  "search-trails": "Route suchen",
  "select-list": "Liste auswählen",
  "settings": "Einstellungen",
@@ -262,7 +263,7 @@
  "speed": "Geschwindigkeit",
  "statistics": "Statistiken",
  "stop-drawing": "Zeichnen beenden",
-  "stop-editing": "",
+  "stop-editing": "Bearbeiten beenden",
  "summit-book": "Gipfelbuch",
  "table": "Tabelle",
  "text": "Text",
@@ -274,7 +275,7 @@
  "units": "Einheiten",
  "upload-file": "Datei hochladen",
  "upload-gpx": "GPX hochladen",
-  "upload-new-file": "",
+  "upload-new-file": "Neue Datei hochladen",
  "uploaded": "hochgeladen",
  "username": "Nutzername",
  "view": "Ansehen",
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Save your trail first",
  "search-cities": "Search cities",
  "search-for-trails-places": "Search for trails, places",
+  "search-places": "Search places",
  "search-trails": "Search trails",
  "select-list": "Select List",
  "settings": "Settings",
--- a/web/src/lib/i18n/locales/es.json
+++ b/web/src/lib/i18n/locales/es.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Guarda tu ruta primero",
  "search-cities": "Buscar ciudades",
  "search-for-trails-places": "Busca rutas, lugares",
+  "search-places": "",
  "search-trails": "Buscar ruta",
  "select-list": "Seleccionar Lista",
  "settings": "Configuración",
--- a/web/src/lib/i18n/locales/fr.json
+++ b/web/src/lib/i18n/locales/fr.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Enregistrez d'abord votre itinéraire",
  "search-cities": "Recherche une ville",
  "search-for-trails-places": "Chercher un itinéraire ou un lieu",
+  "search-places": "",
  "search-trails": "Chercher un itinéraire",
  "select-list": "Liste de choix",
  "settings": "Paramètres",
--- a/web/src/lib/i18n/locales/hu.json
+++ b/web/src/lib/i18n/locales/hu.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Először mentsd el a nyomvonaladat",
  "search-cities": "Városok keresése",
  "search-for-trails-places": "Nyomvonalak, helyek keresése",
+  "search-places": "",
  "search-trails": "Nyomvonalak keresése",
  "select-list": "Lista kiválasztása",
  "settings": "Beállítások",
--- a/web/src/lib/i18n/locales/it.json
+++ b/web/src/lib/i18n/locales/it.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Salva prima il tuo percorso",
  "search-cities": "Cerca città",
  "search-for-trails-places": "Cerca percorsi, luoghi",
+  "search-places": "",
  "search-trails": "Cerca percorsi",
  "select-list": "Seleziona lista",
  "settings": "Impostazioni",
--- a/web/src/lib/i18n/locales/nl.json
+++ b/web/src/lib/i18n/locales/nl.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Bewaar eerst je wandelroute",
  "search-cities": "Zoeken naar steden",
  "search-for-trails-places": "Zoeken naar locaties en wandelroutes",
+  "search-places": "",
  "search-trails": "Zoeken naar wandelroutes",
  "select-list": "Kies een lijst",
  "settings": "Instellingen",
--- a/web/src/lib/i18n/locales/pl.json
+++ b/web/src/lib/i18n/locales/pl.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Najpierw zapisz swój szlak",
  "search-cities": "Szukaj miasta",
  "search-for-trails-places": "Szukaj szlaków lub miejsc",
+  "search-places": "",
  "search-trails": "Szukaj szlaków",
  "select-list": "Wybierz Listę",
  "settings": "Ustawienia",
--- a/web/src/lib/i18n/locales/pt.json
+++ b/web/src/lib/i18n/locales/pt.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "Salve sua trilha primeiro",
  "search-cities": "Procurar cidades",
  "search-for-trails-places": "Procurar trilhos, locais",
+  "search-places": "",
  "search-trails": "Procurar trilhos",
  "select-list": "Selecionar lista",
  "settings": "Definições",
--- a/web/src/lib/i18n/locales/zh.json
+++ b/web/src/lib/i18n/locales/zh.json
@@ -230,6 +230,7 @@
  "save-your-trail-first": "先保存你的路线",
  "search-cities": "搜索城市",
  "search-for-trails-places": "搜索路线、地点",
+  "search-places": "",
  "search-trails": "搜索路线",
  "select-list": "选择列表",
  "settings": "设置",
--- a/web/src/lib/stores/search_store.ts
+++ b/web/src/lib/stores/search_store.ts
@@ -0,0 +1,183 @@
+import { env } from "$env/dynamic/public";
+import { APIError } from "$lib/util/api_util";
+import type { Hits, MultiSearchParams, MultiSearchResponse, MultiSearchResult, SearchParams, SearchResponse } from "meilisearch";
+
+export type LocationSearchResult = {
+    name: string;
+    description: string;
+    lat: number;
+    lon: number;
+    category: string;
+    type: string;
+}
+
+export type TrailSearchResult = {
+    id: string;
+    _geo: {
+        lat: number,
+        lon: number
+    }
+    auhtor: string;
+    category: string;
+    completed: boolean;
+    created: number;
+    date: number;
+    description: string;
+    difficulty: "easy" | "moderate" | "difficult"
+    distance: number;
+    duration: number
+    elevation_gain: number;
+    elevation_loss: number
+    location: string;
+    name: string;
+    public: boolean;
+}
+
+type NominatimResponse = {
+    type: string
+    licence: string
+    features: Feature[]
+}
+
+type Feature = {
+    type: string
+    properties: Properties
+    bbox: number[]
+    geometry: Geometry
+}
+
+type Address = {
+    amenity: string
+    road: string
+    neighbourhood: string
+    suburb: string
+    city_district: string
+    city: string
+    state: string
+    "ISO3166-2-lvl4": string
+    postcode: string
+    country: string
+    country_code: string
+}
+type Properties = {
+    place_id: number
+    osm_type: string
+    osm_id: number
+    place_rank: number
+    category: string
+    type: string
+    importance: number
+    addresstype: string
+    name: string
+    display_name: string
+    address: Address
+}
+
+type Geometry = {
+    type: string
+    coordinates: number[]
+}
+
+
+export async function searchTrails(q: string, options: SearchParams): Promise<Hits<TrailSearchResult>> {
+    const r = await fetch("/api/v1/search/trails", {
+        method: "POST",
+        body: JSON.stringify({
+            q,
+            options
+        }),
+    });
+
+    if (!r.ok) {
+        const response = await r.json();
+        throw new APIError(r.status, response.message, response.detail)
+    }
+
+    const response: SearchResponse<TrailSearchResult> = await r.json();
+
+    return response.hits
+}
+
+export async function searchLocations(q: string, limit?: number): Promise<Hits<LocationSearchResult>> {
+    const nominatimURL = env.PUBLIC_NOMINATIM_URL ?? "https://nominatim.openstreetmap.org"
+    const r = await fetch(`${nominatimURL}/search?q=${q}&format=geojson&addressdetails=1${limit ? '&limit=' + limit : ''}`, {
+        method: "GET",
+    });
+    if (!r.ok) {
+        const response = await r.json();
+        throw new APIError(r.status, response.message, response.detail)
+    }
+    const response: NominatimResponse = await r.json();
+    return response.features.map(f => ({
+        category: f.properties.category,
+        type: f.properties.type == "administrative" ? f.properties.addresstype : f.properties.type,
+        description: getLocationDescription(f.properties.address),
+        name: f.properties.name.length ? f.properties.name : f.properties.display_name,
+        lat: f.geometry.coordinates[1],
+        lon: f.geometry.coordinates[0],
+    }))
+}
+
+export async function searchLocationReverse(lat: number, lon: number) {
+    const nominatimURL = env.PUBLIC_NOMINATIM_URL ?? "https://nominatim.openstreetmap.org"
+    const r = await fetch(`${nominatimURL}/reverse?lat=${lat}&lon=${lon}&format=geojson&addressdetails=1`, {
+        method: "GET",
+    });
+    if (!r.ok) {
+        const response = await r.json();
+        throw new APIError(r.status, response.message, response.detail)
+    }
+    const response: NominatimResponse = await r.json();
+
+    if (response.features?.at(0)?.properties.address) {
+        return getLocationDescription(response.features[0].properties.address)
+    }
+    return ""
+}
+
+function getLocationDescription(address: Address) {
+    let description = ""
+
+    if (address.country) {
+        description += address.country;
+    }
+    if (address.state) {
+        description = `${address.state}, ` + description
+    }
+    if (address.city) {
+        description = `${address.city}, ` + description
+    }
+    return description;
+}
+
+export async function searchMulti(options: MultiSearchParams): Promise<MultiSearchResult<any>[]> {
+
+    const locationQuery = options.queries.find(q => q.indexUid === "locations");
+    const locationQueryIndex = locationQuery ? options.queries.indexOf(locationQuery) : -1
+    if (locationQueryIndex >= 0) {
+        options.queries.splice(locationQueryIndex, 1)
+    }
+    const r = await fetch("/api/v1/search/multi", {
+        method: "POST",
+        body: JSON.stringify(options),
+    });
+
+    if (!r.ok) {
+        const response = await r.json();
+        throw new APIError(r.status, response.message, response.detail)
+    }
+
+    const response: MultiSearchResponse<any> = await r.json();
+
+
+    if (locationQuery && locationQuery.q !== undefined && locationQuery.q !== null) {
+        const locationsResults = await searchLocations(locationQuery.q, locationQuery.limit)
+        response.results.splice(locationQueryIndex,
+            0,
+            { hits: locationsResults, indexUid: "locations", query: locationQuery.q, processingTimeMs: 0 }
+        )
+    }
+
+
+    return response.results
+}
--- a/web/src/lib/util/icon_util.ts
+++ b/web/src/lib/util/icon_util.ts
@@ -1,3 +1,5 @@
+import type { LocationSearchResult } from "$lib/stores/search_store";
+
 export const icons = ["0",
    "1",
    "2",
@@ -1388,4 +1390,153 @@ export const icons = ["0",
    "yen-sign",
    "yin-yang",
    "z",
-]
+] as const
+
+export function getIconForLocation(l: LocationSearchResult): typeof icons[number] {
+    if (l.category === "aerialway") {
+        return "cable-car"
+    } else if (l.category === "amenity") {
+        switch (l.type) {
+            // Sustenance
+            case "bar":
+                return "martini-glass"
+            case "pub":
+            case "biergarten":
+                return "beer-mug-empty"
+            case "cafe":
+                return "mug-saucer"
+            case "ice_cream":
+                return "ice-cream"
+            case "fast_food":
+                return "burger"
+            case "restaurant":
+            case "food_court":
+                return "utensils"
+
+            // Transportation
+            case "ferry_terminal":
+                return "ferry"
+            case "bus_station":
+                return "bus"
+            case "parking":
+                return "square-parking"
+            // Others
+            case "place_of_worship":
+                return "place-of-worship"
+        }
+    } else if (l.category === "building") {
+        switch (l.type) {
+            // Accommodation
+            case "hotel":
+                return "hotel"
+
+            // Religious
+            case "cathedral":
+            case "church":
+            case "chapel":
+                return "church"
+            case "mosque":
+                return "mosque"
+            case "synagogue":
+                return "synagogue"
+            case "temple":
+                return "gopuram"
+
+            // Civic
+            case "train_station":
+                return "train"
+        }
+    } else if (l.category === "natural") {
+        switch (l.type) {
+            case "peak":
+                return "mountain"
+            case "wood":
+                return "tree"
+            case "beach":
+                return "umbrella-beach"
+            case "water":
+                return "water"
+        }
+    } else if (l.category === "leisure") {
+        switch (l.type) {
+            case "garden":
+                return "leaf"
+            case "park":
+                return "tree"
+            case "swimming_area":
+            case "swimming_pool":
+            case "water_park ":
+                return "person-swimming"
+        }
+    } else if (l.category === "aeroway") {
+        return "plane-departure"
+    } else if (l.category === "railway") {
+        switch (l.type) {
+            case "station":
+            case "halt":
+                return "train"
+            case "subway_entrance":
+                return "train-subway"
+            case "tram_stop":
+                return "train-tram"
+        }
+    } else if (l.category === "tourism") {
+        switch (l.type) {
+            case "hotel":
+                return "hotel"
+            case "alpine_hut":
+            case "apartment":
+            case "chalet":
+                return "house-chimney"
+            case "guest_house":
+            case "motel":
+            case "hostel":
+                return "bed"
+            case "caravan_site":
+                return "caravan"
+            case "camp_site":
+            case "camp_pitch":
+                return "campground"
+            case "aqaurium":
+                return "fish-fins"
+            case "artwork":
+                return "palette"
+            case "viewpoint":
+            case "attraction":
+                return "eye"
+            case "zoo":
+                return "hippo"
+        }
+    } else if (l.category === "tourism") {
+        switch (l.type) {
+            case "national_park":
+                return "tree"
+        }
+    } else if (l.category === "place") {
+        switch (l.type) {
+            case "city":
+                return "city"
+            case "town":
+            case "village":
+            case "hamlet":
+                return "building"
+        }
+    } else if (l.category === "boundary") {
+        switch (l.type) {
+            case "city":
+                return "city"
+            case "town":
+            case "village":
+            case "hamlet":
+                return "building"
+        }
+    } else if(l.category === "historic") {
+        return "eye"
+    }
+    switch (l.category) {
+
+
+    }
+
+    return "location-dot"
+}