[status page] checkpoint

This commit is contained in:
LouisLam 2021-09-16 14:37:57 +08:00
parent 7e0272077b
commit 611d214a32
5 changed files with 100 additions and 30 deletions

View File

@ -379,20 +379,24 @@ h2 {
[contenteditable=true] { [contenteditable=true] {
transition: all $easing-in 0.2s; transition: all $easing-in 0.2s;
background-color: rgba(239, 239, 239, 0.7);
border-radius: 8px;
&:focus { &:focus {
outline: 0 solid #eee; outline: 0 solid #eee;
background-color: rgba(245, 245, 245, 0.9);
} }
&:hover, &:focus { &:hover {
background-color: rgb(239, 239, 239); background-color: rgba(239, 239, 239, 0.8);
}
.dark & { .dark & {
background-color: rgba(239, 239, 239, 0.2); background-color: rgba(239, 239, 239, 0.2);
} }
border-radius: 8px; /*
}
&::after { &::after {
margin-left: 5px; margin-left: 5px;
@ -400,6 +404,8 @@ h2 {
font-size: 13px; font-size: 13px;
color: #eee; color: #eee;
} }
*/
} }
.action { .action {

View File

@ -24,6 +24,7 @@ import {
faExclamationCircle, faExclamationCircle,
faBullhorn, faBullhorn,
faArrowsAltV, faArrowsAltV,
faUnlink,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@ -47,6 +48,7 @@ library.add(
faExclamationCircle, faExclamationCircle,
faBullhorn, faBullhorn,
faArrowsAltV, faArrowsAltV,
faUnlink,
); );
export { FontAwesomeIcon }; export { FontAwesomeIcon };

View File

@ -17,8 +17,6 @@
:noCircle="true" :noCircle="true"
:noSquare="false" :noSquare="false"
@crop-success="cropSuccess" @crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
/> />
<!-- Title --> <!-- Title -->
@ -26,7 +24,7 @@
</h1> </h1>
<!-- Admin functions --> <!-- Admin functions -->
<div v-if="hasToken" class="mt-3" style="height: 38px;"> <div v-if="hasToken" class="mt-3">
<div v-if="!enableEditMode"> <div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit"> <button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" /> <font-awesome-icon icon="edit" />
@ -50,7 +48,7 @@
{{ $t("Discard") }} {{ $t("Discard") }}
</button> </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" /> <font-awesome-icon icon="bullhorn" />
{{ $t("Create Incident") }} {{ $t("Create Incident") }}
</button> </button>
@ -79,8 +77,39 @@
</div> </div>
</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 --> <!-- 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"> <div v-if="false">
<font-awesome-icon icon="check-circle" class="ok" /> <font-awesome-icon icon="check-circle" class="ok" />
All Systems Operational All Systems Operational
@ -98,19 +127,6 @@
<!-- Description --> <!-- Description -->
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 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 v-if="editMode" class="mt-4">
<div> <div>
<button class="btn btn-primary btn-add-group me-2" @click="addGroup"> <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
@ -175,6 +191,7 @@ export default {
data() { data() {
return { return {
enableEditMode: false, enableEditMode: false,
enableEditIncidentMode: false,
hasToken: false, hasToken: false,
config: {}, config: {},
selectedMonitor: null, selectedMonitor: null,
@ -205,6 +222,10 @@ export default {
return this.enableEditMode && this.$root.socket.connected; return this.enableEditMode && this.$root.socket.connected;
}, },
editIncidentMode() {
return this.editMode && this.enableEditIncidentMode;
},
isPublished() { isPublished() {
return this.config.statusPagePublished; return this.config.statusPagePublished;
}, },
@ -308,10 +329,9 @@ export default {
}, },
/** /**
* Crop success * Crop Success
*/ */
cropSuccess(imgDataUrl, field) { cropSuccess(imgDataUrl) {
console.log("-------- crop success --------");
this.imgDataUrl = imgDataUrl; this.imgDataUrl = imgDataUrl;
}, },
@ -319,6 +339,34 @@ export default {
if (this.editMode) { if (this.editMode) {
this.showImageCropUpload = true; 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> </style>

View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { value: true }); 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 = require("dayjs");
const dayjs = _dayjs; const dayjs = _dayjs;
exports.isDev = process.env.NODE_ENV === "development"; exports.isDev = process.env.NODE_ENV === "development";
@ -8,6 +8,9 @@ exports.appName = "Uptime Kuma";
exports.DOWN = 0; exports.DOWN = 0;
exports.UP = 1; exports.UP = 1;
exports.PENDING = 2; exports.PENDING = 2;
exports.STATUS_PAGE_ALL_DOWN = 0;
exports.STATUS_PAGE_ALL_UP = 1;
exports.STATUS_PAGE_PARTIAL_DOWN = 2;
function flipStatus(s) { function flipStatus(s) {
if (s === exports.UP) { if (s === exports.UP) {
return exports.DOWN; return exports.DOWN;

View File

@ -12,6 +12,11 @@ export const DOWN = 0;
export const UP = 1; export const UP = 1;
export const PENDING = 2; 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) { export function flipStatus(s: number) {
if (s === UP) { if (s === UP) {
return DOWN; return DOWN;