forked from MapComplete/MapComplete
71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
import { Store } from "../../Logic/UIEventSource"
|
|
import Translations from "../i18n/Translations"
|
|
import Toggle, { ClickableToggle } from "../Input/Toggle"
|
|
import Combine from "../Base/Combine"
|
|
import Svg from "../../Svg"
|
|
import { Tag } from "../../Logic/Tags/Tag"
|
|
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
|
|
import { Changes } from "../../Logic/Osm/Changes"
|
|
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
|
|
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
|
|
|
|
export default class DeleteImage extends Toggle {
|
|
constructor(
|
|
key: string,
|
|
tags: Store<any>,
|
|
state: { layoutToUse: LayoutConfig; changes?: Changes; osmConnection?: OsmConnection }
|
|
) {
|
|
const oldValue = tags.data[key]
|
|
const isDeletedBadge = Translations.t.image.isDeleted
|
|
.Clone()
|
|
.SetClass("rounded-full p-1")
|
|
.SetStyle("color:white;background:#ff8c8c")
|
|
.onClick(async () => {
|
|
await state?.changes?.applyAction(
|
|
new ChangeTagAction(tags.data.id, new Tag(key, oldValue), tags.data, {
|
|
changeType: "delete-image",
|
|
theme: state.layoutToUse.id,
|
|
})
|
|
)
|
|
})
|
|
|
|
const deleteButton = Translations.t.image.doDelete
|
|
.Clone()
|
|
.SetClass("block w-full pl-4 pr-4")
|
|
.SetStyle(
|
|
"color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;"
|
|
)
|
|
.onClick(async () => {
|
|
await state?.changes?.applyAction(
|
|
new ChangeTagAction(tags.data.id, new Tag(key, ""), tags.data, {
|
|
changeType: "answer",
|
|
theme: state.layoutToUse.id,
|
|
})
|
|
)
|
|
})
|
|
|
|
const cancelButton = Translations.t.general.cancel
|
|
.Clone()
|
|
.SetClass("bg-white pl-4 pr-4")
|
|
.SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;")
|
|
const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
|
|
const deleteDialog = new ClickableToggle(
|
|
new Combine([deleteButton, cancelButton]).SetClass("flex flex-col background-black"),
|
|
openDelete
|
|
)
|
|
|
|
cancelButton.onClick(() => deleteDialog.isEnabled.setData(false))
|
|
openDelete.onClick(() => deleteDialog.isEnabled.setData(true))
|
|
|
|
super(
|
|
new Toggle(
|
|
deleteDialog,
|
|
isDeletedBadge,
|
|
tags.map((tags) => (tags[key] ?? "") !== "")
|
|
),
|
|
undefined /*Login (and thus editing) is disabled*/,
|
|
state?.osmConnection?.isLoggedIn
|
|
)
|
|
this.SetClass("cursor-pointer")
|
|
}
|
|
}
|