import {SpecialVisualization} from "../SpecialVisualizations"; import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"; import BaseUIElement from "../BaseUIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import {DefaultGuiState} from "../DefaultGuiState"; import {SubtleButton} from "../Base/SubtleButton"; import Img from "../Base/Img"; import {FixedUiElement} from "../Base/FixedUiElement"; import Combine from "../Base/Combine"; import Link from "../Base/Link"; import {SubstitutedTranslation} from "../SubstitutedTranslation"; import {Utils} from "../../Utils"; import Minimap from "../Base/Minimap"; import ShowDataLayer from "../ShowDataLayer/ShowDataLayer"; import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource"; import {VariableUiElement} from "../Base/VariableUIElement"; import Loading from "../Base/Loading"; import {OsmConnection} from "../../Logic/Osm/OsmConnection"; import Translations from "../i18n/Translations"; import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"; import {Changes} from "../../Logic/Osm/Changes"; import {UIElement} from "../UIElement"; import FilteredLayer from "../../Models/FilteredLayer"; import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"; import Lazy from "../Base/Lazy"; export interface AutoAction extends SpecialVisualization { supportsAutoAction: boolean applyActionOn(state: { layoutToUse: LayoutConfig, changes: Changes }, tagSource: UIEventSource, argument: string[]): Promise } class ApplyButton extends UIElement { private readonly icon: string; private readonly text: string; private readonly targetTagRendering: string; private readonly target_layer_id: string; private readonly state: FeaturePipelineState; private readonly target_feature_ids: string[]; private readonly buttonState = new UIEventSource<"idle" | "running" | "done" | { error: string }>("idle") private readonly layer: FilteredLayer; private readonly tagRenderingConfig: TagRenderingConfig; constructor(state: FeaturePipelineState, target_feature_ids: string[], options: { target_layer_id: string, targetTagRendering: string, text: string, icon: string }) { super() this.state = state; this.target_feature_ids = target_feature_ids; this.target_layer_id = options.target_layer_id; this.targetTagRendering = options.targetTagRendering; this.text = options.text this.icon = options.icon this.layer = this.state.filteredLayers.data.find(l => l.layerDef.id === this.target_layer_id) this.tagRenderingConfig = this.layer.layerDef.tagRenderings.find(tr => tr.id === this.targetTagRendering) } protected InnerRender(): string | BaseUIElement { if (this.target_feature_ids.length === 0) { return new FixedUiElement("No elements found to perform action") } if (this.tagRenderingConfig === undefined) { return new FixedUiElement("Target tagrendering " + this.targetTagRendering + " not found").SetClass("alert") } const self = this; const button = new SubtleButton( new Img(this.icon), this.text ).onClick(() => { this.buttonState.setData("running") window.setTimeout(() => { self.Run(); }, 50) }); const explanation = new Combine(["The following objects will be updated: ", ...this.target_feature_ids.map(id => new Combine([new Link(id, "https:/ /openstreetmap.org/" + id, true), ", "]))]).SetClass("subtle") const previewMap = Minimap.createMiniMap({ allowMoving: false, background: this.state.backgroundLayer, addLayerControl: true, }).SetClass("h-48") const features = this.target_feature_ids.map(id => this.state.allElements.ContainingFeatures.get(id)) new ShowDataLayer({ leafletMap: previewMap.leafletMap, zoomToFeatures: true, features: new StaticFeatureSource(features, false), state: this.state, layerToShow: this.layer.layerDef, }) return new VariableUiElement(this.buttonState.map( st => { if (st === "idle") { return new Combine([button, previewMap, explanation]); } if (st === "done") { return new FixedUiElement("All done!").SetClass("thanks") } if (st === "running") { return new Loading("Applying changes...") } const error = st.error return new Combine([new FixedUiElement("Something went wrong...").SetClass("alert"), new FixedUiElement(error).SetClass("subtle")]).SetClass("flex flex-col") } )) } private async Run() { try { console.log("Applying auto-action on " + this.target_feature_ids.length + " features") for (const targetFeatureId of this.target_feature_ids) { const featureTags = this.state.allElements.getEventSourceById(targetFeatureId) const rendering = this.tagRenderingConfig.GetRenderValue(featureTags.data).txt const specialRenderings = Utils.NoNull(SubstitutedTranslation.ExtractSpecialComponents(rendering) .map(x => x.special)) .filter(v => v.func["supportsAutoAction"] === true) if (specialRenderings.length == 0) { console.warn("AutoApply: feature " + targetFeatureId + " got a rendering without supported auto actions:", rendering) } for (const specialRendering of specialRenderings) { const action = specialRendering.func await action.applyActionOn(this.state, featureTags, specialRendering.args) } } console.log("Flushing changes...") await this.state.changes.flushChanges("Auto button") this.buttonState.setData("done") } catch (e) { console.error("Error while running autoApply: ", e) this.buttonState.setData({error: e}) } } } export default class AutoApplyButton implements SpecialVisualization { public readonly docs: string; public readonly funcName: string = "auto_apply"; public readonly args: { name: string; defaultValue?: string; doc: string }[] = [ { name: "target_layer", doc: "The layer that the target features will reside in" }, { name: "target_feature_ids", doc: "The key, of which the value contains a list of ids" }, { name: "tag_rendering_id", doc: "The ID of the tagRendering containing the autoAction. This tagrendering will be calculated. The embedded actions will be executed" }, { name: "text", doc: "The text to show on the button" }, { name: "icon", doc: "The icon to show on the button", defaultValue: "./assets/svg/robot.svg" } ]; constructor(allSpecialVisualisations: SpecialVisualization[]) { this.docs = AutoApplyButton.generateDocs(allSpecialVisualisations.filter(sv => sv["supportsAutoAction"] === true).map(sv => sv.funcName)) } private static generateDocs(supportedActions: string[]) { return [ "A button to run many actions for many features at once.\n", "To effectively use this button, you'll need some ingredients:\n" + "- A target layer with features for which an action is defined in a tag rendering. The following special visualisations support an autoAction: " + supportedActions.join(", "), "- A host feature to place the auto-action on. This can be a big outline (such as a city). Another good option for this is the [current_view](./BuiltinLayers.md#current_view)", "- Then, use a calculated tag on the host feature to determine the overlapping object ids", "- At last, add this component" ].join("\n") } constr(state: FeaturePipelineState, tagSource: UIEventSource, argument: string[], guistate: DefaultGuiState): BaseUIElement { try { if (!state.layoutToUse.official && !(state.featureSwitchIsTesting.data || state.osmConnection._oauth_config.url === OsmConnection.oauth_configs["osm-test"].url)) { const t = Translations.t.general.add.import; return new Combine([new FixedUiElement("The auto-apply button is only available in official themes (or in testing mode)").SetClass("alert"), t.howToTest]) } const target_layer_id = argument[0] const targetTagRendering = argument[2] const text = argument[3] const icon = argument[4] const options = { target_layer_id, targetTagRendering, text, icon } return new Lazy(() => { const to_parse = new UIEventSource(undefined) // Very ugly hack: read the value every 500ms UIEventSource.Chronic(500, () => to_parse.data === undefined).addCallback(() => { const applicable = tagSource.data[argument[1]] to_parse.setData(applicable) }) const loading = new Loading("Gathering which elements support auto-apply... "); return new VariableUiElement(to_parse.map(ids => { if (ids === undefined) { return loading } return new ApplyButton(state, JSON.parse(ids), options); })) }) } catch (e) { return new FixedUiElement("Could not generate a auto_apply-button for key " + argument[0] + " due to " + e).SetClass("alert") } } getLayerDependencies(args: string[]): string[] { return [args[0]] } }