First steps for a move flow

2021-10-11 00:54:35 +02:00 · 2021-10-11 00:54:35 +02:00 · 828102c547
commit 828102c547
parent 950b979d83
9 changed files with 278 additions and 48 deletions
--- a/UI/Popup/MoveWizard.ts
+++ b/UI/Popup/MoveWizard.ts
@ -0,0 +1,131 @@
+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";
+
+interface MoveReason  {text: Translation | string,
+    icon: string | BaseUIElement,
+    changesetCommentValue: string,
+    lockBounds: true | boolean,
+    background: undefined | "map" | "photo",
+    startZoom: number}
+
+export default class MoveWizard extends Toggle {
+    /**
+     * The UI-element which helps moving a point
+     */
+    constructor(
+        featureToMove : any,
+        state: {
+        osmConnection: OsmConnection,
+        featureSwitchUserbadge: UIEventSource<boolean>
+    },options?: {
+        reasons?: {text: Translation | string, 
+            icon: string | BaseUIElement, 
+            changesetCommentValue: string,
+            lockBounds?: true | boolean,
+            background?: undefined | "map" | "photo",
+            startZoom?: number | 15
+        }[]
+        disableDefaultReasons?: false | boolean
+        
+    }) {
+        //State.state.featureSwitchUserbadge
+       // state = State.state
+        options = options ?? {}
+       const  t = Translations.t.move
+        const loginButton = new Toggle(
+          t.loginToMove.Clone()  .SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
+            undefined,
+            state.featureSwitchUserbadge
+        )
+        
+        const currentStep = new UIEventSource<"start" | "reason" | "pick_location">("start")
+        const moveReason = new UIEventSource<MoveReason>(undefined)
+        const moveButton = new SubtleButton(
+            Svg.move_ui(),
+            t.inviteToMove.Clone()
+        ).onClick(() => {
+            currentStep.setData("reason")
+        })
+        
+        
+        const reasons : MoveReason[] = []
+        if(!options.disableDefaultReasons){
+            reasons.push({
+                text: t.reasonRelocation.Clone(),
+                icon: Svg.relocation_svg(),
+                changesetCommentValue: "relocated",
+                lockBounds: false,
+                background: undefined,
+                startZoom: 12
+            })
+            
+            reasons.push({
+                text: t.reasonInaccurate.Clone(),
+                icon: Svg.crosshair_svg(),
+                changesetCommentValue: "improve_accuracy",
+                lockBounds: true,
+                background: "photo",
+                startZoom: 17
+            })
+        }
+        for (const reason of options.reasons ?? []) {
+            reasons.push({
+                text: reason.text,
+                icon: reason.icon,
+                changesetCommentValue: reason.changesetCommentValue,
+                lockBounds: reason.lockBounds ?? true,
+                background: reason.background,
+                startZoom: reason.startZoom ?? 15
+            })
+        }
+        
+        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 = new LocationInput({
+            centerLocation: new UIEventSource<Loc>({
+                lon: lon,
+                lat: lat,
+                zoom: moveReason.data.startZoom
+            }),
+            
+        })
+        locationInput.SetStyle("height: 25rem")
+        super(
+            new VariableUiElement(currentStep.map(currentStep => {
+                switch (currentStep){
+                    case "start":
+                        return moveButton;
+                    case "reason":
+                        return new Combine([selectReason, cancelButton]);
+                    case "pick_location":
+                        return new Combine([locationInput])
+                }
+                
+                
+                
+                
+            })),
+            loginButton,
+            state.osmConnection.isLoggedIn
+        )
+    }
+}