2021-09-11 08:22:30 +00:00
|
|
|
<template>
|
2021-09-11 11:40:03 +00:00
|
|
|
<div class="container mt-3">
|
2021-09-15 10:28:48 +00:00
|
|
|
<!-- Logo & Title -->
|
2021-09-14 15:27:11 +00:00
|
|
|
<h1>
|
2021-09-15 10:28:48 +00:00
|
|
|
<!-- Logo -->
|
|
|
|
<img :src="imgDataUrl" alt class="logo me-2" :class="logoClass" @click="showImageCropUploadMethod" />
|
|
|
|
|
|
|
|
<!-- Uploader -->
|
|
|
|
<!-- url="/api/status-page/upload-logo" -->
|
|
|
|
<ImageCropUpload v-model="showImageCropUpload"
|
|
|
|
field="img"
|
|
|
|
:width="128"
|
|
|
|
:height="128"
|
|
|
|
:langType="$i18n.locale"
|
|
|
|
:headers="uploadHeader"
|
|
|
|
img-format="png"
|
|
|
|
:noCircle="true"
|
|
|
|
:noSquare="false"
|
|
|
|
@crop-success="cropSuccess"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- Title -->
|
2021-09-15 06:34:30 +00:00
|
|
|
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
2021-09-14 15:27:11 +00:00
|
|
|
</h1>
|
2021-09-11 11:40:03 +00:00
|
|
|
|
2021-09-15 10:28:48 +00:00
|
|
|
<!-- Admin functions -->
|
2021-09-16 06:37:57 +00:00
|
|
|
<div v-if="hasToken" class="mt-3">
|
2021-09-13 11:21:39 +00:00
|
|
|
<div v-if="!enableEditMode">
|
|
|
|
<button class="btn btn-info me-2" @click="edit">
|
|
|
|
<font-awesome-icon icon="edit" />
|
|
|
|
Edit Status Page
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<router-link to="/dashboard" class="btn btn-info">
|
|
|
|
<font-awesome-icon icon="tachometer-alt" />
|
|
|
|
Go to Dashboard
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-else>
|
|
|
|
<button class="btn btn-success me-2" @click="leaveEditMode">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Save") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-14 06:12:27 +00:00
|
|
|
<button class="btn btn-danger me-2" @click="discard">
|
2021-09-13 11:21:39 +00:00
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Discard") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-16 06:37:57 +00:00
|
|
|
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
2021-09-15 06:34:30 +00:00
|
|
|
<font-awesome-icon icon="bullhorn" />
|
|
|
|
{{ $t("Create Incident") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="isPublished" class="btn btn-light me-2" @click="">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Unpublish") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="!isPublished" class="btn btn-info me-2" @click="">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Publish") }}
|
|
|
|
</button>
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
<!-- Set Default Language -->
|
|
|
|
<!-- Set theme -->
|
2021-09-15 10:28:48 +00:00
|
|
|
<button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Switch to Light Theme") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
{{ $t("Switch to Dark Theme") }}
|
|
|
|
</button>
|
2021-09-13 11:21:39 +00:00
|
|
|
</div>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-16 06:37:57 +00:00
|
|
|
<!-- Incident -->
|
|
|
|
<div v-if="incident !== null" class="shadow-box alert alert-success mt-4 p-4 incident" role="alert">
|
|
|
|
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
|
|
|
|
|
|
|
|
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
|
|
|
|
|
|
|
|
<div v-if="editMode" class="mt-3">
|
|
|
|
<button v-if="editMode && !incident.id" class="btn btn-light me-2" @click="postIncident">
|
|
|
|
<font-awesome-icon icon="bullhorn" />
|
|
|
|
{{ $t("Post") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="editMode && !incident.id" class="btn btn-light me-2" @click="cancelIncident">
|
|
|
|
<font-awesome-icon icon="times" />
|
|
|
|
{{ $t("Cancel") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<!-- TODO : color change -->
|
|
|
|
|
|
|
|
<button v-if="editMode && incident.id" class="btn btn-light me-2" @click="editIncident">
|
|
|
|
<font-awesome-icon icon="edit" />
|
|
|
|
{{ $t("Edit") }}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button v-if="editMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
|
|
|
|
<font-awesome-icon icon="unlink" />
|
|
|
|
{{ $t("Unpin") }}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-09-15 10:28:48 +00:00
|
|
|
<!-- Overall Status -->
|
2021-09-16 06:37:57 +00:00
|
|
|
<div v-if="$root.publicGroupList.length > 0" class="shadow-box list p-4 overall-status mt-4">
|
2021-09-14 06:12:27 +00:00
|
|
|
<div v-if="false">
|
|
|
|
<font-awesome-icon icon="check-circle" class="ok" />
|
|
|
|
All Systems Operational
|
|
|
|
</div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<div v-if="false">
|
2021-09-14 06:12:27 +00:00
|
|
|
<font-awesome-icon icon="exclamation-circle" class="warning" />
|
|
|
|
Partially Degraded Service
|
|
|
|
</div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<div>
|
|
|
|
<font-awesome-icon icon="times-circle" class="danger" />
|
|
|
|
Degraded Service
|
|
|
|
</div>
|
2021-09-14 06:12:27 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-15 10:28:48 +00:00
|
|
|
<!-- Description -->
|
|
|
|
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
|
2021-09-14 15:27:11 +00:00
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div v-if="editMode" class="mt-4">
|
2021-09-14 15:27:11 +00:00
|
|
|
<div>
|
2021-09-15 06:34:30 +00:00
|
|
|
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
|
|
|
|
<font-awesome-icon icon="plus" />
|
|
|
|
Add Group
|
|
|
|
</button>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
2021-09-14 15:27:11 +00:00
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div class="mt-3">
|
2021-09-14 15:27:11 +00:00
|
|
|
<VueMultiselect
|
|
|
|
v-model="selectedMonitor"
|
|
|
|
:options="allMonitorList"
|
|
|
|
:custom-label="monitorSelectorLabel"
|
|
|
|
:searchable="true"
|
|
|
|
placeholder="Add a monitor"
|
|
|
|
></VueMultiselect>
|
2021-09-11 15:43:07 +00:00
|
|
|
</div>
|
2021-09-11 11:40:03 +00:00
|
|
|
</div>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<div class="mt-4">
|
|
|
|
<div v-if="$root.publicGroupList.length === 0" class="text-center">
|
|
|
|
👀 Nothing here, please add a group or a monitor.
|
|
|
|
</div>
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
<GroupList :edit-mode="enableEditMode" />
|
|
|
|
</div>
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
<footer class="mt-5 mb-4">
|
2021-09-11 11:40:03 +00:00
|
|
|
Powered by <a target="_blank" href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a>
|
|
|
|
</footer>
|
|
|
|
</div>
|
2021-09-11 08:22:30 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-09-12 18:26:45 +00:00
|
|
|
import VueMultiselect from "vue-multiselect"
|
2021-09-11 15:43:07 +00:00
|
|
|
import axios from "axios";
|
2021-09-13 11:21:39 +00:00
|
|
|
import GroupList from "../components/GroupList.vue";
|
2021-09-15 10:28:48 +00:00
|
|
|
import ImageCropUpload from "vue-image-crop-upload";
|
2021-09-11 15:43:07 +00:00
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
export default {
|
2021-09-11 15:43:07 +00:00
|
|
|
components: {
|
2021-09-13 11:21:39 +00:00
|
|
|
GroupList,
|
2021-09-12 18:26:45 +00:00
|
|
|
VueMultiselect,
|
2021-09-15 10:28:48 +00:00
|
|
|
ImageCropUpload
|
2021-09-11 15:43:07 +00:00
|
|
|
},
|
2021-09-15 06:34:30 +00:00
|
|
|
|
|
|
|
// Leave Page for vue route change
|
|
|
|
beforeRouteLeave(to, from, next) {
|
|
|
|
if (this.editMode) {
|
|
|
|
const answer = window.confirm(leavePageMsg);
|
|
|
|
if (answer) {
|
|
|
|
next();
|
|
|
|
} else {
|
|
|
|
next(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
next();
|
|
|
|
},
|
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2021-09-12 18:26:45 +00:00
|
|
|
enableEditMode: false,
|
2021-09-16 06:37:57 +00:00
|
|
|
enableEditIncidentMode: false,
|
2021-09-11 08:22:30 +00:00
|
|
|
hasToken: false,
|
2021-09-11 11:40:03 +00:00
|
|
|
config: {},
|
2021-09-12 18:26:45 +00:00
|
|
|
selectedMonitor: null,
|
2021-09-15 10:28:48 +00:00
|
|
|
incident: null,
|
|
|
|
showImageCropUpload: false,
|
|
|
|
imgDataUrl: "/icon.svg",
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-09-13 11:21:39 +00:00
|
|
|
|
2021-09-14 06:12:27 +00:00
|
|
|
/**
|
|
|
|
* If the monitor is added to public list, which will not be in this list.
|
|
|
|
*/
|
2021-09-12 18:26:45 +00:00
|
|
|
allMonitorList() {
|
2021-09-13 11:21:39 +00:00
|
|
|
let result = [];
|
|
|
|
|
|
|
|
for (let id in this.$root.monitorList) {
|
2021-09-14 06:12:27 +00:00
|
|
|
if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
|
2021-09-13 11:21:39 +00:00
|
|
|
let monitor = this.$root.monitorList[id];
|
|
|
|
result.push(monitor);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
2021-09-12 18:26:45 +00:00
|
|
|
},
|
2021-09-15 06:34:30 +00:00
|
|
|
|
2021-09-14 15:27:11 +00:00
|
|
|
editMode() {
|
2021-09-12 18:26:45 +00:00
|
|
|
return this.enableEditMode && this.$root.socket.connected;
|
2021-09-15 06:34:30 +00:00
|
|
|
},
|
|
|
|
|
2021-09-16 06:37:57 +00:00
|
|
|
editIncidentMode() {
|
|
|
|
return this.editMode && this.enableEditIncidentMode;
|
|
|
|
},
|
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
isPublished() {
|
|
|
|
return this.config.statusPagePublished;
|
|
|
|
},
|
|
|
|
|
2021-09-15 10:28:48 +00:00
|
|
|
theme() {
|
|
|
|
return this.config.statusPageTheme;
|
|
|
|
},
|
|
|
|
|
|
|
|
uploadHeader() {
|
|
|
|
return {
|
|
|
|
Authorization: "Bearer " + localStorage.token,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
logoClass() {
|
|
|
|
if (this.editMode) {
|
|
|
|
return {
|
|
|
|
"edit-mode": true,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
/**
|
|
|
|
* Selected a monitor and add to the list.
|
|
|
|
*/
|
|
|
|
selectedMonitor(monitor) {
|
|
|
|
if (monitor) {
|
|
|
|
if (this.$root.publicGroupList.length === 0) {
|
|
|
|
this.addGroup();
|
|
|
|
}
|
|
|
|
|
|
|
|
const firstGroup = this.$root.publicGroupList[0];
|
|
|
|
|
|
|
|
firstGroup.monitorList.push(monitor);
|
|
|
|
this.selectedMonitor = null;
|
|
|
|
}
|
2021-09-15 10:28:48 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
// Set Theme
|
|
|
|
"config.statusPageTheme"() {
|
|
|
|
this.$root.statusPageTheme = this.config.statusPageTheme;
|
2021-09-13 11:21:39 +00:00
|
|
|
}
|
2021-09-15 10:28:48 +00:00
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
2021-09-11 11:40:03 +00:00
|
|
|
async created() {
|
2021-09-11 08:22:30 +00:00
|
|
|
this.hasToken = ("token" in localStorage);
|
2021-09-11 15:43:07 +00:00
|
|
|
this.config = (await axios.get("/api/status-page/config")).data;
|
2021-09-11 11:40:03 +00:00
|
|
|
|
2021-09-15 06:34:30 +00:00
|
|
|
// Browser change page
|
|
|
|
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
|
|
|
|
window.addEventListener("beforeunload", (e) => {
|
|
|
|
if (this.editMode) {
|
|
|
|
(e || window.event).returnValue = leavePageMsg;
|
|
|
|
return leavePageMsg;
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
});
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
2021-09-11 15:43:07 +00:00
|
|
|
async mounted() {
|
|
|
|
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
|
2021-09-11 08:22:30 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-09-12 18:26:45 +00:00
|
|
|
|
2021-09-11 08:22:30 +00:00
|
|
|
edit() {
|
|
|
|
this.$root.initSocketIO(true);
|
2021-09-12 18:26:45 +00:00
|
|
|
this.enableEditMode = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
leaveEditMode() {
|
|
|
|
this.enableEditMode = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
monitorSelectorLabel(monitor) {
|
|
|
|
return `${monitor.name}`;
|
|
|
|
},
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
addGroup() {
|
2021-09-15 06:34:30 +00:00
|
|
|
let groupName = "Untitled Group";
|
|
|
|
|
|
|
|
if (this.$root.publicGroupList.length === 0) {
|
|
|
|
groupName = "Services";
|
|
|
|
}
|
|
|
|
|
2021-09-13 11:21:39 +00:00
|
|
|
this.$root.publicGroupList.push({
|
2021-09-15 06:34:30 +00:00
|
|
|
name: groupName,
|
2021-09-13 11:21:39 +00:00
|
|
|
monitorList: [],
|
|
|
|
})
|
2021-09-14 06:12:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
discard() {
|
|
|
|
location.reload();
|
2021-09-15 10:28:48 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
changeTheme(name) {
|
|
|
|
this.config.statusPageTheme = name;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2021-09-16 06:37:57 +00:00
|
|
|
* Crop Success
|
2021-09-15 10:28:48 +00:00
|
|
|
*/
|
2021-09-16 06:37:57 +00:00
|
|
|
cropSuccess(imgDataUrl) {
|
2021-09-15 10:28:48 +00:00
|
|
|
this.imgDataUrl = imgDataUrl;
|
|
|
|
},
|
|
|
|
|
|
|
|
showImageCropUploadMethod() {
|
|
|
|
if (this.editMode) {
|
|
|
|
this.showImageCropUpload = true;
|
|
|
|
}
|
2021-09-16 06:37:57 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
createIncident() {
|
|
|
|
this.enableEditIncidentMode = true;
|
|
|
|
this.incident = {
|
|
|
|
title: "",
|
|
|
|
content: "",
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
postIncident() {
|
|
|
|
this.enableEditIncidentMode = false;
|
|
|
|
// TODO
|
|
|
|
},
|
|
|
|
|
|
|
|
editIncident() {
|
|
|
|
this.enableEditIncidentMode = true;
|
|
|
|
// TODO
|
|
|
|
},
|
|
|
|
|
|
|
|
cancelIncident() {
|
|
|
|
this.enableEditIncidentMode = false;
|
|
|
|
this.incident = null;
|
|
|
|
},
|
|
|
|
|
|
|
|
unpinIncident() {
|
|
|
|
this.incident = null;
|
|
|
|
// TODO
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
2021-09-15 06:34:30 +00:00
|
|
|
}
|
2021-09-11 08:22:30 +00:00
|
|
|
}
|
|
|
|
</script>
|
2021-09-11 11:40:03 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "../assets/vars.scss";
|
|
|
|
|
|
|
|
.overall-status {
|
|
|
|
font-weight: bold;
|
2021-09-14 06:12:27 +00:00
|
|
|
font-size: 25px;
|
2021-09-11 11:40:03 +00:00
|
|
|
|
|
|
|
.ok {
|
|
|
|
color: $primary;
|
|
|
|
}
|
2021-09-14 06:12:27 +00:00
|
|
|
|
|
|
|
.warning {
|
|
|
|
color: $warning;
|
|
|
|
}
|
2021-09-15 06:34:30 +00:00
|
|
|
|
|
|
|
.danger {
|
|
|
|
color: $danger;
|
|
|
|
}
|
2021-09-11 11:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
vertical-align: middle;
|
|
|
|
height: 60px;
|
|
|
|
width: 60px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
footer {
|
|
|
|
text-align: center;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
2021-09-13 11:21:39 +00:00
|
|
|
|
2021-09-15 10:28:48 +00:00
|
|
|
.description span {
|
|
|
|
min-width: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
transition: all $easing-in 0.2s;
|
|
|
|
|
|
|
|
&.edit-mode {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
transform: scale(1.2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-16 06:37:57 +00:00
|
|
|
.incident {
|
|
|
|
.content {
|
|
|
|
min-height: 60px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-11 11:40:03 +00:00
|
|
|
</style>
|