feat(Add) : Add Settings Toggle for Pause confirmation dialogue

src/components/Confirm.vue

@@ -10,6 +10,17 @@
                 </div>
                 <div class="modal-body">
                     <slot />
+                    <div v-if="showCheckbox" class="form-check mt-3">
+                        <input
+                            id="doNotShowAgain"
+                            v-model="doNotShowAgain"
+                            class="form-check-input"
+                            type="checkbox"
+                        />
+                        <label class="form-check-label" for="doNotShowAgain">
+                            {{ $t("Do not show this again") }}
+                        </label>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn" :class="btnStyle" data-bs-dismiss="modal" @click="yes">
@@ -48,11 +59,17 @@ export default {
         title: {
             type: String,
             default: null,
+        },
+        /** Show "Do not show again" checkbox */
+        showCheckbox: {
+            type: Boolean,
+            default: false,
         }
     },
     emits: [ "yes", "no" ],
     data: () => ({
         modal: null,
+        doNotShowAgain: false,
     }),
     mounted() {
         this.modal = new Modal(this.$refs.modal);
@@ -63,14 +80,15 @@ export default {
          * @returns {void}
          */
         show() {
+            this.doNotShowAgain = false;
             this.modal.show();
         },
         /**
          * @fires string "yes" Notify the parent when Yes is pressed
          * @returns {void}
          */
         yes() {
-            this.$emit("yes");
+            this.$emit("yes", this.doNotShowAgain);
         },
         /**
          * @fires string "no" Notify the parent when No is pressed

src/components/MonitorList.vue

@@ -64,7 +64,7 @@
         </div>
     </div>
 
-    <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
+    <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" :show-checkbox="true" @yes="pauseSelected">
         {{ $t("pauseMonitorMsg") }}
     </Confirm>
 </template>
@@ -286,9 +286,21 @@ export default {
         },
         /**
          * Pause each selected monitor
+         * @param {boolean} doNotShowAgain Whether user checked "do not show again"
          * @returns {void}
          */
-        pauseSelected() {
+        pauseSelected(doNotShowAgain = false) {
+            // If user checked "do not show again", save the setting
+            if (doNotShowAgain) {
+                this.$root.getSocket().emit("setSettings", {
+                    skipPauseConfirm: true
+                }, "", (res) => {
+                    if (res.ok && this.$root.info) {
+                        this.$root.info.skipPauseConfirm = true;
+                    }
+                });
+            }
+
             Object.keys(this.selectedMonitors)
                 .filter(id => this.$root.monitorList[id].active)
                 .forEach(id => this.$root.getSocket().emit("pauseMonitor", id, () => {}));

src/lang/en.json

@@ -591,6 +591,8 @@
     "resolverserverDescription": "Cloudflare is the default server. You can change the resolver server anytime.",
     "rrtypeDescription": "Select the RR type you want to monitor",
     "pauseMonitorMsg": "Are you sure want to pause?",
+    "Do not show this again": "Do not show this again",
+    "Pause Monitors": "Pause Monitors",
     "enableDefaultNotificationDescription": "This notification will be enabled by default for new monitors. You can still disable the notification separately for each monitor.",
     "Clear All Events": "Clear All Events",
     "clearAllEventsMsg": "Are you sure want to delete all events?",

src/pages/Details.vue

@@ -429,6 +429,7 @@
                 ref="confirmPause"
                 :yes-text="$t('Yes')"
                 :no-text="$t('No')"
+                :show-checkbox="true"
                 @yes="pauseMonitor"
             >
                 {{ $t("pauseMonitorMsg") }}
@@ -705,9 +706,21 @@ export default {
 
         /**
          * Request that this monitor is paused
+         * @param {boolean} doNotShowAgain Whether user checked "do not show again"
          * @returns {void}
          */
-        pauseMonitor() {
+        pauseMonitor(doNotShowAgain = false) {
+            // If user checked "do not show again", save the setting
+            if (doNotShowAgain) {
+                this.$root.getSocket().emit("setSettings", {
+                    skipPauseConfirm: true
+                }, "", (res) => {
+                    if (res.ok && this.$root.info) {
+                        this.$root.info.skipPauseConfirm = true;
+                    }
+                });
+            }
+
             this.$root
                 .getSocket()
                 .emit("pauseMonitor", this.monitor.id, (res) => {