diff options
Diffstat (limited to 'src/components/BadgeGeneratorDialog.vue')
| -rw-r--r-- | src/components/BadgeGeneratorDialog.vue | 306 |
1 files changed, 306 insertions, 0 deletions
diff --git a/src/components/BadgeGeneratorDialog.vue b/src/components/BadgeGeneratorDialog.vue new file mode 100644 index 0000000..7faa4c5 --- /dev/null +++ b/src/components/BadgeGeneratorDialog.vue @@ -0,0 +1,306 @@ +<template> + <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 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 (in hours)") }}</label> + <input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control"> + </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"> + </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"> + </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" placeholder="%" class="form-control"> + </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" placeholder="#555" class="form-control"> + </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" :placeholder="badgeConstants.defaultUpColor" class="form-control"> + </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"> + </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" placeholder="h" class="form-control"> + </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" :placeholder="badgeConstants.defaultUpColor"> + </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" :placeholder="badgeConstants.defaultDownColor"> + </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" :placeholder="badgeConstants.defaultPendingColor"> + </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" :placeholder="badgeConstants.defaultMaintenanceColor"> + </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="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor"> + </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" :placeholder="badgeConstants.defaultCertExpireWarnDays"> + </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" :placeholder="badgeConstants.defaultCertExpireDownDays"> + </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"> + </div> + + <div class="mb-3 pt-3 d-flex justify-content-center"> + <img :src="badgeURL" :alt="$t('Badge Preview')"> + </div> + + <div class="my-3"> + <label for="badge-url" class="form-label">{{ $t("Badge URL") }}</label> + <CopyableInput id="badge-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> +</template> + +<script lang="ts"> +import { Modal } from "bootstrap"; +import CopyableInput from "./CopyableInput.vue"; +import { badgeConstants } from "../util.ts"; + +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, + 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: { + 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", + "warnDays", + "downDays", + "labelColor", + ], + response: [ + "labelPrefix", + "labelSuffix", + "prefix", + "suffix", + "color", + "labelColor", + ], + }, + badgeConstants, + }; + }, + + computed: { + badgeURL() { + if (!this.monitor.id || !this.badge.type) { + return; + } + let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type; + + let parameterList = {}; + + for (let parameter of this.parameters[this.badge.type] || []) { + if (parameter === "duration" && this.badge.duration) { + badgeURL += "/" + this.badge.duration; + continue; + } + + if (this.badge[parameter]) { + parameterList[parameter] = this.badge[parameter]; + } + } + + for (let parameter of [ "label", "style", "value" ]) { + if (parameter === "style" && this.badge.style === "flat") { + continue; + } + + if (this.badge[parameter]) { + parameterList[parameter] = this.badge[parameter]; + } + } + + if (Object.keys(parameterList).length > 0) { + return badgeURL + "?" + new URLSearchParams(parameterList); + } + + 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 + * @returns {void} + */ + 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> |