MapComplete/UI/ImportFlow/AskMetadata.ts

import Combine from "../Base/Combine"
import { FlowStep } from "./FlowStep"
import { Store } from "../../Logic/UIEventSource"
import ValidatedTextField from "../Input/ValidatedTextField"
import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
import Title from "../Base/Title"
import { VariableUiElement } from "../Base/VariableUIElement"
import Translations from "../i18n/Translations"
import { SubtleButton } from "../Base/SubtleButton"
import Svg from "../../Svg"
import { Utils } from "../../Utils"

export class AskMetadata
    extends Combine
    implements
        FlowStep<{
            features: any[]
            wikilink: string
            intro: string
            source: string
            theme: string
        }>
{
    public readonly Value: Store<{
        features: any[]
        wikilink: string
        intro: string
        source: string
        theme: string
    }>
    public readonly IsValid: Store<boolean>

    constructor(params: { features: any[]; theme: string }) {
        const t = Translations.t.importHelper.askMetadata
        const introduction = ValidatedTextField.ForType("text").ConstructInputElement({
            value: LocalStorageSource.Get("import-helper-introduction-text"),
            inputStyle: "width: 100%",
        })

        const wikilink = ValidatedTextField.ForType("url").ConstructInputElement({
            value: LocalStorageSource.Get("import-helper-wikilink-text"),
            inputStyle: "width: 100%",
        })

        const source = ValidatedTextField.ForType("string").ConstructInputElement({
            value: LocalStorageSource.Get("import-helper-source-text"),
            inputStyle: "width: 100%",
        })

        super([
            new Title(t.title),
            t.intro.Subs({ count: params.features.length }),
            t.giveDescription,
            introduction.SetClass("w-full border border-black"),
            t.giveSource,
            source.SetClass("w-full border border-black"),
            t.giveWikilink,
            wikilink.SetClass("w-full border border-black"),
            new VariableUiElement(
                wikilink.GetValue().map((wikilink) => {
                    try {
                        const url = new URL(wikilink)
                        if (url.hostname.toLowerCase() !== "wiki.openstreetmap.org") {
                            return t.shouldBeOsmWikilink.SetClass("alert")
                        }

                        if (url.pathname.toLowerCase() === "/wiki/main_page") {
                            return t.shouldNotBeHomepage.SetClass("alert")
                        }
                    } catch (e) {
                        return t.shouldBeUrl.SetClass("alert")
                    }
                })
            ),
            t.orDownload,
            new SubtleButton(Svg.download_svg(), t.downloadGeojson).OnClickWithLoading(
                "Preparing your download",
                async () => {
                    const geojson = {
                        type: "FeatureCollection",
                        features: params.features,
                    }
                    Utils.offerContentsAsDownloadableFile(
                        JSON.stringify(geojson),
                        "prepared_import_" + params.theme + ".geojson",
                        {
                            mimetype: "application/vnd.geo+json",
                        }
                    )
                }
            ),
        ])
        this.SetClass("flex flex-col")

        this.Value = introduction.GetValue().map(
            (intro) => {
                return {
                    features: params.features,
                    wikilink: wikilink.GetValue().data,
                    intro,
                    source: source.GetValue().data,
                    theme: params.theme,
                }
            },
            [wikilink.GetValue(), source.GetValue()]
        )

        this.IsValid = this.Value.map((obj) => {
            if (obj === undefined) {
                return false
            }
            if ([obj.features, obj.intro, obj.wikilink, obj.source].some((v) => v === undefined)) {
                return false
            }

            try {
                const url = new URL(obj.wikilink)
                if (url.hostname.toLowerCase() !== "wiki.openstreetmap.org") {
                    return false
                }
            } catch (e) {
                return false
            }

            return true
        })
    }
}