Refactoring: port CloseNoteButton to svelte

src/UI/Popup/Notes/CloseNoteButton.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
+  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import LoginToggle from "../../Base/LoginToggle.svelte"
+  import Translations from "../../i18n/Translations"
+  import Tr from "../../Base/Tr.svelte"
+  import Icon from "../../Map/Icon.svelte"
+  import NoteCommentElement from "./NoteCommentElement"
+  import { Translation } from "../../i18n/Translation"
+
+  const t = Translations.t.notes
+  export let state: SpecialVisualizationState
+  export let tags: UIEventSource<Record<string, string>>
+  export let icon: string = "checkmark"
+  export let idkey: string = "id"
+  export let message: string
+  export let text: Translation = t.closeNote
+  export let minzoom: number
+  export let zoomMoreMessage: string
+
+
+  let curZoom = state.mapProperties.zoom
+  const isClosed = tags.map((tags) => (tags["closed_at"] ?? "") !== "")
+
+  async function closeNote() {
+    const id = tags.data[idkey]
+    await state.osmConnection.closeNote(id, message)
+    NoteCommentElement.addCommentTo(message, tags, state)
+    tags.data["closed_at"] = new Date().toISOString()
+    tags.ping()
+  }
+
+</script>
+
+<LoginToggle {state}>
+  <div slot="not-logged-in">
+    <Tr t={t.loginToClose} />
+  </div>
+
+
+  {#if $isClosed}
+    <Tr cls="thanks" t={t.isClosed} />
+  {:else if minzoom <= $curZoom}
+    <button on:click={() => closeNote()}>
+      <div class="flex items-center gap-x-2">
+        <Icon {icon} clss="w-10 h-10" />
+        <Tr t={text} />
+      </div>
+    </button>
+  {:else if zoomMoreMessage}
+    {zoomMoreMessage}
+  {/if}
+
+</LoginToggle>

src/UI/Popup/Notes/CloseNoteButton.ts

@@ -1,106 +0,0 @@
-import BaseUIElement from "../../BaseUIElement"
-import Translations from "../../i18n/Translations"
-import { Utils } from "../../../Utils"
-import Img from "../../Base/Img"
-import { SubtleButton } from "../../Base/SubtleButton"
-import Toggle from "../../Input/Toggle"
-import { LoginToggle } from ".././LoginButton"
-import { SpecialVisualization, SpecialVisualizationState } from "../../SpecialVisualization"
-import { UIEventSource } from "../../../Logic/UIEventSource"
-import Constants from "../../../Models/Constants"
-import SvelteUIElement from "../../Base/SvelteUIElement"
-import Checkmark from "../../../assets/svg/Checkmark.svelte"
-import NoteCommentElement from "./NoteCommentElement"
-import Icon from "../../Map/Icon.svelte"
-
-export class CloseNoteButton implements SpecialVisualization {
-    public readonly funcName = "close_note"
-    public readonly needsUrls = [Constants.osmAuthConfig.url]
-    public readonly docs =
-        "Button to close a note. A predefined text can be defined to close the note with. If the note is already closed, will show a small text."
-    public readonly args = [
-        {
-            name: "text",
-            doc: "Text to show on this button",
-            required: true,
-        },
-        {
-            name: "icon",
-            doc: "Icon to show",
-            defaultValue: "checkmark.svg",
-        },
-        {
-            name: "idkey",
-            doc: "The property name where the ID of the note to close can be found",
-            defaultValue: "id",
-        },
-        {
-            name: "comment",
-            doc: "Text to add onto the note when closing",
-        },
-        {
-            name: "minZoom",
-            doc: "If set, only show the closenote button if zoomed in enough",
-        },
-        {
-            name: "zoomButton",
-            doc: "Text to show if not zoomed in enough",
-        },
-    ]
-
-    public constr(
-        state: SpecialVisualizationState,
-        tags: UIEventSource<Record<string, string>>,
-        args: string[]
-    ): BaseUIElement {
-        const t = Translations.t.notes
-
-        const params: {
-            text: string
-            icon: string
-            idkey: string
-            comment: string
-            minZoom: string
-            zoomButton: string
-        } = <any>Utils.ParseVisArgs(this.args, args)
-
-        let icon: BaseUIElement = new SvelteUIElement(Icon, {
-            icon: params.icon ?? "checkmark.svg",
-        })
-        let textToShow = t.closeNote
-        if ((params.text ?? "") !== "") {
-            textToShow = Translations.T(args[0])
-        }
-
-        let closeButton: BaseUIElement = new SubtleButton(icon, textToShow)
-        const isClosed = tags.map((tags) => (tags["closed_at"] ?? "") !== "")
-        closeButton.onClick(() => {
-            const id = tags.data[args[2] ?? "id"]
-            const text = args[3]
-            state.osmConnection.closeNote(id, text)?.then((_) => {
-                NoteCommentElement.addCommentTo(text, tags, state)
-                tags.data["closed_at"] = new Date().toISOString()
-                tags.ping()
-            })
-        })
-
-        if ((params.minZoom ?? "") !== "" && !isNaN(Number(params.minZoom))) {
-            closeButton = new Toggle(
-                closeButton,
-                params.zoomButton ?? "",
-                state.mapProperties.zoom.map((zoom) => zoom >= Number(params.minZoom))
-            )
-        }
-
-        return new LoginToggle(
-            new Toggle(
-                t.isClosed.SetClass("thanks"),
-                closeButton,
-
-                isClosed
-            ),
-            t.loginToClose,
-            state
-        )
-    }
-}