From 56d716cee4690bd82c05c10acb2f329c19c4a23b Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Fri, 10 Mar 2023 17:46:45 +0700
Subject: [PATCH 1/8] Create badge-list.md

---
 badge-list.md | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 badge-list.md

diff --git a/badge-list.md b/badge-list.md
new file mode 100644
index 0000000000..f5fdf332d9
--- /dev/null
+++ b/badge-list.md
@@ -0,0 +1,122 @@
+```
+    label,
+    upLabel = "Up",
+    downLabel = "Down",
+    pendingLabel = "Pending",
+    maintenanceLabel = "Maintenance",
+    upColor = badgeConstants.defaultUpColor,
+    downColor = badgeConstants.defaultDownColor,
+    pendingColor = badgeConstants.defaultPendingColor,
+    maintenanceColor = badgeConstants.defaultMaintenanceColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+/api/badge/:id/uptime/:duration?
+    label,
+    labelPrefix,
+    labelSuffix = badgeConstants.defaultUptimeLabelSuffix,
+    prefix,
+    suffix = badgeConstants.defaultUptimeValueSuffix,
+    color,
+    labelColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+/api/badge/:id/ping/:duration?
+    label,
+    labelPrefix,
+    labelSuffix = badgeConstants.defaultPingLabelSuffix,
+    prefix,
+    suffix = badgeConstants.defaultPingValueSuffix,
+    color = badgeConstants.defaultPingColor,
+    labelColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+/api/badge/:id/avg-response/:duration?
+    label,
+    labelPrefix,
+    labelSuffix,
+    prefix,
+    suffix = badgeConstants.defaultPingValueSuffix,
+    color = badgeConstants.defaultPingColor,
+    labelColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+/api/badge/:id/cert-exp
+    label,
+    labelPrefix,
+    labelSuffix,
+    prefix,
+    suffix = date ? "" : badgeConstants.defaultCertExpValueSuffix,
+    upColor = badgeConstants.defaultUpColor,
+    warnColor = badgeConstants.defaultWarnColor,
+    downColor = badgeConstants.defaultDownColor,
+    warnDays = badgeConstants.defaultCertExpireWarnDays,
+    downDays = badgeConstants.defaultCertExpireDownDays,
+    labelColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+/api/badge/:id/response
+    label,
+    labelPrefix,
+    labelSuffix,
+    prefix,
+    suffix = badgeConstants.defaultPingValueSuffix,
+    color = badgeConstants.defaultPingColor,
+    labelColor,
+    style = badgeConstants.defaultStyle,
+    value, // for demo purpose only
+```
+
+```
+Use in all routes
+    label
+    prefix
+    suffix,
+    labelColor
+    style = badgeConstants.defaultStyle,
+    value // for demo purpose only
+```
+
+```
+Use in all routes except status and cert-exp
+    color
+```
+
+```
+Use in all routes except status
+    labelPrefix
+    labelSuffix
+```
+
+```
+Use in routes status and cert-exp
+    upColor = badgeConstants.defaultUpColor,
+    downColor = badgeConstants.defaultDownColor,
+```
+
+```
+Use in status route only
+    pendingColor = badgeConstants.defaultPendingColor,
+    maintenanceColor = badgeConstants.defaultMaintenanceColor,
+```
+
+```
+Use in cert-exp route only
+    warnColor = badgeConstants.defaultWarnColor,
+    warnDays = badgeConstants.defaultCertExpireWarnDays,
+    downDays = badgeConstants.defaultCertExpireDownDays,
+```
\ No newline at end of file

From 3bbf269da036776b28064c38e397412975cd0231 Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Fri, 10 Mar 2023 19:25:04 +0700
Subject: [PATCH 2/8] generator modal

---
 badge-list.md                           |   1 +
 src/components/BadgeGeneratorDialog.vue | 283 ++++++++++++++++++++++++
 src/components/PublicGroupList.vue      |  14 +-
 3 files changed, 297 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BadgeGeneratorDialog.vue

