mapcomplete/UI/BigComponents/BackgroundSelector.ts

import {DropDown} from "../Input/DropDown";
import Translations from "../i18n/Translations";
import State from "../../State";
import BaseLayer from "../../Models/BaseLayer";
import {VariableUiElement} from "../Base/VariableUIElement";
import {Store} from "../../Logic/UIEventSource";

export default class BackgroundSelector extends VariableUiElement {

    constructor(state: {availableBackgroundLayers?:Store<BaseLayer[]>} ) {
        const available = state.availableBackgroundLayers?.map(available => {
            if(available === undefined){
                return undefined
            }
                const baseLayers: { value: BaseLayer, shown: string }[] = [];
                for (const i in available) {
                    if (!available.hasOwnProperty(i)) {
                        continue;
                    }
                    const layer: BaseLayer = available[i];
                    baseLayers.push({value: layer, shown: layer.name ?? "id:" + layer.id});
                }
                return baseLayers
            }
        )

        super(
            available?.map(baseLayers => {
                    if (baseLayers === undefined || baseLayers.length <= 1) {
                        return undefined;
                    }
                    return new DropDown(Translations.t.general.backgroundMap.Clone(), baseLayers, State.state.backgroundLayer, {
                        select_class: 'bg-indigo-100 p-1 rounded hover:bg-indigo-200 w-full'
                    })
                }
            )
        )

    }

}