mapcomplete/UI/BigComponents/PersonalLayersPanel.ts

132 lines
4.7 KiB
TypeScript
Raw Normal View History

import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import {AllKnownLayouts} from "../../Customizations/AllKnownLayouts";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "../Base/Combine";
import CheckBox from "../Input/CheckBox";
import {SubtleButton} from "../Base/SubtleButton";
import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
export default class PersonalLayersPanel extends UIElement {
2020-07-31 16:17:16 +02:00
private checkboxes: UIElement[] = [];
2020-07-31 04:58:58 +02:00
constructor() {
super(State.state.favouriteLayers);
2020-07-31 04:58:58 +02:00
this.ListenTo(State.state.osmConnection.userDetails);
this.UpdateView([]);
const self = this;
State.state.installedThemes.addCallback(extraThemes => {
self.UpdateView(extraThemes.map(layout => layout.layout));
self.Update();
})
}
2020-07-31 04:58:58 +02:00
2020-11-11 16:23:49 +01:00
private UpdateView(extraThemes: LayoutConfig[]) {
this.checkboxes = [];
const favs = State.state.favouriteLayers.data ?? [];
2020-07-31 04:58:58 +02:00
const controls = new Map<string, UIEventSource<boolean>>();
const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
for (const layout of allLayouts) {
2020-11-11 16:23:49 +01:00
if (layout.id === personal.id) {
2020-07-31 16:17:16 +02:00
continue;
}
2020-07-31 04:58:58 +02:00
const header =
new Combine([
2020-09-15 02:29:31 +02:00
`<img style="max-width: 3em;max-height: 3em; float: left; padding: 0.1em; margin-right: 0.3em;" src='${layout.icon}'>`,
"<b>",
2020-07-31 04:58:58 +02:00
layout.title,
"</b><br/>",
2020-11-11 16:23:49 +01:00
layout.shortDescription ?? ""
2020-09-15 02:29:31 +02:00
]).SetStyle("background: #eee; display: block; padding: 0.5em; border-radius:0.5em; overflow:auto;")
2020-07-31 04:58:58 +02:00
this.checkboxes.push(header);
for (const layer of layout.layers) {
2020-11-11 16:23:49 +01:00
if(layer === undefined){
console.warn("Undefined layer for ",layout.id)
continue;
}
2020-09-15 02:29:31 +02:00
if (typeof layer === "string") {
2020-09-10 19:33:06 +02:00
continue;
}
let icon :UIElement = layer.GenerateLeafletStyle(new UIEventSource<any>({id:"node/-1"}), false).icon.html
?? Svg.checkmark_svg();
let iconUnset =new FixedUiElement(icon.Render());
icon.SetClass("single-layer-selection-toggle")
iconUnset.SetClass("single-layer-selection-toggle")
2020-07-31 16:17:16 +02:00
let name = layer.name ?? layer.id;
if (name === undefined) {
continue;
}
2020-07-31 16:17:16 +02:00
const content = new Combine([
2020-09-15 02:29:31 +02:00
"<b>",
name,
"</b> ",
2020-07-31 16:17:16 +02:00
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
2020-09-15 02:29:31 +02:00
])
2020-09-18 22:23:49 +02:00
2020-07-31 04:58:58 +02:00
const cb = new CheckBox(
2020-09-15 02:29:31 +02:00
new SubtleButton(
icon,
2020-09-18 22:23:49 +02:00
content),
new SubtleButton(
iconUnset.SetStyle("opacity:0.1"),
2020-09-15 02:29:31 +02:00
new Combine(["<del>",
content,
"</del>"
])),
2020-07-31 04:58:58 +02:00
controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
);
cb.SetClass("custom-layer-checkbox");
2020-07-31 04:58:58 +02:00
controls[layer.id] = cb.isEnabled;
cb.isEnabled.addCallback((isEnabled) => {
const favs = State.state.favouriteLayers;
2020-07-31 04:58:58 +02:00
if (isEnabled) {
2020-09-15 02:29:31 +02:00
if(favs.data.indexOf(layer.id)>= 0){
return; // Already added
}
favs.data.push(layer.id);
2020-07-31 04:58:58 +02:00
} else {
favs.data.splice(favs.data.indexOf(layer.id), 1);
2020-07-31 04:58:58 +02:00
}
favs.ping();
2020-07-31 04:58:58 +02:00
})
this.checkboxes.push(cb);
}
2020-07-31 16:17:16 +02:00
}
2020-09-15 02:29:31 +02:00
State.state.favouriteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
});
2020-07-31 04:58:58 +02:00
}
InnerRender(): string {
const t = Translations.t.favourite;
const userDetails = State.state.osmConnection.userDetails.data;
if(!userDetails.loggedIn){
2020-07-31 16:17:16 +02:00
return t.loginNeeded.Render();
2020-07-31 04:58:58 +02:00
}
2020-07-31 16:17:16 +02:00
return new Combine([
2020-07-31 04:58:58 +02:00
t.panelIntro,
...this.checkboxes
2020-09-15 02:29:31 +02:00
]).Render();
2020-07-31 04:58:58 +02:00
}
}