mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-08-21 08:45:32 +08:00
Merge branch 'master' into group-monitors
This commit is contained in:
Peace
GitHub
228
src/components/APIKeyDialog.vue
Normal file
228
src/components/APIKeyDialog.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<div ref="keyaddmodal" 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("Add API Key") }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Name -->
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">{{ $t("Name") }}</label>
|
||||
<input
|
||||
id="name" v-model="key.name" type="text" class="form-control"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Expiry -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">{{ $t("Expiry date") }}</label>
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<div class="col-6">
|
||||
<Datepicker
|
||||
v-model="key.expires"
|
||||
:dark="$root.isDark"
|
||||
:monthChangeOnScroll="false"
|
||||
:minDate="minDate"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
modelType="yyyy-MM-dd HH:mm:ss"
|
||||
:required="!noExpire"
|
||||
:disabled="noExpire"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6 ms-3">
|
||||
<div class="form-check mb-0">
|
||||
<input
|
||||
id="no-expire" v-model="noExpire" class="form-check-input"
|
||||
type="checkbox"
|
||||
>
|
||||
<label class="form-check-label" for="no-expire">{{
|
||||
$t("Don't expire")
|
||||
}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ $t("Generate") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="keymodal" 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("Key Added") }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
{{ $t("apiKeyAddedMsg") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CopyableInput v-model="clearKey" disabled="disabled" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
|
||||
{{ $t('Continue') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from "bootstrap";
|
||||
import { useToast } from "vue-toastification";
|
||||
import dayjs from "dayjs";
|
||||
import Datepicker from "@vuepic/vue-datepicker";
|
||||
import CopyableInput from "./CopyableInput.vue";
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CopyableInput,
|
||||
Datepicker
|
||||
},
|
||||
props: {},
|
||||
// emits: [ "added" ],
|
||||
data() {
|
||||
return {
|
||||
keyaddmodal: null,
|
||||
keymodal: null,
|
||||
processing: false,
|
||||
key: {},
|
||||
dark: (this.$root.theme === "dark"),
|
||||
minDate: this.$root.date(dayjs()) + " 00:00",
|
||||
clearKey: null,
|
||||
noExpire: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.keyaddmodal = new Modal(this.$refs.keyaddmodal);
|
||||
this.keymodal = new Modal(this.$refs.keymodal);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Show modal
|
||||
*/
|
||||
show() {
|
||||
this.id = null;
|
||||
this.key = {
|
||||
name: "",
|
||||
expires: this.minDate,
|
||||
active: 1,
|
||||
};
|
||||
|
||||
this.keyaddmodal.show();
|
||||
},
|
||||
|
||||
/** Submit data to server */
|
||||
async submit() {
|
||||
this.processing = true;
|
||||
|
||||
if (this.noExpire) {
|
||||
this.key.expires = null;
|
||||
}
|
||||
|
||||
this.$root.addAPIKey(this.key, async (res) => {
|
||||
this.keyaddmodal.hide();
|
||||
this.processing = false;
|
||||
if (res.ok) {
|
||||
this.clearKey = res.key;
|
||||
this.keymodal.show();
|
||||
this.clearForm();
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** Clear Form inputs */
|
||||
clearForm() {
|
||||
this.key = {
|
||||
name: "",
|
||||
expires: this.minDate,
|
||||
active: 1,
|
||||
};
|
||||
this.noExpire = false;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.dark {
|
||||
.modal-dialog .form-text, .modal-dialog p {
|
||||
color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.dark-calendar::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.weekday-picker {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.day-picker {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
299
src/components/BadgeGeneratorDialog.vue
Normal file
299
src/components/BadgeGeneratorDialog.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<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") }}</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="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>
|
||||
</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,
|
||||
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",
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
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
|
||||
*/
|
||||
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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="exampleModalLabel" class="modal-title">
|
||||
{{ $t("Confirm") }}
|
||||
{{ title || $t("Confirm") }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
|
||||
</div>
|
||||
@@ -15,7 +15,7 @@
|
||||
<button type="button" class="btn" :class="btnStyle" data-bs-dismiss="modal" @click="yes">
|
||||
{{ yesText }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="no">
|
||||
{{ noText }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -44,8 +44,13 @@ export default {
|
||||
type: String,
|
||||
default: "No",
|
||||
},
|
||||
/** Title to show on modal. Defaults to translated version of "Config" */
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
emits: [ "yes" ],
|
||||
emits: [ "yes", "no" ],
|
||||
data: () => ({
|
||||
modal: null,
|
||||
}),
|
||||
@@ -63,6 +68,12 @@ export default {
|
||||
yes() {
|
||||
this.$emit("yes");
|
||||
},
|
||||
/**
|
||||
* @emits string "no" Notify the parent when No is pressed
|
||||
*/
|
||||
no() {
|
||||
this.$emit("no");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
:disabled="disabled"
|
||||
>
|
||||
|
||||
<!-- A hidden textarea for copying text on non-https -->
|
||||
<textarea ref="hiddenTextarea" style="position: fixed; left: -999999px; top: -999999px;"></textarea>
|
||||
|
||||
<a class="btn btn-outline-primary" @click="copyToClipboard(model)">
|
||||
<font-awesome-icon :icon="icon" />
|
||||
</a>
|
||||
@@ -111,24 +114,19 @@ export default {
|
||||
}, 3000);
|
||||
|
||||
// navigator clipboard api needs a secure context (https)
|
||||
// For http, use the text area method (else part)
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
// navigator clipboard api method'
|
||||
return navigator.clipboard.writeText(textToCopy);
|
||||
} else {
|
||||
// text area method
|
||||
let textArea = document.createElement("textarea");
|
||||
let textArea = this.$refs.hiddenTextarea;
|
||||
textArea.value = textToCopy;
|
||||
// make the textarea out of viewport
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-999999px";
|
||||
textArea.style.top = "-999999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
return new Promise((res, rej) => {
|
||||
// here the magic happens
|
||||
document.execCommand("copy") ? res() : rej();
|
||||
textArea.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,16 +3,23 @@
|
||||
<div v-if="maintenance.strategy === 'manual'" class="timeslot">
|
||||
{{ $t("Manual") }}
|
||||
</div>
|
||||
<div v-else-if="maintenance.timeslotList.length > 0" class="timeslot">
|
||||
{{ maintenance.timeslotList[0].startDateServerTimezone }}
|
||||
<span class="to">-</span>
|
||||
{{ maintenance.timeslotList[0].endDateServerTimezone }}
|
||||
(UTC{{ maintenance.timeslotList[0].serverTimezoneOffset }})
|
||||
<div v-else-if="maintenance.timeslotList.length > 0">
|
||||
<div class="timeslot">
|
||||
{{ startDateTime }}
|
||||
<span class="to">-</span>
|
||||
{{ endDateTime }}
|
||||
</div>
|
||||
<div class="timeslot">
|
||||
UTC{{ maintenance.timezoneOffset }} <span v-if="maintenance.timezone !== 'UTC'">{{ maintenance.timezone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import { SQL_DATETIME_FORMAT_WITHOUT_SECOND } from "../util.ts";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
maintenance: {
|
||||
@@ -20,6 +27,14 @@ export default {
|
||||
required: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
startDateTime() {
|
||||
return dayjs(this.maintenance.timeslotList[0].startDate).tz(this.maintenance.timezone).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
|
||||
},
|
||||
endDateTime() {
|
||||
return dayjs(this.maintenance.timeslotList[0].endDate).tz(this.maintenance.timezone).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -31,6 +46,7 @@ export default {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
padding: 0 10px;
|
||||
margin-right: 5px;
|
||||
|
||||
.to {
|
||||
margin: 0 6px;
|
||||
|
||||
123
src/components/MonitorSettingDialog.vue
Normal file
123
src/components/MonitorSettingDialog.vue
Normal file
@@ -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>
|
||||
@@ -13,7 +13,10 @@
|
||||
<div class="mb-3">
|
||||
<label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
|
||||
<select id="notification-type" v-model="notification.type" class="form-select">
|
||||
<option v-for="type in notificationTypes" :key="type" :value="type">{{ $t(type) }}</option>
|
||||
<option v-for="(name, type) in notificationNameList.regularList" :key="type" :value="type">{{ name }}</option>
|
||||
<optgroup :label="$t('notificationRegional')">
|
||||
<option v-for="(name, type) in notificationNameList.regionalList" :key="type" :value="type">{{ name }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -67,7 +70,7 @@
|
||||
</Confirm>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script>
|
||||
import { Modal } from "bootstrap";
|
||||
|
||||
import Confirm from "./Confirm.vue";
|
||||
@@ -103,7 +106,94 @@ export default {
|
||||
return null;
|
||||
}
|
||||
return NotificationFormList[this.notification.type];
|
||||
}
|
||||
},
|
||||
|
||||
notificationNameList() {
|
||||
let regularList = {
|
||||
"alerta": "Alerta",
|
||||
"AlertNow": "AlertNow",
|
||||
"apprise": this.$t("apprise"),
|
||||
"Bark": "Bark",
|
||||
"clicksendsms": "ClickSend SMS",
|
||||
"discord": "Discord",
|
||||
"GoogleChat": "Google Chat (Google Workspace)",
|
||||
"gorush": "Gorush",
|
||||
"gotify": "Gotify",
|
||||
"HomeAssistant": "Home Assistant",
|
||||
"Kook": "Kook",
|
||||
"line": "LINE Messenger",
|
||||
"LineNotify": "LINE Notify",
|
||||
"lunasea": "LunaSea",
|
||||
"matrix": "Matrix",
|
||||
"mattermost": "Mattermost",
|
||||
"ntfy": "Ntfy",
|
||||
"octopush": "Octopush",
|
||||
"OneBot": "OneBot",
|
||||
"Opsgenie": "Opsgenie",
|
||||
"PagerDuty": "PagerDuty",
|
||||
"PagerTree": "PagerTree",
|
||||
"pushbullet": "Pushbullet",
|
||||
"PushByTechulus": "Push by Techulus",
|
||||
"pushover": "Pushover",
|
||||
"pushy": "Pushy",
|
||||
"rocket.chat": "Rocket.Chat",
|
||||
"signal": "Signal",
|
||||
"slack": "Slack",
|
||||
"squadcast": "SquadCast",
|
||||
"SMSEagle": "SMSEagle",
|
||||
"smtp": this.$t("smtp"),
|
||||
"stackfield": "Stackfield",
|
||||
"teams": "Microsoft Teams",
|
||||
"telegram": "Telegram",
|
||||
"twilio": "Twilio",
|
||||
"Splunk": "Splunk",
|
||||
"webhook": "Webhook",
|
||||
"GoAlert": "GoAlert",
|
||||
"ZohoCliq": "ZohoCliq"
|
||||
};
|
||||
|
||||
// Put notifications here if it's not supported in most regions or its documentation is not in English
|
||||
let regionalList = {
|
||||
"AliyunSMS": "AliyunSMS (阿里云短信服务)",
|
||||
"DingDing": "DingDing (钉钉自定义机器人)",
|
||||
"Feishu": "Feishu (飞书)",
|
||||
"FreeMobile": "FreeMobile (mobile.free.fr)",
|
||||
"PushDeer": "PushDeer",
|
||||
"promosms": "PromoSMS",
|
||||
"serwersms": "SerwerSMS.pl",
|
||||
"SMSManager": "SmsManager (smsmanager.cz)",
|
||||
"WeCom": "WeCom (企业微信群机器人)",
|
||||
"ServerChan": "ServerChan (Server酱)",
|
||||
};
|
||||
|
||||
// Sort by notification name
|
||||
// No idea how, but it works
|
||||
// https://stackoverflow.com/questions/1069666/sorting-object-property-by-values
|
||||
let sort = (list2) => {
|
||||
return Object.entries(list2)
|
||||
.sort(([ , a ], [ , b ]) => a.localeCompare(b))
|
||||
.reduce((r, [ k, v ]) => ({
|
||||
...r,
|
||||
[k]: v
|
||||
}), {});
|
||||
};
|
||||
|
||||
return {
|
||||
regularList: sort(regularList),
|
||||
regionalList: sort(regionalList),
|
||||
};
|
||||
},
|
||||
|
||||
notificationFullNameList() {
|
||||
let list = {};
|
||||
for (let [ key, value ] of Object.entries(this.notificationNameList.regularList)) {
|
||||
list[key] = value;
|
||||
}
|
||||
for (let [ key, value ] of Object.entries(this.notificationNameList.regionalList)) {
|
||||
list[key] = value;
|
||||
}
|
||||
return list;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -203,11 +293,12 @@ export default {
|
||||
* @return {string}
|
||||
*/
|
||||
getUniqueDefaultName(notificationKey) {
|
||||
|
||||
let index = 1;
|
||||
let name = "";
|
||||
do {
|
||||
name = this.$t("defaultNotificationName", {
|
||||
notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
|
||||
notification: this.notificationFullNameList[notificationKey].replace(/\(.+\)/, "").trim(),
|
||||
number: index++
|
||||
});
|
||||
} while (this.$root.notificationList.find(it => it.name === name));
|
||||
|
||||
@@ -11,16 +11,16 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chart-wrapper" :class="{ loading : loading}">
|
||||
<LineChart :chart-data="chartData" :options="chartOptions" />
|
||||
<Line :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
|
||||
import "chartjs-adapter-dayjs";
|
||||
import "chartjs-adapter-dayjs-4";
|
||||
import dayjs from "dayjs";
|
||||
import { LineChart } from "vue-chart-3";
|
||||
import { Line } from "vue-chartjs";
|
||||
import { useToast } from "vue-toastification";
|
||||
import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
|
||||
|
||||
@@ -29,7 +29,7 @@ const toast = useToast();
|
||||
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
|
||||
|
||||
export default {
|
||||
components: { LineChart },
|
||||
components: { Line },
|
||||
props: {
|
||||
/** ID of monitor */
|
||||
monitorId: {
|
||||
@@ -104,8 +104,10 @@ export default {
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
sampleSize: 3,
|
||||
maxRotation: 0,
|
||||
autoSkipPadding: 30,
|
||||
padding: 3,
|
||||
},
|
||||
grid: {
|
||||
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
|
||||
@@ -197,6 +199,7 @@ export default {
|
||||
borderColor: "#5CDD8B",
|
||||
backgroundColor: "#5CDD8B38",
|
||||
yAxisID: "y",
|
||||
label: "ping",
|
||||
},
|
||||
{
|
||||
// Bar Chart
|
||||
@@ -208,6 +211,8 @@ export default {
|
||||
barThickness: "flex",
|
||||
barPercentage: 1,
|
||||
categoryPercentage: 1,
|
||||
inflateAmount: 0.05,
|
||||
label: "status",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -49,16 +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"
|
||||
title="Setting"
|
||||
>
|
||||
<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)"
|
||||
:class="{'link-active': true, 'btn-link': true}"
|
||||
icon="cog" class="action me-3"
|
||||
@click="$refs.monitorSettingDialog.show(group, monitor)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@@ -77,9 +76,11 @@
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
<MonitorSettingDialog ref="monitorSettingDialog" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MonitorSettingDialog from "./MonitorSettingDialog.vue";
|
||||
import Draggable from "vuedraggable";
|
||||
import HeartbeatBar from "./HeartbeatBar.vue";
|
||||
import Uptime from "./Uptime.vue";
|
||||
@@ -87,6 +88,7 @@ import Tag from "./Tag.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonitorSettingDialog,
|
||||
Draggable,
|
||||
HeartbeatBar,
|
||||
Uptime,
|
||||
@@ -135,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
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
'm-2': size == 'normal',
|
||||
'px-2': size == 'sm',
|
||||
'py-0': size == 'sm',
|
||||
'm-1': size == 'sm',
|
||||
'mx-1': size == 'sm',
|
||||
}"
|
||||
:style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
|
||||
>
|
||||
@@ -18,9 +18,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @typedef {import('./TagsManager.vue').Tag} Tag
|
||||
*/
|
||||
|
||||
export default {
|
||||
props: {
|
||||
/** Object representing tag */
|
||||
/** Object representing tag
|
||||
* @type {Tag}
|
||||
*/
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
@@ -32,7 +38,7 @@ export default {
|
||||
},
|
||||
/**
|
||||
* Size of tag
|
||||
* @values normal, small
|
||||
* @type {"normal" | "small"}
|
||||
*/
|
||||
size: {
|
||||
type: String,
|
||||
|
||||
@@ -12,7 +12,17 @@
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="tag-name" class="form-label">{{ $t("Name") }}</label>
|
||||
<input id="tag-name" v-model="tag.name" type="text" class="form-control" required>
|
||||
<input
|
||||
id="tag-name"
|
||||
v-model="tag.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{'is-invalid': nameInvalid}"
|
||||
required
|
||||
>
|
||||
<div class="invalid-feedback">
|
||||
{{ $t("Tag with this name already exist.") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
@@ -66,11 +76,24 @@
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="allMonitorList.length > 0" class="pt-3 px-3">
|
||||
<div v-if="allMonitorList.length > 0" class="pt-3">
|
||||
<label class="form-label">{{ $t("Add a monitor") }}:</label>
|
||||
<select v-model="selectedAddMonitor" class="form-control">
|
||||
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
|
||||
</select>
|
||||
<VueMultiselect
|
||||
v-model="selectedAddMonitor"
|
||||
:options="allMonitorList"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:placeholder="$t('Add a monitor')"
|
||||
label="name"
|
||||
trackBy="name"
|
||||
class="mt-1"
|
||||
>
|
||||
<template #option="{ option }">
|
||||
<div class="d-inline-flex">
|
||||
<span>{{ option.name }} <Tag v-for="monitorTag in option.tags" :key="monitorTag" :item="monitorTag" :size="'sm'" /></span>
|
||||
</div>
|
||||
</template>
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,6 +120,7 @@
|
||||
<script>
|
||||
import { Modal } from "bootstrap";
|
||||
import Confirm from "./Confirm.vue";
|
||||
import Tag from "./Tag.vue";
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import { colorOptions } from "../util-frontend";
|
||||
import { useToast } from "vue-toastification";
|
||||
@@ -107,12 +131,17 @@ export default {
|
||||
components: {
|
||||
VueMultiselect,
|
||||
Confirm,
|
||||
Tag,
|
||||
},
|
||||
props: {
|
||||
updated: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
}
|
||||
},
|
||||
existingTags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -132,6 +161,7 @@ export default {
|
||||
removingMonitor: [],
|
||||
addingMonitor: [],
|
||||
selectedAddMonitor: null,
|
||||
nameInvalid: false,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -160,11 +190,16 @@ export default {
|
||||
watch: {
|
||||
// Set color option to "Custom" when a unknown color is entered
|
||||
"tag.color"(to, from) {
|
||||
if (colorOptions(this).find(x => x.color === to) == null) {
|
||||
if (to !== "" && colorOptions(this).find(x => x.color === to) == null) {
|
||||
this.selectedColor.name = this.$t("Custom");
|
||||
this.selectedColor.color = to;
|
||||
}
|
||||
},
|
||||
"tag.name"(to, from) {
|
||||
if (to != null) {
|
||||
this.validate();
|
||||
}
|
||||
},
|
||||
selectedColor(to, from) {
|
||||
if (to != null) {
|
||||
this.tag.color = to.color;
|
||||
@@ -197,6 +232,35 @@ export default {
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset the editTag form
|
||||
*/
|
||||
reset() {
|
||||
this.selectedColor = null;
|
||||
this.tag = {
|
||||
id: null,
|
||||
name: "",
|
||||
color: "",
|
||||
};
|
||||
this.monitors = [];
|
||||
this.removingMonitor = [];
|
||||
this.addingMonitor = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Check for existing tags of the same name, set invalid input
|
||||
* @returns {boolean} True if editing tag is valid
|
||||
*/
|
||||
validate() {
|
||||
this.nameInvalid = false;
|
||||
const sameName = this.existingTags.find((existingTag) => existingTag.name === this.tag.name);
|
||||
if (sameName != null && sameName.id !== this.tag.id) {
|
||||
this.nameInvalid = true;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Load tag information for display in the edit dialog
|
||||
* @param {Object} tag tag object to edit
|
||||
@@ -228,6 +292,27 @@ export default {
|
||||
this.processing = true;
|
||||
let editResult = true;
|
||||
|
||||
if (!this.validate()) {
|
||||
this.processing = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.tag.id == null) {
|
||||
await this.addTagAsync(this.tag).then((res) => {
|
||||
if (!res.ok) {
|
||||
this.$root.toastRes(res.msg);
|
||||
editResult = false;
|
||||
} else {
|
||||
this.tag.id = res.tag.id;
|
||||
this.updated();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!editResult) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let addId of this.addingMonitor) {
|
||||
await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
|
||||
if (!res.ok) {
|
||||
@@ -263,9 +348,9 @@ export default {
|
||||
* Delete the editing tag from server
|
||||
* @returns {void}
|
||||
*/
|
||||
deleteTag() {
|
||||
async deleteTag() {
|
||||
this.processing = true;
|
||||
this.$root.getSocket().emit("deleteTag", this.tag.id, (res) => {
|
||||
await this.deleteTagAsync(this.tag.id).then((res) => {
|
||||
this.$root.toastRes(res);
|
||||
this.processing = false;
|
||||
|
||||
@@ -309,6 +394,28 @@ export default {
|
||||
return getMonitorRelativeURL(id);
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a tag asynchronously
|
||||
* @param {Object} newTag Object representing new tag to add
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
addTagAsync(newTag) {
|
||||
return new Promise((resolve) => {
|
||||
this.$root.getSocket().emit("addTag", newTag, resolve);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a tag asynchronously
|
||||
* @param {number} tagId ID of tag to delete
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
deleteTagAsync(tagId) {
|
||||
return new Promise((resolve) => {
|
||||
this.$root.getSocket().emit("deleteTag", tagId, resolve);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a tag to a monitor asynchronously
|
||||
* @param {number} tagId ID of tag to add
|
||||
|
||||
@@ -134,13 +134,27 @@ import { colorOptions } from "../util-frontend";
|
||||
import Tag from "../components/Tag.vue";
|
||||
const toast = useToast();
|
||||
|
||||
/**
|
||||
* @typedef Tag
|
||||
* @type {object}
|
||||
* @property {number | undefined} id
|
||||
* @property {number | undefined} monitor_id
|
||||
* @property {number | undefined} tag_id
|
||||
* @property {string} value
|
||||
* @property {string} name
|
||||
* @property {string} color
|
||||
* @property {boolean | undefined} new
|
||||
*/
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tag,
|
||||
VueMultiselect,
|
||||
},
|
||||
props: {
|
||||
/** Array of tags to be pre-selected */
|
||||
/** Array of tags to be pre-selected
|
||||
* @type {Tag[]}
|
||||
*/
|
||||
preSelectedTags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
@@ -148,10 +162,14 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/** @type {Modal | null} */
|
||||
modal: null,
|
||||
/** @type {Tag[]} */
|
||||
existingTags: [],
|
||||
processing: false,
|
||||
/** @type {Tag[]} */
|
||||
newTags: [],
|
||||
/** @type {Tag[]} */
|
||||
deleteTags: [],
|
||||
newDraftTag: {
|
||||
name: null,
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="mb-3">
|
||||
<label for="gorush-platform" class="form-label">{{ $t("Platform") }}</label><span style="color: red;"><sup>*</sup></span>
|
||||
<select id="gorush-platform" v-model="$parent.notification.gorushPlatform" class="form-select">
|
||||
<option value="ios">{{ $t("iOS") }}</option>
|
||||
<option value="ios">iOS</option>
|
||||
<option value="android">{{ $t("Android") }}</option>
|
||||
<option value="huawei">{{ $t("Huawei") }}</option>
|
||||
</select>
|
||||
|
||||
@@ -1,9 +1,33 @@
|
||||
<template>
|
||||
<div class="mb-3">
|
||||
<label for="lunasea-device" class="form-label">{{ $t("LunaSea Device ID") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required>
|
||||
<label for="lunasea-notification-target" class="form-label">{{ $t("lunaseaTarget") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<div class="form-text">
|
||||
<p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
|
||||
<p>
|
||||
<select id="lunasea-notification-target" v-model="$parent.notification.lunaseaTarget" class="form-select" required>
|
||||
<option value="device">{{ $t("lunaseaDeviceID") }}</option>
|
||||
<option value="user">{{ $t("lunaseaUserID") }}</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="$parent.notification.lunaseaTarget === 'device'">
|
||||
<label for="lunasea-device" class="form-label">{{ $t("lunaseaDeviceID") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control">
|
||||
</div>
|
||||
<div v-if="$parent.notification.lunaseaTarget === 'user'">
|
||||
<label for="lunasea-device" class="form-label">{{ $t("lunaseaUserID") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<input id="lunasea-device" v-model="$parent.notification.lunaseaUserID" type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
if (typeof this.$parent.notification.lunaseaTarget === "undefined") {
|
||||
this.$parent.notification.lunaseaTarget = "device";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@@ -16,17 +16,29 @@
|
||||
<input id="ntfy-priority" v-model="$parent.notification.ntfyPriority" type="number" class="form-control" required min="1" max="5" step="1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ntfy-username" class="form-label">{{ $t("Username") }} ({{ $t("Optional") }})</label>
|
||||
<label for="authentication-method" class="form-label">{{ $t("ntfyAuthenticationMethod") }}</label>
|
||||
<select id="authentication-method" v-model="$parent.notification.ntfyAuthenticationMethod" class="form-select">
|
||||
<option v-for="(name, type) in authenticationMethods" :key="type" :value="type">{{ name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'usernamePassword'" class="mb-3">
|
||||
<label for="ntfy-username" class="form-label">{{ $t("Username") }}</label>
|
||||
<div class="input-group mb-3">
|
||||
<input id="ntfy-username" v-model="$parent.notification.ntfyusername" type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ntfy-password" class="form-label">{{ $t("Password") }} ({{ $t("Optional") }})</label>
|
||||
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'usernamePassword'" class="mb-3">
|
||||
<label for="ntfy-password" class="form-label">{{ $t("Password") }}</label>
|
||||
<div class="input-group mb-3">
|
||||
<HiddenInput id="ntfy-password" v-model="$parent.notification.ntfypassword" autocomplete="new-password"></HiddenInput>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$parent.notification.ntfyAuthenticationMethod === 'accessToken'" class="mb-3">
|
||||
<label for="ntfy-access-token" class="form-label">{{ $t("Access Token") }}</label>
|
||||
<div class="input-group mb-3">
|
||||
<HiddenInput id="ntfy-access-token" v-model="$parent.notification.ntfyaccesstoken"></HiddenInput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ntfy-icon" class="form-label">{{ $t("IconUrl") }}</label>
|
||||
<input id="ntfy-icon" v-model="$parent.notification.ntfyIcon" type="text" class="form-control">
|
||||
@@ -40,11 +52,29 @@ export default {
|
||||
components: {
|
||||
HiddenInput,
|
||||
},
|
||||
computed: {
|
||||
authenticationMethods() {
|
||||
return {
|
||||
none: this.$t("None"),
|
||||
usernamePassword: this.$t("ntfyUsernameAndPassword"),
|
||||
accessToken: this.$t("Access Token")
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (typeof this.$parent.notification.ntfyPriority === "undefined") {
|
||||
this.$parent.notification.ntfyserverurl = "https://ntfy.sh";
|
||||
this.$parent.notification.ntfyPriority = 5;
|
||||
}
|
||||
|
||||
// Handling notifications that added before 1.22.0
|
||||
if (typeof this.$parent.notification.ntfyAuthenticationMethod === "undefined") {
|
||||
if (!this.$parent.notification.ntfyusername) {
|
||||
this.$parent.notification.ntfyAuthenticationMethod = "none";
|
||||
} else {
|
||||
this.$parent.notification.ntfyAuthenticationMethod = "usernamePassword";
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
36
src/components/notifications/Opsgenie.vue
Normal file
36
src/components/notifications/Opsgenie.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="mb-3">
|
||||
<label for="opsgenie-region" class="form-label">{{ $t("Region") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<select id="opsgenie-region" v-model="$parent.notification.opsgenieRegion" class="form-select" required>
|
||||
<option value="us">
|
||||
US (Default)
|
||||
</option>
|
||||
<option value="eu">
|
||||
EU
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="opsgenie-apikey" class="form-label">{{ $t("API Key") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<HiddenInput id="opsgenie-apikey" v-model="$parent.notification.opsgenieApiKey" required="true" autocomplete="false"></HiddenInput>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="opsgenie-priority" class="form-label">{{ $t("Priority") }}</label>
|
||||
<input id="opsgenie-priority" v-model="$parent.notification.opsgeniePriority" type="number" class="form-control" min="1" max="5" step="1">
|
||||
</div>
|
||||
<div class="form-text">
|
||||
<span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
|
||||
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
|
||||
<a href="https://docs.opsgenie.com/docs/alert-api" target="_blank">https://docs.opsgenie.com/docs/alert-api</a>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HiddenInput from "../HiddenInput.vue";
|
||||
export default {
|
||||
components: {
|
||||
HiddenInput,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
31
src/components/notifications/PagerTree.vue
Normal file
31
src/components/notifications/PagerTree.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="mb-3">
|
||||
<label for="pagertree-integration-url" class="form-label">{{ $t("pagertreeIntegrationUrl") }}<span style="color: red;"><sup>*</sup></span></label>
|
||||
<input id="pagertree-integration-url" v-model="$parent.notification.pagertreeIntegrationUrl" type="text" class="form-control" autocomplete="false">
|
||||
<i18n-t tag="div" keypath="wayToGetPagerTreeIntegrationURL" class="form-text">
|
||||
<a href="https://pagertree.com/docs/integration-guides/introduction#copy-the-endpoint-url" target="_blank">{{ $t("here") }}</a>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="pagertree-urgency" class="form-label">{{ $t("pagertreeUrgency") }}</label>
|
||||
<select id="pagertree-urgency" v-model="$parent.notification.pagertreeUrgency" class="form-select">
|
||||
<option value="silent">{{ $t("pagertreeSilent") }}</option>
|
||||
<option value="low">{{ $t("pagertreeLow") }}</option>
|
||||
<option value="medium" selected="selected">{{ $t("pagertreeMedium") }}</option>
|
||||
<option value="high">{{ $t("pagertreeHigh") }}</option>
|
||||
<option value="critical">{{ $t("pagertreeCritical") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="pagertree-resolve" class="form-label">{{ $t("pagertreeResolve") }}</label>
|
||||
<select id="pagertree-resolve" v-model="$parent.notification.pagertreeAutoResolve" class="form-select">
|
||||
<option value="resolve" selected="selected">{{ $t("pagertreeResolve") }}</option>
|
||||
<option value="0">{{ $t("pagertreeDoNothing") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@@ -42,6 +42,8 @@
|
||||
<option value="vibrate">{{ $t("pushoversounds vibrate") }}</option>
|
||||
<option value="none">{{ $t("pushoversounds none") }}</option>
|
||||
</select>
|
||||
<label for="pushover-ttl" class="form-label">{{ $t("pushoverMessageTtl") }}</label>
|
||||
<input id="pushover-ttl" v-model="$parent.notification.pushoverttl" type="number" min="0" step="1" class="form-control">
|
||||
<div class="form-text">
|
||||
<span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
|
||||
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
|
||||
|
||||
@@ -97,7 +97,6 @@
|
||||
(leave blank for default one)<br />
|
||||
{{NAME}}: Service Name<br />
|
||||
{{HOSTNAME_OR_URL}}: Hostname or URL<br />
|
||||
{{URL}}: URL<br />
|
||||
{{STATUS}}: Status<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,30 @@
|
||||
<a :href="telegramGetUpdatesURL('withToken')" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL("masked") }}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
|
||||
<input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
|
||||
<p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
|
||||
|
||||
<div class="form-check form-switch">
|
||||
<input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
|
||||
<label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-text">
|
||||
{{ $t("telegramSendSilentlyDescription") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input v-model="$parent.notification.telegramProtectContent" class="form-check-input" type="checkbox">
|
||||
<label class="form-check-label">{{ $t("telegramProtectContent") }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-text">
|
||||
{{ $t("telegramProtectContentDescription") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
27
src/components/notifications/Twilio.vue
Normal file
27
src/components/notifications/Twilio.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="mb-3">
|
||||
<label for="twilio-account-sid" class="form-label">{{ $t("Account SID") }}</label>
|
||||
<input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="twilio-auth-token" class="form-label">{{ $t("Auth Token") }}</label>
|
||||
<input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="twilio-from-number" class="form-label">{{ $t("From Number") }}</label>
|
||||
<input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="twilio-to-number" class="form-label">{{ $t("To Number") }}</label>
|
||||
<input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
|
||||
<a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</template>
|
||||
@@ -21,7 +21,9 @@ import Mattermost from "./Mattermost.vue";
|
||||
import Ntfy from "./Ntfy.vue";
|
||||
import Octopush from "./Octopush.vue";
|
||||
import OneBot from "./OneBot.vue";
|
||||
import Opsgenie from "./Opsgenie.vue";
|
||||
import PagerDuty from "./PagerDuty.vue";
|
||||
import PagerTree from "./PagerTree.vue";
|
||||
import PromoSMS from "./PromoSMS.vue";
|
||||
import Pushbullet from "./Pushbullet.vue";
|
||||
import PushDeer from "./PushDeer.vue";
|
||||
@@ -40,6 +42,7 @@ import STMP from "./SMTP.vue";
|
||||
import Teams from "./Teams.vue";
|
||||
import TechulusPush from "./TechulusPush.vue";
|
||||
import Telegram from "./Telegram.vue";
|
||||
import Twilio from "./Twilio.vue";
|
||||
import Webhook from "./Webhook.vue";
|
||||
import WeCom from "./WeCom.vue";
|
||||
import GoAlert from "./GoAlert.vue";
|
||||
@@ -75,7 +78,9 @@ const NotificationFormList = {
|
||||
"ntfy": Ntfy,
|
||||
"octopush": Octopush,
|
||||
"OneBot": OneBot,
|
||||
"Opsgenie": Opsgenie,
|
||||
"PagerDuty": PagerDuty,
|
||||
"PagerTree": PagerTree,
|
||||
"promosms": PromoSMS,
|
||||
"pushbullet": Pushbullet,
|
||||
"PushByTechulus": TechulusPush,
|
||||
@@ -93,6 +98,7 @@ const NotificationFormList = {
|
||||
"stackfield": Stackfield,
|
||||
"teams": Teams,
|
||||
"telegram": Telegram,
|
||||
"twilio": Twilio,
|
||||
"Splunk": Splunk,
|
||||
"webhook": Webhook,
|
||||
"WeCom": WeCom,
|
||||
|
||||
257
src/components/settings/APIKeys.vue
Normal file
257
src/components/settings/APIKeys.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="add-btn">
|
||||
<button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
|
||||
<font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
|
||||
{{ $t("No API Keys") }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in keyList"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="item.status"
|
||||
>
|
||||
<div class="left-part">
|
||||
<div
|
||||
class="circle"
|
||||
></div>
|
||||
<div class="info">
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="status">
|
||||
{{ $t("apiKey-" + item.status) }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ $t("Created") }}: {{ item.createdDate }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ $t("Expires") }}: {{ item.expires || $t("Never") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="btn-group" role="group">
|
||||
<button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
|
||||
<font-awesome-icon icon="pause" /> {{ $t("Disable") }}
|
||||
</button>
|
||||
|
||||
<button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
|
||||
<font-awesome-icon icon="play" /> {{ $t("Enable") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger" @click="deleteDialog(item.id)">
|
||||
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3" style="font-size: 13px;">
|
||||
<a href="https://github.com/louislam/uptime-kuma/wiki/API-Keys" target="_blank">{{ $t("Learn More") }}</a>
|
||||
</div>
|
||||
|
||||
<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disableKey">
|
||||
{{ $t("disableAPIKeyMsg") }}
|
||||
</Confirm>
|
||||
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteKey">
|
||||
{{ $t("deleteAPIKeyMsg") }}
|
||||
</Confirm>
|
||||
|
||||
<APIKeyDialog ref="apiKeyDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import APIKeyDialog from "../../components/APIKeyDialog.vue";
|
||||
import Confirm from "../Confirm.vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
APIKeyDialog,
|
||||
Confirm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedKeyID: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
keyList() {
|
||||
let result = Object.values(this.$root.apiKeyList);
|
||||
return result;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Show dialog to confirm deletion
|
||||
* @param {number} keyID ID of monitor that is being deleted
|
||||
*/
|
||||
deleteDialog(keyID) {
|
||||
this.selectedKeyID = keyID;
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a key
|
||||
*/
|
||||
deleteKey() {
|
||||
this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
|
||||
if (res.ok) {
|
||||
toast.success(res.msg);
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show dialog to confirm pause
|
||||
*/
|
||||
disableDialog(keyID) {
|
||||
this.selectedKeyID = keyID;
|
||||
this.$refs.confirmPause.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Pause maintenance
|
||||
*/
|
||||
disableKey() {
|
||||
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Resume maintenance
|
||||
*/
|
||||
enableKey(id) {
|
||||
this.$root.getSocket().emit("enableAPIKey", id, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/vars.scss";
|
||||
|
||||
.mobile {
|
||||
.item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
min-height: 90px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.circle {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
.circle {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.expired {
|
||||
.left-part {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.left-part {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.btn-group {
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
padding: 0 10px;
|
||||
width: fit-content;
|
||||
|
||||
.dark & {
|
||||
color: white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.item {
|
||||
&:hover {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my-4">
|
||||
<div class="mx-0 mx-lg-4 pt-1 mb-4">
|
||||
<button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
|
||||
</div>
|
||||
|
||||
<div class="tags-list my-3">
|
||||
<div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
|
||||
<div class="col-5 ps-1">
|
||||
<div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-0 mx-lg-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
|
||||
<div class="col-10 col-sm-5">
|
||||
<Tag :item="tag" />
|
||||
</div>
|
||||
<div class="col-5 px-1">
|
||||
<div class="col-5 px-1 d-none d-sm-block">
|
||||
<div>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
|
||||
</div>
|
||||
<div class="col-2 pe-3 d-flex justify-content-end">
|
||||
<button type="button" class="btn ms-2 py-1">
|
||||
<font-awesome-icon class="" icon="edit" />
|
||||
</button>
|
||||
<div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
|
||||
<button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)">
|
||||
<font-awesome-icon class="" icon="trash" />
|
||||
</button>
|
||||
@@ -19,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" />
|
||||
<TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" :existing-tags="tagsList" />
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
|
||||
{{ $t("confirmDeleteTagMsg") }}
|
||||
</Confirm>
|
||||
@@ -100,6 +101,15 @@ export default {
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Show dialog for adding a new tag
|
||||
* @returns {void}
|
||||
*/
|
||||
addTag() {
|
||||
this.$refs.tagEditDialog.reset();
|
||||
this.$refs.tagEditDialog.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Show dialog for editing a tag
|
||||
* @param {number} index index of the tag to edit in the local tagsList
|
||||
@@ -143,16 +153,16 @@ export default {
|
||||
@import "../../assets/vars.scss";
|
||||
|
||||
.btn-rm-tag {
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
}
|
||||
|
||||
.tags-list .tags-list-row {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.125);
|
||||
|
||||
.dark & {
|
||||
border-bottom: 1px solid $dark-border-color;
|
||||
border-top: 1px solid $dark-border-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -164,8 +174,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.tags-list .tags-list-row:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user