mapcomplete/UI/Popup/FeatureInfoBox.ts

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

332 lines
13 KiB
TypeScript
Raw Normal View History

import { Store, UIEventSource } from "../../Logic/UIEventSource"
2020-10-27 01:01:34 +01:00
import EditableTagRendering from "./EditableTagRendering"
import QuestionBox from "./QuestionBox"
import Combine from "../Base/Combine"
import TagRenderingAnswer from "./TagRenderingAnswer"
2021-01-08 02:13:44 +01:00
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
import Constants from "../../Models/Constants"
import SharedTagRenderings from "../../Customizations/SharedTagRenderings"
2021-06-14 02:39:23 +02:00
import BaseUIElement from "../BaseUIElement"
2022-11-08 14:37:48 +01:00
import { VariableUiElement } from "../Base/VariableUIElement"
import DeleteWizard from "./DeleteWizard"
import SplitRoadWizard from "./SplitRoadWizard"
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
2022-11-08 14:37:48 +01:00
import { Utils } from "../../Utils"
import MoveWizard from "./MoveWizard"
import Toggle from "../Input/Toggle"
import Lazy from "../Base/Lazy"
2022-05-01 04:17:40 +02:00
import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"
2022-11-08 14:37:48 +01:00
import { Tag } from "../../Logic/Tags/Tag"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"
export default class FeatureInfoBox extends ScrollableFullScreen {
2021-06-14 02:39:23 +02:00
public constructor(
2020-10-27 01:01:34 +01:00
tags: UIEventSource<any>,
layerConfig: LayerConfig,
2022-05-01 04:17:40 +02:00
state: FeaturePipelineState,
2022-07-08 03:14:55 +02:00
options?: {
hashToShow?: string
isShown?: UIEventSource<boolean>
setHash?: true | boolean
}
) {
if (state === undefined) {
throw "State is undefined!"
}
const showAllQuestions = state.featureSwitchShowAllQuestions.map(
(fsShow) => fsShow || state.showAllQuestionsAtOnce.data,
[state.showAllQuestionsAtOnce]
)
super(
() => FeatureInfoBox.GenerateTitleBar(tags, layerConfig, state),
() => FeatureInfoBox.GenerateContent(tags, layerConfig, state, showAllQuestions),
2022-07-08 03:14:55 +02:00
options?.hashToShow ?? tags.data.id ?? "item",
options?.isShown,
options
2022-09-08 21:40:48 +02:00
)
2020-11-17 16:29:51 +01:00
if (layerConfig === undefined) {
throw "Undefined layerconfig"
2020-11-02 18:59:21 +01:00
}
2021-01-25 03:12:09 +01:00
}
2022-07-13 17:58:01 +02:00
public static GenerateTitleBar(
tags: UIEventSource<any>,
layerConfig: LayerConfig,
state: {}
): BaseUIElement {
const title = new TagRenderingAnswer(
tags,
layerConfig.title ?? new TagRenderingConfig("POI"),
state
).SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2 text-2xl")
2021-01-08 02:13:44 +01:00
const titleIcons = new Combine(
2022-04-06 19:16:55 +02:00
layerConfig.titleIcons.map((icon) => {
return new TagRenderingAnswer(
tags,
icon,
state,
2022-07-09 20:35:59 +02:00
"block h-8 max-h-8 align-baseline box-content sm:p-0.5 titleicon"
)
2022-09-08 21:40:48 +02:00
})
).SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2")
2021-01-25 03:12:09 +01:00
2021-01-25 04:21:22 +01:00
return new Combine([
new Combine([title, titleIcons]).SetClass(
"flex flex-col sm:flex-row flex-grow justify-between"
2022-09-08 21:40:48 +02:00
),
2021-01-25 03:12:09 +01:00
])
}
2022-07-13 17:58:01 +02:00
public static GenerateContent(
tags: UIEventSource<any>,
layerConfig: LayerConfig,
state: FeaturePipelineState,
showAllQuestions?: Store<boolean>
2022-12-16 13:45:07 +01:00
): BaseUIElement {
return new Toggle(
2022-12-16 13:45:07 +01:00
new Combine([
Svg.delete_icon_svg().SetClass("w-8 h-8"),
Translations.t.delete.isDeleted,
]).SetClass("flex justify-center font-bold items-center"),
FeatureInfoBox.GenerateMainContent(tags, layerConfig, state, showAllQuestions),
2022-12-16 13:45:07 +01:00
tags.map((t) => t["_deleted"] == "yes")
)
}
private static GenerateMainContent(
2022-07-13 17:58:01 +02:00
tags: UIEventSource<any>,
layerConfig: LayerConfig,
state: FeaturePipelineState,
showAllQuestions?: Store<boolean>
2022-05-01 04:17:40 +02:00
): BaseUIElement {
let questionBoxes: Map<string, QuestionBox> = new Map<string, QuestionBox>()
const t = Translations.t.general
const allGroupNames = Utils.Dedup(layerConfig.tagRenderings.map((tr) => tr.group))
if (state?.featureSwitchUserbadge?.data ?? true) {
const questionSpecs = layerConfig.tagRenderings.filter((tr) => tr.id === "questions")
2021-10-22 18:53:07 +02:00
for (const groupName of allGroupNames) {
const questions = layerConfig.tagRenderings.filter((tr) => tr.group === groupName)
const questionSpec = questionSpecs.filter((tr) => tr.group === groupName)[0]
const questionBox = new QuestionBox(state, {
tagsSource: tags,
tagRenderings: questions,
units: layerConfig.units,
showAllQuestionsAtOnce:
questionSpec?.freeform?.helperArgs["showAllQuestions"] ?? showAllQuestions,
})
2021-10-22 18:53:07 +02:00
questionBoxes.set(groupName, questionBox)
}
}
2022-11-08 14:37:48 +01:00
const withQuestion = layerConfig.tagRenderings.filter(
(tr) => tr.question !== undefined
).length
const allRenderings: BaseUIElement[] = [
new VariableUiElement(
2022-11-08 14:37:48 +01:00
tags
.map((data) => data[Tag.newlyCreated.key])
.map((isCreated) => {
if (isCreated === undefined) {
2022-11-08 14:37:48 +01:00
return undefined
}
const createdDate = new Date(isCreated)
const secondsSinceCreation = (Date.now() - createdDate.getTime()) / 1000
if (secondsSinceCreation >= 60 * 5) {
return undefined
}
2022-11-08 14:37:48 +01:00
const els = []
const thanks = new Combine([
Svg.party_svg().SetClass(
"w-12 h-12 shrink-0 p-1 m-1 bg-white rounded-full block"
),
t.newlyCreated,
]).SetClass("flex w-full thanks content-center")
2022-11-08 14:37:48 +01:00
els.push(thanks)
if (withQuestion > 0) {
els.push(t.feelFreeToSkip)
}
2022-11-08 14:37:48 +01:00
return new Combine(els).SetClass("pb-4 mb-4 border-b block border-black")
})
),
]
for (let i = 0; i < allGroupNames.length; i++) {
const groupName = allGroupNames[i]
const trs = layerConfig.tagRenderings.filter((tr) => tr.group === groupName)
2021-10-28 00:53:09 +02:00
const renderingsForGroup: (EditableTagRendering | BaseUIElement)[] = []
const innerClasses =
"block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2"
for (const tr of trs) {
if (tr.question === null || tr.id === "questions") {
// This is a question box!
const questionBox = questionBoxes.get(tr.group)
questionBoxes.delete(tr.group)
if (tr.render !== undefined) {
questionBox.SetClass("text-sm")
const renderedQuestion = new TagRenderingAnswer(
tags,
tr,
state,
2021-12-21 18:35:31 +01:00
tr.group + " questions",
"",
{
specialViz: new Map<string, BaseUIElement>([
["questions", questionBox],
]),
}
)
const possiblyHidden = new Toggle(
renderedQuestion,
undefined,
questionBox.restingQuestions.map((ls) => ls?.length > 0)
)
renderingsForGroup.push(possiblyHidden)
} else {
renderingsForGroup.push(questionBox)
}
} else {
2021-10-28 00:53:09 +02:00
let classes = innerClasses
2021-11-07 16:34:51 +01:00
let isHeader = renderingsForGroup.length === 0 && i > 0
if (isHeader) {
2021-10-28 00:53:09 +02:00
// This is the first element of a group!
// It should act as header and be sticky
2021-11-07 16:34:51 +01:00
classes = ""
2021-10-28 00:53:09 +02:00
}
2021-11-07 16:34:51 +01:00
const etr = new EditableTagRendering(tags, tr, layerConfig.units, state, {
2021-10-28 00:53:09 +02:00
innerElementClasses: innerClasses,
})
2021-11-07 16:34:51 +01:00
if (isHeader) {
2021-10-28 01:26:35 +02:00
etr.SetClass("sticky top-0")
}
renderingsForGroup.push(etr)
}
}
2021-11-07 16:34:51 +01:00
allRenderings.push(...renderingsForGroup)
}
allRenderings.push(
new Toggle(
new Lazy(() =>
FeatureInfoBox.createEditElements(questionBoxes, layerConfig, tags, state)
),
undefined,
state.featureSwitchUserbadge
)
2022-09-08 21:40:48 +02:00
)
return new Combine(allRenderings).SetClass("block")
}
/**
* All the edit elements, together (note that the question boxes are passed though)
* @param questionBoxes
* @param layerConfig
* @param tags
* @param state
* @private
*/
private static createEditElements(
questionBoxes: Map<string, QuestionBox>,
layerConfig: LayerConfig,
tags: UIEventSource<any>,
2022-05-01 04:17:40 +02:00
state: FeaturePipelineState
): BaseUIElement {
let editElements: BaseUIElement[] = []
2021-10-22 18:53:07 +02:00
questionBoxes.forEach((questionBox) => {
2021-07-28 15:14:13 +02:00
editElements.push(questionBox)
2021-10-22 18:53:07 +02:00
})
if (layerConfig.allowMove) {
editElements.push(
new VariableUiElement(
tags
.map((tags) => tags.id)
.map((id) => {
const feature = state.allElements.ContainingFeatures.get(id)
if (feature === undefined) {
return "This feature is not register in the state.allElements and cannot be moved"
}
return new MoveWizard(feature, state, layerConfig.allowMove)
})
2021-10-26 02:09:04 +02:00
).SetClass("text-base")
)
}
if (layerConfig.deletion) {
2021-07-28 15:14:13 +02:00
editElements.push(
new VariableUiElement(
tags
.map((tags) => tags.id)
.map((id) => new DeleteWizard(id, state, layerConfig.deletion))
2021-10-26 02:09:04 +02:00
).SetClass("text-base")
2022-09-08 21:40:48 +02:00
)
}
if (layerConfig.allowSplit) {
2021-07-28 15:14:13 +02:00
editElements.push(
new VariableUiElement(
tags.map((tags) => tags.id).map((id) => new SplitRoadWizard(id, state))
2021-10-26 02:09:04 +02:00
).SetClass("text-base")
2022-09-08 21:40:48 +02:00
)
}
2021-07-28 15:14:13 +02:00
editElements.push(
new VariableUiElement(
state.osmConnection.userDetails
.map((ud) => ud.csCount)
.map(
(csCount) => {
if (
csCount <= Constants.userJourney.historyLinkVisible &&
state.featureSwitchIsDebugging.data == false &&
state.featureSwitchIsTesting.data === false
) {
return undefined
}
return new TagRenderingAnswer(
tags,
SharedTagRenderings.SharedTagRendering.get("last_edit"),
state
)
},
[state.featureSwitchIsDebugging, state.featureSwitchIsTesting]
2022-09-08 21:40:48 +02:00
)
)
)
2021-07-28 15:14:13 +02:00
editElements.push(
2022-10-27 01:50:41 +02:00
Toggle.If(state.featureSwitchIsDebugging, () => {
const config_all_tags: TagRenderingConfig = new TagRenderingConfig(
2022-11-08 14:37:48 +01:00
{ render: "{all_tags()}" },
2022-10-27 01:50:41 +02:00
""
)
2022-10-27 01:50:41 +02:00
const config_download: TagRenderingConfig = new TagRenderingConfig(
2022-11-08 14:37:48 +01:00
{ render: "{export_as_geojson()}" },
2022-10-27 01:50:41 +02:00
""
)
const config_id: TagRenderingConfig = new TagRenderingConfig(
2022-11-08 14:37:48 +01:00
{ render: "{open_in_iD()}" },
2022-10-27 01:50:41 +02:00
""
)
return new Combine([
new TagRenderingAnswer(tags, config_all_tags, state),
new TagRenderingAnswer(tags, config_download, state),
new TagRenderingAnswer(tags, config_id, state),
"This is layer " + layerConfig.id,
])
})
)
return new Combine(editElements).SetClass("flex flex-col")
}
}