Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change Icon, Add missing var

Browse Source
pull/2915/head
Yoswaris Lawpaiboon 2 years ago
parent 16f2701f61
commit 29b2809279
4 changed files with 141 additions and 249 deletions
Show Stats Download Patch File Download Diff File

123
badge-list.md
Unescape View File

@ -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,
```

262
src/components/BadgeGeneratorDialog.vue
Unescape View File

@ -1,133 +1,131 @@
<template> <template>
<form @submit.prevent="submit"> <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
<div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static"> <div class="modal-dialog">
<div class="modal-dialog"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 id="exampleModalLabel" class="modal-title">
<h5 id="exampleModalLabel" class="modal-title"> {{ $t("Badge Generator", [monitor.name]) }}
{{ $t("Badge Generator", [monitor.name]) }} </h5>
</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
<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>
<div class="modal-body">
<div class="mb-3"> <div class="mb-3">
<label for="type" class="form-label">{{ $t("Badge Type") }}</label> <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
<select id="type" v-model="badge.type" class="form-select"> <select id="style" v-model="badge.style" class="form-select">
<option value="status">status</option> <option value="plastic">plastic</option>
<option value="uptime">uptime</option> <option value="flat">flat</option>
<option value="ping">ping</option> <option value="flat-square">flat-square</option>
<option value="avg-response">avg-response</option> <option value="for-the-badge">for-the-badge</option>
<option value="cert-exp">cert-exp</option> <option value="social">social</option>
<option value="response">response</option> </select>
</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>
<div class="modal-footer"> <div class="mb-3">
<button type="submit" class="btn btn-danger" data-bs-dismiss="modal"> <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
{{ $t("Close") }} <input id="value" v-model="badge.value" type="text" class="form-control" required>
</button>
</div> </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>
</div> </div>
</form> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -155,8 +153,17 @@ export default {
prefix: null, prefix: null,
suffix: null, suffix: null,
labelColor: null, labelColor: null,
color: null,
style: "plastic", labelPrefix: null,
labelSuffix: null,
upColor: null,
downColor: null,
pendingColor: null,
maintenanceColor: null,
warnColor: null,
warnDays: null,
downDays: null,
style: "flat",
value: null, value: null,
}, },
parameters: { parameters: {
@ -205,6 +212,7 @@ export default {
"upColor", "upColor",
"warnColor", "warnColor",
"downColor", "downColor",
"warnDays",
"downDays", "downDays",
"labelColor", "labelColor",
], ],
@ -223,7 +231,7 @@ export default {
computed: { computed: {
badgeURL() { badgeURL() {
if (!this.monitor.id || !this.badge.type) { if (!this.monitor.id || !this.badge.type) {
return null; return;
} }
let badgeURL = this.$root.baseURL + "/api/badge/" + this.monitor.id + "/" + this.badge.type; 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" ]) { for (let parameter of [ "label", "style", "value" ]) {
if (parameter === "style" && this.badge.style === "flat") {
continue;
}
if (this.badge[parameter]) { if (this.badge[parameter]) {
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
parameter_list[parameter] = this.badge[parameter]; parameter_list[parameter] = this.badge[parameter];

3
src/components/PublicGroupList.vue
Unescape View File

@ -65,8 +65,9 @@
title="Badge Generator" title="Badge Generator"
> >
<font-awesome-icon <font-awesome-icon
v-if="editMode"
:class="{'link-active': true, 'btn-link': true}" :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)" @click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
/> />
</span> </span>

2
src/icon.js
Unescape View File

@ -49,6 +49,7 @@ import {
faFilter, faFilter,
faInfoCircle, faInfoCircle,
faClone, faClone,
faCertificate,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@ -95,6 +96,7 @@ library.add(
faFilter, faFilter,
faInfoCircle, faInfoCircle,
faClone, faClone,
faCertificate,
); );
export { FontAwesomeIcon }; export { FontAwesomeIcon };

Write Preview
Loading…
Cancel
Save