Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-08 06:22:34 -04:00
Code Issues Projects Releases Packages Wiki Activity

[status page] checkpoint

Browse source
This commit is contained in:
LouisLam 2021-09-14 23:27:11 +08:00
parent 9902c181bc
commit afe91078c4
6 changed files with 64 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/pages/StatusPage.vue
View file

@ -1,6 +1,9 @@
<template>
<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="!enableEditMode">
@ -31,10 +34,6 @@
</div>
</div>
<div class="mt-4">
Free text here.
</div>
<div class="shadow-box list p-4 overall-status mt-4">
<div v-if="false">
<font-awesome-icon icon="check-circle" class="ok" />
@ -46,27 +45,35 @@
</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">
<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="showEditFeature" class="row mt-4" style="height: 43px;">
<div class="col-2">
<div v-if="editMode" class="row mt-4" style="height: 43px;">
<div>
<button class="btn btn-primary btn-add-group" @click="addGroup">Add Group</button>
</div>
<div class="col-10">
<div>
<VueMultiselect
v-model="selectedMonitor"
:options="allMonitorList"
:custom-label="monitorSelectorLabel"
:searchable="true"
placeholder="Add a monitor"
></VueMultiselect>
</div>
<div class="mt-5">
<VueMultiselect
v-model="selectedMonitor"
:options="allMonitorList"
:custom-label="monitorSelectorLabel"
:searchable="true"
placeholder="Add a monitor"
></VueMultiselect>
</div>
</div>
@ -122,7 +129,7 @@ export default {
return result;
},
showEditFeature() {
editMode() {
return this.enableEditMode && this.$root.socket.connected;
}
},
@ -214,8 +221,4 @@ footer {
font-size: 14px;
}
.btn-add-group {
height: 100%;
width: 100%;
}
</style>