Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Huge refactoring of state and initial UI setup

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-15 05:20:02 +02:00
parent 4e43673de5
commit eff6b5bfad
37 changed files with 5232 additions and 4907 deletions
Download patch file Download diff file Expand all files Collapse all files

93
UI/BigComponents/MoreScreen.ts
View file

@ -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();