Fixing too many bugs, cleaning up some old parts of the code

2020-09-03 16:44:48 +02:00 · 2020-09-03 16:44:48 +02:00 · 00a6611e1f
commit 00a6611e1f
parent 3d05999f85
21 changed files with 706 additions and 436 deletions
--- a/UI/CustomGenerator/CustomGeneratorPanel.ts
+++ b/UI/CustomGenerator/CustomGeneratorPanel.ts
@ -0,0 +1,115 @@
+import {UIElement} from "../UIElement";
+import {OsmConnection, UserDetails} from "../../Logic/Osm/OsmConnection";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import SingleSetting from "./SingleSetting";
+import GeneralSettings from "./GeneralSettings";
+import Combine from "../Base/Combine";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {TabbedComponent} from "../Base/TabbedComponent";
+import PageSplit from "../Base/PageSplit";
+import HelpText from "../../Customizations/HelpText";
+import AllLayersPanel from "./AllLayersPanel";
+import SharePanel from "./SharePanel";
+import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson";
+import {SubtleButton} from "../Base/SubtleButton";
+import {State} from "../../State";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import SavePanel from "./SavePanel";
+import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
+
+
+export default class CustomGeneratorPanel extends UIElement {
+    private mainPanel: UIElement;
+    private loginButton: UIElement;
+
+    private connection: OsmConnection;
+
+    constructor(connection: OsmConnection, layout: LayoutConfigJson) {
+        super(connection.userDetails);
+        this.connection = connection;
+        this.SetClass("main-tabs");
+        this.loginButton = new SubtleButton("", "Login to create a custom theme").onClick(() => connection.AttemptLogin())
+        const self = this;
+        self.mainPanel = new FixedUiElement("Attempting to log in...");
+        connection.OnLoggedIn(userDetails => {
+            self.InitMainPanel(layout, userDetails, connection);
+            self.Update();
+        })
+    }
+
+    private InitMainPanel(layout: LayoutConfigJson, userDetails: UserDetails, connection: OsmConnection) {
+        const es = new UIEventSource(layout);
+        const encoded = es.map(config => btoa(JSON.stringify(config)));
+        encoded.addCallback(encoded => LocalStorageSource.Get("\"last-custom-theme\""))
+        const liveUrl = encoded.map(encoded => `./index.html?userlayout=${es.data.id}#${encoded}`)
+        const iframe = liveUrl.map(url => `<iframe src='${url}' width='100%' height='99%' style="box-sizing: border-box" title='Theme Preview'></iframe>`);
+        const currentSetting = new UIEventSource<SingleSetting<any>>(undefined)
+        const generalSettings = new GeneralSettings(es, currentSetting);
+        const languages = generalSettings.languages;
+
+        const chronic = UIEventSource.Chronic(120 * 1000)
+            .map(date => {
+                if (es.data.id == undefined) {
+                    return undefined
+                }
+                if (es.data.id === "") {
+                    return undefined;
+                }
+                const pref = connection.GetLongPreference("installed-theme-" + es.data.id);
+                pref.setData(encoded.data);
+                return date;
+            });
+
+        const preview = new Combine([
+            new VariableUiElement(iframe.stabilized(2500))
+        ]).SetClass("preview")
+        this.mainPanel = new TabbedComponent([
+            {
+                header: "<img src='./assets/gear.svg'>",
+                content:
+                    new PageSplit(
+                        generalSettings.SetStyle("width: 50vw;"),
+                        new Combine([
+                            new HelpText(currentSetting).SetStyle("height:calc(100% - 65vh); width: 100%; display:block; overflow-y: auto"),
+                            preview.SetStyle("height:65vh; width:100%; display:block")
+                        ]).SetStyle("position:relative; width: 50%;")
+                    )
+            },
+            {
+                header: "<img src='./assets/layers.svg'>",
+                content: new AllLayersPanel(es, languages, userDetails)
+            },
+            {
+                header: "<img src='./assets/floppy.svg'>",
+                content: new SavePanel(this.connection, es, chronic)
+
+            },
+            {
+                header: "<img src='./assets/share.svg'>",
+                content: new SharePanel(es, liveUrl)
+            }
+        ])
+    }
+
+
+    InnerRender(): string {
+        const ud = this.connection.userDetails.data;
+        if (!ud.loggedIn) {
+            return new Combine([
+                "<h3>Not Logged in</h3>",
+                "You need to be logged in in order to create a custom theme",
+                this.loginButton
+            ]).Render();
+        }
+        if (ud.csCount <= State.userJourney.themeGeneratorReadOnlyUnlock) {
+            return new Combine([
+                "<h3>Too little experience/h3>",
+                `Creating your own (readonly) themes can only be done if you have more then <b>${State.userJourney.themeGeneratorReadOnlyUnlock}</b> changesets made`,
+                `Making a theme including survey options can be done at <b>${State.userJourney.themeGeneratorFullUnlock}</b> changesets`,
+                this.loginButton
+            ]).Render();
+        }
+        return this.mainPanel.Render()
+    }
+
+}