MapComplete/UI/ImportFlow/CreateNotes.ts

import Combine from "../Base/Combine";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {UIEventSource} from "../../Logic/UIEventSource";
import Title from "../Base/Title";
import Toggle from "../Input/Toggle";
import Loading from "../Base/Loading";
import {VariableUiElement} from "../Base/VariableUIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import Translations from "../i18n/Translations";
import {Translation} from "../i18n/Translation";

export class CreateNotes extends Combine {
    

    public static createNoteContentsUi(feature: {properties: any, geometry: {coordinates: [number,number]}},
        options: {wikilink: string; intro: string; source: string, theme: string }
    ): (Translation | string)[]{
        const src = feature.properties["source"] ?? feature.properties["src"] ?? options.source
        delete feature.properties["source"]
        delete feature.properties["src"]
        let extraNote = ""
        if (feature.properties["note"]) {
            extraNote = feature.properties["note"] + "\n"
            delete feature.properties["note"]
        }

        const tags: string [] = []
        for (const key in feature.properties) {
            if (feature.properties[key] === null || feature.properties[key] === undefined) {
                console.warn("Null or undefined key for ", feature.properties)
                continue
            }
            if (feature.properties[key] === "") {
                continue
            }
            tags.push(key + "=" + (feature.properties[key]+"").replace(/=/, "\\=").replace(/;/g, "\\;").replace(/\n/g, "\\n"))
        }
        const lat = feature.geometry.coordinates[1]
        const lon = feature.geometry.coordinates[0]
        const note = Translations.t.importHelper.noteParts
        return [
            options.intro,
            extraNote,
            note.datasource.Subs({source: src}),
            note.wikilink.Subs(options),
            '',
            note.importEasily,
            `https://mapcomplete.osm.be/${options.theme}.html?z=18&lat=${lat}&lon=${lon}#import`,
            ...tags]
    }

    public static createNoteContents(feature: {properties: any, geometry: {coordinates: [number,number]}},
                                     options: {wikilink: string; intro: string; source: string, theme: string }
    ): string[]{
        return CreateNotes.createNoteContentsUi(feature, options).map(trOrStr => {
            if(typeof trOrStr === "string"){
                return trOrStr
            }
            return trOrStr.txt
        })
    }


    constructor(state: { osmConnection: OsmConnection }, v: { features: any[]; wikilink: string; intro: string; source: string, theme: string }) {
        const t = Translations.t.importHelper.createNotes;
        const createdNotes: UIEventSource<number[]> = new UIEventSource<number[]>([])
        const failed = new UIEventSource<string[]>([])
        const currentNote = createdNotes.map(n => n.length)

        for (const f of v.features) {
            
            const lat = f.geometry.coordinates[1]
            const lon = f.geometry.coordinates[0]
            const text = CreateNotes.createNoteContents(f, v).join("\n")

            state.osmConnection.openNote(
                lat, lon, text)
                .then(({id}) => {
                    createdNotes.data.push(id)
                    createdNotes.ping()
                }, err => {
                    failed.data.push(err)
                    failed.ping()
                })
        }

        super([
            new Title(t.title),
           t.loading           ,
            new Toggle(
                new Loading(new VariableUiElement(currentNote.map(count => t.creating.Subs({
                    count, total: v.features.length
                    }
                    
                )))),
                new Combine([
                    Svg.party_svg().SetClass("w-24"),
                    t.done.Subs({count: v.features.length}).SetClass("thanks"),
                        new SubtleButton(Svg.note_svg(), 
                           t.openImportViewer , {
                            url: "import_viewer.html"
                        })
                    ]
                ),
                currentNote.map(count => count < v.features.length)
            ),
            new VariableUiElement(failed.map(failed => {

                if (failed.length === 0) {
                    return undefined
                }
                return new Combine([
                    new FixedUiElement("Some entries failed").SetClass("alert"),
                    ...failed
                ]).SetClass("flex flex-col")

            }))
        ])
        this.SetClass("flex flex-col");
    }

}