contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix 'next step' for move wizard

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-19 16:35:11 +01:00
parent e9268bfc49
commit 3e680bb63b
1 changed files with 40 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/UI/Popup/MoveWizard.svelte
View file

@ -1,40 +1,39 @@
<script lang="ts"> <script lang="ts">
import { UIEventSource } from "../../Logic/UIEventSource"; import { UIEventSource } from "../../Logic/UIEventSource"
import type { MoveReason } from "./MoveWizardState"; import type { MoveReason } from "./MoveWizardState"
import { MoveWizardState } from "./MoveWizardState"; import { MoveWizardState } from "./MoveWizardState"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import ToSvelte from "../Base/ToSvelte.svelte"; import ToSvelte from "../Base/ToSvelte.svelte"
import Tr from "../Base/Tr.svelte"; import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"; import Translations from "../i18n/Translations"
import Move from "../../assets/svg/Move.svelte"; import Move from "../../assets/svg/Move.svelte"
import Move_not_allowed from "../../assets/svg/Move_not_allowed.svelte"; import Move_not_allowed from "../../assets/svg/Move_not_allowed.svelte"
import type { SpecialVisualizationState } from "../SpecialVisualization"; import type { SpecialVisualizationState } from "../SpecialVisualization"
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"; import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
import type { MapProperties } from "../../Models/MapProperties"; import type { MapProperties } from "../../Models/MapProperties"
import type { Feature, Point } from "geojson"; import type { Feature, Point } from "geojson"
import { GeoOperations } from "../../Logic/GeoOperations"; import { GeoOperations } from "../../Logic/GeoOperations"
import LocationInput from "../InputElement/Helpers/LocationInput.svelte"; import LocationInput from "../InputElement/Helpers/LocationInput.svelte"
import OpenBackgroundSelectorButton from "../BigComponents/OpenBackgroundSelectorButton.svelte"; import OpenBackgroundSelectorButton from "../BigComponents/OpenBackgroundSelectorButton.svelte"
import Geosearch from "../BigComponents/Geosearch.svelte"; import Geosearch from "../BigComponents/Geosearch.svelte"
import Move_confirm from "../../assets/svg/Move_confirm.svelte"; import If from "../Base/If.svelte"
import If from "../Base/If.svelte"; import Constants from "../../Models/Constants"
import Constants from "../../Models/Constants";
export let state: SpecialVisualizationState; export let state: SpecialVisualizationState
export let layer: LayerConfig; export let layer: LayerConfig
export let featureToMove: Feature<Point>; export let featureToMove: Feature<Point>
let id: string = featureToMove.properties.id; let id: string = featureToMove.properties.id
let currentStep: "start" | "reason" | "pick_location" | "moved" = "start"; let currentStep: "start" | "reason" | "pick_location" | "moved" = "start"
const t = Translations.t.move; const t = Translations.t.move
const reason = new UIEventSource<MoveReason>(undefined); const reason = new UIEventSource<MoveReason>(undefined)
let [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove); let [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove)
let newLocation = new UIEventSource<{ lon: number; lat: number }>(undefined); let newLocation = new UIEventSource<{ lon: number; lat: number }>(undefined)
function initMapProperties() { function initMapProperties() {
return <any>{ return <any>{
@ -45,14 +44,14 @@
location: new UIEventSource({ lon, lat }), location: new UIEventSource({ lon, lat }),
minzoom: new UIEventSource($reason.minZoom), minzoom: new UIEventSource($reason.minZoom),
rasterLayer: state.mapProperties.rasterLayer, rasterLayer: state.mapProperties.rasterLayer,
zoom: new UIEventSource($reason?.startZoom ?? 16) zoom: new UIEventSource($reason?.startZoom ?? 16),
}; }
} }
let moveWizardState = new MoveWizardState(id, layer.allowMove, state); let moveWizardState = new MoveWizardState(id, layer.allowMove, state)
let notAllowed = moveWizardState.moveDisallowedReason; let notAllowed = moveWizardState.moveDisallowedReason
let currentMapProperties: MapProperties = undefined; let currentMapProperties: MapProperties = undefined
</script> </script>
{#if moveWizardState.reasons.length > 0} {#if moveWizardState.reasons.length > 0}
@ -82,8 +81,8 @@
<Tr cls="text-lg font-bold" t={t.whyMove} /> <Tr cls="text-lg font-bold" t={t.whyMove} />
{#each moveWizardState.reasons as reasonSpec} {#each moveWizardState.reasons as reasonSpec}
<button on:click={() => {reason.setData(reasonSpec); currentStep = "pick_location"}}> <button on:click={() => {reason.setData(reasonSpec); currentStep = "pick_location"}}>
<ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} /> <ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} />
<Tr t={reasonSpec.text} /> <Tr t={Translations.T(reasonSpec.text)} />
</button> </button>
{/each} {/each}
</div> </div>
@ -110,7 +109,10 @@
<If condition={currentMapProperties.zoom.mapD(zoom => zoom >= Constants.minZoomLevelToAddNewPoint)}> <If condition={currentMapProperties.zoom.mapD(zoom => zoom >= Constants.minZoomLevelToAddNewPoint)}>
<button class="flex flex primary w-full" <button class="flex flex primary w-full"
on:click={() => {moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)}}> on:click={() => {
moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove);
currentStep = "moved"
}}>
<Move class="w-6 h-6 mr-2" /> <Move class="w-6 h-6 mr-2" />
<Tr t={t.confirmMove} /> <Tr t={t.confirmMove} />
</button> </button>
@ -135,7 +137,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<Tr cls="thanks" t={t.pointIsMoved} /> <Tr cls="thanks" t={t.pointIsMoved} />
<button on:click={() => {currentStep = "reason"}}> <button on:click={() => {currentStep = "reason"}}>
<Move /> <Move class="w-6 h-6 pr-2" />
<Tr t={t.inviteToMoveAgain} /> <Tr t={t.inviteToMoveAgain} />
</button> </button>
</div> </div>