diff --git a/badge-list.md b/badge-list.md
index f5fdf332d9..958eb10067 100644
--- a/badge-list.md
+++ b/badge-list.md
@@ -1,3 +1,4 @@
+/api/badge/:id/status
 ```
     label,
     upLabel = "Up",
diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
new file mode 100644
index 0000000000..1be45100de
--- /dev/null
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -0,0 +1,283 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Badge Generator", [monitor.name]) }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
+                            <select id="type" v-model="badge.type" class="form-select">
+                                <option value="status">status</option>
+                                <option value="uptime">uptime</option>
+                                <option value="ping">ping</option>
+                                <option value="avg-response">avg-response</option>
+                                <option value="cert-exp">cert-exp</option>
+                                <option value="response">response</option>
+                            </select>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
+                            <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
+                            <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
+                            <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
+                            <input id="label" v-model="badge.label" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
+                            <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
+                            <input id="prefix" v-model="badge.label" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
+                            <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
+                            <input id="suffix" v-model="badge.label" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
+                            <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
+                            <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
+                            <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
+                            <input id="color" v-model="badge.labelColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
+                            <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
+                            <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
+                            <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
+                            <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
+                            <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
+                            <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
+                            <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
+                            <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
+                            <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
+                            <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
+                            <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
+                            <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
+                            <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
+                            <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
+                            <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
+                            <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
+                        </div>
+
+                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
+                            <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
+                            <input id="downDays" v-model="badge.labelColor" type="number" min="0" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
+                            <select id="style" v-model="badge.style" class="form-select">
+                                <option value="plastic">plastic</option>
+                                <option value="flat">flat</option>
+                                <option value="flat-square">flat-square</option>
+                                <option value="for-the-badge">for-the-badge</option>
+                                <option value="social">social</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
+                            <input id="value" v-model="badge.value" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="my-3">
+                            <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
+                            <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
+                            {{ $t("Close") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import CopyableInput from "./CopyableInput.vue";
+
+export default {
+    components: {
+        CopyableInput
+    },
+    props: {},
+    emits: [],
+    data() {
+        return {
+            model: null,
+            processing: false,
+            monitor: {
+                id: null,
+                name: null,
+            },
+            badge: {
+                type: "status",
+                duration: null,
+                label: null,
+                prefix: null,
+                suffix: null,
+                labelColor: null,
+
+
+                style: "plastic",
+                value: null,
+            },
+            parameters: {
+                status: [
+                    "upLabel",
+                    "downLabel",
+                    "pendingLabel",
+                    "maintenanceLabel",
+                    "upColor",
+                    "downColor",
+                    "pendingColor",
+                    "maintenanceColor",
+                ],
+                uptime: [
+                    "duration",
+                    "labelPrefix",
+                    "labelSuffix",
+                    "prefix",
+                    "suffix",
+                    "color",
+                    "labelColor",
+                ],
+                ping: [
+                    "duration",
+                    "labelPrefix",
+                    "labelSuffix",
+                    "prefix",
+                    "suffix",
+                    "color",
+                    "labelColor",
+                ],
+                "avg-response": [
+                    "duration",
+                    "labelPrefix",
+                    "labelSuffix",
+                    "prefix",
+                    "suffix",
+                    "color",
+                    "labelColor",
+                ],
+                "cert-exp": [
+                    "labelPrefix",
+                    "labelSuffix",
+                    "prefix",
+                    "suffix",
+                    "upColor",
+                    "warnColor",
+                    "downColor",
+                    "downDays",
+                    "labelColor",
+                ],
+                response: [
+                    "labelPrefix",
+                    "labelSuffix",
+                    "prefix",
+                    "suffix",
+                    "color",
+                    "labelColor",
+                ],
+            }
+        };
+    },
+
+    computed: {
+        badgeURL() {
+            if(!this.monitor.id || !this.badge.type) return null;
+            let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
+
+            let parameter_list = {};
+            for(let parameter of this.parameters[this.badge.type] || []) {
+                if(parameter == "duration" && this.badge.duration) {
+                    badgeURL += "/" + this.badge.duration;
+                    continue;
+                }
+                
+                if(this.badge[parameter]) {
+                    parameter_list[parameter] = this.badge[parameter]
+                }
+            }
+
+            for(let parameter of ["label", "style", "value"]) {
+                if(this.badge[parameter]) {
+                    parameter_list[parameter] = this.badge[parameter]
+                }
+            }
+
+            if(Object.keys(parameter_list).length > 0) return badgeURL + "?" + new URLSearchParams(parameter_list);
+
+            return badgeURL;
+        },
+    },
+
+    mounted() {
+        this.BadgeGeneratorModal = new Modal(this.$refs.BadgeGeneratorModal);
+    },
+
+    methods: {
+        /**
+         * Setting monitor
+         * @param {number} monitorId    ID of monitor
+         * @param {string} monitorName  Name of monitor
+         */
+        show(monitorId, monitorName) {
+            this.monitor = {
+                id: monitorId,
+                name: monitorName,
+            };
+
+            this.BadgeGeneratorModal.show();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 1b4d004b98..3345a991c5 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -57,10 +57,19 @@
                                                     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"
+                                            >
+                                                <font-awesome-icon
+                                                    :class="{'link-active': true, 'btn-link': true}"
+                                                    icon="eye" class="action me-3"
+                                                    @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
+                                                />
+                                            </span>
                                         </div>
                                         <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
@@ -70,6 +79,7 @@
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
+                                <BadgeGeneratorDialog ref="badgeGeneratorDialog" />
                             </div>
                         </template>
                     </Draggable>
@@ -80,6 +90,7 @@
 </template>
 
 <script>
+import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
 import Draggable from "vuedraggable";
 import HeartbeatBar from "./HeartbeatBar.vue";
 import Uptime from "./Uptime.vue";
@@ -87,6 +98,7 @@ import Tag from "./Tag.vue";
 
 export default {
     components: {
+        BadgeGeneratorDialog,
         Draggable,
         HeartbeatBar,
         Uptime,

From 16f2701f61f38dfb5c19a4023b2be772c40c1719 Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Fri, 10 Mar 2023 20:24:10 +0700
Subject: [PATCH 3/8] idk how to fix camelcase lint :cry:

---
 src/components/BadgeGeneratorDialog.vue | 29 +++++++++++++++----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
index 1be45100de..b8d912fba5 100644
--- a/src/components/BadgeGeneratorDialog.vue
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -156,7 +156,6 @@ export default {
                 suffix: null,
                 labelColor: null,
 
-
                 style: "plastic",
                 value: null,
             },
@@ -223,28 +222,36 @@ export default {
 
     computed: {
         badgeURL() {
-            if(!this.monitor.id || !this.badge.type) return null;
+            if (!this.monitor.id || !this.badge.type) {
+                return null;
+            }
             let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
 
+            // eslint-disable-next-line camelcase
             let parameter_list = {};
-            for(let parameter of this.parameters[this.badge.type] || []) {
-                if(parameter == "duration" && this.badge.duration) {
+
+            for (let parameter of this.parameters[this.badge.type] || []) {
+                if (parameter === "duration" && this.badge.duration) {
                     badgeURL += "/" + this.badge.duration;
                     continue;
                 }
-                
-                if(this.badge[parameter]) {
-                    parameter_list[parameter] = this.badge[parameter]
+
+                if (this.badge[parameter]) {
+                    // eslint-disable-next-line camelcase
+                    parameter_list[parameter] = this.badge[parameter];
                 }
             }
 
-            for(let parameter of ["label", "style", "value"]) {
-                if(this.badge[parameter]) {
-                    parameter_list[parameter] = this.badge[parameter]
+            for (let parameter of [ "label", "style", "value" ]) {
+                if (this.badge[parameter]) {
+                    // eslint-disable-next-line camelcase
+                    parameter_list[parameter] = this.badge[parameter];
                 }
             }
 
-            if(Object.keys(parameter_list).length > 0) return badgeURL + "?" + new URLSearchParams(parameter_list);
+            if (Object.keys(parameter_list).length > 0) {
+                return badgeURL + "?" + new URLSearchParams(parameter_list);
+            }
 
             return badgeURL;
         },

From 29b28092791c6d5fb004da65c43e11e713d69305 Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Fri, 10 Mar 2023 22:04:47 +0700
Subject: [PATCH 4/8] Change Icon, Add missing var

---
 badge-list.md                           | 123 -----------
 src/components/BadgeGeneratorDialog.vue | 262 +++++++++++++-----------
 src/components/PublicGroupList.vue      |   3 +-
 src/icon.js                             |   2 +
 4 files changed, 141 insertions(+), 249 deletions(-)
 delete mode 100644 badge-list.md

diff --git a/badge-list.md b/badge-list.md
deleted file mode 100644
index 958eb10067..0000000000
--- a/badge-list.md
+++ /dev/null
@@ -1,123 +0,0 @@
-/api/badge/:id/status
-```
-    label,
-    upLabel = "Up",
-    downLabel = "Down",
-    pendingLabel = "Pending",
-    maintenanceLabel = "Maintenance",
-    upColor = badgeConstants.defaultUpColor,
-    downColor = badgeConstants.defaultDownColor,
-    pendingColor = badgeConstants.defaultPendingColor,
-    maintenanceColor = badgeConstants.defaultMaintenanceColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/uptime/:duration?
-    label,
-    labelPrefix,
-    labelSuffix = badgeConstants.defaultUptimeLabelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultUptimeValueSuffix,
-    color,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/ping/:duration?
-    label,
-    labelPrefix,
-    labelSuffix = badgeConstants.defaultPingLabelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/avg-response/:duration?
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/cert-exp
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = date ? "" : badgeConstants.defaultCertExpValueSuffix,
-    upColor = badgeConstants.defaultUpColor,
-    warnColor = badgeConstants.defaultWarnColor,
-    downColor = badgeConstants.defaultDownColor,
-    warnDays = badgeConstants.defaultCertExpireWarnDays,
-    downDays = badgeConstants.defaultCertExpireDownDays,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-/api/badge/:id/response
-    label,
-    labelPrefix,
-    labelSuffix,
-    prefix,
-    suffix = badgeConstants.defaultPingValueSuffix,
-    color = badgeConstants.defaultPingColor,
-    labelColor,
-    style = badgeConstants.defaultStyle,
-    value, // for demo purpose only
-```
-
-```
-Use in all routes
-    label
-    prefix
-    suffix,
-    labelColor
-    style = badgeConstants.defaultStyle,
-    value // for demo purpose only
-```
-
-```
-Use in all routes except status and cert-exp
-    color
-```
-
-```
-Use in all routes except status
-    labelPrefix
-    labelSuffix
-```
-
-```
-Use in routes status and cert-exp
-    upColor = badgeConstants.defaultUpColor,
-    downColor = badgeConstants.defaultDownColor,
-```
-
-```
-Use in status route only
-    pendingColor = badgeConstants.defaultPendingColor,
-    maintenanceColor = badgeConstants.defaultMaintenanceColor,
-```
-
-```
-Use in cert-exp route only
-    warnColor = badgeConstants.defaultWarnColor,
-    warnDays = badgeConstants.defaultCertExpireWarnDays,
-    downDays = badgeConstants.defaultCertExpireDownDays,
-```
\ No newline at end of file
diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
index b8d912fba5..1ebcd525f3 100644
--- a/src/components/BadgeGeneratorDialog.vue
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -1,133 +1,131 @@
 <template>
-    <form @submit.prevent="submit">
-        <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 id="exampleModalLabel" class="modal-title">
-                            {{ $t("Badge Generator", [monitor.name]) }}
-                        </h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+    <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 id="exampleModalLabel" class="modal-title">
+                        {{ $t("Badge Generator", [monitor.name]) }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
+                        <select id="type" v-model="badge.type" class="form-select">
+                            <option value="status">status</option>
+                            <option value="uptime">uptime</option>
+                            <option value="ping">ping</option>
+                            <option value="avg-response">avg-response</option>
+                            <option value="cert-exp">cert-exp</option>
+                            <option value="response">response</option>
+                        </select>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
+                        <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
+                        <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
+                        <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
+                        <input id="label" v-model="badge.label" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
+                        <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
+                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
+                        <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
+                        <input id="suffix" v-model="badge.suffix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
+                        <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
+                        <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
+                        <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
+                        <input id="color" v-model="badge.color" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
+                        <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
+                        <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
+                        <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
+                        <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
+                        <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
+                        <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
+                        <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
+                        <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
+                        <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
+                        <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
+                        <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
+                        <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
+                        <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
+                        <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
+                        <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
+                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
+                    </div>
+
+                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
+                        <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
+                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" required>
                     </div>
-                    <div class="modal-body">
-                        <div class="mb-3">
-                            <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
-                            <select id="type" v-model="badge.type" class="form-select">
-                                <option value="status">status</option>
-                                <option value="uptime">uptime</option>
-                                <option value="ping">ping</option>
-                                <option value="avg-response">avg-response</option>
-                                <option value="cert-exp">cert-exp</option>
-                                <option value="response">response</option>
-                            </select>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
-                            <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
-                            <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
-                            <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
-                            <input id="label" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
-                            <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
-                            <input id="prefix" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
-                            <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
-                            <input id="suffix" v-model="badge.label" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
-                            <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
-                            <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
-                            <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
-                            <input id="color" v-model="badge.labelColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
-                            <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
-                            <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
-                            <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
-                            <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
-                            <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
-                            <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
-                            <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
-                            <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
-                            <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
-                            <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
-                            <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
-                            <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
-                            <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
-                            <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
-                            <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
-                            <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
-                            <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
-                            <input id="downDays" v-model="badge.labelColor" type="number" min="0" class="form-control" required>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
-                            <select id="style" v-model="badge.style" class="form-select">
-                                <option value="plastic">plastic</option>
-                                <option value="flat">flat</option>
-                                <option value="flat-square">flat-square</option>
-                                <option value="for-the-badge">for-the-badge</option>
-                                <option value="social">social</option>
-                            </select>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
-                            <input id="value" v-model="badge.value" type="text" class="form-control" required>
-                        </div>
-
-                        <div class="my-3">
-                            <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
-                            <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
-                        </div>
+
+                    <div class="mb-3">
+                        <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
+                        <select id="style" v-model="badge.style" class="form-select">
+                            <option value="plastic">plastic</option>
+                            <option value="flat">flat</option>
+                            <option value="flat-square">flat-square</option>
+                            <option value="for-the-badge">for-the-badge</option>
+                            <option value="social">social</option>
+                        </select>
                     </div>
 
-                    <div class="modal-footer">
-                        <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
-                            {{ $t("Close") }}
-                        </button>
+                    <div class="mb-3">
+                        <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
+                        <input id="value" v-model="badge.value" type="text" class="form-control" required>
                     </div>
+
+                    <div class="my-3">
+                        <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
+                        <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
+                        {{ $t("Close") }}
+                    </button>
                 </div>
             </div>
         </div>
-    </form>
+    </div>
 </template>
 
 <script lang="ts">
@@ -155,8 +153,17 @@ export default {
                 prefix: null,
                 suffix: null,
                 labelColor: null,
-
-                style: "plastic",
+                color: null,
+                labelPrefix: null,
+                labelSuffix: null,
+                upColor: null,
+                downColor: null,
+                pendingColor: null,
+                maintenanceColor: null,
+                warnColor: null,
+                warnDays: null,
+                downDays: null,
+                style: "flat",
                 value: null,
             },
             parameters: {
@@ -205,6 +212,7 @@ export default {
                     "upColor",
                     "warnColor",
                     "downColor",
+                    "warnDays",
                     "downDays",
                     "labelColor",
                 ],
@@ -223,7 +231,7 @@ export default {
     computed: {
         badgeURL() {
             if (!this.monitor.id || !this.badge.type) {
-                return null;
+                return;
             }
             let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
 
@@ -243,6 +251,10 @@ export default {
             }
 
             for (let parameter of [ "label", "style", "value" ]) {
+                if (parameter === "style" && this.badge.style === "flat") {
+                    continue;
+                }
+
                 if (this.badge[parameter]) {
                     // eslint-disable-next-line camelcase
                     parameter_list[parameter] = this.badge[parameter];
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 3345a991c5..59658d6d8e 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -65,8 +65,9 @@
                                                 title="Badge Generator"
                                             >
                                                 <font-awesome-icon
+                                                    v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
-                                                    icon="eye" class="action me-3"
+                                                    icon="certificate" class="action me-3"
                                                     @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
                                                 />
                                             </span>
diff --git a/src/icon.js b/src/icon.js
index a69b2a88bc..7bdfe1ca02 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -49,6 +49,7 @@ import {
     faFilter,
     faInfoCircle,
     faClone,
+    faCertificate,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -95,6 +96,7 @@ library.add(
     faFilter,
     faInfoCircle,
     faClone,
+    faCertificate,
 );
 
 export { FontAwesomeIcon };

From 3579520575150937d4ff8a9778024b71968f93e0 Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Wed, 12 Apr 2023 20:09:04 +0700
Subject: [PATCH 5/8] Fix Eslint

Co-authored-by: Nelson Chan <3271800+chakflying@users.noreply.github.com>
---
 src/components/BadgeGeneratorDialog.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
index 1ebcd525f3..58a03e2b2b 100644
--- a/src/components/BadgeGeneratorDialog.vue
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -235,8 +235,7 @@ export default {
             }
             let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type;
 
-            // eslint-disable-next-line camelcase
-            let parameter_list = {};
+            let parameterList = {};
 
             for (let parameter of this.parameters[this.badge.type] || []) {
                 if (parameter === "duration" && this.badge.duration) {
@@ -245,8 +244,7 @@ export default {
                 }
 
                 if (this.badge[parameter]) {
-                    // eslint-disable-next-line camelcase
-                    parameter_list[parameter] = this.badge[parameter];
+                    parameterList[parameter] = this.badge[parameter];
                 }
             }
 
@@ -256,13 +254,12 @@ export default {
                 }
 
                 if (this.badge[parameter]) {
-                    // eslint-disable-next-line camelcase
-                    parameter_list[parameter] = this.badge[parameter];
+                    parameterList[parameter] = this.badge[parameter];
                 }
             }
 
-            if (Object.keys(parameter_list).length > 0) {
-                return badgeURL + "?" + new URLSearchParams(parameter_list);
+            if (Object.keys(parameterList).length > 0) {
+                return badgeURL + "?" + new URLSearchParams(parameterList);
             }
 
             return badgeURL;

From 966066b897235579dfbac2d7ce639ea236aa63cc Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Mon, 15 May 2023 13:56:59 +0700
Subject: [PATCH 6/8] Update src/components/BadgeGeneratorDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/BadgeGeneratorDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue
index 58a03e2b2b..9e073e39ad 100644
--- a/src/components/BadgeGeneratorDialog.vue
+++ b/src/components/BadgeGeneratorDialog.vue
@@ -3,7 +3,7 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 id="exampleModalLabel" class="modal-title">
+                    <h5 class="modal-title">
                         {{ $t("Badge Generator", [monitor.name]) }}
                     </h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />

From 85eb0843056411bd5dc44910cb92057aac9ffbda Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Mon, 29 May 2023 20:11:06 +0700
Subject: [PATCH 7/8] Setting Modal

---
 src/components/MonitorSettingDialog.vue | 123 ++++++++++++++++++++++++
 src/components/PublicGroupList.vue      |  32 ++----
 2 files changed, 129 insertions(+), 26 deletions(-)
 create mode 100644 src/components/MonitorSettingDialog.vue

diff --git a/src/components/MonitorSettingDialog.vue b/src/components/MonitorSettingDialog.vue
new file mode 100644
index 0000000000..a6976853c0
--- /dev/null
+++ b/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>
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 59658d6d8e..e6af57eb7e 100644
--- a/src/components/PublicGroupList.vue
+++ b/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"
-                                                    @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
+                                                    icon="cog" class="action me-3"
+                                                    @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

From 3ff910a8f81d5a9e7b6ddd18628db55128a946cb Mon Sep 17 00:00:00 2001
From: Yoswaris Lawpaiboon <22832362+kiznick@users.noreply.github.com>
Date: Tue, 30 May 2023 20:06:53 +0700
Subject: [PATCH 8/8] Fix Modal

---
 src/components/PublicGroupList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index e6af57eb7e..00f38c5b9e 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -69,7 +69,6 @@
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
-                                <MonitorSettingDialog ref="monitorSettingDialog" />
                             </div>
                         </template>
                     </Draggable>
@@ -77,6 +76,7 @@
             </div>
         </template>
     </Draggable>
+    <MonitorSettingDialog ref="monitorSettingDialog" />
 </template>
 
 <script>