MapComplete/UI/BigComponents/UploadTraceToOsmUI.ts

import Toggle from "../Input/Toggle";
import {RadioButton} from "../Input/RadioButton";
import {FixedInputElement} from "../Input/FixedInputElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import {TextField} from "../Input/TextField";
import {UIEventSource} from "../../Logic/UIEventSource";
import Title from "../Base/Title";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import {Translation} from "../i18n/Translation";


export default class UploadTraceToOsmUI extends Toggle {

    private static createDefault(s: string, defaultValue: string){
        if(defaultValue.length < 1){
            throw "Default value should have some characters"
        }
        if(s === undefined || s === null || s === ""){
            return defaultValue
        }
        return s
    }

    constructor(
        trace: (title: string) => string,
        state: {
            layoutToUse: LayoutConfig;
            osmConnection: OsmConnection
        }, options?: {
            whenUploaded?: () => void | Promise<void>
        }) {
        const t = Translations.t.general.uploadGpx
        const uploadFinished = new UIEventSource(false)
        const traceVisibilities: {
            key: "private" | "public",
            name: Translation,
            docs: Translation
        }[] = [
            {
                key: "private",
                ...t.modes.private
            },
            {
                key: "public",
                ...t.modes.public
            }
        ]

        const dropdown = new RadioButton<"private" | "public">(
            traceVisibilities.map(tv => new FixedInputElement<"private" | "public">(
                new Combine([Translations.W(
                    tv.name
                ).SetClass("font-bold"), tv.docs]).SetClass("flex flex-col")
                , tv.key)),
            {
                value: <any>state?.osmConnection?.GetPreference("gps.trace.visibility")
            }
        )
        const description = new TextField({
            placeholder: t.meta.descriptionPlaceHolder
        })
        const title = new TextField({
            placeholder: t.meta.titlePlaceholder
        })
        const clicked = new UIEventSource<boolean>(false)

        const confirmPanel = new Combine([
            new Title(t.title),
            t.intro0,
            t.intro1,

            t.choosePermission,
            dropdown,
            new Title(t.meta.title, 4),
            t.meta.intro,
            title,
            t.meta.descriptionIntro,
            description,
            new Combine([
                new SubtleButton(Svg.close_svg(), Translations.t.general.cancel).onClick(() => {
                    clicked.setData(false)
                }).SetClass(""),
                new SubtleButton(Svg.upload_svg(), t.confirm).OnClickWithLoading(t.uploading, async () => {
                    const titleStr = UploadTraceToOsmUI.createDefault(title.GetValue().data, "Track with mapcomplete")
                    const descriptionStr = UploadTraceToOsmUI.createDefault(description.GetValue().data, "Track created with MapComplete with theme "+state?.layoutToUse?.id)
                    await state?.osmConnection?.uploadGpxTrack(trace(title.GetValue().data), {
                        visibility: dropdown.GetValue().data,
                        description: descriptionStr,
                        filename: titleStr +".gpx",
                        labels: ["MapComplete", state?.layoutToUse?.id]
                    })

                    if (options?.whenUploaded !== undefined) {
                        await options.whenUploaded()
                    }
                    uploadFinished.setData(true)

                })
            ]).SetClass("flex flex-wrap flex-wrap-reverse justify-between items-stretch")
        ]).SetClass("flex flex-col p-4 rounded border-2 m-2 border-subtle")


        super(
            new Combine([Svg.confirm_svg().SetClass("w-12 h-12 mr-2"),
                t.uploadFinished])
                .SetClass("flex p-2 rounded-xl border-2 subtle-border items-center"),
            new Toggle(
                confirmPanel,
                new SubtleButton(Svg.upload_svg(), t.title)
                    .onClick(() => clicked.setData(true)),
                clicked
            ), uploadFinished)
    }
}