forked from MapComplete/MapComplete
102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import { FixedUiElement } from "./Base/FixedUiElement"
|
|
import Translations from "./i18n/Translations"
|
|
import Combine from "./Base/Combine"
|
|
import Title from "./Base/Title"
|
|
import Toggleable, { Accordeon } from "./Base/Toggleable"
|
|
import List from "./Base/List"
|
|
import BaseUIElement from "./BaseUIElement"
|
|
import LanguagePicker from "./LanguagePicker"
|
|
import TableOfContents from "./Base/TableOfContents"
|
|
import LeftIndex from "./Base/LeftIndex"
|
|
|
|
class Snippet extends Toggleable {
|
|
constructor(translations, ...extraContent: BaseUIElement[]) {
|
|
super(new Title(translations.title, 3), new SnippetContent(translations, ...extraContent))
|
|
}
|
|
}
|
|
|
|
class SnippetContent extends Combine {
|
|
constructor(translations: any, ...extras: BaseUIElement[]) {
|
|
super([
|
|
translations.intro,
|
|
new List([
|
|
translations.li0,
|
|
translations.li1,
|
|
translations.li2,
|
|
translations.li3,
|
|
translations.li4,
|
|
translations.li5,
|
|
translations.li6,
|
|
]),
|
|
translations.outro,
|
|
...extras,
|
|
])
|
|
this.SetClass("flex flex-col")
|
|
}
|
|
}
|
|
|
|
class ProfessionalGui extends LeftIndex {
|
|
constructor() {
|
|
const t = Translations.t.professional
|
|
|
|
const header = new Combine([
|
|
new FixedUiElement(
|
|
`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`
|
|
).SetClass("flex-none m-3"),
|
|
new Combine([new Title(t.title, 1), t.intro]).SetClass("flex flex-col"),
|
|
]).SetClass("flex")
|
|
|
|
const content = new Combine([
|
|
header,
|
|
new Title(t.osmTitle, 2),
|
|
t.text0,
|
|
t.text1,
|
|
new Accordeon([
|
|
new Snippet(t.aboutOsm.aboutOsm),
|
|
new Snippet(t.aboutOsm.benefits),
|
|
new Snippet(t.aboutOsm.license),
|
|
new Snippet(t.aboutOsm.vandalism),
|
|
]).SetClass("flex flex-col"),
|
|
|
|
new Title(t.aboutMc.title, 2),
|
|
t.aboutMc.text0,
|
|
t.aboutMc.text1,
|
|
t.aboutMc.text2,
|
|
new Accordeon([
|
|
new Snippet(t.aboutMc.layers),
|
|
new Snippet(t.aboutMc.survey),
|
|
new Snippet(t.aboutMc.internalUse),
|
|
new Snippet(t.services),
|
|
]),
|
|
new Title(t.drawbacks.title, 2).SetClass("text-2xl"),
|
|
t.drawbacks.intro,
|
|
new Accordeon([
|
|
new Snippet(t.drawbacks.unsuitedData),
|
|
new Snippet(
|
|
t.drawbacks.licenseNuances,
|
|
new Title(t.drawbacks.licenseNuances.usecaseMapDifferentSources.title, 4),
|
|
new SnippetContent(t.drawbacks.licenseNuances.usecaseMapDifferentSources),
|
|
new Title(t.drawbacks.licenseNuances.usecaseGatheringOpenData.title, 4),
|
|
new SnippetContent(t.drawbacks.licenseNuances.usecaseGatheringOpenData)
|
|
),
|
|
]),
|
|
]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
|
|
|
|
const leftContents: BaseUIElement[] = [
|
|
new TableOfContents(content, {
|
|
noTopLevel: true,
|
|
maxDepth: 2,
|
|
}).SetClass("subtle"),
|
|
|
|
new LanguagePicker(
|
|
Translations.t.professional.title.SupportedLanguages(),
|
|
""
|
|
)?.SetClass("mt-4 self-end flex-col"),
|
|
].map((el) => el?.SetClass("pl-4"))
|
|
|
|
super(leftContents, content)
|
|
}
|
|
}
|
|
|
|
new FixedUiElement("").AttachTo("decoration-desktop")
|
|
new ProfessionalGui().AttachTo("main")
|