Karel Krýda
3 years ago
parent
c3c4db52ec
commit
0d3414c6d6
@ -0,0 +1,25 @@
|
|||||||
|
-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
|
||||||
|
BEGIN TRANSACTION;
|
||||||
|
|
||||||
|
CREATE TABLE maintenance
|
||||||
|
(
|
||||||
|
id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
|
||||||
|
title VARCHAR(150),
|
||||||
|
description TEXT,
|
||||||
|
user_id INTEGER REFERENCES user ON UPDATE CASCADE ON DELETE SET NULL,
|
||||||
|
start_date DATETIME,
|
||||||
|
end_date DATETIME
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE monitor_maintenance
|
||||||
|
(
|
||||||
|
id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
|
||||||
|
monitor_id INTEGER NOT NULL,
|
||||||
|
maintenance_id INTEGER NOT NULL,
|
||||||
|
CONSTRAINT FK_maintenance FOREIGN KEY (maintenance_id) REFERENCES maintenance (id) ON DELETE CASCADE ON UPDATE CASCADE,
|
||||||
|
CONSTRAINT FK_monitor FOREIGN KEY (monitor_id) REFERENCES monitor (id) ON DELETE CASCADE ON UPDATE CASCADE
|
||||||
|
);
|
||||||
|
|
||||||
|
create index maintenance_user_id on maintenance (user_id);
|
||||||
|
|
||||||
|
COMMIT;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
const dayjs = require("dayjs");
|
||||||
|
const utc = require("dayjs/plugin/utc");
|
||||||
|
let timezone = require("dayjs/plugin/timezone");
|
||||||
|
dayjs.extend(utc);
|
||||||
|
dayjs.extend(timezone);
|
||||||
|
const { BeanModel } = require("redbean-node/dist/bean-model");
|
||||||
|
|
||||||
|
class Maintenance extends BeanModel {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return a object that ready to parse to JSON for public
|
||||||
|
* Only show necessary data to public
|
||||||
|
*/
|
||||||
|
async toPublicJSON() {
|
||||||
|
return {
|
||||||
|
id: this.id,
|
||||||
|
title: this.title,
|
||||||
|
description: this.description,
|
||||||
|
start_date: this.start_date,
|
||||||
|
end_date: this.end_date
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return a object that ready to parse to JSON
|
||||||
|
*/
|
||||||
|
async toJSON() {
|
||||||
|
return {
|
||||||
|
id: this.id,
|
||||||
|
title: this.title,
|
||||||
|
description: this.description,
|
||||||
|
start_date: this.start_date,
|
||||||
|
end_date: this.end_date
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Maintenance;
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
<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") }}</label>
|
||||||
|
<input :type="'datetime-local'" id="start_date" v-model="maintenance.start_date"
|
||||||
|
class="form-control" :class="{'darkCalendar': dark }" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- End Date Time -->
|
||||||
|
<div class="my-3">
|
||||||
|
<label for="end_date" class="form-label">{{ $t("Expected end of maintenance") }}</label>
|
||||||
|
<input :type="'datetime-local'" id="end_date" v-model="maintenance.end_date"
|
||||||
|
class="form-control" :class="{'darkCalendar': dark }" required>
|
||||||
|
</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 CopyableInput from "../components/CopyableInput.vue";
|
||||||
|
|
||||||
|
import {useToast} from "vue-toastification";
|
||||||
|
import VueMultiselect from "vue-multiselect";
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CopyableInput,
|
||||||
|
VueMultiselect,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
processing: false,
|
||||||
|
maintenance: {},
|
||||||
|
affectedMonitors: [],
|
||||||
|
affectedMonitorsOptions: [],
|
||||||
|
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("Network infrastructure maintenance");
|
||||||
|
},
|
||||||
|
|
||||||
|
descriptionPlaceholder() {
|
||||||
|
return this.$t("Example: Network infrastructure maintenance is underway which will affect some of our services.");
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
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
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.affectedMonitors = [];
|
||||||
|
|
||||||
|
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) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.processing = true;
|
||||||
|
|
||||||
|
if (this.affectedMonitors.length === 0) {
|
||||||
|
toast.error(this.$t("Select at least one affected monitor"));
|
||||||
|
return this.processing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isAdd) {
|
||||||
|
this.$root.addMaintenance(this.maintenance, async (res) => {
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
await this.addMonitorMaintenance(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, () => {
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.shadow-box {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkCalendar::-webkit-calendar-picker-indicator {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="slide-fade" appear>
|
||||||
|
<div v-if="maintenance">
|
||||||
|
<h1> {{ maintenance.title }}</h1>
|
||||||
|
<p class="url">
|
||||||
|
<span>Start: {{ $root.datetimeMaintenance(maintenance.start_date) }}</span>
|
||||||
|
<br>
|
||||||
|
<span>End: {{ $root.datetimeMaintenance(maintenance.end_date) }}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="functions" style="margin-top: 10px">
|
||||||
|
<router-link :to=" '/editMaintenance/' + 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>
|
||||||
|
<textarea id="description" class="form-control" disabled>{{ maintenance.description }}</textarea>
|
||||||
|
|
||||||
|
<label for="affected_monitors" class="form-label" style="margin-top: 20px">{{ $t("Affected Monitors") }}</label>
|
||||||
|
<br>
|
||||||
|
<button v-for="monitor in this.affectedMonitors" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: bold">
|
||||||
|
{{ monitor }}
|
||||||
|
</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: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
maintenance() {
|
||||||
|
let id = this.$route.params.id;
|
||||||
|
return this.$root.maintenanceList[id];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteDialog() {
|
||||||
|
this.$refs.confirmDelete.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteMaintenance() {
|
||||||
|
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
|
||||||
|
if (res.ok) {
|
||||||
|
toast.success(res.msg);
|
||||||
|
this.$router.push("/dashboard");
|
||||||
|
} 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue