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] 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 f5fdf332d..958eb1006 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 000000000..1be45100d
--- /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 1b4d004b9..3345a991c 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,