mapcomplete/UI/CenterMessageBox.ts

import Translations from "./i18n/Translations";
import {VariableUiElement} from "./Base/VariableUIElement";
import FeaturePipelineState from "../Logic/State/FeaturePipelineState";
import Loading from "./Base/Loading";

export default class CenterMessageBox extends VariableUiElement {

    constructor(state: FeaturePipelineState) {
        const updater = state.featurePipeline;
        const t = Translations.t.centerMessage;
        const message = updater.runningQuery.map(
            isRunning => {
                if (isRunning) {
                    return {el: new Loading(t.loadingData)};
                }
                if (!updater.sufficientlyZoomed.data) {
                    return {el: t.zoomIn}
                }
                if (updater.timeout.data > 0) {
                    return {el: t.retrying.Subs({count: "" + updater.timeout.data})}
                }
                return {el: t.ready, isDone: true}

            },
            [updater.timeout, updater.sufficientlyZoomed, state.locationControl]
        )

        super(message.map(toShow => toShow.el))

        this.SetClass("flex justify-center " +
            "rounded-3xl bg-white text-xl font-bold pointer-events-none p-4")
        this.SetStyle("transition: opacity 750ms linear")

        message.addCallbackAndRun(toShow => {
            const isDone = toShow.isDone ?? false;
            if (isDone) {
                this.SetStyle("transition: opacity 750ms linear; opacity: 0")
            } else {
                this.SetStyle("transition: opacity 750ms linear; opacity: 0.75")

            }
        })

    }

}