From bc34e4d7fe0e0a139f8ccd2790131ac91d5c29a3 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 20 Jul 2024 03:34:54 +0200 Subject: [PATCH] fix removing items --- dist/index.js | 53 ++++++++++++++++++++--- src/Model/storageModel.ts | 12 +++-- src/View/Components/deletableListItem.tsx | 19 ++++++++ src/View/Modals/connectionModal.tsx | 19 +++++++- src/View/homePage.tsx | 2 +- src/View/translations.ts | 3 +- src/ViewModel/connectionViewModel.tsx | 5 +++ 7 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 src/View/Components/deletableListItem.tsx diff --git a/dist/index.js b/dist/index.js index 43fe2585..7f741675 100644 --- a/dist/index.js +++ b/dist/index.js @@ -186,7 +186,8 @@ // src/View/translations.ts var englishTranslations = { general: { - closeButton: "close" + closeButtonAudioLabel: "close", + deleteItemButtonAudioLabel: "delete item" }, regional: { weekdays: { @@ -247,15 +248,42 @@ var language = navigator.language.substring(0, 2); var translations = allTranslations[language] || allTranslations.en; + // src/View/Components/deletableListItem.tsx + function DeletableListItem(text, ondelete) { + return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement( + "button", + { + class: "danger", + "aria-label": translations.general.deleteItemButtonAudioLabel, + "on:click": ondelete + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "delete") + )); + } + // src/View/Modals/connectionModal.tsx function ConnectionModal(connectionViewModel2) { + const previousAddressConverter = (address) => { + return DeletableListItem(address, () => { + connectionViewModel2.removePreviousAddress(address); + }); + }; return /* @__PURE__ */ createElement( "div", { class: "modal", "toggle:open": connectionViewModel2.isShowingConnectionModal }, - /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.connectionModal.connectionModalHeadline)), /* @__PURE__ */ createElement("button", { "on:click": connectionViewModel2.hideConnectionModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) + /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.connectionModal.connectionModalHeadline), /* @__PURE__ */ createElement( + "div", + { + class: "flex-column gap", + "children:append": [ + connectionViewModel2.previousAddresses, + previousAddressConverter + ] + } + )), /* @__PURE__ */ createElement("button", { "on:click": connectionViewModel2.hideConnectionModal }, translations.general.closeButtonAudioLabel, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) ); } @@ -287,6 +315,7 @@ remove = (pathComponents) => { const key = _StorageModel.pathComponentsToKey(...pathComponents); localStorage.removeItem(key); + this.initializeTree(); }; list = (pathComponents) => { let currentParent = this.storageEntryTree; @@ -309,12 +338,16 @@ }; // init constructor() { + this.initializeTree(); + } + // utility + initializeTree = () => { + this.storageEntryTree = {}; for (const key of Object.keys(localStorage)) { const components = _StorageModel.keyToPathComponents(key); this.updateTree(...components); } - } - // utility + }; updateTree = (...pathComponents) => { let currentParent = this.storageEntryTree; for (const pathPart of pathComponents) { @@ -569,6 +602,10 @@ disconnect = () => { this.connectionModel.disconnect(); }; + removePreviousAddress = (address) => { + this.connectionModel.removeAddress(address); + this.updatePreviousAddresses(); + }; // view methods showConnectionModal = () => { this.isShowingConnectionModal.value = true; @@ -636,7 +673,7 @@ "aria-label": translations.homePage.manageConnectionsAudioLabel, "on:click": connectionViewModel2.showConnectionModal }, - /* @__PURE__ */ createElement("span", { class: "icon" }, "build") + /* @__PURE__ */ createElement("span", { class: "icon" }, "edit") ), /* @__PURE__ */ createElement( "button", { @@ -754,7 +791,13 @@ }; // src/index.tsx + localStorage.clear(); var storageModel = new StorageModel(); + storageModel.store(["a", "b", "b1"], ""); + storageModel.store(["a", "b", "b2"], ""); + console.log(JSON.stringify(storageModel.storageEntryTree, null, 4)); + storageModel.remove(["a", "b", "b2"]); + console.log(JSON.stringify(storageModel.storageEntryTree, null, 4)); var settingsViewModel = new SettingsViewModel(storageModel); var connectionViewModel = new ConnectionViewModel(storageModel); document.querySelector("main").append( diff --git a/src/Model/storageModel.ts b/src/Model/storageModel.ts index b1da33fb..fdf1d5c5 100644 --- a/src/Model/storageModel.ts +++ b/src/Model/storageModel.ts @@ -24,6 +24,7 @@ export default class StorageModel { remove = (pathComponents: string[]): void => { const key: string = StorageModel.pathComponentsToKey(...pathComponents); localStorage.removeItem(key); + this.initializeTree(); }; list = (pathComponents: string[]): string[] => { @@ -52,14 +53,19 @@ export default class StorageModel { // init constructor() { + this.initializeTree(); + } + + // utility + initializeTree = (): void => { + this.storageEntryTree = {}; for (const key of Object.keys(localStorage)) { const components: string[] = StorageModel.keyToPathComponents(key); this.updateTree(...components); } - } + }; - // utility - updateTree = (...pathComponents: string[]) => { + updateTree = (...pathComponents: string[]): void => { let currentParent: StorageEntry = this.storageEntryTree; for (const pathPart of pathComponents) { if (!currentParent[pathPart]) { diff --git a/src/View/Components/deletableListItem.tsx b/src/View/Components/deletableListItem.tsx new file mode 100644 index 00000000..8bc4b8e9 --- /dev/null +++ b/src/View/Components/deletableListItem.tsx @@ -0,0 +1,19 @@ +import * as React from "bloatless-react"; + +import { translations } from "../translations"; + +export function DeletableListItem(text: string, ondelete: () => void) { + return ( +
+ {text} + + +
+ ); +} \ No newline at end of file diff --git a/src/View/Modals/connectionModal.tsx b/src/View/Modals/connectionModal.tsx index 5b746cdd..e6d4e38f 100644 --- a/src/View/Modals/connectionModal.tsx +++ b/src/View/Modals/connectionModal.tsx @@ -1,9 +1,18 @@ import * as React from "bloatless-react"; import ConnectionViewModel from "../../ViewModel/connectionViewModel"; +import { DeletableListItem } from "../Components/deletableListItem"; import { translations } from "../translations"; export function ConnectionModal(connectionViewModel: ConnectionViewModel) { + const previousAddressConverter: React.StateItemConverter = ( + address: string + ) => { + return DeletableListItem(address, () => { + connectionViewModel.removePreviousAddress(address); + }); + }; + return (

{translations.connectionModal.connectionModalHeadline}

- +
diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx index 90582daf..cd027a5f 100644 --- a/src/View/homePage.tsx +++ b/src/View/homePage.tsx @@ -52,7 +52,7 @@ export function HomePage( aria-label={translations.homePage.manageConnectionsAudioLabel} on:click={connectionViewModel.showConnectionModal} > - build + edit