From 1a6bf9f3b2359487f8c800ebdb460ba4149ed00b Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Sat, 28 Dec 2024 15:46:32 +0100 Subject: [PATCH 1/8] Added: Delete functionality for selected monitor(s) in `MonitorList.vue` - Added a delete button to the selection controls for deleting selected monitor(s). - Integrated a confirmation dialog (`confirmDeleteSelected`) with the message `deleteSelectedMonitorMsg`. - Implemented `deleteSelectedDialog` to trigger the confirmation dialog. - Created `deleteSelected` method to handle monitor deletion and update the selection state. - Implemented toast notifications for feedback on the deletion status. - Added page reload mechanism to reflect the deletion of monitors after all selected monitors are removed. - Ensured consistent functionality with existing selection and action methods. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 48 ++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index a579316b38..55da9518ad 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -39,6 +39,7 @@ <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button> <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button> + <button class="btn-outline-normal text-danger" @click="deleteSelectedDialog"><font-awesome-icon icon="trash" size="sm" /> {{ $t("Delete") }}</button> <span v-if="selectedMonitorCount > 0"> {{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }} @@ -64,9 +65,13 @@ </div> </div> + <!-- Confirm Dialogs --> <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected"> {{ $t("pauseMonitorMsg") }} </Confirm> + <Confirm ref="confirmDeleteSelected" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelected"> + {{ $t("deleteSelectedMonitorMsg") }} + </Confirm> </template> <script> @@ -306,6 +311,49 @@ export default { this.cancelSelectMode(); }, + + /** + * Show the confirmation dialog for deleting the selected monitors. + * This method triggers the display of a confirmation modal where the user can + * confirm or cancel the deletion of the selected monitors. + * @returns {void} + */ + deleteSelectedDialog() { + // Show the confirmation dialog for deletion + this.$refs.confirmDeleteSelected.show(); + }, + + /** + * Delete each selected monitor and update the UI once the deletion is complete. + * This method initiates the deletion process for all selected monitors, updates + * the user interface, and reloads the page to reflect the changes. + * @returns {void} + */ + deleteSelected() { + // Delete each selected monitor + Object.keys(this.selectedMonitors).forEach(id => { + this.$root.deleteMonitor(id, (res) => { + // Display a response message for the operation + this.$root.toastRes(res); + + // Remove the monitor from the selection if deletion is successful + if (res.ok) { + delete this.selectedMonitors[id]; + } + }); + }); + + // Delay for UI updates before reloading the page + setTimeout(() => { + if (!Object.keys(this.selectedMonitors).length) { + window.location.reload(); // Refresh the page to show updates + } + }, 5000); + + // Exit selection mode as deletion is in progress + this.cancelSelectMode(); + }, + /** * Whether a monitor should be displayed based on the filters * @param {object} monitor Monitor to check From f11bd575897f5fee31ae421507d97609d91ebbd2 Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Sat, 28 Dec 2024 15:47:25 +0100 Subject: [PATCH 2/8] Added: Confirmation message for deleting selected monitor(s) - Added a new key `deleteSelectedMonitorMsg` for the confirmation message. - Included translations for the message in the following files: - `de-CH.json` - `de-DE.json` - `en.json` - `fr-FR.json` - `nl-NL.json` - The message prompts for confirmation when deleting one or more selected monitor(s). - Ensured the message follows existing formatting standards. modified: src/lang/de-CH.json modified: src/lang/de-DE.json modified: src/lang/en.json modified: src/lang/fr-FR.json modified: src/lang/nl-NL.json --- src/lang/de-CH.json | 1 + src/lang/de-DE.json | 1 + src/lang/en.json | 1 + src/lang/fr-FR.json | 1 + src/lang/nl-NL.json | 1 + 5 files changed, 5 insertions(+) diff --git a/src/lang/de-CH.json b/src/lang/de-CH.json index 15b60519f6..473e4ab082 100644 --- a/src/lang/de-CH.json +++ b/src/lang/de-CH.json @@ -104,6 +104,7 @@ "Certificate Info": "Zertifikatsinformation", "keywordDescription": "Ein Suchwort in der HTML- oder JSON-Ausgabe finden. Bitte beachte: es wird zwischen Gross-/Kleinschreibung unterschieden.", "deleteMonitorMsg": "Bist du sicher, dass du den Monitor löschen möchtest?", + "deleteSelectedMonitorMsg": "Bist du sicher, dass du den folgenden Monitoren löschen möchtest?", "deleteNotificationMsg": "Möchtest du diese Benachrichtigung wirklich für alle Monitore löschen?", "resolverserverDescription": "Cloudflare ist als der Standardserver festgelegt. Dieser kann jederzeit geändert werden.", "Resolver Server": "Auflösungsserver", diff --git a/src/lang/de-DE.json b/src/lang/de-DE.json index 9102d8e94e..c8e58cc7fe 100644 --- a/src/lang/de-DE.json +++ b/src/lang/de-DE.json @@ -104,6 +104,7 @@ "Certificate Info": "Zertifikatsinformation", "keywordDescription": "Ein Suchwort in der HTML- oder JSON-Ausgabe finden. Bitte beachte: es wird zwischen Groß-/Kleinschreibung unterschieden.", "deleteMonitorMsg": "Bist du sicher, dass du den Monitor löschen möchtest?", + "deleteSelectedMonitorMsg": "Bist du sicher, dass du den folgenden Monitoren löschen möchtest?", "deleteNotificationMsg": "Möchtest du diese Benachrichtigung wirklich für alle Monitore löschen?", "resolverserverDescription": "Cloudflare ist als der Standardserver festgelegt. Dieser kann jederzeit geändert werden.", "Resolver Server": "Auflösungsserver", diff --git a/src/lang/en.json b/src/lang/en.json index e215f1031f..87ceef1b4d 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -569,6 +569,7 @@ "grpcMethodDescription": "Method name is convert to camelCase format such as sayHello, check, etc.", "acceptedStatusCodesDescription": "Select status codes which are considered as a successful response.", "deleteMonitorMsg": "Are you sure want to delete this monitor?", + "deleteSelectedMonitorMsg": "Are you sure want to delete the following monitors?", "deleteMaintenanceMsg": "Are you sure want to delete this maintenance?", "deleteNotificationMsg": "Are you sure want to delete this notification for all monitors?", "dnsPortDescription": "DNS server port. Defaults to 53. You can change the port at any time.", diff --git a/src/lang/fr-FR.json b/src/lang/fr-FR.json index 5a00c9d29f..3bcaee4599 100644 --- a/src/lang/fr-FR.json +++ b/src/lang/fr-FR.json @@ -28,6 +28,7 @@ "keywordDescription": "Le mot clé sera recherché dans la réponse HTML/JSON reçue du site internet.", "pauseDashboardHome": "En pause", "deleteMonitorMsg": "Êtes-vous sûr de vouloir supprimer cette sonde ?", + "deleteSelectedMonitorMsg": "Êtes-vous sûr de vouloir supprimer les moniteurs suivants ?", "deleteMaintenanceMsg": "Voulez-vous vraiment supprimer cette maintenance ?", "deleteNotificationMsg": "Êtes-vous sûr de vouloir supprimer ce type de notification pour toutes les sondes ?", "dnsPortDescription": "Port du serveur DNS. La valeur par défaut est 53. Vous pouvez modifier le port à tout moment.", diff --git a/src/lang/nl-NL.json b/src/lang/nl-NL.json index 56b180e539..a835ba2982 100644 --- a/src/lang/nl-NL.json +++ b/src/lang/nl-NL.json @@ -11,6 +11,7 @@ "keywordDescription": "Zoek trefwoord in gewone html of JSON-response en het is hoofdlettergevoelig.", "pauseDashboardHome": "Gepauzeerd", "deleteMonitorMsg": "Weet u zeker dat u deze monitor wilt verwijderen?", + "deleteSelectedMonitorMsg": "Weet u zeker dat u de volgende monitoren wilt verwijderen?", "deleteNotificationMsg": "Weet u zeker dat u deze melding voor alle monitoren wilt verwijderen?", "resolverserverDescription": "Cloudflare is de standaardserver, u kunt de resolver server op elk moment wijzigen.", "rrtypeDescription": "Selecteer het RR-type dat u wilt monitoren", From 4aa76f50cc99bb282621ee108da07fb17c018ae3 Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Sat, 28 Dec 2024 20:35:48 +0100 Subject: [PATCH 3/8] Reverted: Undo changes to translations in language files - Reverted translations for the message in the following language files: - `de-CH.json` - `de-DE.json` - `fr-FR.json` - `nl-NL.json` - Restored the original translations to prevent file inconsistencies. - Prevented inconsistencies caused by previous translation updates. modified: src/lang/de-CH.json modified: src/lang/de-DE.json modified: src/lang/fr-FR.json modified: src/lang/nl-NL.json --- src/lang/de-CH.json | 1 - src/lang/de-DE.json | 1 - src/lang/fr-FR.json | 1 - src/lang/nl-NL.json | 1 - 4 files changed, 4 deletions(-) diff --git a/src/lang/de-CH.json b/src/lang/de-CH.json index 473e4ab082..15b60519f6 100644 --- a/src/lang/de-CH.json +++ b/src/lang/de-CH.json @@ -104,7 +104,6 @@ "Certificate Info": "Zertifikatsinformation", "keywordDescription": "Ein Suchwort in der HTML- oder JSON-Ausgabe finden. Bitte beachte: es wird zwischen Gross-/Kleinschreibung unterschieden.", "deleteMonitorMsg": "Bist du sicher, dass du den Monitor löschen möchtest?", - "deleteSelectedMonitorMsg": "Bist du sicher, dass du den folgenden Monitoren löschen möchtest?", "deleteNotificationMsg": "Möchtest du diese Benachrichtigung wirklich für alle Monitore löschen?", "resolverserverDescription": "Cloudflare ist als der Standardserver festgelegt. Dieser kann jederzeit geändert werden.", "Resolver Server": "Auflösungsserver", diff --git a/src/lang/de-DE.json b/src/lang/de-DE.json index c8e58cc7fe..9102d8e94e 100644 --- a/src/lang/de-DE.json +++ b/src/lang/de-DE.json @@ -104,7 +104,6 @@ "Certificate Info": "Zertifikatsinformation", "keywordDescription": "Ein Suchwort in der HTML- oder JSON-Ausgabe finden. Bitte beachte: es wird zwischen Groß-/Kleinschreibung unterschieden.", "deleteMonitorMsg": "Bist du sicher, dass du den Monitor löschen möchtest?", - "deleteSelectedMonitorMsg": "Bist du sicher, dass du den folgenden Monitoren löschen möchtest?", "deleteNotificationMsg": "Möchtest du diese Benachrichtigung wirklich für alle Monitore löschen?", "resolverserverDescription": "Cloudflare ist als der Standardserver festgelegt. Dieser kann jederzeit geändert werden.", "Resolver Server": "Auflösungsserver", diff --git a/src/lang/fr-FR.json b/src/lang/fr-FR.json index 3bcaee4599..5a00c9d29f 100644 --- a/src/lang/fr-FR.json +++ b/src/lang/fr-FR.json @@ -28,7 +28,6 @@ "keywordDescription": "Le mot clé sera recherché dans la réponse HTML/JSON reçue du site internet.", "pauseDashboardHome": "En pause", "deleteMonitorMsg": "Êtes-vous sûr de vouloir supprimer cette sonde ?", - "deleteSelectedMonitorMsg": "Êtes-vous sûr de vouloir supprimer les moniteurs suivants ?", "deleteMaintenanceMsg": "Voulez-vous vraiment supprimer cette maintenance ?", "deleteNotificationMsg": "Êtes-vous sûr de vouloir supprimer ce type de notification pour toutes les sondes ?", "dnsPortDescription": "Port du serveur DNS. La valeur par défaut est 53. Vous pouvez modifier le port à tout moment.", diff --git a/src/lang/nl-NL.json b/src/lang/nl-NL.json index a835ba2982..56b180e539 100644 --- a/src/lang/nl-NL.json +++ b/src/lang/nl-NL.json @@ -11,7 +11,6 @@ "keywordDescription": "Zoek trefwoord in gewone html of JSON-response en het is hoofdlettergevoelig.", "pauseDashboardHome": "Gepauzeerd", "deleteMonitorMsg": "Weet u zeker dat u deze monitor wilt verwijderen?", - "deleteSelectedMonitorMsg": "Weet u zeker dat u de volgende monitoren wilt verwijderen?", "deleteNotificationMsg": "Weet u zeker dat u deze melding voor alle monitoren wilt verwijderen?", "resolverserverDescription": "Cloudflare is de standaardserver, u kunt de resolver server op elk moment wijzigen.", "rrtypeDescription": "Selecteer het RR-type dat u wilt monitoren", From 4e8264f6e60110c26aa1a1b3ada21c021cbaf27e Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Sun, 29 Dec 2024 16:12:20 +0100 Subject: [PATCH 4/8] Updated: Improve monitor deletion flow with toast notification - Added functionality to retrieve and display a toast message from localStorage after the page reloads, triggered by a successful monitor deletion. - Modified the `deleteSelected` method to immediately refresh the page after deleting selected monitors and store the response for the toast notification. - Cleaned up localStorage after showing the toast to avoid repeating the message. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 55da9518ad..6485230dda 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -211,6 +211,21 @@ export default { }, mounted() { window.addEventListener("scroll", this.onScroll); + + // Retrieve the toast message from localStorage + const toastMessage = localStorage.getItem("toastMessage"); + + if (toastMessage) { + /** + * If a toast message exists in localStorage: + * 1. Parse the message from string to object format. + * 2. Display the toast notification using the root component's toastRes method. + * 3. Remove the message from localStorage to prevent it from showing again. + */ + this.$root.toastRes(JSON.parse(toastMessage)); // Show the toast message + localStorage.removeItem("toastMessage"); // Clean up the localStorage + } + }, beforeUnmount() { window.removeEventListener("scroll", this.onScroll); @@ -333,23 +348,19 @@ export default { // Delete each selected monitor Object.keys(this.selectedMonitors).forEach(id => { this.$root.deleteMonitor(id, (res) => { - // Display a response message for the operation - this.$root.toastRes(res); - - // Remove the monitor from the selection if deletion is successful if (res.ok) { + // Remove the monitor from the selectedMonitors list upon successful deletion delete this.selectedMonitors[id]; + + // Refresh the page immediately after deleting the selected monitors + window.location.reload(); + + // Store a flag in localStorage to trigger a toast notification once the page reloads + localStorage.setItem("toastMessage", JSON.stringify(res)); } }); }); - // Delay for UI updates before reloading the page - setTimeout(() => { - if (!Object.keys(this.selectedMonitors).length) { - window.location.reload(); // Refresh the page to show updates - } - }, 5000); - // Exit selection mode as deletion is in progress this.cancelSelectMode(); }, From f3948ce802f2f2c232f3b740fb4b05fa244e2483 Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Mon, 30 Dec 2024 06:33:50 +0100 Subject: [PATCH 5/8] Refined: Improve monitor deletion process and UI update - Replaced `window.location.reload()` with Vue Router navigation to a temporary route for smoother page reload. - Added Vue Router redirection to `/dashboard` after monitor deletion for better user experience. - Updated function documentation to clarify behavior and return type. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 6485230dda..06ea3f537c 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -342,26 +342,32 @@ export default { * Delete each selected monitor and update the UI once the deletion is complete. * This method initiates the deletion process for all selected monitors, updates * the user interface, and reloads the page to reflect the changes. - * @returns {void} + * @returns {void} - This function does not return any value. */ deleteSelected() { - // Delete each selected monitor + // Iterate over each selected monitor's ID and delete it Object.keys(this.selectedMonitors).forEach(id => { + // Call the root method to delete the monitor by its ID this.$root.deleteMonitor(id, (res) => { + // If the monitor deletion is successful if (res.ok) { // Remove the monitor from the selectedMonitors list upon successful deletion delete this.selectedMonitors[id]; - // Refresh the page immediately after deleting the selected monitors - window.location.reload(); + // Use Vue Router to navigate to a temporary route before redirecting to /dashboard + // This reloads the page to reflect changes after deletion + this.$router.push("/temp").then(() => { + this.$router.push("/dashboard"); + }); - // Store a flag in localStorage to trigger a toast notification once the page reloads + // Store a flag in localStorage to trigger a toast notification on page reload + // This ensures the notification displays after the page refreshes localStorage.setItem("toastMessage", JSON.stringify(res)); } }); }); - // Exit selection mode as deletion is in progress + // Exit the selection mode, indicating that the deletion process is in progress this.cancelSelectMode(); }, From cd6d4e3c1cd69ded4b0371f1e213c24ce61254fa Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Mon, 30 Dec 2024 11:16:54 +0100 Subject: [PATCH 6/8] Refined: Clean up code formatting for `deleteSelected` method - Removed JSDoc comment for the `deleteSelected` method `@returns {void}`. - No functional changes made to the logic or behavior of the method. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 06ea3f537c..93a7577ffd 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -342,7 +342,7 @@ export default { * Delete each selected monitor and update the UI once the deletion is complete. * This method initiates the deletion process for all selected monitors, updates * the user interface, and reloads the page to reflect the changes. - * @returns {void} - This function does not return any value. + * @returns {void} */ deleteSelected() { // Iterate over each selected monitor's ID and delete it From 6a96694c177e35755d4cb7fd509f8accac7b201b Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Tue, 31 Dec 2024 09:12:12 +0100 Subject: [PATCH 7/8] Refactored: Rename deletion methods and references for consistency - Renamed `deleteSelectedDialog` to `deleteSelectedMonitorDialog` for better clarity. - Updated the corresponding method `deleteSelected` to `deleteSelectedMonitor` to reflect the new naming convention. - Updated references in the template and JavaScript to match the new method names. - Ensured consistency in naming to improve code readability and maintainability. No functionality changes were made; only method names were modified for clarity. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 93a7577ffd..69c95205cd 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -39,7 +39,7 @@ <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button> <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button> - <button class="btn-outline-normal text-danger" @click="deleteSelectedDialog"><font-awesome-icon icon="trash" size="sm" /> {{ $t("Delete") }}</button> + <button class="btn-outline-normal text-danger" @click="deleteSelectedMonitorDialog"><font-awesome-icon icon="trash" size="sm" /> {{ $t("Delete") }}</button> <span v-if="selectedMonitorCount > 0"> {{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }} @@ -69,7 +69,7 @@ <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected"> {{ $t("pauseMonitorMsg") }} </Confirm> - <Confirm ref="confirmDeleteSelected" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelected"> + <Confirm ref="confirmDeleteSelectedMonitor" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelectedMonitor"> {{ $t("deleteSelectedMonitorMsg") }} </Confirm> </template> @@ -333,9 +333,9 @@ export default { * confirm or cancel the deletion of the selected monitors. * @returns {void} */ - deleteSelectedDialog() { + deleteSelectedMonitorDialog() { // Show the confirmation dialog for deletion - this.$refs.confirmDeleteSelected.show(); + this.$refs.confirmDeleteSelectedMonitor.show(); }, /** @@ -344,7 +344,7 @@ export default { * the user interface, and reloads the page to reflect the changes. * @returns {void} */ - deleteSelected() { + deleteSelectedMonitor() { // Iterate over each selected monitor's ID and delete it Object.keys(this.selectedMonitors).forEach(id => { // Call the root method to delete the monitor by its ID From c4391bb5839c006e91d54ae8329f5e4eaf4e969c Mon Sep 17 00:00:00 2001 From: GJS <homelab.api@gmail.com> Date: Thu, 2 Jan 2025 14:08:13 +0100 Subject: [PATCH 8/8] Updated: Adjust monitor deletion flow and page reload behavior - Changed the page redirect after monitor deletion to the home page ("/") for a proper UI refresh. - Removed the temporary route ("/temp") to simplify the deletion process. - Ensured that the UI reloads correctly after monitor deletions via a direct redirect to the home page. modified: src/components/MonitorList.vue --- src/components/MonitorList.vue | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index 69c95205cd..454c288d04 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -354,11 +354,9 @@ export default { // Remove the monitor from the selectedMonitors list upon successful deletion delete this.selectedMonitors[id]; - // Use Vue Router to navigate to a temporary route before redirecting to /dashboard - // This reloads the page to reflect changes after deletion - this.$router.push("/temp").then(() => { - this.$router.push("/dashboard"); - }); + // Navigate to the home page ("/") to trigger a page reload and reflect the updates + // This step is necessary to refresh the UI after the monitors have been deleted + this.$router.push("/"); // Store a flag in localStorage to trigger a toast notification on page reload // This ensures the notification displays after the page refreshes