From d638237e380009767fef90aec1e50b1b383ceadd Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 19 Nov 2023 01:05:15 +0100 Subject: [PATCH] Rewrite index page in svelte, rewrite language picker in Svelte, fix #1612 --- public/css/index-tailwind-output.css | 165 ++++++---------------- src/Logic/Osm/OsmConnection.ts | 11 +- src/Logic/State/UserRelatedState.ts | 6 +- src/Models/RasterLayers.ts | 19 +-- src/UI/AllThemesGui.svelte | 74 ++++++++++ src/UI/AllThemesGui.ts | 69 --------- src/UI/Base/Dropdown.svelte | 33 +++-- src/UI/BigComponents/IndexText.ts | 20 +-- src/UI/InputElement/LanguagePicker.svelte | 67 +++++++++ src/UI/LanguagePicker.ts | 67 --------- src/UI/SpecialVisualizations.ts | 10 +- src/UI/Test.svelte | 21 ++- src/UI/ThemeViewGUI.svelte | 6 +- src/UI/i18n/Locale.ts | 4 + src/all_themes_index.ts | 5 +- src/test.ts | 21 +-- 16 files changed, 265 insertions(+), 333 deletions(-) create mode 100644 src/UI/AllThemesGui.svelte delete mode 100644 src/UI/AllThemesGui.ts create mode 100644 src/UI/InputElement/LanguagePicker.svelte delete mode 100644 src/UI/LanguagePicker.ts diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 6839e5b62..3d49a619b 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -725,14 +725,6 @@ video { left: 0px; } -.top-2 { - top: 0.5rem; -} - -.right-3 { - right: 0.75rem; -} - .bottom-0 { bottom: 0px; } @@ -777,18 +769,22 @@ video { margin: 2rem; } -.m-5 { - margin: 1.25rem; +.m-4 { + margin: 1rem; +} + +.m-3 { + margin: 0.75rem; +} + +.m-0 { + margin: 0px; } .m-2 { margin: 0.5rem; } -.m-4 { - margin: 1rem; -} - .m-1 { margin: 0.25rem; } @@ -797,14 +793,6 @@ video { margin: 0.125rem; } -.m-0 { - margin: 0px; -} - -.m-3 { - margin: 0.75rem; -} - .m-6 { margin: 1.5rem; } @@ -823,16 +811,16 @@ video { margin-bottom: 0.25rem; } -.mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - .my-4 { margin-top: 1rem; margin-bottom: 1rem; } +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -853,14 +841,22 @@ video { margin-right: 3rem; } -.mr-2 { - margin-right: 0.5rem; +.mt-4 { + margin-top: 1rem; } .mr-4 { margin-right: 1rem; } +.mr-2 { + margin-right: 0.5rem; +} + +.mb-16 { + margin-bottom: 4rem; +} + .mr-6 { margin-right: 1.5rem; } @@ -897,10 +893,6 @@ video { margin-top: 0.5rem; } -.mt-4 { - margin-top: 1rem; -} - .mb-2 { margin-bottom: 0.5rem; } @@ -917,10 +909,6 @@ video { margin-left: 1rem; } -.mt-3 { - margin-top: 0.75rem; -} - .mb-10 { margin-bottom: 2.5rem; } @@ -1058,24 +1046,24 @@ video { height: 2rem; } -.h-16 { - height: 4rem; +.h-12 { + height: 3rem; } .h-6 { height: 1.5rem; } -.h-12 { - height: 3rem; -} - .h-fit { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } +.h-16 { + height: 4rem; +} + .h-4 { height: 1rem; } @@ -1152,16 +1140,16 @@ video { width: 2rem; } -.w-16 { - width: 4rem; +.w-12 { + width: 3rem; } .w-6 { width: 1.5rem; } -.w-12 { - width: 3rem; +.w-16 { + width: 4rem; } .w-screen { @@ -1809,6 +1797,11 @@ video { line-height: 1.75rem; } +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1829,20 +1822,11 @@ video { line-height: 1.25rem; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } -.font-bold { - font-weight: 700; -} - .font-extrabold { font-weight: 800; } @@ -1851,6 +1835,10 @@ video { font-weight: 600; } +.font-bold { + font-weight: 700; +} + .font-normal { font-weight: 400; } @@ -1927,21 +1915,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-gray-800 { - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } @@ -2753,11 +2726,6 @@ a.link-underline { margin-right: 0.25rem; } - .sm\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .sm\:mt-2 { margin-top: 0.5rem; } @@ -2766,10 +2734,6 @@ a.link-underline { margin-right: 0.25rem; } - .sm\:mt-5 { - margin-top: 1.25rem; - } - .sm\:mr-4 { margin-right: 1rem; } @@ -2790,10 +2754,6 @@ a.link-underline { width: 6rem; } - .sm\:max-w-xl { - max-width: 36rem; - } - .sm\:flex-nowrap { flex-wrap: nowrap; } @@ -2822,15 +2782,6 @@ a.link-underline { padding-top: 0.25rem; } - .sm\:text-center { - text-align: center; - } - - .sm\:text-5xl { - font-size: 3rem; - line-height: 1; - } - .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -2842,25 +2793,17 @@ a.link-underline { margin: 0.25rem; } - .md\:m-2 { - margin: 0.5rem; - } - .md\:mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } - .md\:mr-2 { - margin-right: 0.5rem; - } - .md\:mt-5 { margin-top: 1.25rem; } - .md\:mt-4 { - margin-top: 1rem; + .md\:mr-2 { + margin-right: 0.5rem; } .md\:grid { @@ -2932,14 +2875,6 @@ a.link-underline { margin-right: 0px; } - .lg\:ml-40 { - margin-left: 10rem; - } - - .lg\:w-3\/4 { - width: 75%; - } - .lg\:w-5\/12 { width: 41.666667%; } @@ -2951,17 +2886,9 @@ a.link-underline { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } - - .lg\:text-left { - text-align: left; - } } @media (min-width: 1280px) { - .xl\:inline { - display: inline; - } - .xl\:w-4\/12 { width: 33.333333%; } diff --git a/src/Logic/Osm/OsmConnection.ts b/src/Logic/Osm/OsmConnection.ts index f33f2df04..b6ed467b2 100644 --- a/src/Logic/Osm/OsmConnection.ts +++ b/src/Logic/Osm/OsmConnection.ts @@ -21,6 +21,7 @@ export default class UserDetails { public account_created: string public tracesCount: number = 0 public description: string + public languages: string[] constructor(backend: string) { this.backend = backend @@ -89,6 +90,7 @@ export class OsmConnection { ud.unreadMessages = 0 ud.name = "Fake user" ud.totalMessages = 42 + ud.languages = ["en"] } const self = this this.UpdateCapabilities() @@ -193,7 +195,7 @@ export class OsmConnection { method: "GET", path: "/api/0.6/user/details", }, - function (err, details) { + function (err, details: XMLDocument) { if (err != null) { console.log(err) self.loadingStatus.setData("error") @@ -222,11 +224,14 @@ export class OsmConnection { data.name = userInfo.getAttribute("display_name") data.account_created = userInfo.getAttribute("account_created") data.uid = Number(userInfo.getAttribute("id")) + data.languages = Array.from( + userInfo.getElementsByTagName("languages")[0].getElementsByTagName("lang") + ).map((l) => l.textContent) data.csCount = Number.parseInt( - userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? 0 + userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? "0" ) data.tracesCount = Number.parseInt( - userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? 0 + userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? "0" ) data.img = undefined diff --git a/src/Logic/State/UserRelatedState.ts b/src/Logic/State/UserRelatedState.ts index dbcd371b6..f38f32bad 100644 --- a/src/Logic/State/UserRelatedState.ts +++ b/src/Logic/State/UserRelatedState.ts @@ -42,6 +42,10 @@ export default class UserRelatedState { public readonly showCrosshair: UIEventSource<"yes" | undefined> public readonly fixateNorth: UIEventSource public readonly homeLocation: FeatureSource + /** + * The language as saved into the preferences of the user, if logged in. + * Note that this is _different_ from the languages a user can set via the osm.org interface here: https://www.openstreetmap.org/preferences + */ public readonly language: UIEventSource public readonly preferredBackgroundLayer: UIEventSource< string | "photo" | "map" | "osmbasedmap" | undefined @@ -134,7 +138,7 @@ export default class UserRelatedState { return } - this.language.addCallbackAndRunD((language) => Locale.language.setData(language)) + this.language.syncWith(Locale.language) } private static initUserRelatedState(): LayerConfig { diff --git a/src/Models/RasterLayers.ts b/src/Models/RasterLayers.ts index 95ded771c..3b1ce0115 100644 --- a/src/Models/RasterLayers.ts +++ b/src/Models/RasterLayers.ts @@ -9,14 +9,16 @@ import { RasterLayerProperties } from "./RasterLayerProperties" export class AvailableRasterLayers { public static EditorLayerIndex: (Feature & RasterLayerPolygon)[] = editorlayerindex.features - public static globalLayers: RasterLayerPolygon[] = globallayers.layers.map( - (properties) => - { - type: "Feature", - properties, - geometry: BBox.global.asGeometry(), - } - ) + public static globalLayers: RasterLayerPolygon[] = globallayers.layers + .filter((properties) => properties.id !== "osm.carto" /*Added separately*/) + .map( + (properties) => + { + type: "Feature", + properties, + geometry: BBox.global.asGeometry(), + } + ) public static readonly osmCartoProperties: RasterLayerProperties = { id: "osm", name: "OpenStreetMap", @@ -74,6 +76,7 @@ export class AvailableRasterLayers { } return GeoOperations.inside(lonlat, eliPolygon) }) + matching.unshift(AvailableRasterLayers.osmCarto) matching.push(AvailableRasterLayers.maptilerDefaultLayer) matching.push(...AvailableRasterLayers.globalLayers) return matching diff --git a/src/UI/AllThemesGui.svelte b/src/UI/AllThemesGui.svelte new file mode 100644 index 000000000..beaa6442e --- /dev/null +++ b/src/UI/AllThemesGui.svelte @@ -0,0 +1,74 @@ + + +
+
+ +
+ +
+ +
+ +
+ +
+

