mapcomplete/Logic/PersonalLayersPanel.ts

129 lines
4.5 KiB
TypeScript
Raw Normal View History

2020-07-31 04:58:58 +02:00
import {UIElement} from "../UI/UIElement";
import {State} from "../State";
import Translations from "../UI/i18n/Translations";
import {UIEventSource} from "./UIEventSource";
2020-07-31 04:58:58 +02:00
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import Combine from "../UI/Base/Combine";
import {Img} from "../UI/Img";
import {CheckBox} from "../UI/Input/CheckBox";
import {PersonalLayout} from "./PersonalLayout";
import {Layout} from "../Customizations/Layout";
2020-07-31 04:58:58 +02:00
export 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 16:17:16 +02:00
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
private UpdateView(extraThemes: Layout[]) {
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);
console.log("ALL LAYOUTS", allLayouts)
for (const layout of allLayouts) {
if (layout.id === PersonalLayout.NAME) {
2020-07-31 16:17:16 +02:00
continue;
}
if (layout.hideFromOverview &&
2020-07-31 21:54:30 +02:00
State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") {
2020-07-31 16:17:16 +02:00
continue
}
2020-07-31 04:58:58 +02:00
const header =
new Combine([
`<div class="custom-layer-panel-header-img"><img src='${layout.icon}'></div>`,
"<span><b>",
layout.title,
"</b><br/>",
layout.description ?? "",
"</span>",
], 'custom-layer-panel-header')
this.checkboxes.push(header);
for (const layer of layout.layers) {
let icon = layer.icon;
if (icon !== undefined && typeof (icon) !== "string") {
icon = icon.GetContent({"id": "node/-1"}).txt ?? "./assets/bug.svg";
}
2020-07-31 04:58:58 +02:00
const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
2020-07-31 16:17:16 +02:00
const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
let name = layer.name ?? layer.id;
if (name === undefined) {
continue;
}
if (typeof (name) !== "string") {
2020-08-22 14:59:52 +02:00
name = name.InnerRender();
}
2020-07-31 16:17:16 +02:00
const content = new Combine([
"<span>",
2020-08-22 14:59:52 +02:00
"<b>", name ?? "", "</b> ",
2020-07-31 16:17:16 +02:00
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
"</span>"])
2020-07-31 04:58:58 +02:00
const cb = new CheckBox(
new Combine([
2020-07-31 16:17:16 +02:00
image, content
2020-07-31 04:58:58 +02:00
]),
new Combine([
2020-07-31 16:17:16 +02:00
"<span style='opacity: 0.1'>",
noimage, "</span>",
2020-07-31 16:17:16 +02:00
"<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) {
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);
}
State.state.favouriteLayers.addCallback((layers) => {
2020-07-31 16:17:16 +02:00
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
})
2020-07-31 04:58:58 +02:00
2020-07-31 16:17:16 +02:00
}
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
], "custom-layer-panel").Render();
}
}