Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

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

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-06-19 02:20:23 +02:00
parent d1f7ae2462
commit b398f0d8bb
4 changed files with 50 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/UI/Base/SubtleButton.ts
View file

@ -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
}
}

52
src/UI/Popup/MultiApply.ts
View file

@ -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)
}
}

43
src/UI/Popup/MultiApplyButton.svelte Normal file
View file

@ -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>

9
src/UI/Popup/MultiApplyViz.ts
View file

@ -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 })
}
}