mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-30 03:00:40 +00:00
[status page] checkpoint
This commit is contained in:
LouisLam
parent
7e0272077b
commit
611d214a32
5 changed files with 100 additions and 30 deletions
|
|
@ -379,27 +379,33 @@ h2 {
|
|||
|
||||
[contenteditable=true] {
|
||||
transition: all $easing-in 0.2s;
|
||||
background-color: rgba(239, 239, 239, 0.7);
|
||||
border-radius: 8px;
|
||||
|
||||
&:focus {
|
||||
outline: 0 solid #eee;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(239, 239, 239, 0.2);
|
||||
}
|
||||
|
||||
border-radius: 8px;
|
||||
&:hover {
|
||||
background-color: rgba(239, 239, 239, 0.8);
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(239, 239, 239, 0.2);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
&::after {
|
||||
margin-left: 5px;
|
||||
content: "🖊️";
|
||||
font-size: 13px;
|
||||
color: #eee;
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
.action {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import {
|
|||
faExclamationCircle,
|
||||
faBullhorn,
|
||||
faArrowsAltV,
|
||||
faUnlink,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
|
|
@ -47,6 +48,7 @@ library.add(
|
|||
faExclamationCircle,
|
||||
faBullhorn,
|
||||
faArrowsAltV,
|
||||
faUnlink,
|
||||
);
|
||||
|
||||
export { FontAwesomeIcon };
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
:noCircle="true"
|
||||
:noSquare="false"
|
||||
@crop-success="cropSuccess"
|
||||
@crop-upload-success="cropUploadSuccess"
|
||||
@crop-upload-fail="cropUploadFail"
|
||||
/>
|
||||
|
||||
<!-- Title -->
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
</h1>
|
||||
|
||||
<!-- Admin functions -->
|
||||
<div v-if="hasToken" class="mt-3" style="height: 38px;">
|
||||
<div v-if="hasToken" class="mt-3">
|
||||
<div v-if="!enableEditMode">
|
||||
<button class="btn btn-info me-2" @click="edit">
|
||||
<font-awesome-icon icon="edit" />
|
||||
|
|
@ -50,7 +48,7 @@
|
|||
{{ $t("Discard") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="">
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
||||
<font-awesome-icon icon="bullhorn" />
|
||||
{{ $t("Create Incident") }}
|
||||
</button>
|
||||
|
|
@ -79,8 +77,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Overall Status -->
|
||||
<div class="shadow-box list p-4 overall-status mt-4">
|
||||
<div v-if="$root.publicGroupList.length > 0" class="shadow-box list p-4 overall-status mt-4">
|
||||
<div v-if="false">
|
||||
<font-awesome-icon icon="check-circle" class="ok" />
|
||||
All Systems Operational
|
||||
|
|
@ -98,19 +127,6 @@
|
|||
<!-- Description -->
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
|
||||
|
||||
<!-- Incident -->
|
||||
<div class="shadow-box alert alert-success mt-4 p-4" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
|
||||
<div class="mt-3">
|
||||
<button v-if="editMode" class="btn btn-light me-2">Unpin</button>
|
||||
<button v-if="editMode" class="btn btn-light">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editMode" class="mt-4">
|
||||
<div>
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
|
||||
|
|
@ -175,6 +191,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
enableEditMode: false,
|
||||
enableEditIncidentMode: false,
|
||||
hasToken: false,
|
||||
config: {},
|
||||
selectedMonitor: null,
|
||||
|
|
@ -205,6 +222,10 @@ export default {
|
|||
return this.enableEditMode && this.$root.socket.connected;
|
||||
},
|
||||
|
||||
editIncidentMode() {
|
||||
return this.editMode && this.enableEditIncidentMode;
|
||||
},
|
||||
|
||||
isPublished() {
|
||||
return this.config.statusPagePublished;
|
||||
},
|
||||
|
|
@ -308,10 +329,9 @@ export default {
|
|||
},
|
||||
|
||||
/**
|
||||
* Crop success
|
||||
* Crop Success
|
||||
*/
|
||||
cropSuccess(imgDataUrl, field) {
|
||||
console.log("-------- crop success --------");
|
||||
cropSuccess(imgDataUrl) {
|
||||
this.imgDataUrl = imgDataUrl;
|
||||
},
|
||||
|
||||
|
|
@ -319,6 +339,34 @@ export default {
|
|||
if (this.editMode) {
|
||||
this.showImageCropUpload = true;
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -375,4 +423,10 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
.incident {
|
||||
.content {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
|
||||
exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
|
||||
const _dayjs = require("dayjs");
|
||||
const dayjs = _dayjs;
|
||||
exports.isDev = process.env.NODE_ENV === "development";
|
||||
|
|
@ -8,6 +8,9 @@ exports.appName = "Uptime Kuma";
|
|||
exports.DOWN = 0;
|
||||
exports.UP = 1;
|
||||
exports.PENDING = 2;
|
||||
exports.STATUS_PAGE_ALL_DOWN = 0;
|
||||
exports.STATUS_PAGE_ALL_UP = 1;
|
||||
exports.STATUS_PAGE_PARTIAL_DOWN = 2;
|
||||
function flipStatus(s) {
|
||||
if (s === exports.UP) {
|
||||
return exports.DOWN;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ export const DOWN = 0;
|
|||
export const UP = 1;
|
||||
export const PENDING = 2;
|
||||
|
||||
export const STATUS_PAGE_ALL_DOWN = 0;
|
||||
export const STATUS_PAGE_ALL_UP = 1;
|
||||
export const STATUS_PAGE_PARTIAL_DOWN = 2;
|
||||
|
||||
|
||||
export function flipStatus(s: number) {
|
||||
if (s === UP) {
|
||||
return DOWN;
|
||||
|
|
|
|||
Loading…
Reference in a new issue