MapComplete/UI/CustomGenerator/GeneralSettings.ts

import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson";
import Combine from "../Base/Combine";
import SettingsTable from "./SettingsTable";
import SingleSetting from "./SingleSetting";
import {TextField} from "../Input/TextField";
import MultiLingualTextFields from "../Input/MultiLingualTextFields";


export default class GeneralSettingsPanel extends UIElement {
    private panel: Combine;
    
    public languages : UIEventSource<string[]>;

    constructor(configuration: UIEventSource<LayoutConfigJson>, currentSetting: UIEventSource<SingleSetting<any>>) {
        super(undefined);


        const languagesField = new TextField<string[]>(
            {
                fromString: str => str?.split(";")?.map(str => str.trim().toLowerCase()),
                toString: languages => languages.join(";"),
            }
        );
        this.languages = languagesField.GetValue();

        const version = TextField.StringInput();
        const current_datetime = new Date();
        let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate() + " " + current_datetime.getHours() + ":" + current_datetime.getMinutes() + ":" + current_datetime.getSeconds()
        version.GetValue().setData(formatted_date);
        
        
        const locationRemark = "<br/>Note that, as soon as an URL-parameter sets the location or a location is known due to a previous visit, that the theme-set location is ignored"

        const settingsTable = new SettingsTable(
            [
                new SingleSetting(configuration, TextField.StringInput(), "id",
                    "Identifier", "The identifier of this theme. This should be a lowercase, unique string"),
                new SingleSetting(configuration, version, "version", "Version",
                    "A version to indicate the theme version. Ideal is the date you created or updated the theme"),
                new SingleSetting(configuration, languagesField, "language",
                    "Supported languages", "Which languages do you want to support in this theme? Type the two letter code representing your language, seperated by <span class='literal-code'>;</span>. For example:<span class='literal-code'>en;nl</span> "),
                new SingleSetting(configuration, new MultiLingualTextFields(this.languages), "title",
                    "Title", "The title as shown in the welcome message, in the browser title bar, in the more screen, ..."),
                new SingleSetting(configuration, new MultiLingualTextFields(this.languages, true),
                    "description", "Description", "The description is shown in the welcomemessage. It is a small text welcoming users"),
                new SingleSetting(configuration, TextField.StringInput(), "icon",
                    "Icon", "A visual representation for your theme; used as logo in the welcomeMessage. If your theme is official, used as favicon and webapp logo",
                    {
                        showIconPreview: true
                    }),
                
                new SingleSetting(configuration, TextField.NumberInput("nat", n => n < 23), "startZoom","Initial zoom level",
                    "When a user first loads MapComplete, this zoomlevel is shown."+locationRemark),
                new SingleSetting(configuration, TextField.NumberInput("float", n => (n < 90 && n > -90)), "startLat","Initial latitude",
                    "When a user first loads MapComplete, this latitude is shown as location."+locationRemark),
                new SingleSetting(configuration, TextField.NumberInput("float", n => (n < 180 && n > -180)), "startLon","Initial longitude",
                    "When a user first loads MapComplete, this longitude is shown as location."+locationRemark),
            
                new SingleSetting(configuration, TextField.NumberInput("pfloat", n => (n < 0.5 )), "widenFactor","Query widening",
                    "When a query is run, the data within bounds of the visible map is loaded.\n" +
                    "However, users tend to pan and zoom a lot. It is pretty annoying if every single pan means a reloading of the data.\n" +
                    "For this, the bounds are widened in order to make a small pan still within bounds of the loaded data.\n" +
                    "IF widenfactor is 0, this feature is disabled. A recommended value is between 0.5 and 0.01 (the latter for very dense queries)"),

                new SingleSetting(configuration, TextField.StringInput(), "socialImage",
                "og:image (aka Social Image)", "<span class='alert'>Only works on incorporated themes</span>" +
                    "The Social Image is set as og:image for the HTML-site and helps social networks to show a preview", {showIconPreview: true})
            ], currentSetting);

        this.panel = new Combine([
            "<h3>General theme settings</h3>",
            settingsTable
        ]);
    }


    InnerRender(): string {
        return this.panel.Render();
    }


}