mapcomplete/UI/ProfessionalGui.ts

112 lines
No EOL
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")