mapcomplete/UI/Popup/MoveWizard.ts

import { SubtleButton } from "../Base/SubtleButton"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import Toggle from "../Input/Toggle"
import { UIEventSource } from "../../Logic/UIEventSource"
import Translations from "../i18n/Translations"
import { VariableUiElement } from "../Base/VariableUIElement"
import { Translation } from "../i18n/Translation"
import BaseUIElement from "../BaseUIElement"
import LocationInput from "../Input/LocationInput"
import Loc from "../../Models/Loc"
import { GeoOperations } from "../../Logic/GeoOperations"
import { OsmObject } from "../../Logic/Osm/OsmObject"
import { Changes } from "../../Logic/Osm/Changes"
import ChangeLocationAction from "../../Logic/Osm/Actions/ChangeLocationAction"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import MoveConfig from "../../Models/ThemeConfig/MoveConfig"
import { ElementStorage } from "../../Logic/ElementStorage"
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"
import BaseLayer from "../../Models/BaseLayer"

interface MoveReason {
    text: Translation | string
    invitingText: Translation | string
    icon: BaseUIElement
    changesetCommentValue: string
    lockBounds: true | boolean
    background: undefined | "map" | "photo" | string | string[]
    startZoom: number
    minZoom: number
}

export default class MoveWizard extends Toggle {
    /**
     * The UI-element which helps moving a point
     */
    constructor(
        featureToMove: any,
        state: {
            osmConnection: OsmConnection
            featureSwitchUserbadge: UIEventSource<boolean>
            changes: Changes
            layoutToUse: LayoutConfig
            allElements: ElementStorage
        },
        options: MoveConfig
    ) {
        const t = Translations.t.move
        const loginButton = new Toggle(
            t.loginToMove.SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
            undefined,
            state.featureSwitchUserbadge
        )

        const reasons: MoveReason[] = []
        if (options.enableRelocation) {
            reasons.push({
                text: t.reasons.reasonRelocation,
                invitingText: t.inviteToMove.reasonRelocation,
                icon: Svg.relocation_svg(),
                changesetCommentValue: "relocated",
                lockBounds: false,
                background: undefined,
                startZoom: 12,
                minZoom: 6,
            })
        }
        if (options.enableImproveAccuracy) {
            reasons.push({
                text: t.reasons.reasonInaccurate,
                invitingText: t.inviteToMove.reasonInaccurate,
                icon: Svg.crosshair_svg(),
                changesetCommentValue: "improve_accuracy",
                lockBounds: true,
                background: "photo",
                startZoom: 17,
                minZoom: 16,
            })
        }

        const currentStep = new UIEventSource<"start" | "reason" | "pick_location" | "moved">(
            "start"
        )
        const moveReason = new UIEventSource<MoveReason>(undefined)
        let moveButton: BaseUIElement
        if (reasons.length === 1) {
            const reason = reasons[0]
            moveReason.setData(reason)
            moveButton = new SubtleButton(
                reason.icon.SetStyle("height: 1.5rem; width: 1.5rem;"),
                Translations.T(reason.invitingText)
            ).onClick(() => {
                currentStep.setData("pick_location")
            })
        } else {
            moveButton = new SubtleButton(
                Svg.move_ui().SetStyle("width: 1.5rem; height: 1.5rem"),
                t.inviteToMove.generic
            ).onClick(() => {
                currentStep.setData("reason")
            })
        }

        const moveAgainButton = new SubtleButton(Svg.move_ui(), t.inviteToMoveAgain).onClick(() => {
            currentStep.setData("reason")
        })

        const selectReason = new Combine(
            reasons.map((r) =>
                new SubtleButton(r.icon, r.text).onClick(() => {
                    moveReason.setData(r)
                    currentStep.setData("pick_location")
                })
            )
        )

        const cancelButton = new SubtleButton(Svg.close_svg(), t.cancel).onClick(() =>
            currentStep.setData("start")
        )

        const [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove)
        const locationInput = moveReason.map((reason) => {
            if (reason === undefined) {
                return undefined
            }
            const loc = new UIEventSource<Loc>({
                lon: lon,
                lat: lat,
                zoom: reason?.startZoom ?? 16,
            })

            let background: string[]
            if (typeof reason.background == "string") {
                background = [reason.background]
            } else {
                background = reason.background
            }

            const preferredBackground = AvailableBaseLayers.SelectBestLayerAccordingTo(
                loc,
                new UIEventSource(background)
            ).data
            const locationInput = new LocationInput({
                minZoom: reason.minZoom,
                centerLocation: loc,
                mapBackground: new UIEventSource<BaseLayer>(preferredBackground), // We detach the layer
            })

            if (reason.lockBounds) {
                locationInput.installBounds(0.05, true)
            }

            locationInput.SetStyle("height: 17.5rem")

            const confirmMove = new SubtleButton(Svg.move_confirm_svg(), t.confirmMove)
            confirmMove.onClick(() => {
                const loc = locationInput.GetValue().data
                state.changes.applyAction(
                    new ChangeLocationAction(featureToMove.properties.id, [loc.lon, loc.lat], {
                        reason: reason.changesetCommentValue,
                        theme: state.layoutToUse.id,
                    })
                )
                featureToMove.properties._lat = loc.lat
                featureToMove.properties._lon = loc.lon
                state.allElements.getEventSourceById(id).ping()
                currentStep.setData("moved")
            })
            const zoomInFurhter = t.zoomInFurther.SetClass("alert block m-6")
            return new Combine([
                locationInput,
                new Toggle(
                    confirmMove,
                    zoomInFurhter,
                    locationInput.GetValue().map((l) => l.zoom >= 19)
                ),
            ]).SetClass("flex flex-col")
        })

        const dialogClasses = "p-2 md:p-4 m-2 border border-gray-400 rounded-xl flex flex-col"

        const moveFlow = new Toggle(
            new VariableUiElement(
                currentStep.map((currentStep) => {
                    switch (currentStep) {
                        case "start":
                            return moveButton
                        case "reason":
                            return new Combine([
                                t.whyMove.SetClass("text-lg font-bold"),
                                selectReason,
                                cancelButton,
                            ]).SetClass(dialogClasses)
                        case "pick_location":
                            return new Combine([
                                t.moveTitle.SetClass("text-lg font-bold"),
                                new VariableUiElement(locationInput),
                                cancelButton,
                            ]).SetClass(dialogClasses)
                        case "moved":
                            return new Combine([
                                t.pointIsMoved.SetClass("thanks"),
                                moveAgainButton,
                            ]).SetClass("flex flex-col")
                    }
                })
            ),
            loginButton,
            state.osmConnection.isLoggedIn
        )
        let id = featureToMove.properties.id
        const backend = state.osmConnection._oauth_config.url
        if (id.startsWith(backend)) {
            id = id.substring(backend.length)
        }

        const moveDisallowedReason = new UIEventSource<BaseUIElement>(undefined)
        if (id.startsWith("way")) {
            moveDisallowedReason.setData(t.isWay)
        } else if (id.startsWith("relation")) {
            moveDisallowedReason.setData(t.isRelation)
        } else if (id.indexOf("-") < 0) {
            OsmObject.DownloadReferencingWays(id).then((referencing) => {
                if (referencing.length > 0) {
                    console.log("Got a referencing way, move not allowed")
                    moveDisallowedReason.setData(t.partOfAWay)
                }
            })
            OsmObject.DownloadReferencingRelations(id).then((partOf) => {
                if (partOf.length > 0) {
                    moveDisallowedReason.setData(t.partOfRelation)
                }
            })
        }
        super(
            moveFlow,
            new Combine([
                Svg.move_not_allowed_svg().SetStyle("height: 2rem").SetClass("m-2"),
                new Combine([
                    t.cannotBeMoved,
                    new VariableUiElement(moveDisallowedReason).SetClass("subtle"),
                ]).SetClass("flex flex-col"),
            ]).SetClass("flex m-2 p-2 rounded-lg bg-gray-200"),
            moveDisallowedReason.map((r) => r === undefined)
        )
    }
}