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