forked from MapComplete/MapComplete
Huge refactoring of state and initial UI setup
This commit is contained in:
parent
4e43673de5
commit
eff6b5bfad
37 changed files with 5232 additions and 4907 deletions
|
@ -1,7 +1,6 @@
|
|||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {AllKnownLayouts} from "../../Customizations/AllKnownLayouts";
|
||||
import Svg from "../../Svg";
|
||||
import State from "../../State";
|
||||
import Combine from "../Base/Combine";
|
||||
import {SubtleButton} from "../Base/SubtleButton";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
@ -11,15 +10,21 @@ import LanguagePicker from "../LanguagePicker";
|
|||
import IndexText from "./IndexText";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Loc from "../../Models/Loc";
|
||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import UserRelatedState from "../../Logic/State/UserRelatedState";
|
||||
import Toggle from "../Input/Toggle";
|
||||
import {Utils} from "../../Utils";
|
||||
import Title from "../Base/Title";
|
||||
|
||||
export default class MoreScreen extends Combine {
|
||||
|
||||
|
||||
constructor(onMainScreen: boolean = false) {
|
||||
super(MoreScreen.Init(onMainScreen, State.state));
|
||||
}
|
||||
|
||||
private static Init(onMainScreen: boolean, state: State): BaseUIElement [] {
|
||||
constructor(state: UserRelatedState & {
|
||||
locationControl?: UIEventSource<Loc>,
|
||||
layoutToUse?: LayoutConfig
|
||||
}, onMainScreen: boolean = false) {
|
||||
const tr = Translations.t.general.morescreen;
|
||||
let intro: BaseUIElement = tr.intro.Clone();
|
||||
let themeButtonStyle = ""
|
||||
|
@ -35,30 +40,59 @@ export default class MoreScreen extends Combine {
|
|||
themeListStyle = "md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-g4 gap-4"
|
||||
}
|
||||
|
||||
return [
|
||||
super([
|
||||
intro,
|
||||
MoreScreen.createOfficialThemesList(state, themeButtonStyle).SetClass(themeListStyle),
|
||||
MoreScreen.createUnofficialThemeList(themeButtonStyle)?.SetClass(themeListStyle),
|
||||
MoreScreen.createPreviouslyVistedHiddenList(state, themeButtonStyle).SetClass(themeListStyle),
|
||||
MoreScreen.createUnofficialThemeList(themeButtonStyle, state)?.SetClass(themeListStyle),
|
||||
tr.streetcomplete.Clone().SetClass("block text-base mx-10 my-3 mb-10")
|
||||
];
|
||||
]);
|
||||
}
|
||||
|
||||
private static createUnofficialThemeList(buttonClass: string): BaseUIElement {
|
||||
return new VariableUiElement(State.state.installedThemes.map(customThemes => {
|
||||
|
||||
private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState): BaseUIElement {
|
||||
return new VariableUiElement(state.installedThemes.map(customThemes => {
|
||||
const els: BaseUIElement[] = []
|
||||
if (customThemes.length > 0) {
|
||||
els.push(Translations.t.general.customThemeIntro.Clone())
|
||||
|
||||
const customThemesElement = new Combine(
|
||||
customThemes.map(theme => MoreScreen.createLinkButton(theme.layout, theme.definition)?.SetClass(buttonClass))
|
||||
customThemes.map(theme => MoreScreen.createLinkButton(state, theme.layout, theme.definition)?.SetClass(buttonClass))
|
||||
)
|
||||
els.push(customThemesElement)
|
||||
}
|
||||
return els;
|
||||
}));
|
||||
}
|
||||
|
||||
private static createPreviouslyVistedHiddenList(state: UserRelatedState, buttonClass: string){
|
||||
const t= Translations.t.general.morescreen
|
||||
return new Toggle(
|
||||
new Combine([
|
||||
new Title(t.previouslyHiddenTitle.Clone()),
|
||||
t.hiddenExplanation,
|
||||
|
||||
|
||||
new VariableUiElement(
|
||||
state.osmConnection.preferencesHandler.preferences.map(allPreferences => {
|
||||
const knownThemes = Utils.NoNull( Object.keys(allPreferences).filter(key => key.startsWith("hidden-theme-"))
|
||||
.map(key => key.substr("hidden-theme-".length, key.length - "-enabled".length))
|
||||
.map(theme => AllKnownLayouts.allKnownLayouts.get(theme) ))
|
||||
return new Combine(knownThemes.map(layout =>
|
||||
MoreScreen.createLinkButton(state, layout ).SetClass(buttonClass)
|
||||
))
|
||||
|
||||
})
|
||||
|
||||
)]).SetClass("flex flex-col"),
|
||||
undefined,
|
||||
state.osmConnection.isLoggedIn
|
||||
)
|
||||
|
||||
|
||||
private static createOfficialThemesList(state: State, buttonClass: string): BaseUIElement {
|
||||
}
|
||||
|
||||
private static createOfficialThemesList(state: { osmConnection: OsmConnection, locationControl?: UIEventSource<Loc> }, buttonClass: string): BaseUIElement {
|
||||
let officialThemes = AllKnownLayouts.layoutsList
|
||||
|
||||
let buttons = officialThemes.map((layout) => {
|
||||
|
@ -66,10 +100,10 @@ export default class MoreScreen extends Combine {
|
|||
console.trace("Layout is undefined")
|
||||
return undefined
|
||||
}
|
||||
const button = MoreScreen.createLinkButton(layout)?.SetClass(buttonClass);
|
||||
const button = MoreScreen.createLinkButton(state, layout)?.SetClass(buttonClass);
|
||||
if (layout.id === personal.id) {
|
||||
return new VariableUiElement(
|
||||
State.state.osmConnection.userDetails.map(userdetails => userdetails.csCount)
|
||||
state.osmConnection.userDetails.map(userdetails => userdetails.csCount)
|
||||
.map(csCount => {
|
||||
if (csCount < Constants.userJourney.personalLayoutUnlock) {
|
||||
return undefined
|
||||
|
@ -91,7 +125,7 @@ export default class MoreScreen extends Combine {
|
|||
/*
|
||||
* Returns either a link to the issue tracker or a link to the custom generator, depending on the achieved number of changesets
|
||||
* */
|
||||
private static createCustomGeneratorButton(state: State): VariableUiElement {
|
||||
private static createCustomGeneratorButton(state: { osmConnection: OsmConnection }): VariableUiElement {
|
||||
const tr = Translations.t.general.morescreen;
|
||||
return new VariableUiElement(
|
||||
state.osmConnection.userDetails.map(userDetails => {
|
||||
|
@ -111,13 +145,22 @@ export default class MoreScreen extends Combine {
|
|||
|
||||
/**
|
||||
* Creates a button linking to the given theme
|
||||
* @param layout
|
||||
* @param customThemeDefinition
|
||||
* @private
|
||||
*/
|
||||
private static createLinkButton(layout: LayoutConfig, customThemeDefinition: string = undefined): BaseUIElement {
|
||||
if (layout === undefined) {
|
||||
return undefined;
|
||||
private static createLinkButton(
|
||||
state: {
|
||||
locationControl?: UIEventSource<Loc>,
|
||||
layoutToUse?: LayoutConfig
|
||||
}, layout: LayoutConfig, customThemeDefinition: string = undefined
|
||||
):
|
||||
BaseUIElement {
|
||||
if (layout
|
||||
|
||||
===
|
||||
undefined
|
||||
) {
|
||||
return
|
||||
undefined;
|
||||
}
|
||||
if (layout.id === undefined) {
|
||||
console.error("ID is undefined for layout", layout);
|
||||
|
@ -126,11 +169,11 @@ export default class MoreScreen extends Combine {
|
|||
if (layout.hideFromOverview) {
|
||||
return undefined;
|
||||
}
|
||||
if (layout.id === State.state.layoutToUse?.id) {
|
||||
if (layout.id === state?.layoutToUse?.id) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const currentLocation = State.state.locationControl;
|
||||
const currentLocation = state?.locationControl;
|
||||
|
||||
let path = window.location.pathname;
|
||||
// Path starts with a '/' and contains everything, e.g. '/dir/dir/page.html'
|
||||
|
@ -151,7 +194,7 @@ export default class MoreScreen extends Combine {
|
|||
linkSuffix = `#${customThemeDefinition}`
|
||||
}
|
||||
|
||||
const linkText = currentLocation.map(currentLocation => {
|
||||
const linkText = currentLocation?.map(currentLocation => {
|
||||
const params = [
|
||||
["z", currentLocation?.zoom],
|
||||
["lat", currentLocation?.lat],
|
||||
|
@ -160,7 +203,7 @@ export default class MoreScreen extends Combine {
|
|||
.map(part => part[0] + "=" + part[1])
|
||||
.join("&")
|
||||
return `${linkPrefix}${params}${linkSuffix}`;
|
||||
})
|
||||
}) ?? new UIEventSource<string>(`${linkPrefix}${linkSuffix}`)
|
||||
|
||||
|
||||
let description = Translations.WT(layout.shortDescription).Clone();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue