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

Refactoring: remove import flow, fix various issues, get PDF-export working (but not quite)

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-05 02:03:41 +02:00
parent 2149fc1a1d
commit f7eaec2243
36 changed files with 739 additions and 3930 deletions
Download patch file Download diff file Expand all files Collapse all files

46
UI/BigComponents/ExtraLinkButton.ts
View file

@ -1,31 +1,30 @@
import { UIElement } from "../UIElement"
import {UIElement} from "../UIElement"
import BaseUIElement from "../BaseUIElement"
import { UIEventSource } from "../../Logic/UIEventSource"
import {Store} from "../../Logic/UIEventSource"
import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig"
import Img from "../Base/Img"
import { SubtleButton } from "../Base/SubtleButton"
import {SubtleButton} from "../Base/SubtleButton"
import Toggle from "../Input/Toggle"
import Loc from "../../Models/Loc"
import Locale from "../i18n/Locale"
import { Utils } from "../../Utils"
import {Utils} from "../../Utils"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"
import { Translation } from "../i18n/Translation"
import {Translation} from "../i18n/Translation"
interface ExtraLinkButtonState {
layout: { id: string; title: Translation }
featureSwitches: { featureSwitchWelcomeMessage: Store<boolean> },
mapProperties: {
location: Store<{ lon: number, lat: number }>;
zoom: Store<number>
}
}
export default class ExtraLinkButton extends UIElement {
private readonly _config: ExtraLinkConfig
private readonly state: {
layoutToUse: { id: string; title: Translation }
featureSwitchWelcomeMessage: UIEventSource<boolean>
locationControl: UIEventSource<Loc>
}
private readonly state: ExtraLinkButtonState
constructor(
state: {
featureSwitchWelcomeMessage: UIEventSource<boolean>
locationControl: UIEventSource<Loc>
layoutToUse: { id: string; title: Translation }
},
state: ExtraLinkButtonState,
config: ExtraLinkConfig
) {
super()
@ -41,19 +40,18 @@ export default class ExtraLinkButton extends UIElement {
const c = this._config
const isIframe = window !== window.top
if (c.requirements?.has("iframe") && !isIframe) {
return undefined
}
if (c.requirements?.has("no-iframe") && isIframe) {
return undefined
return undefined
}
let link: BaseUIElement
const theme = this.state.layoutToUse?.id ?? ""
const theme = this.state.layout?.id ?? ""
const basepath = window.location.host
const href = this.state.locationControl.map((loc) => {
const href = this.state.mapProperties.location.map((loc) => {
const subs = {
...loc,
theme: theme,
@ -61,7 +59,7 @@ export default class ExtraLinkButton extends UIElement {
language: Locale.language.data,
}
return Utils.SubstituteKeys(c.href, subs)
})
}, [this.state.mapProperties.zoom])
let img: BaseUIElement = Svg.pop_out_ui()
if (c.icon !== undefined) {
@ -71,7 +69,7 @@ export default class ExtraLinkButton extends UIElement {
let text: Translation
if (c.text === undefined) {
text = Translations.t.general.screenToSmall.Subs({
theme: this.state.layoutToUse.title,
theme: this.state.layout.title,
})
} else {
text = c.text.Clone()
@ -83,11 +81,11 @@ export default class ExtraLinkButton extends UIElement {
})
if (c.requirements?.has("no-welcome-message")) {
link = new Toggle(undefined, link, this.state.featureSwitchWelcomeMessage)
link = new Toggle(undefined, link, this.state.featureSwitches.featureSwitchWelcomeMessage)
}
if (c.requirements?.has("welcome-message")) {
link = new Toggle(link, undefined, this.state.featureSwitchWelcomeMessage)
link = new Toggle(link, undefined, this.state.featureSwitches.featureSwitchWelcomeMessage)
}
return link

62
UI/BigComponents/LeftControls.ts
View file

@ -1,62 +0,0 @@
import Combine from "../Base/Combine"
import Toggle from "../Input/Toggle"
import MapControlButton from "../MapControlButton"
import Svg from "../../Svg"
import AllDownloads from "./AllDownloads"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Lazy from "../Base/Lazy"
import { VariableUiElement } from "../Base/VariableUIElement"
import { DefaultGuiState } from "../DefaultGuiState"
export default class LeftControls extends Combine {
constructor(state: FeaturePipelineState, guiState: DefaultGuiState) {
const currentViewFL = state.currentView?.layer
const currentViewAction = new Toggle(
new Lazy(() => {
const feature: Store<any> = state.currentView.features.map((ffs) => ffs[0])
const icon = new VariableUiElement(
feature.map((feature) => {
const defaultIcon = Svg.checkbox_empty_svg()
if (feature === undefined) {
return defaultIcon
}
const tags = { ...feature.properties, button: "yes" }
const elem = currentViewFL.layerDef.mapRendering[0]?.GetSimpleIcon(
new UIEventSource(tags)
)
if (elem === undefined) {
return defaultIcon
}
return elem
})
).SetClass("inline-block w-full h-full")
feature.map((feature) => {
if (feature === undefined) {
return undefined
}
const tagsSource = state.allElements.getEventSourceById(feature.properties.id)
return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, {
hashToShow: "currentview",
isShown: guiState.currentViewControlIsOpened,
})
})
return new MapControlButton(icon)
}).onClick(() => {
guiState.currentViewControlIsOpened.setData(true)
}),
undefined,
new UIEventSource<boolean>(
currentViewFL !== undefined && currentViewFL?.layerDef?.tagRenderings !== null
)
)
new AllDownloads(guiState.downloadControlIsOpened, state)
super([currentViewAction])
this.SetClass("flex flex-col")
}
}

27
UI/BigComponents/ShareScreen.ts
View file

@ -1,22 +1,19 @@
import { VariableUiElement } from "../Base/VariableUIElement"
import { Translation } from "../i18n/Translation"
import {VariableUiElement} from "../Base/VariableUIElement"
import {Translation} from "../i18n/Translation"
import Svg from "../../Svg"
import Combine from "../Base/Combine"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { Utils } from "../../Utils"
import {Store, UIEventSource} from "../../Logic/UIEventSource"
import {Utils} from "../../Utils"
import Translations from "../i18n/Translations"
import BaseUIElement from "../BaseUIElement"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import Loc from "../../Models/Loc"
import FilteredLayer from "../../Models/FilteredLayer"
import { InputElement } from "../Input/InputElement"
import { CheckBox } from "../Input/Checkboxes"
import { SubtleButton } from "../Base/SubtleButton"
import {InputElement} from "../Input/InputElement"
import {CheckBox} from "../Input/Checkboxes"
import {SubtleButton} from "../Base/SubtleButton"
import LZString from "lz-string"
import { SpecialVisualizationState } from "../SpecialVisualization"
import {SpecialVisualizationState} from "../SpecialVisualization"
export default class ShareScreen extends Combine {
class ShareScreen extends Combine{
constructor(state: SpecialVisualizationState) {
const layout = state?.layout
const tr = Translations.t.general.sharescreen
@ -63,7 +60,7 @@ export default class ShareScreen extends Combine {
return "layer-" + flayer.layerDef.id + "=" + flayer.isDisplayed.data
}
const currentLayer: Store<{ id: string; name: string } | undefined> =
const currentLayer: Store<{ id: string; name: string | Record<string, string> } | undefined> =
state.mapProperties.rasterLayer.map((l) => l?.properties)
const currentBackground = new VariableUiElement(
currentLayer.map((layer) => {
@ -93,13 +90,13 @@ export default class ShareScreen extends Combine {
(includeLayerSelection) => {
if (includeLayerSelection) {
return Utils.NoNull(
state.layerState.filteredLayers.map(fLayerToParam)
Array.from( state.layerState.filteredLayers.values()).map(fLayerToParam)
).join("&")
} else {
return null
}
},
state.filteredLayers.data.map((flayer) => flayer.isDisplayed)
Array.from(state.layerState.filteredLayers.values()).map((flayer) => flayer.isDisplayed)
)
)

88
UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -1,88 +0,0 @@
import Combine from "../Base/Combine"
import LanguagePicker from "../LanguagePicker"
import Translations from "../i18n/Translations"
import Toggle from "../Input/Toggle"
import { SubtleButton } from "../Base/SubtleButton"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { LoginToggle } from "../Popup/LoginButton"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import LoggedInUserIndicator from "../LoggedInUserIndicator"
import { BBox } from "../../Logic/BBox"
import Loc from "../../Models/Loc"
import { DefaultGuiState } from "../DefaultGuiState"
export default class ThemeIntroductionPanel extends Combine {
constructor(
isShown: UIEventSource<boolean>,
currentTab: UIEventSource<number>,
state: {
featureSwitchMoreQuests: UIEventSource<boolean>
featureSwitchAddNew: UIEventSource<boolean>
featureSwitchUserbadge: UIEventSource<boolean>
layoutToUse: LayoutConfig
osmConnection: OsmConnection
currentBounds: Store<BBox>
locationControl: UIEventSource<Loc>
defaultGuiState: DefaultGuiState
},
guistate?: { userInfoIsOpened: UIEventSource<boolean> }
) {
const t = Translations.t.general
const layout = state.layoutToUse
const languagePicker = new LanguagePicker(layout.language, t.pickLanguage.Clone())
const toTheMap = new SubtleButton(
undefined,
t.openTheMap.Clone().SetClass("text-xl font-bold w-full text-center")
)
.onClick(() => {
isShown.setData(false)
})
.SetClass("only-on-mobile")
const loggedInUserInfo = new LoggedInUserIndicator(state.osmConnection, {
firstLine: Translations.t.general.welcomeBack.Clone(),
})
if (guistate?.userInfoIsOpened) {
loggedInUserInfo.onClick(() => {
guistate.userInfoIsOpened.setData(true)
})
}
const loginStatus = new Toggle(
new LoginToggle(
loggedInUserInfo,
new Combine([
Translations.t.general.loginWithOpenStreetMap.SetClass("text-xl font-bold"),
Translations.t.general.loginOnlyNeededToEdit.Clone().SetClass("font-bold"),
]).SetClass("flex flex-col"),
state
),
undefined,
state.featureSwitchUserbadge
)
const hasPresets = layout.layers.some((l) => l.presets?.length > 0)
super([
layout.description.Clone().SetClass("block mb-4"),
new Combine([
t.welcomeExplanation.general,
hasPresets
? Toggle.If(state.featureSwitchAddNew, () => t.welcomeExplanation.addNew)
: undefined,
]).SetClass("flex flex-col mt-2"),
toTheMap,
loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
layout.descriptionTail?.Clone().SetClass("block mt-4"),
languagePicker?.SetClass("block mt-4 pb-8 border-b-2 border-dotted border-gray-400"),
...layout.CustomCodeSnippets(),
])
this.SetClass("link-underline")
}
}

68
UI/BigComponents/UserInformation.ts
View file

@ -1,68 +0,0 @@
import Translations from "../i18n/Translations"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import Combine from "../Base/Combine"
import { SubtleButton } from "../Base/SubtleButton"
import Svg from "../../Svg"
import { VariableUiElement } from "../Base/VariableUIElement"
import Img from "../Base/Img"
import { FixedUiElement } from "../Base/FixedUiElement"
import Link from "../Base/Link"
import { UIEventSource } from "../../Logic/UIEventSource"
import Loc from "../../Models/Loc"
import BaseUIElement from "../BaseUIElement"
import Showdown from "showdown"
import LanguagePicker from "../LanguagePicker"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import Constants from "../../Models/Constants"
export class ImportViewerLinks extends VariableUiElement {
constructor(osmConnection: OsmConnection) {
super(
osmConnection.userDetails.map((ud) => {
if (ud.csCount < Constants.userJourney.importHelperUnlock) {
return undefined
}
return new Combine([
new SubtleButton(undefined, Translations.t.importHelper.title, {
url: "import_helper.html",
}),
new SubtleButton(Svg.note_svg(), Translations.t.importInspector.title, {
url: "import_viewer.html",
}),
])
})
)
}
}
class UserInformationMainPanel extends VariableUiElement {
private readonly settings: UIEventSource<Record<string, BaseUIElement>>
private readonly userInfoFocusedQuestion?: UIEventSource<string>
constructor(
osmConnection: OsmConnection,
locationControl: UIEventSource<Loc>,
layout: LayoutConfig,
isOpened: UIEventSource<boolean>,
userInfoFocusedQuestion?: UIEventSource<string>
) {
const settings = new UIEventSource<Record<string, BaseUIElement>>({})
super()
this.settings = settings
this.userInfoFocusedQuestion = userInfoFocusedQuestion
const self = this
userInfoFocusedQuestion.addCallbackD((_) => {
self.focusOnSelectedQuestion()
})
}
public focusOnSelectedQuestion() {
const focusedId = this.userInfoFocusedQuestion.data
console.log("Focusing on", focusedId, this.settings.data[focusedId])
if (focusedId === undefined) {
return
}
this.settings.data[focusedId]?.ScrollIntoView()
}
}