Refactoring: LayoutToUse is a simple value now

This commit is contained in:
Pieter Vander Vennet 2021-09-28 18:00:44 +02:00
parent 41a2a79fe9
commit a78d33112b
22 changed files with 133 additions and 153 deletions

View file

@ -16,13 +16,13 @@ export default class Attribution extends Combine {
constructor(location: UIEventSource<Loc>,
userDetails: UIEventSource<UserDetails>,
layoutToUse: UIEventSource<LayoutConfig>,
layoutToUse: LayoutConfig,
currentBounds: UIEventSource<BBox>) {
const mapComplete = new Link(`Mapcomplete ${Constants.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
const reportBug = new Link(Svg.bug_ui().SetClass("small-image"), "https://github.com/pietervdvn/MapComplete/issues", true);
const layoutId = layoutToUse?.data?.id;
const layoutId = layoutToUse?.id;
const now = new Date()
// Note: getMonth is zero-index, we want 1-index but with one substracted, so it checks out!
const startDate = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate()

View file

@ -20,11 +20,11 @@ export default class AttributionPanel extends Combine {
private static LicenseObject = AttributionPanel.GenerateLicenses();
constructor(layoutToUse: UIEventSource<LayoutConfig>, contributions: UIEventSource<Map<string, number>>) {
constructor(layoutToUse: LayoutConfig, contributions: UIEventSource<Map<string, number>>) {
super([
Translations.t.general.attribution.attributionContent,
((layoutToUse.data.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.data.maintainer}),
layoutToUse.data.credits,
((layoutToUse.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.maintainer}),
layoutToUse.credits,
"<br/>",
new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.currentBounds),
"<br/>",
@ -65,7 +65,7 @@ export default class AttributionPanel extends Combine {
"<br/>",
AttributionPanel.CodeContributors(),
"<h3>", Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"), "</h3>",
...Utils.NoNull(Array.from(layoutToUse.data.ExtractImages()))
...Utils.NoNull(Array.from(layoutToUse.ExtractImages()))
.map(AttributionPanel.IconAttribution)
]);
this.SetClass("flex flex-col link-underline overflow-hidden")

View file

@ -26,7 +26,7 @@ export class DownloadPanel extends Toggle {
const t = Translations.t.general.download
const name = State.state.layoutToUse.data.id;
const name = State.state.layoutToUse.id;
const includeMetaToggle = new CheckBoxes([t.includeMetaData.Clone()])
const metaisIncluded = includeMetaToggle.GetValue().map(selected => selected.length > 0)

View file

@ -19,7 +19,7 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
const layoutToUse = State.state.layoutToUse.data;
const layoutToUse = State.state.layoutToUse;
super(
() => layoutToUse.title.Clone(),
() => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails, isShown),

View file

@ -126,7 +126,7 @@ export default class MoreScreen extends Combine {
if (layout.hideFromOverview) {
return undefined;
}
if (layout.id === State.state.layoutToUse.data?.id) {
if (layout.id === State.state.layoutToUse?.id) {
return undefined;
}

View file

@ -17,7 +17,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
export default class ShareScreen extends Combine {
constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) {
layout = layout ?? State.state?.layoutToUse?.data;
layout = layout ?? State.state?.layoutToUse;
layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
const tr = Translations.t.general.sharescreen;

View file

@ -2,21 +2,17 @@ import State from "../../State";
import Combine from "../Base/Combine";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
import {VariableUiElement} from "../Base/VariableUIElement";
import Toggle from "../Input/Toggle";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class ThemeIntroductionPanel extends VariableUiElement {
export default class ThemeIntroductionPanel extends Combine {
constructor(isShown: UIEventSource<boolean>) {
const layout = State.state.layoutToUse
const languagePicker =
new VariableUiElement(
State.state.layoutToUse.map(layout => LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone()))
)
;
const languagePicker = LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone())
const toTheMap = new SubtleButton(
undefined,
@ -53,8 +49,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
State.state.featureSwitchUserbadge
)
super(State.state.layoutToUse.map(layout => new Combine([
super([
layout.description.Clone(),
"<br/><br/>",
toTheMap,
@ -63,7 +58,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
"<br/>",
languagePicker,
...layout.CustomCodeSnippets()
])))
])
this.SetClass("link-underline")
}

View file

@ -47,7 +47,7 @@ export default class UserBadge extends Toggle {
});
const linkStyle = "flex items-baseline"
const languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
const languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.language) ?? new FixedUiElement(""))
.SetStyle("width:min-content;");
let messageSpan =

View file

@ -55,7 +55,7 @@ export class ImageUploadFlow extends Toggle {
const tags = tagsSource.data;
const layout = State.state?.layoutToUse?.data
const layout = State.state?.layoutToUse
let matchingLayer: LayerConfig = undefined
for (const layer of layout?.layers ?? []) {
if (layer.source.osmTags.matchesProperties(tags)) {

View file

@ -47,7 +47,7 @@ export class DropDown<T> extends InputElement<T> {
}
options = options ?? {}
options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200'
options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200 w-full'
{

View file

@ -39,7 +39,7 @@ export default class LocationInput extends InputElement<Loc> {
private readonly _maxSnapDistance: number
private readonly _snappedPointTags: any;
private readonly _bounds: UIEventSource<BBox>;
public readonly _matching_layer: UIEventSource<LayerConfig>;
public readonly _matching_layer: LayerConfig;
constructor(options: {
mapBackground?: UIEventSource<BaseLayer>,
@ -63,18 +63,17 @@ export default class LocationInput extends InputElement<Loc> {
if (self._snappedPointTags !== undefined) {
this._matching_layer = State.state.layoutToUse.map(layout => {
const layout = State.state.layoutToUse
for (const layer of layout.layers) {
if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
return layer
}
let matchingLayer = LocationInput.matchLayer
for (const layer of layout.layers) {
if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
matchingLayer = layer
}
console.error("No matching layer found for tags ", self._snappedPointTags)
return LocationInput.matchLayer
})
}
this._matching_layer = matchingLayer;
} else {
this._matching_layer = new UIEventSource<LayerConfig>(LocationInput.matchLayer)
this._matching_layer = LocationInput.matchLayer
}
this._snappedPoint = options.centerLocation.map(loc => {
@ -176,7 +175,7 @@ export default class LocationInput extends InputElement<Loc> {
enablePopups: false,
zoomToFeatures: false,
leafletMap: map.leafletMap,
layerToShow: this._matching_layer.data
layerToShow: this._matching_layer
})
}

View file

@ -316,10 +316,10 @@ export default class SpecialVisualizations {
const generateShareData = () => {
const title = state?.layoutToUse?.data?.title?.txt ?? "MapComplete";
const title = state?.layoutToUse?.title?.txt ?? "MapComplete";
let matchingLayer: LayerConfig = undefined;
for (const layer of (state?.layoutToUse?.data?.layers ?? [])) {
for (const layer of (state?.layoutToUse?.layers ?? [])) {
if (layer.source.osmTags.matchesProperties(tagSource?.data)) {
matchingLayer = layer
}
@ -337,7 +337,7 @@ export default class SpecialVisualizations {
return {
title: name,
url: url,
text: state?.layoutToUse?.data?.shortDescription?.txt ?? "MapComplete"
text: state?.layoutToUse?.shortDescription?.txt ?? "MapComplete"
}
}
@ -363,15 +363,14 @@ export default class SpecialVisualizations {
if (value === undefined) {
return undefined
}
const allUnits = [].concat(...state.layoutToUse.data.layers.map(lyr => lyr.units))
const allUnits = [].concat(...state.layoutToUse.layers.map(lyr => lyr.units))
const unit = allUnits.filter(unit => unit.isApplicableToKey(key))[0]
if (unit === undefined) {
return value;
}
return unit.asHumanLongValue(value);
},
[state.layoutToUse])
})
)
}
},
@ -410,7 +409,7 @@ There are also some technicalities in your theme to keep in mind:
A reference number to the original dataset is an excellen way to do this
`,
constr: (state, tagSource, args) => {
if (!state.layoutToUse.data.official && !state.featureSwitchIsTesting.data) {
if (!state.layoutToUse.official && !state.featureSwitchIsTesting.data) {
return new Combine([new FixedUiElement("The import button is disabled for unofficial themes to prevent accidents.").SetClass("alert"),
new FixedUiElement("To test, add 'test=true' to the URL. The changeset will be printed in the console. Please open a PR to officialize this theme to actually enable the import button.")])
}