Setting Modal

src/components/MonitorSettingDialog.vue

@@ -0,0 +1,123 @@
+<template>
+    <div ref="MonitorSettingDialog" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("Monitor Setting", [monitor.name]) }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <div class="my-3 form-check">
+                        <input id="show-clickable-link" v-model="monitor.isClickAble" class="form-check-input" type="checkbox" @click="toggleLink(monitor.group_index, monitor.monitor_index)" />
+                        <label class="form-check-label" for="show-clickable-link">
+                            {{ $t("Show Clickable Link") }}
+                        </label>
+                        <div class="form-text">
+                            {{ $t("Show Clickable Link Description") }}
+                        </div>
+                    </div>
+
+                    <button
+                        class="btn btn-primary btn-add-group me-2"
+                        @click="$refs.badgeGeneratorDialog.show(monitor.id, monitor.name)"
+                    >
+                        <font-awesome-icon icon="certificate" />
+                        {{ $t("Open Badge Generator") }}
+                    </button>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
+                        {{ $t("Close") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <BadgeGeneratorDialog ref="badgeGeneratorDialog" />
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
+
+export default {
+    components: {
+        BadgeGeneratorDialog
+    },
+    props: {},
+    emits: [],
+    data() {
+        return {
+            monitor: {
+                id: null,
+                name: null,
+            },
+        };
+    },
+
+    computed: {},
+
+    mounted() {
+        this.MonitorSettingDialog = new Modal(this.$refs.MonitorSettingDialog);
+    },
+
+    methods: {
+        /**
+         * Setting monitor
+         * @param {Object} group Data of monitor
+         * @param {Object} monitor Data of monitor
+         */
+        show(group, monitor) {
+            this.monitor = {
+                id: monitor.element.id,
+                name: monitor.element.name,
+                monitor_index: monitor.index,
+                group_index: group.index,
+                isClickAble: this.showLink(monitor),
+            };
+
+            this.MonitorSettingDialog.show();
+        },
+
+        /**
+         * Toggle the value of sendUrl
+         * @param {number} groupIndex Index of group monitor is member of
+         * @param {number} index Index of monitor within group
+         */
+        toggleLink(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
+        },
+
+        /**
+         * Should a link to the monitor be shown?
+         * Attempts to guess if a link should be shown based upon if
+         * sendUrl is set and if the URL is default or not.
+         * @param {Object} monitor Monitor to check
+         * @param {boolean} [ignoreSendUrl=false] Should the presence of the sendUrl
+         * property be ignored. This will only work in edit mode.
+         * @returns {boolean}
+         */
+        showLink(monitor, ignoreSendUrl = false) {
+            // We must check if there are any elements in monitorList to
+            // prevent undefined errors if it hasn't been loaded yet
+            if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
+            }
+            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/PublicGroupList.vue

@@ -49,26 +49,15 @@
                                                 {{ monitor.element.name }}
                                             </a>
                                             <p v-else class="item-name"> {{ monitor.element.name }} </p>
-                                            <span
-                                                v-if="showLink(monitor, true)"
-                                                title="Toggle Clickable Link"
-                                            >
-                                                <font-awesome-icon
-                                                    v-if="editMode"
-                                                    :class="{'link-active': monitor.element.sendUrl, 'btn-link': true}"
-                                                    icon="link" class="action me-3"
-                                                    @click="toggleLink(group.index, monitor.index)"
-                                                />
-                                            </span>
 
                                             <span
-                                                title="Badge Generator"
+                                                title="Setting"
                                             >
                                                 <font-awesome-icon
                                                     v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
-                                                    icon="certificate" class="action me-3"
+                                                    icon="cog" class="action me-3"
-                                                    @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
+                                                    @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
                                         </div>
@@ -80,7 +69,7 @@
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
-                                <BadgeGeneratorDialog ref="badgeGeneratorDialog" />
+                                <MonitorSettingDialog ref="monitorSettingDialog" />
                             </div>
                         </template>
                     </Draggable>
@@ -91,7 +80,7 @@
 </template>
 
 <script>
-import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
+import MonitorSettingDialog from "./MonitorSettingDialog.vue";
 import Draggable from "vuedraggable";
 import HeartbeatBar from "./HeartbeatBar.vue";
 import Uptime from "./Uptime.vue";
@@ -99,7 +88,7 @@ import Tag from "./Tag.vue";
 
 export default {
     components: {
-        BadgeGeneratorDialog,
+        MonitorSettingDialog,
         Draggable,
         HeartbeatBar,
         Uptime,
@@ -148,15 +137,6 @@ export default {
             this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
         },
 
-        /**
-         * Toggle the value of sendUrl
-         * @param {number} groupIndex Index of group monitor is member of
-         * @param {number} index Index of monitor within group
-         */
-        toggleLink(groupIndex, index) {
-            this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
-        },
-
         /**
          * Should a link to the monitor be shown?
          * Attempts to guess if a link should be shown based upon if