forked from MapComplete/MapComplete
Feature: moving a point due to relocatoin now shows a searchbar (again)
This commit is contained in:
parent
fe33ae5415
commit
15cbadc4e0
6 changed files with 177 additions and 14 deletions
|
|
@ -391,6 +391,7 @@
|
|||
"recentThemes": "Recently visited maps",
|
||||
"recents": "Recently seen places",
|
||||
"search": "Search a location",
|
||||
"searchShort": "Search…",
|
||||
"searching": "Searching…"
|
||||
},
|
||||
"searchAnswer": "Search an option",
|
||||
|
|
|
|||
|
|
@ -7542,6 +7542,65 @@
|
|||
"render": "Memorial plaque"
|
||||
}
|
||||
},
|
||||
"mobility_hub": {
|
||||
"description": "Mobility hubs are places where different kinds of transit meet, making it easy to switch between them. These places are usually part of a larger network or system.",
|
||||
"name": "Mobility Hubs",
|
||||
"presets": {
|
||||
"0": {
|
||||
"description": "A mobility hub which is marked by a physical sign, usually with a logo.",
|
||||
"title": "a mobility hub"
|
||||
}
|
||||
},
|
||||
"tagRenderings": {
|
||||
"name": {
|
||||
"freeform": {
|
||||
"placeholder": "Name of the mobility hub"
|
||||
},
|
||||
"question": "What is the name of this mobility hub?",
|
||||
"render": "This mobility hub is called {name}"
|
||||
},
|
||||
"network": {
|
||||
"freeform": {
|
||||
"placeholder": "Network for this mobility hub"
|
||||
},
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "This mobility hub belongs to the Groningen-Drenthe network"
|
||||
},
|
||||
"1": {
|
||||
"then": "This mobility hub belongs to the Hoppin network"
|
||||
},
|
||||
"2": {
|
||||
"then": "This mobility hub belongs to the Jelbi network"
|
||||
}
|
||||
},
|
||||
"question": "To which network does this mobility hub belong to?",
|
||||
"render": "This mobility hub belongs to the network {network}"
|
||||
},
|
||||
"physical_marker": {
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "This mobility hub is marked by a board, containing information about the hub"
|
||||
},
|
||||
"1": {
|
||||
"then": "This mobility hub is marked by a sign with an electronic display"
|
||||
},
|
||||
"2": {
|
||||
"then": "This mobility hub is marked by a simple sign showing only basic information like the logo or name"
|
||||
}
|
||||
},
|
||||
"question": "What kind of physical marker is used to mark this mobility hub?"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "Mobility hub {name}"
|
||||
}
|
||||
},
|
||||
"render": "Mobility hub"
|
||||
}
|
||||
},
|
||||
"mountain_rescue": {
|
||||
"description": "A building where first aid responders store material and might be on watch",
|
||||
"name": "Mountain rescue stations",
|
||||
|
|
|
|||
|
|
@ -6566,6 +6566,65 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"mobility_hub": {
|
||||
"description": "Mobiliteitshubs zijn plaatsen waar verschillende soorten vervoer bij elkaar komen, waardoor het makkelijk is om te wisselen van vervoer. Deze plaatsen maken meestal deel uit van een groter netwerk of systeem.",
|
||||
"name": "Mobiliteitshubs",
|
||||
"presets": {
|
||||
"0": {
|
||||
"description": "Een mobiliteitshub die gemarkeerd is door een fysiek bord, meestal met een logo.",
|
||||
"title": "een mobiliteitshub"
|
||||
}
|
||||
},
|
||||
"tagRenderings": {
|
||||
"name": {
|
||||
"freeform": {
|
||||
"placeholder": "Naam van de mobiliteitshub"
|
||||
},
|
||||
"question": "Wat is de naam van deze mobiliteitshub?",
|
||||
"render": "Deze mobiliteitshub heet {name}"
|
||||
},
|
||||
"network": {
|
||||
"freeform": {
|
||||
"placeholder": "Netwerk van deze mobiliteitshub"
|
||||
},
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "Deze mobiliteitshub hoort bij het netwerk Groningen-Drenthe"
|
||||
},
|
||||
"1": {
|
||||
"then": "Deze mobiliteitshub hoort bij het Hoppin netwerk"
|
||||
},
|
||||
"2": {
|
||||
"then": "Deze mobiliteitshub hoort bij het Jelbi netwerk"
|
||||
}
|
||||
},
|
||||
"question": "Bij welk netwerk hoort deze mobiliteitshub?",
|
||||
"render": "Deze mobiliteitshub hoort bij het netwerk {network}"
|
||||
},
|
||||
"physical_marker": {
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "Deze mobiliteitshub is gemarkeerd door een bord, met informatie over de hub"
|
||||
},
|
||||
"1": {
|
||||
"then": "Deze mobiliteitshub is gemarkeerd door een bord met een elektronisch display"
|
||||
},
|
||||
"2": {
|
||||
"then": "Deze mobiliteitshub is gemarkeerd door een eenvoudig bord met alleen simpele informatie zoals het logo of de naam"
|
||||
}
|
||||
},
|
||||
"question": "Wat voor fysieke markering is er voor deze mobiliteitshub?"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"mappings": {
|
||||
"0": {
|
||||
"then": "Mobiliteitshub {name}"
|
||||
}
|
||||
},
|
||||
"render": "Mobiliteitshub"
|
||||
}
|
||||
},
|
||||
"nature_reserve": {
|
||||
"description": "Een natuurgebied is een gebied waar actief ruimte gemaakt word voor de natuur. Typisch zijn deze in beheer van Natuurpunt of het Agentschap Natuur en Bos of zijn deze erkend door de overheid.",
|
||||
"filter": {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<label
|
||||
class="neutral-label normal-background box-shadow flex w-full items-center rounded-full border border-black"
|
||||
>
|
||||
<SearchIcon aria-hidden="true" class="ml-2 h-8 w-8" />
|
||||
<SearchIcon aria-hidden="true" class="ml-2 h-6 w-6 shrink-0" />
|
||||
|
||||
<input
|
||||
bind:this={inputElement}
|
||||
|
|
@ -59,8 +59,11 @@
|
|||
type="search"
|
||||
style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
|
||||
class="ml-1 w-full border-none px-0 outline-none"
|
||||
on:keypress={(keypr) => {
|
||||
return keypr.key === "Enter" ? dispatch("search") : undefined
|
||||
on:keypress={(event) => {
|
||||
if( event.key === "Enter"){
|
||||
dispatch("search")
|
||||
event.preventDefault()
|
||||
}
|
||||
}}
|
||||
bind:value={_value}
|
||||
use:set_placeholder={placeholder}
|
||||
|
|
@ -79,5 +82,6 @@
|
|||
{:else}
|
||||
<div class="mr-3 w-6" />
|
||||
{/if}
|
||||
<slot name="button-right" />
|
||||
</label>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
undefined
|
||||
)
|
||||
|
||||
const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||
export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||
export let mapProperties: Partial<MapProperties> & { location } = {
|
||||
zoom: new UIEventSource<number>(19),
|
||||
maxbounds: new UIEventSource(undefined),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { MoveReason } from "./MoveWizardState"
|
||||
import { MoveWizardState } from "./MoveWizardState"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
|
|
@ -15,11 +15,18 @@
|
|||
import Constants from "../../Models/Constants"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
|
||||
|
||||
|
||||
import ChevronLeft from "@babeard/svelte-heroicons/solid/ChevronLeft"
|
||||
import ThemeViewState from "../../Models/ThemeViewState"
|
||||
import Icon from "../Map/Icon.svelte"
|
||||
import NewPointLocationInput from "../BigComponents/NewPointLocationInput.svelte"
|
||||
import type { WayId } from "../../Models/OsmFeature"
|
||||
import Searchbar from "../Base/Searchbar.svelte"
|
||||
import { NominatimGeocoding } from "../../Logic/Search/NominatimGeocoding"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import { Map as MlMap } from "maplibre-gl"
|
||||
import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
|
||||
|
||||
export let state: ThemeViewState
|
||||
|
||||
|
|
@ -37,8 +44,8 @@
|
|||
|
||||
let snappedTo = new UIEventSource<WayId | undefined>(undefined)
|
||||
|
||||
function initMapProperties(reason: MoveReason) {
|
||||
return <any>{
|
||||
function initMapProperties(reason: MoveReason): Partial<MapProperties> & { location } {
|
||||
return {
|
||||
allowMoving: new UIEventSource(true),
|
||||
allowRotating: new UIEventSource(false),
|
||||
allowZooming: new UIEventSource(true),
|
||||
|
|
@ -55,7 +62,30 @@
|
|||
reason.setData(moveWizardState.reasons[0])
|
||||
}
|
||||
let notAllowed = moveWizardState.moveDisallowedReason
|
||||
let currentMapProperties: MapProperties = undefined
|
||||
let currentMapProperties: Store<Partial<MapProperties> & { location }> = reason.mapD(r => initMapProperties(r))
|
||||
let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||
|
||||
|
||||
let searchValue = new UIEventSource<string>("")
|
||||
let isSearching = new UIEventSource<boolean>(false)
|
||||
const searcher = new NominatimGeocoding(1)
|
||||
|
||||
|
||||
async function searchPressed() {
|
||||
const v = searchValue.data
|
||||
console.log("Search is pressed", v)
|
||||
isSearching.set(true)
|
||||
const result: GeocodeResult[] = await searcher.search(v)
|
||||
isSearching.set(false)
|
||||
if (result.length == 0 || currentMapProperties.data === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
const loc = result[0]
|
||||
console.log("Found", result, "flying")
|
||||
map.data.flyTo({ zoom: 18, center: [loc.lon, loc.lat] })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#if moveWizardState.reasons.length > 0}
|
||||
|
|
@ -94,9 +124,23 @@
|
|||
</button>
|
||||
{/each}
|
||||
{:else if currentStep === "pick_location" || currentStep === "reason"}
|
||||
{#if $reason.includeSearch}
|
||||
<Searchbar value={searchValue} on:search={() => searchPressed()}>
|
||||
<svelte:fragment slot="button-right">
|
||||
{#if $isSearching}
|
||||
<Loading />
|
||||
{:else}
|
||||
<button class="primary" class:disabled={$searchValue.length === 0} on:click={() => searchPressed()}>
|
||||
<Tr t={Translations.t.general.search.searchShort} />
|
||||
</button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Searchbar>
|
||||
{/if}
|
||||
<div class="relative h-64 w-full">
|
||||
<NewPointLocationInput
|
||||
mapProperties={(currentMapProperties = initMapProperties($reason))}
|
||||
{map}
|
||||
mapProperties={$currentMapProperties}
|
||||
value={newLocation}
|
||||
{state}
|
||||
coordinate={{ lon, lat }}
|
||||
|
|
@ -112,13 +156,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{#if $reason.includeSearch}
|
||||
<!-- TODO -->
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<If
|
||||
condition={currentMapProperties.zoom.mapD(
|
||||
condition={$currentMapProperties.zoom.mapD(
|
||||
(zoom) => zoom >= Constants.minZoomLevelToAddNewPoint
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue