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