Refactoring: port 'MultiApply' to svelte, remove SubtleButton.ts as no longer needed

src/UI/Base/SubtleButton.ts

@@ -1,43 +0,0 @@
-import BaseUIElement from "../BaseUIElement"
-import { UIElement } from "../UIElement"
-import Translations from "../i18n/Translations"
-import Combine from "./Combine"
-import Img from "./Img"
-
-/**
- * @deprecated
- */
-export class SubtleButton extends UIElement {
-    private readonly imageUrl: string | BaseUIElement
-    private readonly message: string | BaseUIElement
-
-    constructor(
-        imageUrl: string | BaseUIElement,
-        message: string | BaseUIElement
-    ) {
-        super()
-        this.imageUrl = imageUrl
-        this.message = message
-    }
-
-    protected InnerRender(): string | BaseUIElement {
-        const classes = "button"
-        const message = Translations.W(this.message)?.SetClass(
-            "block overflow-ellipsis no-images flex-shrink"
-        )
-        let img
-        const imgClasses =
-            "block justify-center flex-none mr-4 h-11 w-11"
-        if ((this.imageUrl ?? "") === "") {
-            img = undefined
-        } else if (typeof this.imageUrl === "string") {
-            img = new Img(this.imageUrl)?.SetClass(imgClasses)
-        } else {
-            img = this.imageUrl?.SetClass(imgClasses)
-        }
-        const button = new Combine([img, message]).SetClass("flex items-center group w-full")
-
-        this.SetClass(classes)
-        return button
-    }
-}

src/UI/Popup/MultiApply.ts

@@ -1,14 +1,7 @@
 import { Store } from "../../Logic/UIEventSource"
-import BaseUIElement from "../BaseUIElement"
-import Combine from "../Base/Combine"
-import { SubtleButton } from "../Base/SubtleButton"
-import { FixedUiElement } from "../Base/FixedUiElement"
-import Translations from "../i18n/Translations"
-import { VariableUiElement } from "../Base/VariableUIElement"
 import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
 import { Tag } from "../../Logic/Tags/Tag"
 import { And } from "../../Logic/Tags/And"
-import Toggle from "../Input/Toggle"
 import { SpecialVisualizationState } from "../SpecialVisualization"
 
 export interface MultiApplyParams {
@@ -21,7 +14,7 @@ export interface MultiApplyParams {
     state: SpecialVisualizationState
 }
 
-class MultiApplyExecutor {
+export class MultiApplyExecutor {
     private static executorCache = new Map<string, MultiApplyExecutor>()
     private readonly originalValues = new Map<string, string>()
     private readonly params: MultiApplyParams
@@ -105,46 +98,3 @@ class MultiApplyExecutor {
     }
 }
 
-export default class MultiApply extends Toggle {
-    constructor(params: MultiApplyParams) {
-        const p = params
-        const t = Translations.t.multi_apply
-
-        const featureId = p.tagsSource.data.id
-
-        if (featureId === undefined) {
-            throw "MultiApply needs a feature id"
-        }
-
-        const applicator = MultiApplyExecutor.GetApplicator(featureId, params)
-
-        const elems: (string | BaseUIElement)[] = []
-        if (p.autoapply) {
-            elems.push(new FixedUiElement(p.text).SetClass("block"))
-            elems.push(
-                new VariableUiElement(
-                    p.featureIds.map((featureIds) =>
-                        t.autoApply.Subs({
-                            attr_names: p.keysToApply.join(", "),
-                            count: "" + featureIds.length,
-                        })
-                    )
-                ).SetClass("block subtle text-sm")
-            )
-        } else {
-            elems.push(
-                new SubtleButton(undefined, p.text).onClick(() =>
-                    applicator.applyTaggingOnOtherFeatures()
-                )
-            )
-        }
-
-        const isShown: Store<boolean> = p.state.osmConnection.isLoggedIn.map(
-            (loggedIn) => {
-                return loggedIn && p.featureIds.data.length > 0
-            },
-            [p.featureIds]
-        )
-        super(new Combine(elems), undefined, isShown)
-    }
-}

src/UI/Popup/MultiApplyButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { MultiApplyExecutor } from "./MultiApply"
+  import Translations from "../i18n/Translations"
+  import LoginToggle from "../Base/LoginToggle.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import type { MultiApplyParams } from "./MultiApply"
+  import { ExclamationTriangle } from "@babeard/svelte-heroicons/solid/ExclamationTriangle"
+
+  export let params: MultiApplyParams
+  let p = params
+  let state = p.state
+  let t = Translations.t.multi_apply
+  let featureId = p.tagsSource.data.id
+  let featuresToApplyOn: Store<string[]> = p.featureIds
+  if (featureId === undefined) {
+    throw "MultiApply needs a feature id"
+  }
+  let applicator = MultiApplyExecutor.GetApplicator(featureId, params)
+  let keysToApply: string[] = p.keysToApply
+</script>
+
+<LoginToggle {state} ignoreLoading>
+
+  {#if $featuresToApplyOn.length > 0}
+    {#if p.autoapply}
+      <div class="border-interactive p-2 low-interaction">
+        <div class="flex items-center gap-x-2">
+
+          <ExclamationTriangle class="w-16" />
+          <div>{p.text}</div>
+        </div>
+        <div class="subtle text-sm">
+          <Tr t={t.autoApply.Subs({attr_names: keysToApply.join(", ") ,count: "" + $featuresToApplyOn.length})} />
+        </div>
+      </div>
+    {:else}
+      <button on:click={() => applicator.applyTaggingOnOtherFeatures()}>{p.text}</button>
+    {/if}
+  {/if}
+</LoginToggle>
+
+
+

src/UI/Popup/MultiApplyViz.ts

@@ -1,6 +1,8 @@
 import { Store, UIEventSource } from "../../Logic/UIEventSource"
-import MultiApply from "./MultiApply"
+import { MultiApplyParams } from "./MultiApply"
 import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import MultiApplyButton from "./MultiApplyButton.svelte"
 
 export class MultiApplyViz implements SpecialVisualization {
     funcName = "multi_apply"
@@ -61,7 +63,7 @@ export class MultiApplyViz implements SpecialVisualization {
                 return []
             }
         })
-        return new MultiApply({
+        const params : MultiApplyParams= {
             featureIds,
             keysToApply,
             text,
@@ -69,6 +71,7 @@ export class MultiApplyViz implements SpecialVisualization {
             overwrite,
             tagsSource,
             state,
-        })
+        }
+        return new SvelteUIElement(MultiApplyButton, { params })
     }
 }