mapcomplete/UI/CustomGenerator/CustomGeneratorPanel.ts

116 lines
5 KiB
TypeScript
Raw Normal View History

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 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";
2020-09-17 14:24:36 +02:00
import HelpText from "./HelpText";
export default class CustomGeneratorPanel extends UIElement {
private mainPanel: UIElement;
private loginButton: UIElement;
private readonly 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}`)
2020-09-17 13:13:02 +02:00
const testUrl = encoded.map(encoded => `./index.html?test=true&userlayout=${es.data.id}#${encoded}`)
const iframe = testUrl.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)
]).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, userDetails)
}
])
}
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()
}
}