Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[Status Page] wip, sidebar for editor

Browse Source
pull/863/head
Louis Lam 2 years ago
parent 3e96504813
commit 7c7dbf68c1
8 changed files with 347 additions and 197 deletions
Show Stats Download Patch File Download Diff File

4
server/database.js
Unescape View File

@ -223,10 +223,10 @@ class Database {
if (title) { if (title) {
console.log("Migrating Status Page"); console.log("Migrating Status Page");
let statusPageCheck = await R.findOne("status_page", " slug = '' "); let statusPageCheck = await R.findOne("status_page", " slug = 'default' ");
if (statusPageCheck !== null) { if (statusPageCheck !== null) {
console.log("Migrating Status Page - Fail, empty slug record is already existing"); console.log("Migrating Status Page - Skip, default slug record is already existing");
return; return;
} }

21
server/socket-handlers/status-page-socket-handler.js
Unescape View File

@ -71,7 +71,7 @@ module.exports.statusPageSocketHandler = (socket) => {
// Save Status Page // Save Status Page
// imgDataUrl Only Accept PNG! // imgDataUrl Only Accept PNG!
socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => { socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
try { try {
checkLogin(socket); checkLogin(socket);
@ -97,7 +97,24 @@ module.exports.statusPageSocketHandler = (socket) => {
} }
// Save Config // Save Config
await setSettings("statusPage", config); let statusPage = await R.findOne("status_page", " slug = ? ", [
slug
]);
if (!statusPage) {
throw new Error("No slug?");
}
statusPage.slug = config.slug;
statusPage.title = config.title;
statusPage.icon = config.logo;
statusPage.theme = config.theme;
//statusPage.published = ;
//statusPage.search_engine_index = ;
statusPage.show_tags = config.showTags;
//statusPage.password = null;
await R.store(statusPage);
// Save Public Group List // Save Public Group List
const groupIDList = []; const groupIDList = [];

6
src/assets/app.scss
Unescape View File

@ -163,6 +163,12 @@ textarea.form-control {
border-color: $dark-border-color; border-color: $dark-border-color;
} }
.input-group-text {
background-color: #282f39;
border-color: $dark-border-color;
color: $dark-font-color;
}
.form-check-input:checked { .form-check-input:checked {
border-color: $primary; // Re-apply bootstrap border border-color: $primary; // Re-apply bootstrap border
} }

26
src/mixins/socket.js
Unescape View File

@ -7,9 +7,9 @@ const toast = useToast();
let socket; let socket;
const noSocketIOPages = [ const noSocketIOPages = [
"/status-page", /^\/status-page$/, // /status-page
"/status", /^\/status/, // /status**
"/" /^\/$/ // /
]; ];
const favicon = new Favico({ const favicon = new Favico({
@ -57,8 +57,12 @@ export default {
} }
// No need to connect to the socket.io for status page // No need to connect to the socket.io for status page
if (! bypass && noSocketIOPages.includes(location.pathname)) { if (! bypass && location.pathname) {
return; for (let page of noSocketIOPages) {
if (location.pathname.match(page)) {
return;
}
}
} }
this.socket.initedSocketIO = true; this.socket.initedSocketIO = true;
@ -110,7 +114,6 @@ export default {
}); });
socket.on("statusPageList", (data) => { socket.on("statusPageList", (data) => {
console.log(data);
this.statusPageList = data; this.statusPageList = data;
}); });
@ -443,7 +446,6 @@ export default {
"stats.down"(to, from) { "stats.down"(to, from) {
if (to !== from) { if (to !== from) {
favicon.badge(to); favicon.badge(to);
console.log(to);
} }
}, },
@ -460,9 +462,15 @@ export default {
// Reconnect the socket io, if status-page to dashboard // Reconnect the socket io, if status-page to dashboard
"$route.fullPath"(newValue, oldValue) { "$route.fullPath"(newValue, oldValue) {
if (noSocketIOPages.includes(newValue)) {
return; if (newValue) {
for (let page of noSocketIOPages) {
if (newValue.match(page)) {
return;
}
}
} }
this.initSocketIO(); this.initSocketIO();
}, },

37
src/pages/AddStatusPage.vue
Unescape View File

@ -0,0 +1,37 @@
<template>
<transition name="slide-fade" appear>
<div>
<h1 class="mb-3">
{{ $t("Add New Status Page") }}
</h1>
<div class="shadow-box">
<div class="my-3">
<label for="name" class="form-label">{{ $t("Status Page Name") }}</label>
<input id="name" v-model="statusPage.basic_auth_user" type="text" class="form-control">
</div>
<div class="my-3">
<label for="basicauth" class="form-label">{{ $t("Password") }}</label>
<input id="basicauth-pass" v-model="statusPage.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
components: {
},
data() {
return {
statusPage: {
}
};
}
};
</script>

9
src/pages/ManageStatusPage.vue
Unescape View File

@ -18,9 +18,14 @@
</div> </div>
<div class="col-lg-6 col-xl-5"> <div class="col-lg-6 col-xl-5">
<div class="btn-group"> <div class="btn-group">
<a target="_blank" :href="'/status/' + statusPage.slug" class="btn btn-dark"> <a :href="'/status/' + statusPage.slug" class="btn btn-dark">
<font-awesome-icon icon="external-link-square-alt" /><br /> <font-awesome-icon icon="external-link-square-alt" /><br />
{{ $t("Manage") }} {{ $t("View") }}
</a>
<a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
<font-awesome-icon icon="pen" /><br />
{{ $t("Edit") }}
</a> </a>
<router-link to="/" class="btn btn-danger"> <router-link to="/" class="btn btn-danger">

436
src/pages/StatusPage.vue
Unescape View File

@ -1,215 +1,226 @@
<template> <template>
<div v-if="loadedTheme" class="container mt-3"> <div v-if="loadedTheme" class="container mt-3">
<!-- Logo & Title --> <!-- Sidebar for edit mode -->
<h1 class="mb-4"> <div v-if="enableEditMode" class="sidebar">
<!-- Logo --> <div class="my-3">
<span class="logo-wrapper" @click="showImageCropUploadMethod"> <label for="slug" class="form-label">{{ $t("Slug") }}</label>
<img :src="logoURL" alt class="logo me-2" :class="logoClass" /> <div class="input-group">
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" /> <span id="basic-addon3" class="input-group-text">/status/</span>
</span> <input id="slug" v-model="config.slug" type="text" class="form-control">
</div>
<!-- Uploader --> </div>
<!-- url="/api/status-page/upload-logo" -->
<ImageCropUpload v-model="showImageCropUpload"
field="img"
:width="128"
:height="128"
:langType="$i18n.locale"
img-format="png"
:noCircle="true"
:noSquare="false"
@crop-success="cropSuccess"
/>
<!-- Title -->
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
</h1>
<!-- Admin functions -->
<div v-if="hasToken" class="mb-4">
<div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
{{ $t("Edit Status Page") }}
</button>
<a href="/dashboard" class="btn btn-info"> <div class="my-3">
<font-awesome-icon icon="tachometer-alt" /> <label for="title" class="form-label">{{ $t("Title") }}</label>
{{ $t("Go to Dashboard") }} <input id="title" v-model="config.title" type="text" class="form-control">
</a>
</div> </div>
<div v-else> <div class="my-3">
<button class="btn btn-success me-2" @click="save"> <label for="description" class="form-label">{{ $t("Description") }}</label>
<font-awesome-icon icon="save" /> <textarea id="description" v-model="config.description" class="form-control"></textarea>
{{ $t("Save") }} </div>
</button>
<button class="btn btn-danger me-2" @click="discard"> <div class="my-3 form-check form-switch">
<font-awesome-icon icon="save" /> <input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
{{ $t("Discard") }} <label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
</button> </div>
<button class="btn btn-primary btn-add-group me-2" @click="createIncident"> <div class="my-3 form-check form-switch">
<font-awesome-icon icon="bullhorn" /> <input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
{{ $t("Create Incident") }} <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</button> </div>
<!-- <div v-if="false" class="my-3">
<button v-if="isPublished" class="btn btn-light me-2" @click=""> <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
<font-awesome-icon icon="save" /> <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
{{ $t("Unpublish") }} </div>
</button>
<button v-if="!isPublished" class="btn btn-info me-2" @click=""> <div v-if="false" class="my-3">
<font-awesome-icon icon="save" /> <label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
{{ $t("Publish") }} <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
</button>--> </div>
<!-- Set Default Language --> <!-- Sidebar Footer -->
<!-- Set theme --> <div class="sidebar-footer">
<button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')"> <button class="btn btn-success me-2" @click="save">
<font-awesome-icon icon="save" /> <font-awesome-icon icon="save" />
{{ $t("Switch to Light Theme") }} {{ $t("Save") }}
</button> </button>
<button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')"> <button class="btn btn-danger me-2" @click="discard">
<font-awesome-icon icon="save" /> <font-awesome-icon icon="save" />
{{ $t("Switch to Dark Theme") }} {{ $t("Discard") }}
</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> </button>
</div> </div>
</div> </div>
<div :class="{ edit: enableEditMode}" class="main">
<!-- Logo & Title -->
<h1 class="mb-4">
<!-- Logo -->
<span class="logo-wrapper" @click="showImageCropUploadMethod">
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
</span>
<!-- Incident --> <!-- Uploader -->
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass"> <!-- url="/api/status-page/upload-logo" -->
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong> <ImageCropUpload v-model="showImageCropUpload"
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" /> field="img"
:width="128"
:height="128"
:langType="$i18n.locale"
img-format="png"
:noCircle="true"
:noSquare="false"
@crop-success="cropSuccess"
/>
<!-- Title -->
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
</h1>
<!-- Admin functions -->
<div v-if="hasToken" class="mb-4">
<div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
{{ $t("Edit Status Page") }}
</button>
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong> <a href="/manage-status-page" class="btn btn-info">
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" /> <font-awesome-icon icon="tachometer-alt" />
{{ $t("Go to Dashboard") }}
</a>
</div>
<!-- Incident Date --> <div v-else>
<div class="date mt-3"> <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
{{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br /> <font-awesome-icon icon="bullhorn" />
<span v-if="incident.lastUpdatedDate"> {{ $t("Create Incident") }}
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }}) </button>
</span> </div>
</div> </div>
<div v-if="editMode" class="mt-3"> <!-- Incident -->
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident"> <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
<font-awesome-icon icon="bullhorn" /> <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
{{ $t("Post") }} <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
</button>
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident"> <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
<font-awesome-icon icon="edit" /> <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
{{ $t("Edit") }}
</button>
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident"> <!-- Incident Date -->
<font-awesome-icon icon="times" /> <div class="date mt-3">
{{ $t("Cancel") }} {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
</button> <span v-if="incident.lastUpdatedDate">
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
</span>
</div>
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2"> <div v-if="editMode" class="mt-3">
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
{{ $t("Style") }}: {{ $t(incident.style) }} <font-awesome-icon icon="bullhorn" />
{{ $t("Post") }}
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
</ul>
</div>
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident"> <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
<font-awesome-icon icon="unlink" /> <font-awesome-icon icon="edit" />
{{ $t("Unpin") }} {{ $t("Edit") }}
</button> </button>
</div>
</div>
<!-- Overall Status --> <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
<div class="shadow-box list p-4 overall-status mb-4"> <font-awesome-icon icon="times" />
<div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData"> {{ $t("Cancel") }}
<font-awesome-icon icon="question-circle" class="ok" /> </button>
{{ $t("No Services") }}
</div>
<template v-else> <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
<div v-if="allUp"> <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<font-awesome-icon icon="check-circle" class="ok" /> {{ $t("Style") }}: {{ $t(incident.style) }}
{{ $t("All Systems Operational") }} </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">{{ $t("warning") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">{{ $t("danger") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">{{ $t("primary") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">{{ $t("light") }}</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("dark") }}</a></li>
</ul>
</div>
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
<font-awesome-icon icon="unlink" />
{{ $t("Unpin") }}
</button>
</div> </div>
</div>
<div v-else-if="partialDown"> <!-- Overall Status -->
<font-awesome-icon icon="exclamation-circle" class="warning" /> <div class="shadow-box list p-4 overall-status mb-4">
{{ $t("Partially Degraded Service") }} <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
<font-awesome-icon icon="question-circle" class="ok" />
{{ $t("No Services") }}
</div> </div>
<div v-else-if="allDown"> <template v-else>
<font-awesome-icon icon="times-circle" class="danger" /> <div v-if="allUp">
{{ $t("Degraded Service") }} <font-awesome-icon icon="check-circle" class="ok" />
</div> {{ $t("All Systems Operational") }}
</div>
<div v-else-if="partialDown">
<font-awesome-icon icon="exclamation-circle" class="warning" />
{{ $t("Partially Degraded Service") }}
</div>
<div v-else-if="allDown">
<font-awesome-icon icon="times-circle" class="danger" />
{{ $t("Degraded Service") }}
</div>
<div v-else>
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
</div>
</template>
</div>
<div v-else> <!-- Description -->
<font-awesome-icon icon="question-circle" style="color: #efefef;" /> <strong v-if="editMode">{{ $t("Description") }}:</strong>
</div> <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
</template>
</div>
<!-- Description --> <div v-if="editMode" class="mb-4">
<strong v-if="editMode">{{ $t("Description") }}:</strong> <div>
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" /> <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
<font-awesome-icon icon="plus" />
{{ $t("Add Group") }}
</button>
</div>
<div v-if="editMode" class="mb-4"> <div class="mt-3">
<div> <div v-if="allMonitorList.length > 0 && loadedData">
<button class="btn btn-primary btn-add-group me-2" @click="addGroup"> <label>{{ $t("Add a monitor") }}:</label>
<font-awesome-icon icon="plus" /> <select v-model="selectedMonitor" class="form-control">
{{ $t("Add Group") }} <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
</button> </select>
</div>
<div v-else class="text-center">
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
</div>
</div>
</div> </div>
<div class="mt-3"> <div class="mb-4">
<div v-if="allMonitorList.length > 0 && loadedData"> <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
<label>{{ $t("Add a monitor") }}:</label> <!-- 👀 Nothing here, please add a group or a monitor. -->
<select v-model="selectedMonitor" class="form-control"> 👀 {{ $t("statusPageNothing") }}
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
</select>
</div>
<div v-else class="text-center">
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
</div> </div>
</div>
</div>
<div class="mb-4"> <PublicGroupList :edit-mode="enableEditMode" />
<div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
<!-- 👀 Nothing here, please add a group or a monitor. -->
👀 {{ $t("statusPageNothing") }}
</div> </div>
<PublicGroupList :edit-mode="enableEditMode" /> <footer class="mt-5 mb-4">
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
</footer>
</div> </div>
<footer class="mt-5 mb-4">
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
</footer>
</div> </div>
</template> </template>
@ -266,6 +277,8 @@ export default {
loadedTheme: false, loadedTheme: false,
loadedData: false, loadedData: false,
baseURL: "", baseURL: "",
clickedEditButton: false,
domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
}; };
}, },
computed: { computed: {
@ -306,10 +319,6 @@ export default {
return this.config.published; return this.config.published;
}, },
theme() {
return this.config.theme;
},
tagsVisible() { tagsVisible() {
return this.config.showTags; return this.config.showTags;
}, },
@ -386,12 +395,17 @@ export default {
// Set Theme // Set Theme
"config.theme"() { "config.theme"() {
this.$root.statusPageTheme = this.config.theme; this.$root.userTheme = this.config.theme;
this.loadedTheme = true; this.loadedTheme = true;
}, },
"config.title"(title) { "config.title"(title) {
document.title = title; document.title = title;
},
"config.showTags"(value) {
console.log("here???");
this.changeTagsVisibility(value);
} }
}, },
@ -479,14 +493,36 @@ export default {
edit() { edit() {
this.$root.initSocketIO(true); this.$root.initSocketIO(true);
this.enableEditMode = true; this.enableEditMode = true;
this.clickedEditButton = true;
}, },
save() { 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) { if (res.ok) {
this.enableEditMode = false; this.enableEditMode = false;
this.$root.publicGroupList = res.publicGroupList; this.$root.publicGroupList = res.publicGroupList;
location.reload();
// 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 { } else {
toast.error(res.msg); toast.error(res.msg);
} }
@ -514,11 +550,7 @@ export default {
location.reload(); location.reload();
}, },
changeTheme(name) { changeTagsVisibility(show) {
this.config.theme = name;
},
changeTagsVisibilty(newState) {
this.config.showTags = newState;
// On load, the status page will not include tags if it's not enabled for security reasons // 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 // 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 // We only include the tags if visible so we can reuse the logic to hide the tags on disable
return { return {
...monitor, ...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 { footer {
text-align: center; text-align: center;
font-size: 14px; 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> </style>

5
src/router.js
Unescape View File

@ -19,6 +19,7 @@ import Security from "./components/settings/Security.vue";
import Backup from "./components/settings/Backup.vue"; import Backup from "./components/settings/Backup.vue";
import About from "./components/settings/About.vue"; import About from "./components/settings/About.vue";
import ManageStatusPage from "./pages/ManageStatusPage.vue"; import ManageStatusPage from "./pages/ManageStatusPage.vue";
import AddStatusPage from "./pages/AddStatusPage.vue";
const routes = [ const routes = [
{ {
@ -103,6 +104,10 @@ const routes = [
path: "/manage-status-page", path: "/manage-status-page",
component: ManageStatusPage, component: ManageStatusPage,
}, },
{
path: "/add-status-page",
component: AddStatusPage,
},
], ],
}, },
], ],

Write Preview
Loading…
Cancel
Save