ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-24 15:24:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add: customize status page (css and poweredby)

Browse source
This commit is contained in:
Patrick Hafner 2021-12-21 03:27:05 +01:00
parent 0ca68f791f
commit 931ca6a3ef
1 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/pages/StatusPage.vue
View file

@ -88,6 +88,11 @@
{{ $t("Show Tags") }} {{ $t("Show Tags") }}
</template> </template>
</button> </button>
<button class="btn btn-primary me-2" @click="customizeStatusPage">
<font-awesome-icon icon="cog" />
{{ $t("Customize") }}
</button>
</div> </div>
</div> </div>
@ -144,6 +149,15 @@
</div> </div>
</div> </div>
<!-- Customize -->
<div v-if="editMode && enableEditCustomizeMode" class="mb-4 p-4 alert shadow-box customize" role="alert">
<strong v-if="enableEditCustomizeMode">{{ $t("Custom CSS") }}:</strong>
<Editable v-model="config.customCSS" tag="div" :contenteditable="enableEditCustomizeMode" class="content p-2" />
<br />
<strong v-if="enableEditCustomizeMode">{{ $t("Custom Footer") }}:</strong>
<Editable v-model="config.poweredBy" tag="h4" :contenteditable="enableEditCustomizeMode" :noNL="true" class="alert-heading p-2" />
</div>
<!-- Overall Status --> <!-- Overall Status -->
<div class="shadow-box list p-4 overall-status mb-4"> <div class="shadow-box list p-4 overall-status mb-4">
<div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData"> <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
@ -208,9 +222,14 @@
</div> </div>
<footer class="mt-5 mb-4"> <footer class="mt-5 mb-4">
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a> <p v-if="config.poweredBy">{{ config.poweredBy }}</p>
<p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
</footer> </footer>
</div> </div>
<component is="style" v-if="config.customCSS" type="text/css">
{{ config.customCSS }}
</component>
</template> </template>
<script> <script>
@ -249,6 +268,7 @@ export default {
return { return {
enableEditMode: false, enableEditMode: false,
enableEditIncidentMode: false, enableEditIncidentMode: false,
enableEditCustomizeMode: false,
hasToken: false, hasToken: false,
config: {}, config: {},
selectedMonitor: null, selectedMonitor: null,
@ -304,7 +324,7 @@ export default {
}, },
tagsVisible() { tagsVisible() {
return this.config.statusPageTags return this.config.statusPageTags;
}, },
logoClass() { logoClass() {
@ -501,9 +521,9 @@ export default {
return { return {
...monitor, ...monitor,
tags: newState ? this.$root.monitorList[monitor.id].tags : [] tags: newState ? this.$root.monitorList[monitor.id].tags : []
} };
}) })
} };
}); });
}, },
@ -580,6 +600,12 @@ export default {
return dayjs.utc(date).fromNow(); return dayjs.utc(date).fromNow();
}, },
/** customize status page */
customizeStatusPage() {
// toggle modal
this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
},
} }
}; };
</script> </script>
@ -659,7 +685,7 @@ footer {
} }
} }
.incident { .incident, .customize {
.content { .content {
&[contenteditable=true] { &[contenteditable=true] {
min-height: 60px; min-height: 60px;