mapcomplete/UI/Popup/FeatureInfoBox.ts

97 lines
3.7 KiB
TypeScript
Raw Normal View History

2020-10-14 12:15:09 +02:00
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
2020-10-27 01:01:34 +01:00
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import EditableTagRendering from "./EditableTagRendering";
import QuestionBox from "./QuestionBox";
import Combine from "../Base/Combine";
import TagRenderingAnswer from "./TagRenderingAnswer";
import State from "../../State";
2021-01-07 04:50:12 +01:00
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
2021-01-08 02:13:44 +01:00
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
2021-01-25 04:21:22 +01:00
export default class FeatureInfoBox extends UIElement {
private static featureInfoboxCache: Map<LayerConfig, Map<UIEventSource<any>, FeatureInfoBox>> = new Map<LayerConfig, Map<UIEventSource<any>, FeatureInfoBox>>();
2021-01-25 04:21:22 +01:00
private _component: ScrollableFullScreen;
private constructor(
2020-10-27 01:01:34 +01:00
tags: UIEventSource<any>,
2021-01-22 00:40:15 +01:00
layerConfig: LayerConfig,
2021-01-25 03:12:09 +01:00
onClose: () => void
) {
2021-01-25 04:21:22 +01:00
super();
2020-11-17 16:29:51 +01:00
if (layerConfig === undefined) {
2020-11-02 18:59:21 +01:00
throw "Undefined layerconfig"
}
const title = FeatureInfoBox.GenerateTitleBar(tags, layerConfig);
const contents = FeatureInfoBox.GenerateContent(tags, layerConfig);
this._component = new ScrollableFullScreen(title, contents, onClose);
2021-01-25 03:12:09 +01:00
}
static construct(tags: UIEventSource<any>, layer: LayerConfig, onClose: () => void) {
let innerMap = FeatureInfoBox.featureInfoboxCache.get(layer);
if (innerMap === undefined) {
innerMap = new Map<UIEventSource<any>, FeatureInfoBox>();
FeatureInfoBox.featureInfoboxCache.set(layer, innerMap);
}
let featureInfoBox = innerMap.get(tags);
if (featureInfoBox === undefined) {
featureInfoBox = new FeatureInfoBox(tags, layer, onClose);
innerMap.set(tags, featureInfoBox);
}
return featureInfoBox;
2021-01-25 04:21:22 +01:00
}
private static GenerateTitleBar(tags: UIEventSource<any>,
layerConfig: LayerConfig): UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2");
2021-01-08 02:13:44 +01:00
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon,
"block w-8 h-8 align-baseline box-content sm:p-0.5", "width: 2rem !important;")
.HideOnEmpty(true)
))
.SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2")
2021-01-25 03:12:09 +01:00
2021-01-25 04:21:22 +01:00
return new Combine([
new Combine([title, titleIcons]).SetClass("flex flex-col sm:flex-row flex-grow justify-between")
2021-01-25 03:12:09 +01:00
])
}
2021-01-25 04:21:22 +01:00
private static GenerateContent(tags: UIEventSource<any>,
layerConfig: LayerConfig): UIElement {
2021-01-25 03:12:09 +01:00
let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) {
2020-12-08 23:44:34 +01:00
questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
}
2020-12-08 23:44:34 +01:00
let questionBoxIsUsed = false;
2021-01-08 02:13:44 +01:00
const renderings = layerConfig.tagRenderings.map(tr => {
if (tr.question === null) {
2020-12-08 23:44:34 +01:00
// This is the question box!
questionBoxIsUsed = true;
2020-12-08 23:44:34 +01:00
return questionBox;
}
return new EditableTagRendering(tags, tr);
});
if (!questionBoxIsUsed) {
2021-01-08 02:13:44 +01:00
renderings.push(questionBox);
}
2021-01-08 16:49:42 +01:00
const tail = new Combine([]).SetClass("only-on-mobile");
2021-01-08 02:13:44 +01:00
2021-01-25 03:12:09 +01:00
return new Combine([
2021-01-08 02:13:44 +01:00
...renderings,
tail.SetClass("featureinfobox-tail")
]
2021-01-27 02:26:57 +01:00
).SetClass("block")
}
2020-07-20 15:54:50 +02:00
InnerRender(): string {
return this._component.Render();
}
}