mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-24 15:24:05 +00:00
345 lines
14 KiB
Vue
345 lines
14 KiB
Vue
<template>
|
|
<transition name="slide-fade" appear>
|
|
<div>
|
|
<h1 class="mb-3">{{ pageName }}</h1>
|
|
<form @submit.prevent="submit">
|
|
<div class="shadow-box">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2 class="mb-2">{{ $t("General") }}</h2>
|
|
|
|
<!-- Title -->
|
|
<div class="my-3">
|
|
<label for="name" class="form-label">{{ $t("Title") }}</label>
|
|
<input
|
|
id="name" v-model="maintenance.title" type="text" class="form-control"
|
|
:placeholder="titlePlaceholder" required
|
|
>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="my-3">
|
|
<label for="description" class="form-label">{{ $t("Description") }}</label>
|
|
<textarea
|
|
id="description" v-model="maintenance.description" class="form-control"
|
|
:placeholder="descriptionPlaceholder"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Affected Monitors -->
|
|
<div class="my-3">
|
|
<label for="affected_monitors" class="form-label">{{ $t("Affected Monitors") }}</label>
|
|
|
|
<VueMultiselect
|
|
id="affected_monitors"
|
|
v-model="affectedMonitors"
|
|
:options="affectedMonitorsOptions"
|
|
track-by="id"
|
|
label="name"
|
|
:multiple="true"
|
|
:allow-empty="false"
|
|
:close-on-select="false"
|
|
:clear-on-select="false"
|
|
:preserve-search="true"
|
|
:placeholder="$t('Pick Affected Monitors...')"
|
|
:preselect-first="false"
|
|
:max-height="600"
|
|
:taggable="false"
|
|
></VueMultiselect>
|
|
|
|
<div class="form-text">
|
|
{{ $t("affectedMonitorsDescription") }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Date Time -->
|
|
<div class="my-3">
|
|
<label for="start_date" class="form-label">{{ $t("Start of maintenance") }}
|
|
({{ $root.timezone }})</label>
|
|
<input
|
|
id="start_date" v-model="maintenance.start_date" :type="'datetime-local'"
|
|
class="form-control" :class="{'dark-calendar': dark }" required
|
|
>
|
|
</div>
|
|
|
|
<!-- End Date Time -->
|
|
<div class="my-3">
|
|
<label for="end_date" class="form-label">{{ $t("Expected end of maintenance") }}
|
|
({{ $root.timezone }})</label>
|
|
<input
|
|
id="end_date" v-model="maintenance.end_date" :type="'datetime-local'"
|
|
class="form-control" :class="{'dark-calendar': dark }" required
|
|
>
|
|
</div>
|
|
|
|
<!-- Show on all pages -->
|
|
<div class="my-3 form-check">
|
|
<input
|
|
id="show-on-all-pages" v-model="showOnAllPages" class="form-check-input"
|
|
type="checkbox"
|
|
>
|
|
<label class="form-check-label" for="show-powered-by">{{
|
|
$t("Show on all pages")
|
|
}}</label>
|
|
</div>
|
|
|
|
<!-- Status pages to display maintenance info on -->
|
|
<div v-if="!showOnAllPages" class="my-3">
|
|
<label for="selected_status_pages" class="form-label">{{
|
|
$t("Selected status pages")
|
|
}}</label>
|
|
|
|
<VueMultiselect
|
|
id="selected_status_pages"
|
|
v-model="selectedStatusPages"
|
|
:options="selectedStatusPagesOptions"
|
|
track-by="id"
|
|
label="name"
|
|
:multiple="true"
|
|
:allow-empty="false"
|
|
:close-on-select="false"
|
|
:clear-on-select="false"
|
|
:preserve-search="true"
|
|
:placeholder="$t('Select status pages...')"
|
|
:preselect-first="false"
|
|
:max-height="600"
|
|
:taggable="false"
|
|
></VueMultiselect>
|
|
|
|
<div class="form-text">
|
|
{{ $t("selectedStatusPagesDescription") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 mb-1">
|
|
<button
|
|
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
|
:disabled="processing"
|
|
>
|
|
{{ $t("Save") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { useToast } from "vue-toastification";
|
|
import VueMultiselect from "vue-multiselect";
|
|
|
|
const toast = useToast();
|
|
|
|
export default {
|
|
components: {
|
|
VueMultiselect,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
processing: false,
|
|
maintenance: {},
|
|
affectedMonitors: [],
|
|
affectedMonitorsOptions: [],
|
|
showOnAllPages: true,
|
|
selectedStatusPages: [],
|
|
selectedStatusPagesOptions: [],
|
|
dark: (this.$root.theme === "dark"),
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
|
|
pageName() {
|
|
return this.$t((this.isAdd) ? "Schedule maintenance" : "Edit");
|
|
},
|
|
|
|
isAdd() {
|
|
return this.$route.path === "/addMaintenance";
|
|
},
|
|
|
|
isEdit() {
|
|
return this.$route.path.startsWith("/editMaintenance");
|
|
},
|
|
|
|
titlePlaceholder() {
|
|
return this.$t("maintenanceTitleExample");
|
|
},
|
|
|
|
descriptionPlaceholder() {
|
|
return this.$t("maintenanceDescriptionExample");
|
|
}
|
|
|
|
},
|
|
watch: {
|
|
"$route.fullPath"() {
|
|
this.init();
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
|
|
this.$root.getMonitorList((res) => {
|
|
if (res.ok) {
|
|
Object.values(this.$root.monitorList).map(monitor => {
|
|
this.affectedMonitorsOptions.push({
|
|
id: monitor.id,
|
|
name: monitor.name,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
Object.values(this.$root.statusPageList).map(statusPage => {
|
|
this.selectedStatusPagesOptions.push({
|
|
id: statusPage.id,
|
|
name: statusPage.title
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.affectedMonitors = [];
|
|
this.selectedStatusPages = [];
|
|
|
|
if (this.isAdd) {
|
|
this.maintenance = {
|
|
title: "",
|
|
description: "",
|
|
start_date: "",
|
|
end_date: "",
|
|
};
|
|
} else if (this.isEdit) {
|
|
this.$root.getSocket().emit("getMaintenance", this.$route.params.id, (res) => {
|
|
if (res.ok) {
|
|
res.maintenance.start_date = this.$root.datetimeFormat(res.maintenance.start_date, "YYYY-MM-DDTHH:mm");
|
|
res.maintenance.end_date = this.$root.datetimeFormat(res.maintenance.end_date, "YYYY-MM-DDTHH:mm");
|
|
this.maintenance = res.maintenance;
|
|
|
|
this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
|
|
if (res.ok) {
|
|
Object.values(res.monitors).map(monitor => {
|
|
this.affectedMonitors.push(monitor);
|
|
});
|
|
} else {
|
|
toast.error(res.msg);
|
|
}
|
|
});
|
|
|
|
this.$root.getSocket().emit("getMaintenanceStatusPage", this.$route.params.id, (res) => {
|
|
if (res.ok) {
|
|
Object.values(res.statusPages).map(statusPage => {
|
|
this.selectedStatusPages.push({
|
|
id: statusPage.id,
|
|
name: statusPage.title
|
|
});
|
|
});
|
|
|
|
this.showOnAllPages = Object.values(res.statusPages).length === this.selectedStatusPagesOptions.length;
|
|
} else {
|
|
toast.error(res.msg);
|
|
}
|
|
});
|
|
} else {
|
|
toast.error(res.msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
async submit() {
|
|
this.processing = true;
|
|
|
|
if (this.affectedMonitors.length === 0) {
|
|
toast.error(this.$t("atLeastOneMonitor"));
|
|
return this.processing = false;
|
|
}
|
|
|
|
if (!this.showOnAllPages && this.selectedStatusPages.length === 0) {
|
|
toast.error(this.$t("atLeastOneStatusPage"));
|
|
return this.processing = false;
|
|
}
|
|
|
|
this.maintenance.start_date = this.$root.toUTC(this.maintenance.start_date);
|
|
this.maintenance.end_date = this.$root.toUTC(this.maintenance.end_date);
|
|
|
|
if (this.isAdd) {
|
|
this.$root.addMaintenance(this.maintenance, async (res) => {
|
|
if (res.ok) {
|
|
await this.addMonitorMaintenance(res.maintenanceID, async () => {
|
|
await this.addMaintenanceStatusPage(res.maintenanceID, () => {
|
|
toast.success(res.msg);
|
|
this.processing = false;
|
|
this.$root.getMaintenanceList();
|
|
this.$router.push("/dashboard/maintenance/" + res.maintenanceID);
|
|
});
|
|
});
|
|
} else {
|
|
toast.error(res.msg);
|
|
this.processing = false;
|
|
}
|
|
|
|
});
|
|
} else {
|
|
this.$root.getSocket().emit("editMaintenance", this.maintenance, async (res) => {
|
|
if (res.ok) {
|
|
await this.addMonitorMaintenance(res.maintenanceID, async () => {
|
|
await this.addMaintenanceStatusPage(res.maintenanceID, () => {
|
|
this.processing = false;
|
|
this.$root.toastRes(res);
|
|
this.init();
|
|
});
|
|
});
|
|
} else {
|
|
this.processing = false;
|
|
toast.error(res.msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
async addMonitorMaintenance(maintenanceID, callback) {
|
|
await this.$root.addMonitorMaintenance(maintenanceID, this.affectedMonitors, async (res) => {
|
|
if (!res.ok) {
|
|
toast.error(res.msg);
|
|
} else {
|
|
this.$root.getMonitorList();
|
|
}
|
|
|
|
callback();
|
|
});
|
|
},
|
|
|
|
async addMaintenanceStatusPage(maintenanceID, callback) {
|
|
await this.$root.addMaintenanceStatusPage(maintenanceID, (this.showOnAllPages) ? this.selectedStatusPagesOptions : this.selectedStatusPages, async (res) => {
|
|
if (!res.ok) {
|
|
toast.error(res.msg);
|
|
} else {
|
|
this.$root.getMaintenanceList();
|
|
}
|
|
|
|
callback();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shadow-box {
|
|
padding: 20px;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.dark-calendar::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|