115 lines
4.9 KiB
TypeScript
115 lines
4.9 KiB
TypeScript
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 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}`)
|
|
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, 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()
|
|
}
|
|
|
|
} |