uptime-kuma/src/pages/MaintenanceDetails.vue

165 lines
4.7 KiB
Vue
Raw Normal View History

<template>
<transition name="slide-fade" appear>
<div v-if="maintenance">
2022-04-30 09:13:13 -04:00
<h1>{{ maintenance.title }}</h1>
<p class="url">
2022-04-30 08:57:08 -04:00
<span>{{ $t("Start") }}: {{ $root.datetimeMaintenance(maintenance.start_date) }}</span>
<br>
2022-04-30 08:57:08 -04:00
<span>{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenance.end_date) }}</span>
</p>
<div class="functions" style="margin-top: 10px;">
2022-09-17 10:00:11 -04:00
<router-link :to=" '/maintenance/edit/' + maintenance.id " class="btn btn-secondary">
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
</router-link>
<button class="btn btn-danger" @click="deleteDialog">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
</div>
<label for="description" class="form-label" style="margin-top: 20px;">{{ $t("Description") }}</label>
2022-04-30 09:13:13 -04:00
<textarea id="description" v-model="maintenance.description" class="form-control" disabled></textarea>
<label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label>
<br>
2022-05-08 14:03:24 -04:00
<button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
{{ monitor }}
</button>
<br />
2022-09-17 10:00:11 -04:00
<label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Show this Maintenance Message on which Status Pages") }}</label>
<br>
2022-05-08 14:03:24 -04:00
<button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
{{ statusPage }}
</button>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
{{ $t("deleteMaintenanceMsg") }}
</Confirm>
</div>
</transition>
</template>
<script>
import { useToast } from "vue-toastification";
const toast = useToast();
import Confirm from "../components/Confirm.vue";
export default {
components: {
Confirm,
},
data() {
return {
affectedMonitors: [],
selectedStatusPages: [],
};
},
computed: {
maintenance() {
let id = this.$route.params.id;
return this.$root.maintenanceList[id];
},
},
mounted() {
this.init();
},
methods: {
/** Initialise page */
init() {
this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
if (res.ok) {
this.affectedMonitors = Object.values(res.monitors).map(monitor => monitor.name);
} else {
toast.error(res.msg);
}
});
this.$root.getSocket().emit("getMaintenanceStatusPage", this.$route.params.id, (res) => {
if (res.ok) {
this.selectedStatusPages = Object.values(res.statusPages).map(statusPage => statusPage.title);
} else {
toast.error(res.msg);
}
});
},
2022-04-30 08:57:08 -04:00
/** Confirm deletion */
deleteDialog() {
this.$refs.confirmDelete.show();
},
/** Delete maintenance after showing confirmation */
deleteMaintenance() {
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
if (res.ok) {
toast.success(res.msg);
2022-09-17 14:02:18 -04:00
this.$router.push("/maintenance");
} else {
toast.error(res.msg);
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
@media (max-width: 550px) {
.functions {
text-align: center;
button, a {
margin-left: 10px !important;
margin-right: 10px !important;
}
}
}
@media (max-width: 400px) {
.btn {
display: inline-flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
}
a.btn {
padding-left: 25px;
padding-right: 25px;
}
}
.url {
color: $primary;
margin-bottom: 20px;
font-weight: bold;
a {
color: $primary;
}
}
.functions {
button, a {
margin-right: 20px;
}
}
textarea {
min-height: 100px;
resize: none;
}
.btn-monitor {
background-color: #5cdd8b;
}
2022-05-08 14:03:24 -04:00
.dark .btn-monitor {
color: #020b05 !important;
}
</style>