mirror of
https://github.com/koichixD/uptime-kuma.git
synced 2026-08-29 18:01:05 +00:00
Frank Elsinga
0f61d7ee1b
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
357 lines
15 KiB
Vue
357 lines
15 KiB
Vue
<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 Link Generator", [monitor.name]) }}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('Close')" />
|
|
</div>
|
|
<div class="modal-body">
|
|
<i18n-t keypath="Badge Link Generator Helptext" tag="p" class="form-text mb-3">
|
|
<template #documentation>
|
|
<a
|
|
href="https://github.com/louislam/uptime-kuma/wiki/Badge"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{{ $t("documentation") }}
|
|
</a>
|
|
</template>
|
|
</i18n-t>
|
|
<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>
|