[status page] checkpoint

pull/124/head
LouisLam 3 years ago
parent 9902c181bc
commit afe91078c4

@ -12,6 +12,10 @@ router.get("/api/status-page/config", async (_request, response) => {
config.statusPageTheme = "light"; config.statusPageTheme = "light";
} }
if (! config.title) {
config.title = "Uptime Kuma";
}
response.json(config); response.json(config);
}); });

@ -374,3 +374,18 @@ h2 {
background-color: #4caf50; background-color: #4caf50;
border-color: #4caf50; border-color: #4caf50;
} }
[contenteditable=true] {
&:focus {
outline: 0 solid #eee;
border: 1px solid #aaa;
border-radius: 8px;
}
&::after {
margin-left: 5px;
content: "🖊️";
font-size: 13px;
color: #eee;
}
}

@ -8,7 +8,10 @@
> >
<template #item="{ element }"> <template #item="{ element }">
<div> <div>
<h2 class="mt-5">{{ element.name }}</h2> <!-- Group Title -->
<h2 class="mt-5">
<Editable v-model="element.name" :contenteditable="editMode" tag="span" />
</h2>
<div class="shadow-box monitor-list mt-4 position-relative"> <div class="shadow-box monitor-list mt-4 position-relative">
<div v-if="element.monitorList.length === 0" class="text-center no-monitor-msg"> <div v-if="element.monitorList.length === 0" class="text-center no-monitor-msg">

@ -1,4 +1,8 @@
// Add Free Font Awesome Icons
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
import { library } from "@fortawesome/fontawesome-svg-core"; import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { import {
faArrowAltCircleUp, faArrowAltCircleUp,
faCog, faCog,
@ -13,13 +17,12 @@ import {
faTachometerAlt, faTachometerAlt,
faTimes, faTimes,
faTrash, faTrash,
faCheckCircle, faStream, faSave, faExclamationCircle faCheckCircle,
faStream,
faSave,
faExclamationCircle
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
//import { fa } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// Add Free Font Awesome Icons here
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
library.add( library.add(
faArrowAltCircleUp, faArrowAltCircleUp,
faCog, faCog,
@ -34,7 +37,10 @@ library.add(
faTachometerAlt, faTachometerAlt,
faTimes, faTimes,
faTrash, faTrash,
faCheckCircle, faStream, faSave, faExclamationCircle faCheckCircle,
faStream,
faSave,
faExclamationCircle
); );
export { FontAwesomeIcon }; export { FontAwesomeIcon };

@ -1,6 +1,7 @@
import "bootstrap"; import "bootstrap";
import { createApp, h } from "vue"; import { createApp, h } from "vue";
import Toast from "vue-toastification"; import Toast from "vue-toastification";
import contenteditable from "vue-contenteditable"
import "vue-toastification/dist/index.css"; import "vue-toastification/dist/index.css";
import App from "./App.vue"; import App from "./App.vue";
import "./assets/app.scss"; import "./assets/app.scss";
@ -39,7 +40,7 @@ const options = {
}; };
app.use(Toast, options); app.use(Toast, options);
app.component("Editable", contenteditable);
app.component("FontAwesomeIcon", FontAwesomeIcon);
app.component("FontAwesomeIcon", FontAwesomeIcon) app.mount("#app");
app.mount("#app")

@ -1,6 +1,9 @@
<template> <template>
<div class="container mt-3"> <div class="container mt-3">
<h1><img src="/icon.svg" alt /> Uptime Kuma</h1> <h1>
<img src="/icon.svg" alt class="me-2" />
<Editable v-model="config.title" tag="span" :contenteditable="editMode" />
</h1>
<div v-if="hasToken" class="mt-3" style="height: 38px;"> <div v-if="hasToken" class="mt-3" style="height: 38px;">
<div v-if="!enableEditMode"> <div v-if="!enableEditMode">
@ -31,10 +34,6 @@
</div> </div>
</div> </div>
<div class="mt-4">
Free text here.
</div>
<div class="shadow-box list p-4 overall-status mt-4"> <div 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" />
@ -46,27 +45,35 @@
</div> </div>
</div> </div>
<div class="mt-4">
<Editable v-model="config.description" :contenteditable="editMode" tag="span" />
</div>
<div class="shadow-box alert alert-success mt-4 p-4" role="alert"> <div class="shadow-box alert alert-success mt-4 p-4" role="alert">
<h4 class="alert-heading">Well done!</h4> <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> <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> <hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> <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>
<div v-if="showEditFeature" class="row mt-4" style="height: 43px;"> <div v-if="editMode" class="row mt-4" style="height: 43px;">
<div class="col-2"> <div>
<button class="btn btn-primary btn-add-group" @click="addGroup">Add Group</button> <button class="btn btn-primary btn-add-group" @click="addGroup">Add Group</button>
</div> </div>
<div class="col-10">
<div> <div class="mt-5">
<VueMultiselect <VueMultiselect
v-model="selectedMonitor" v-model="selectedMonitor"
:options="allMonitorList" :options="allMonitorList"
:custom-label="monitorSelectorLabel" :custom-label="monitorSelectorLabel"
:searchable="true" :searchable="true"
placeholder="Add a monitor" placeholder="Add a monitor"
></VueMultiselect> ></VueMultiselect>
</div>
</div> </div>
</div> </div>
@ -122,7 +129,7 @@ export default {
return result; return result;
}, },
showEditFeature() { editMode() {
return this.enableEditMode && this.$root.socket.connected; return this.enableEditMode && this.$root.socket.connected;
} }
}, },
@ -214,8 +221,4 @@ footer {
font-size: 14px; font-size: 14px;
} }
.btn-add-group {
height: 100%;
width: 100%;
}
</style> </style>

Loading…
Cancel
Save