More refactoring, fix loading of personal theme
This commit is contained in:
parent
7a7b34b0fa
commit
b2c234b51d
3 changed files with 27 additions and 32 deletions
|
@ -5,17 +5,8 @@ import {OsmConnection} from "./Osm/OsmConnection";
|
||||||
|
|
||||||
export default class InstalledThemes {
|
export default class InstalledThemes {
|
||||||
|
|
||||||
private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]){
|
static InstalledThemes(osmConnection: OsmConnection): UIEventSource<{ layout: LayoutConfig; definition: string }[]> {
|
||||||
// for (const invalid of invalidThemes) {
|
return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
|
||||||
// console.error("Attempting to remove ", invalid)
|
|
||||||
// osmConnection.GetLongPreference(
|
|
||||||
// "installed-theme-" + invalid
|
|
||||||
// ).setData(null);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
static InstalledThemes(osmConnection: OsmConnection) : UIEventSource<{ layout: LayoutConfig; definition: string }[]>{
|
|
||||||
return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
|
|
||||||
const installedThemes: { layout: LayoutConfig, definition: string }[] = [];
|
const installedThemes: { layout: LayoutConfig, definition: string }[] = [];
|
||||||
if (allPreferences === undefined) {
|
if (allPreferences === undefined) {
|
||||||
console.log("All prefs is undefined");
|
console.log("All prefs is undefined");
|
||||||
|
@ -31,8 +22,7 @@ export default class InstalledThemes {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
var json = atob(customLayout.data);
|
const json = atob(customLayout.data);
|
||||||
console.log("Found a theme:",json);
|
|
||||||
const layout = new LayoutConfig(
|
const layout = new LayoutConfig(
|
||||||
JSON.parse(json));
|
JSON.parse(json));
|
||||||
installedThemes.push({
|
installedThemes.push({
|
||||||
|
@ -54,4 +44,13 @@ export default class InstalledThemes {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]) {
|
||||||
|
for (const invalid of invalidThemes) {
|
||||||
|
console.error("Attempting to remove ", invalid)
|
||||||
|
osmConnection.GetLongPreference(
|
||||||
|
"installed-theme-" + invalid
|
||||||
|
).setData(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
1
State.ts
1
State.ts
|
@ -152,7 +152,6 @@ export default class State {
|
||||||
this.layoutToUse.data.defaultBackgroundId ?? AvailableBaseLayers.osmCarto.id,
|
this.layoutToUse.data.defaultBackgroundId ?? AvailableBaseLayers.osmCarto.id,
|
||||||
"The id of the background layer to start with")
|
"The id of the background layer to start with")
|
||||||
.map((selectedId: string) => {
|
.map((selectedId: string) => {
|
||||||
console.log("SELECTED ID", selectedId)
|
|
||||||
const available = self.availableBackgroundLayers.data;
|
const available = self.availableBackgroundLayers.data;
|
||||||
for (const layer of available) {
|
for (const layer of available) {
|
||||||
if (layer.id === selectedId) {
|
if (layer.id === selectedId) {
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
import {UIElement} from "../UI/UIElement";
|
import {UIElement} from "./UIElement";
|
||||||
import State from "../State";
|
import State from "../State";
|
||||||
import Translations from "../UI/i18n/Translations";
|
import Translations from "../UI/i18n/Translations";
|
||||||
import {UIEventSource} from "./UIEventSource";
|
|
||||||
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
|
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
|
||||||
import Combine from "../UI/Base/Combine";
|
import Combine from "../UI/Base/Combine";
|
||||||
import CheckBox from "../UI/Input/CheckBox";
|
import CheckBox from "../UI/Input/CheckBox";
|
||||||
import * as personal from "../assets/themes/personalLayout/personalLayout.json";
|
import * as personal from "../assets/themes/personalLayout/personalLayout.json";
|
||||||
import {SubtleButton} from "../UI/Base/SubtleButton";
|
import {SubtleButton} from "./Base/SubtleButton";
|
||||||
import {FixedUiElement} from "../UI/Base/FixedUiElement";
|
import {FixedUiElement} from "./Base/FixedUiElement";
|
||||||
import {Img} from "../UI/Img";
|
|
||||||
import Svg from "../Svg";
|
import Svg from "../Svg";
|
||||||
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
|
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
|
||||||
|
import {UIEventSource} from "../Logic/UIEventSource";
|
||||||
|
|
||||||
export class PersonalLayersPanel extends UIElement {
|
export class PersonalLayersPanel extends UIElement {
|
||||||
private checkboxes: UIElement[] = [];
|
private checkboxes: UIElement[] = [];
|
||||||
|
@ -22,7 +21,7 @@ export class PersonalLayersPanel extends UIElement {
|
||||||
this.UpdateView([]);
|
this.UpdateView([]);
|
||||||
const self = this;
|
const self = this;
|
||||||
State.state.installedThemes.addCallback(extraThemes => {
|
State.state.installedThemes.addCallback(extraThemes => {
|
||||||
self.UpdateView(extraThemes.map(layout => layout.layout.layoutConfig));
|
self.UpdateView(extraThemes.map(layout => layout.layout));
|
||||||
self.Update();
|
self.Update();
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -56,12 +55,12 @@ export class PersonalLayersPanel extends UIElement {
|
||||||
if (typeof layer === "string") {
|
if (typeof layer === "string") {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
let icon = layer.icon ?? Img.AsData(Svg.checkmark);
|
let icon :UIElement = layer.GenerateLeafletStyle(new UIEventSource<any>({id:"node/-1"}), false).icon.html
|
||||||
let iconUnset = layer.icon ?? "";
|
?? Svg.checkmark_svg();
|
||||||
if (layer.icon !== undefined && typeof (layer.icon) !== "string") {
|
let iconUnset =new FixedUiElement(icon.Render());
|
||||||
icon = layer.icon.GetRenderValue({"id": "node/-123456"}).txt ?? Img.AsData(Svg.checkmark)
|
icon.SetClass("single-layer-selection-toggle")
|
||||||
iconUnset = icon;
|
iconUnset.SetClass("single-layer-selection-toggle")
|
||||||
}
|
|
||||||
|
|
||||||
let name = layer.name ?? layer.id;
|
let name = layer.name ?? layer.id;
|
||||||
if (name === undefined) {
|
if (name === undefined) {
|
||||||
|
@ -74,15 +73,13 @@ export class PersonalLayersPanel extends UIElement {
|
||||||
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
|
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
|
||||||
])
|
])
|
||||||
|
|
||||||
const iconImage = `<img src="${icon}">`;
|
|
||||||
const iconUnsetImage = `<img src="${iconUnset}">`
|
|
||||||
|
|
||||||
const cb = new CheckBox(
|
const cb = new CheckBox(
|
||||||
new SubtleButton(
|
new SubtleButton(
|
||||||
new FixedUiElement(iconImage).SetStyle(""),
|
icon,
|
||||||
content),
|
content),
|
||||||
new SubtleButton(
|
new SubtleButton(
|
||||||
new FixedUiElement(iconUnsetImage).SetStyle("opacity:0.1;"),
|
iconUnset.SetStyle("opacity:0.1"),
|
||||||
new Combine(["<del>",
|
new Combine(["<del>",
|
||||||
content,
|
content,
|
||||||
"</del>"
|
"</del>"
|
||||||
|
|
Loading…
Reference in a new issue