+ +

+ + +
+ +
+ + + + +
+ +
+ + + + + + + +
+ v{Constants.vNumber} +
+
+ diff --git a/src/UI/AllThemesGui.ts b/src/UI/AllThemesGui.ts deleted file mode 100644 index b21d84218..000000000 --- a/src/UI/AllThemesGui.ts +++ /dev/null @@ -1,69 +0,0 @@ -import UserRelatedState from "../Logic/State/UserRelatedState" -import { FixedUiElement } from "./Base/FixedUiElement" -import Combine from "./Base/Combine" -import MoreScreen from "./BigComponents/MoreScreen" -import Translations from "./i18n/Translations" -import Constants from "../Models/Constants" -import LanguagePicker from "./LanguagePicker" -import IndexText from "./BigComponents/IndexText" -import { LoginToggle } from "./Popup/LoginButton" -import { ImmutableStore } from "../Logic/UIEventSource" -import { OsmConnection } from "../Logic/Osm/OsmConnection" -import { QueryParameters } from "../Logic/Web/QueryParameters" -import { OsmConnectionFeatureSwitches } from "../Logic/State/FeatureSwitchState" -import { SubtleButton } from "./Base/SubtleButton" -import Svg from "../Svg" -import Link from "./Base/Link" - -export default class AllThemesGui { - setup() { - try { - const featureSwitches = new OsmConnectionFeatureSwitches() - const osmConnection = new OsmConnection({ - fakeUser: featureSwitches.featureSwitchFakeUser.data, - oauth_token: QueryParameters.GetQueryParameter( - "oauth_token", - undefined, - "Used to complete the login" - ), - }) - const state = new UserRelatedState(osmConnection) - const intro = new Combine([ - new LanguagePicker( - Translations.t.index.title.SupportedLanguages(), - state.language - ).SetClass("flex absolute top-2 right-3"), - new IndexText(), - ]) - new Combine([ - intro, - new MoreScreen(state, true), - new LoginToggle( - new Link( - new Combine([ - Svg.pencil_svg().SetClass("w-6 h-6 mr-2"), - Translations.t.general.morescreen.createYourOwnTheme, - ]).SetClass("flex p-2"), - window.location.protocol + "//" + window.location.host + "/studio.html" - ).SetClass("w-full h-fit button"), - Translations.t.index.logIn, - { - osmConnection, - featureSwitchUserbadge: new ImmutableStore(true), - } - ).SetClass("flex justify-center w-full"), - Translations.t.general.aboutMapComplete.intro.SetClass("link-underline"), - new FixedUiElement("v" + Constants.vNumber).SetClass("block"), - ]) - .SetClass("block m-5 lg:w-3/4 lg:ml-40") - .AttachTo("main") - } catch (e) { - console.error(">>>> CRITICAL", e) - new FixedUiElement( - "Seems like no layers are compiled - check the output of `npm run generate:layeroverview`. Is this visible online? Contact pietervdvn immediately!" - ) - .SetClass("alert") - .AttachTo("main") - } - } -} diff --git a/src/UI/Base/Dropdown.svelte b/src/UI/Base/Dropdown.svelte index 0d4767bdb..71a94a08f 100644 --- a/src/UI/Base/Dropdown.svelte +++ b/src/UI/Base/Dropdown.svelte @@ -1,14 +1,31 @@ - {value.setData(e.srcElement.value)}}> diff --git a/src/UI/BigComponents/IndexText.ts b/src/UI/BigComponents/IndexText.ts index 22542fe59..d28321014 100644 --- a/src/UI/BigComponents/IndexText.ts +++ b/src/UI/BigComponents/IndexText.ts @@ -4,25 +4,7 @@ import { FixedUiElement } from "../Base/FixedUiElement" export default class IndexText extends Combine { constructor() { - super([ - new FixedUiElement( - `MapComplete Logo` - ).SetClass("flex-none m-3"), - - new Combine([ - Translations.t.index.title.SetClass( - "text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline" - ), - - Translations.t.index.intro.SetClass( - "mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0" - ), - - Translations.t.index.pickTheme.SetClass( - "mt-3 text-base sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0" - ), - ]).SetClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4"), - ]) + super([]) this.SetClass("flex flex-row") } diff --git a/src/UI/InputElement/LanguagePicker.svelte b/src/UI/InputElement/LanguagePicker.svelte new file mode 100644 index 000000000..ac59348dc --- /dev/null +++ b/src/UI/InputElement/LanguagePicker.svelte @@ -0,0 +1,67 @@ + + +{#if availableLanguages?.length > 1} +
+ + + + {#if preferredFiltered} + {#each preferredFiltered as language} + + {/each} + + {/if} + + {#each availableLanguages as language} + + {/each} + + + +{/if} diff --git a/src/UI/LanguagePicker.ts b/src/UI/LanguagePicker.ts deleted file mode 100644 index 350822a1c..000000000 --- a/src/UI/LanguagePicker.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { DropDown } from "./Input/DropDown" -import Locale from "./i18n/Locale" -import BaseUIElement from "./BaseUIElement" -import native from "../assets/language_native.json" -import language_translations from "../assets/language_translations.json" -import { Translation } from "./i18n/Translation" -import Lazy from "./Base/Lazy" -import Toggle from "./Input/Toggle" -import LanguageUtils from "../Utils/LanguageUtils" -import { UIEventSource } from "../Logic/UIEventSource" -import { QueryParameters } from "../Logic/Web/QueryParameters" - -export default class LanguagePicker extends Toggle { - constructor(languages: string[], assignTo: UIEventSource) { - console.log("Constructing a language picker for languages", languages) - if ( - languages === undefined || - languages.length <= 1 || - QueryParameters.wasInitialized("language") - ) { - super(undefined, undefined, undefined) - } else { - const normalPicker = LanguagePicker.dropdownFor(languages, assignTo ?? Locale.language) - const fullPicker = new Lazy(() => - LanguagePicker.dropdownFor(allLanguages, assignTo ?? Locale.language) - ) - super(fullPicker, normalPicker, Locale.showLinkToWeblate) - const allLanguages: string[] = LanguageUtils.usedLanguagesSorted - } - } - - private static dropdownFor( - languages: string[], - assignTo: UIEventSource - ): BaseUIElement { - return new DropDown( - undefined, - languages - .filter((lang) => lang !== "_context") - .map((lang) => { - return { value: lang, shown: LanguagePicker.hybrid(lang) } - }), - assignTo - ) - } - - private static hybrid(lang: string): Translation { - const nativeText = native[lang] ?? lang - const translation = {} - const trans = language_translations[lang] - if (trans === undefined) { - return new Translation({ "*": nativeText }) - } - for (const key in trans) { - if (key.startsWith("_")) { - continue - } - const translationInKey = language_translations[lang][key] - if (nativeText.toLowerCase() === translationInKey.toLowerCase()) { - translation[key] = nativeText - } else { - translation[key] = nativeText + " (" + translationInKey + ")" - } - } - return new Translation(translation) - } -} diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts index cc128c4c4..2c65d6228 100644 --- a/src/UI/SpecialVisualizations.ts +++ b/src/UI/SpecialVisualizations.ts @@ -45,7 +45,6 @@ import { GeoOperations } from "../Logic/GeoOperations" import CreateNewNote from "./Popup/CreateNewNote.svelte" import AddNewPoint from "./Popup/AddNewPoint/AddNewPoint.svelte" import UserProfile from "./BigComponents/UserProfile.svelte" -import LanguagePicker from "./LanguagePicker" import Link from "./Base/Link" import LayerConfig from "../Models/ThemeConfig/LayerConfig" import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig" @@ -78,6 +77,7 @@ import Questionbox from "./Popup/TagRendering/Questionbox.svelte" import { TagUtils } from "../Logic/Tags/TagUtils" import Giggity from "./BigComponents/Giggity.svelte" import ThemeViewState from "../Models/ThemeViewState" +import LanguagePicker from "./InputElement/LanguagePicker.svelte" class NearbyImageVis implements SpecialVisualization { // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests @@ -453,10 +453,10 @@ export default class SpecialVisualizations { needsUrls: [], docs: "A component to set the language of the user interface", constr(state: SpecialVisualizationState): BaseUIElement { - return new LanguagePicker( - state.layout.language, - state.userRelatedState.language - ) + return new SvelteUIElement(LanguagePicker, { + assignTo: state.userRelatedState.language, + availableLanguages: state.layout.language, + }) }, }, { diff --git a/src/UI/Test.svelte b/src/UI/Test.svelte index ac1b5d0a6..22f2d9313 100644 --- a/src/UI/Test.svelte +++ b/src/UI/Test.svelte @@ -1,16 +1,15 @@ - -
Title 0
-
Content 0 loaded
+
+ -
Title 1
-
Content 1
- + + {$language} +
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index d8aa8da84..1bf9f0cb8 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -48,13 +48,13 @@ import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"; import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"; import StateIndicator from "./BigComponents/StateIndicator.svelte"; - import LanguagePicker from "./LanguagePicker"; import Locale from "./i18n/Locale"; import ShareScreen from "./BigComponents/ShareScreen.svelte"; import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"; import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"; import Cross from "../assets/svg/Cross.svelte"; import Summary from "./BigComponents/Summary.svelte"; + import LanguagePicker from "./InputElement/LanguagePicker.svelte"; export let state: ThemeViewState; let layout = state.layout; @@ -263,7 +263,7 @@ - {#if $showCrosshair === "yes" && ($currentZoom >= 17 || $arrowKeysWereUsed !== undefined) } + {#if ($showCrosshair === "yes" && $currentZoom >= 17) || $showCrosshair === "always" || $arrowKeysWereUsed !== undefined }
@@ -466,7 +466,7 @@
- new LanguagePicker(layout.language, Locale.language)} /> +
diff --git a/src/UI/i18n/Locale.ts b/src/UI/i18n/Locale.ts index 2fee81c18..2968f8642 100644 --- a/src/UI/i18n/Locale.ts +++ b/src/UI/i18n/Locale.ts @@ -56,6 +56,9 @@ export default class Locale { if (typeof navigator !== "undefined") { browserLanguage = navigator.languages?.[0] ?? navigator.language ?? "en" console.log("Browser language is", browserLanguage) + if (browserLanguage === "en-US") { + browserLanguage = "en" + } } source = LocalStorageSource.Get("language", browserLanguage) } @@ -75,6 +78,7 @@ export default class Locale { Locale.showLinkToWeblate.setData(Locale.showLinkToWeblate.data || tr) }) + console.log("Initial language:", source, source.data) return source } } diff --git a/src/all_themes_index.ts b/src/all_themes_index.ts index d04c88c71..864457e3c 100644 --- a/src/all_themes_index.ts +++ b/src/all_themes_index.ts @@ -1,5 +1,6 @@ -import AllThemesGui from "./UI/AllThemesGui" import { QueryParameters } from "./Logic/Web/QueryParameters" +import SvelteUIElement from "./UI/Base/SvelteUIElement" +import AllThemesGui from "./UI/AllThemesGui.svelte" const layout = QueryParameters.GetQueryParameter("layout", undefined).data ?? "" const customLayout = QueryParameters.GetQueryParameter("userlayout", undefined).data ?? "" @@ -27,4 +28,4 @@ if (layout !== "") { ) } -new AllThemesGui().setup() +new SvelteUIElement(AllThemesGui, {}).AttachTo("main") diff --git a/src/test.ts b/src/test.ts index 9888008ee..7036756bb 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,19 +1,4 @@ -import { Utils } from "./Utils" import SvelteUIElement from "./UI/Base/SvelteUIElement" -import PointRenderingConfig from "./Models/ThemeConfig/PointRenderingConfig" -import { UIEventSource } from "./Logic/UIEventSource" -import Marker from "./UI/Map/Marker.svelte" -import Qrcode from "qrcode-generator" -import { FixedUiElement } from "./UI/Base/FixedUiElement" -function generateQr(message: string, attachTo: string) { - const typeNumber = 0 - const errorCorrectionLevel = "L" - const qr = Qrcode(typeNumber, errorCorrectionLevel) - qr.addData(message) - qr.make() - document.getElementById(attachTo).innerHTML = qr.createImgTag() -} -generateQr( - "http://127.0.0.1:1234/theme.html?layout=cyclofix&z=14&lat=51.21571770000094&lon=3.219866599996749&layer-range=true&layer-gps_location=false#theme-menu:download", - "qr" -) +import Test from "./UI/Test.svelte" + +new SvelteUIElement(Test, {}).AttachTo("maindiv")