|
|
|
|
@ -1,5 +1,59 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div v-if="loadedTheme" class="container mt-3">
|
|
|
|
|
<!-- Sidebar for edit mode -->
|
|
|
|
|
<div v-if="enableEditMode" class="sidebar">
|
|
|
|
|
<div class="my-3">
|
|
|
|
|
<label for="slug" class="form-label">{{ $t("Slug") }}</label>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<span id="basic-addon3" class="input-group-text">/status/</span>
|
|
|
|
|
<input id="slug" v-model="config.slug" type="text" class="form-control">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="my-3">
|
|
|
|
|
<label for="title" class="form-label">{{ $t("Title") }}</label>
|
|
|
|
|
<input id="title" v-model="config.title" type="text" class="form-control">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="my-3">
|
|
|
|
|
<label for="description" class="form-label">{{ $t("Description") }}</label>
|
|
|
|
|
<textarea id="description" v-model="config.description" class="form-control"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="my-3 form-check form-switch">
|
|
|
|
|
<input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
|
|
|
|
|
<label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="my-3 form-check form-switch">
|
|
|
|
|
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
|
|
|
|
|
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="false" class="my-3">
|
|
|
|
|
<label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
|
|
|
|
|
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="false" class="my-3">
|
|
|
|
|
<label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
|
|
|
|
|
<textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Sidebar Footer -->
|
|
|
|
|
<div class="sidebar-footer">
|
|
|
|
|
<button class="btn btn-success me-2" @click="save">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Save") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-danger me-2" @click="discard">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Discard") }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="{ edit: enableEditMode}" class="main">
|
|
|
|
|
<!-- Logo & Title -->
|
|
|
|
|
<h1 class="mb-4">
|
|
|
|
|
<!-- Logo -->
|
|
|
|
|
@ -33,61 +87,17 @@
|
|
|
|
|
{{ $t("Edit Status Page") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<a href="/dashboard" class="btn btn-info">
|
|
|
|
|
<a href="/manage-status-page" class="btn btn-info">
|
|
|
|
|
<font-awesome-icon icon="tachometer-alt" />
|
|
|
|
|
{{ $t("Go to Dashboard") }}
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-else>
|
|
|
|
|
<button class="btn btn-success me-2" @click="save">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Save") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-danger me-2" @click="discard">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Discard") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-primary btn-add-group me-2" @click="createIncident">
|
|
|
|
|
<font-awesome-icon icon="bullhorn" />
|
|
|
|
|
{{ $t("Create Incident") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
<button v-if="isPublished" class="btn btn-light me-2" @click="">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Unpublish") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button v-if="!isPublished" class="btn btn-info me-2" @click="">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Publish") }}
|
|
|
|
|
</button>-->
|
|
|
|
|
|
|
|
|
|
<!-- Set Default Language -->
|
|
|
|
|
<!-- Set theme -->
|
|
|
|
|
<button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Switch to Light Theme") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
|
|
|
|
|
<font-awesome-icon icon="save" />
|
|
|
|
|
{{ $t("Switch to Dark Theme") }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
|
|
|
|
|
<template v-if="tagsVisible">
|
|
|
|
|
<font-awesome-icon icon="eye-slash" />
|
|
|
|
|
{{ $t("Hide Tags") }}
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<font-awesome-icon icon="eye" />
|
|
|
|
|
{{ $t("Show Tags") }}
|
|
|
|
|
</template>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -211,6 +221,7 @@
|
|
|
|
|
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
@ -266,6 +277,8 @@ export default {
|
|
|
|
|
loadedTheme: false,
|
|
|
|
|
loadedData: false,
|
|
|
|
|
baseURL: "",
|
|
|
|
|
clickedEditButton: false,
|
|
|
|
|
domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
@ -306,10 +319,6 @@ export default {
|
|
|
|
|
return this.config.published;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
theme() {
|
|
|
|
|
return this.config.theme;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tagsVisible() {
|
|
|
|
|
return this.config.showTags;
|
|
|
|
|
},
|
|
|
|
|
@ -386,12 +395,17 @@ export default {
|
|
|
|
|
|
|
|
|
|
// Set Theme
|
|
|
|
|
"config.theme"() {
|
|
|
|
|
this.$root.statusPageTheme = this.config.theme;
|
|
|
|
|
this.$root.userTheme = this.config.theme;
|
|
|
|
|
this.loadedTheme = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
"config.title"(title) {
|
|
|
|
|
document.title = title;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
"config.showTags"(value) {
|
|
|
|
|
console.log("here???");
|
|
|
|
|
this.changeTagsVisibility(value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
@ -479,14 +493,36 @@ export default {
|
|
|
|
|
edit() {
|
|
|
|
|
this.$root.initSocketIO(true);
|
|
|
|
|
this.enableEditMode = true;
|
|
|
|
|
this.clickedEditButton = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
save() {
|
|
|
|
|
this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
|
|
|
|
|
let startTime = new Date();
|
|
|
|
|
|
|
|
|
|
this.$root.getSocket().emit("saveStatusPage", this.slug, this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
|
|
|
|
|
if (res.ok) {
|
|
|
|
|
this.enableEditMode = false;
|
|
|
|
|
this.$root.publicGroupList = res.publicGroupList;
|
|
|
|
|
|
|
|
|
|
// Add some delay, so that the side menu animation would be better
|
|
|
|
|
let endTime = new Date();
|
|
|
|
|
let time = 100 - (endTime - startTime) / 1000;
|
|
|
|
|
|
|
|
|
|
if (time < 0) {
|
|
|
|
|
time = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log(time);
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// If the slug was changed, go to the new slug
|
|
|
|
|
if (this.slug !== this.config.slug) {
|
|
|
|
|
location.href = "/status/" + this.config.slug;
|
|
|
|
|
} else {
|
|
|
|
|
location.reload();
|
|
|
|
|
}
|
|
|
|
|
}, time);
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
toast.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
@ -514,11 +550,7 @@ export default {
|
|
|
|
|
location.reload();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
changeTheme(name) {
|
|
|
|
|
this.config.theme = name;
|
|
|
|
|
},
|
|
|
|
|
changeTagsVisibilty(newState) {
|
|
|
|
|
this.config.showTags = newState;
|
|
|
|
|
changeTagsVisibility(show) {
|
|
|
|
|
|
|
|
|
|
// On load, the status page will not include tags if it's not enabled for security reasons
|
|
|
|
|
// Which means if we enable tags, it won't show in the UI until saved
|
|
|
|
|
@ -530,7 +562,7 @@ export default {
|
|
|
|
|
// We only include the tags if visible so we can reuse the logic to hide the tags on disable
|
|
|
|
|
return {
|
|
|
|
|
...monitor,
|
|
|
|
|
tags: newState ? this.$root.monitorList[monitor.id].tags : []
|
|
|
|
|
tags: show ? this.$root.monitorList[monitor.id].tags : []
|
|
|
|
|
};
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
@ -644,6 +676,35 @@ h1 {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main {
|
|
|
|
|
transition: all ease-in-out 0.1s;
|
|
|
|
|
|
|
|
|
|
&.edit {
|
|
|
|
|
margin-left: 300px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
padding: 15px 15px 68px 15px;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border-right: 1px solid #ededed;
|
|
|
|
|
|
|
|
|
|
.sidebar-footer {
|
|
|
|
|
width: 100%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-top: 1px solid #ededed;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
@ -711,4 +772,15 @@ footer {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark {
|
|
|
|
|
.sidebar {
|
|
|
|
|
background-color: $dark-header-bg;
|
|
|
|
|
border-right-color: $dark-border-color;
|
|
|
|
|
|
|
|
|
|
.sidebar-footer {
|
|
|
|
|
border-top-color: $dark-border-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
Louis Lam
3 years ago