Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[status page] checkpoint

Browse Source
pull/124/head
LouisLam 3 years ago
parent 7e0272077b
commit 611d214a32
5 changed files with 99 additions and 29 deletions
Show Stats Download Patch File Download Diff File

20
src/assets/app.scss
Unescape View File

@ -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);
}
&:hover {
background-color: rgba(239, 239, 239, 0.8);
}
border-radius: 8px;
.dark & {
background-color: rgba(239, 239, 239, 0.2);
}
/*
&::after {
margin-left: 5px;
content: "🖊️";
font-size: 13px;
color: #eee;
}
*/
}
.action {

2
src/icon.js
Unescape View File

@ -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 };

96
src/pages/StatusPage.vue
Unescape View File

@ -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>

5
src/util.js
Unescape View File

@ -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;

5
src/util.ts
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save