import {LayoutConfigJson} from "../../Customizations/JSON/CustomLayoutFromJSON"; import {UIEventSource} from "../../Logic/UIEventSource"; import {UIElement} from "../UIElement"; import Combine from "../Base/Combine"; import {Button} from "../Base/Button"; import {VariableUiElement} from "../Base/VariableUIElement"; export class Preview extends UIElement { private url: UIEventSource; private config: UIEventSource; private currentPreview = new UIEventSource("") private reloadButton: Button; private otherPreviews: VariableUiElement; constructor(url: UIEventSource, testurl: UIEventSource, config: UIEventSource) { super(undefined); this.config = config; this.url = url; this.reloadButton = new Button("Reload the preview", () => { this.currentPreview.setData(`` + '

The above preview is in testmode. Changes will not be sent to OSM, so feel free to add points and answer questions

', ); }); this.ListenTo(this.currentPreview); this.otherPreviews = new VariableUiElement(this.url.map(url => { return [ `

Your link

`, 'Bookmark the link below
', 'MapComplete has no backend. The entire theme configuration is saved in the following URL. This means that this URL is needed to revive and change your MapComplete instance.
', `${this.url.data}
`, '

JSON-configuration

', 'You can see the configuration in JSON format below.
', '', JSON.stringify(this.config.data, null, 2).replace(/\n/g, "
").replace(/ /g, " "), '
' ].join("") })); } InnerRender(): string { const url = this.url.data; return new Combine([ new VariableUiElement(this.currentPreview), this.reloadButton, "

Statistics

", "We track statistics with goatcounter. The statistics can be seen by anyone, so if you want to see where your theme ends up, click here", this.otherPreviews ]).Render(); } }