From 77f5eefb0cb7a83edec0201120c76fe6e2cf637c Mon Sep 17 00:00:00 2001 From: wjtje <33957974+wjtje@users.noreply.github.com> Date: Wed, 15 Feb 2023 14:48:15 +0100 Subject: [PATCH 1/2] Fix type import --- UI/BigComponents/HiddenThemeList.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/UI/BigComponents/HiddenThemeList.svelte b/UI/BigComponents/HiddenThemeList.svelte index 5432b0587..a4c169ac0 100644 --- a/UI/BigComponents/HiddenThemeList.svelte +++ b/UI/BigComponents/HiddenThemeList.svelte @@ -4,15 +4,18 @@ import type Loc from "../../Models/Loc" import * as themeOverview from "../../assets/generated/theme_overview.json" import { Utils } from "../../Utils" - import ThemesList, { type Theme } from "./ThemesList.svelte" + import ThemesList from "./ThemesList.svelte" import Translations from "../i18n/Translations" + import { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig" export let search: UIEventSource export let state: { osmConnection: OsmConnection; locationControl?: UIEventSource } export let onMainScreen: boolean = true const prefix = "mapcomplete-hidden-theme-" - const hiddenThemes: Theme[] = themeOverview["default"].filter((layout) => layout.hideFromOverview) + const hiddenThemes: LayoutInformation[] = themeOverview["default"].filter( + (layout) => layout.hideFromOverview + ) const userPreferences = state.osmConnection.preferencesHandler.preferences const t = Translations.t.general.morescreen From d8078e73009e1d2fda6a4b18bc78d40167e9ccf3 Mon Sep 17 00:00:00 2001 From: Robin van der Linde Date: Wed, 15 Feb 2023 18:24:08 +0100 Subject: [PATCH 2/2] AllTagsPanel Svelte component --- UI/AllTagsPanel.svelte | 54 +++++++++++++++++++++++++++++++++++++ UI/AllTagsPanel.ts | 47 -------------------------------- UI/ImportFlow/MapPreview.ts | 9 +++++-- UI/SpecialVisualizations.ts | 6 +++-- 4 files changed, 65 insertions(+), 51 deletions(-) create mode 100644 UI/AllTagsPanel.svelte delete mode 100644 UI/AllTagsPanel.ts diff --git a/UI/AllTagsPanel.svelte b/UI/AllTagsPanel.svelte new file mode 100644 index 000000000..4eab95c50 --- /dev/null +++ b/UI/AllTagsPanel.svelte @@ -0,0 +1,54 @@ + + +
+ +
+ + diff --git a/UI/AllTagsPanel.ts b/UI/AllTagsPanel.ts deleted file mode 100644 index 32b8a2c84..000000000 --- a/UI/AllTagsPanel.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { VariableUiElement } from "./Base/VariableUIElement" -import { UIEventSource } from "../Logic/UIEventSource" -import Table from "./Base/Table" - -export class AllTagsPanel extends VariableUiElement { - constructor(tags: UIEventSource, state?) { - const calculatedTags = [].concat( - // SimpleMetaTagger.lazyTags, - ...(state?.layoutToUse?.layers?.map((l) => l.calculatedTags?.map((c) => c[0]) ?? []) ?? - []) - ) - - super( - tags.map((tags) => { - const parts = [] - for (const key in tags) { - if (!tags.hasOwnProperty(key)) { - continue - } - let v = tags[key] - if (v === "") { - v = "empty string" - } - parts.push([key, v ?? "undefined"]) - } - - for (const key of calculatedTags) { - const value = tags[key] - if (value === undefined) { - continue - } - let type = "" - if (typeof value !== "string") { - type = " " + typeof value + "" - } - parts.push(["" + key + "", value]) - } - - return new Table(["key", "value"], parts) - .SetStyle( - "border: 1px solid black; border-radius: 1em;padding:1em;display:block;" - ) - .SetClass("zebra-table") - }) - ) - } -} diff --git a/UI/ImportFlow/MapPreview.ts b/UI/ImportFlow/MapPreview.ts index 23274ae2e..9348db65b 100644 --- a/UI/ImportFlow/MapPreview.ts +++ b/UI/ImportFlow/MapPreview.ts @@ -23,17 +23,22 @@ import { FlowStep } from "./FlowStep" import ScrollableFullScreen from "../Base/ScrollableFullScreen" import Title from "../Base/Title" import CheckBoxes from "../Input/Checkboxes" -import { AllTagsPanel } from "../AllTagsPanel" +import AllTagsPanel from "../AllTagsPanel.svelte" import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch" import { Feature, Point } from "geojson" import DivContainer from "../Base/DivContainer" import ShowDataLayer from "../ShowDataLayer/ShowDataLayer" +import SvelteUIElement from "../Base/SvelteUIElement" class PreviewPanel extends ScrollableFullScreen { constructor(tags: UIEventSource) { super( (_) => new FixedUiElement("Element to import"), - (_) => new Combine(["The tags are:", new AllTagsPanel(tags)]).SetClass("flex flex-col"), + (_) => + new Combine([ + "The tags are:", + new SvelteUIElement(AllTagsPanel, { tags }), + ]).SetClass("flex flex-col"), "element" ) } diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 67349cdf1..822298193 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -20,7 +20,7 @@ import { CloseNoteButton } from "./Popup/CloseNoteButton" import { NearbyImageVis } from "./Popup/NearbyImageVis" import { MapillaryLinkVis } from "./Popup/MapillaryLinkVis" import { Stores, UIEventSource } from "../Logic/UIEventSource" -import { AllTagsPanel } from "./AllTagsPanel" +import AllTagsPanel from "./AllTagsPanel.svelte" import AllImageProviders from "../Logic/ImageProviders/AllImageProviders" import { ImageCarousel } from "./Image/ImageCarousel" import { ImageUploadFlow } from "./Image/ImageUploadFlow" @@ -53,6 +53,7 @@ import StatisticsPanel from "./BigComponents/StatisticsPanel" import AutoApplyButton from "./Popup/AutoApplyButton" import { LanguageElement } from "./Popup/LanguageElement" import FeatureReviews from "../Logic/Web/MangroveReviews" +import SvelteUIElement from "./Base/SvelteUIElement" export default class SpecialVisualizations { public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.initList() @@ -81,7 +82,8 @@ export default class SpecialVisualizations { funcName: "all_tags", docs: "Prints all key-value pairs of the object - used for debugging", args: [], - constr: (state, tags: UIEventSource) => new AllTagsPanel(tags, state), + constr: (state, tags: UIEventSource) => + new SvelteUIElement(AllTagsPanel, { tags, state }), }, { funcName: "image_carousel",