From 7c7dbf68c15a646a28ade133061e0fedf7a5f440 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Tue, 15 Mar 2022 12:00:29 +0800 Subject: [PATCH] [Status Page] wip, sidebar for editor --- server/database.js | 4 +- .../status-page-socket-handler.js | 21 +- src/assets/app.scss | 6 + src/mixins/socket.js | 26 +- src/pages/AddStatusPage.vue | 37 ++ src/pages/ManageStatusPage.vue | 9 +- src/pages/StatusPage.vue | 436 ++++++++++-------- src/router.js | 5 + 8 files changed, 347 insertions(+), 197 deletions(-) create mode 100644 src/pages/AddStatusPage.vue diff --git a/server/database.js b/server/database.js index 119289e6..81d77bfa 100644 --- a/server/database.js +++ b/server/database.js @@ -223,10 +223,10 @@ class Database { if (title) { 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) { - 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; } diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js index 5826277c..8ddc8b75 100644 --- a/server/socket-handlers/status-page-socket-handler.js +++ b/server/socket-handlers/status-page-socket-handler.js @@ -71,7 +71,7 @@ module.exports.statusPageSocketHandler = (socket) => { // Save Status Page // imgDataUrl Only Accept PNG! - socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => { + socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => { try { checkLogin(socket); @@ -97,7 +97,24 @@ module.exports.statusPageSocketHandler = (socket) => { } // 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 const groupIDList = []; diff --git a/src/assets/app.scss b/src/assets/app.scss index 08f647b4..c70efa17 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -163,6 +163,12 @@ textarea.form-control { border-color: $dark-border-color; } + .input-group-text { + background-color: #282f39; + border-color: $dark-border-color; + color: $dark-font-color; + } + .form-check-input:checked { border-color: $primary; // Re-apply bootstrap border } diff --git a/src/mixins/socket.js b/src/mixins/socket.js index 5d80293d..7842fb8c 100644 --- a/src/mixins/socket.js +++ b/src/mixins/socket.js @@ -7,9 +7,9 @@ const toast = useToast(); let socket; const noSocketIOPages = [ - "/status-page", - "/status", - "/" + /^\/status-page$/, // /status-page + /^\/status/, // /status** + /^\/$/ // / ]; const favicon = new Favico({ @@ -57,8 +57,12 @@ export default { } // No need to connect to the socket.io for status page - if (! bypass && noSocketIOPages.includes(location.pathname)) { - return; + if (! bypass && location.pathname) { + for (let page of noSocketIOPages) { + if (location.pathname.match(page)) { + return; + } + } } this.socket.initedSocketIO = true; @@ -110,7 +114,6 @@ export default { }); socket.on("statusPageList", (data) => { - console.log(data); this.statusPageList = data; }); @@ -443,7 +446,6 @@ export default { "stats.down"(to, from) { if (to !== from) { favicon.badge(to); - console.log(to); } }, @@ -460,9 +462,15 @@ export default { // Reconnect the socket io, if status-page to dashboard "$route.fullPath"(newValue, oldValue) { - if (noSocketIOPages.includes(newValue)) { - return; + + if (newValue) { + for (let page of noSocketIOPages) { + if (newValue.match(page)) { + return; + } + } } + this.initSocketIO(); }, diff --git a/src/pages/AddStatusPage.vue b/src/pages/AddStatusPage.vue new file mode 100644 index 00000000..7754116f --- /dev/null +++ b/src/pages/AddStatusPage.vue @@ -0,0 +1,37 @@ + + + + diff --git a/src/pages/ManageStatusPage.vue b/src/pages/ManageStatusPage.vue index 2fdaa1e8..dad92e8b 100644 --- a/src/pages/ManageStatusPage.vue +++ b/src/pages/ManageStatusPage.vue @@ -18,9 +18,14 @@
- +
- {{ $t("Manage") }} + {{ $t("View") }} + + + +
+ {{ $t("Edit") }} diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 01974e32..de87ef9c 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -1,215 +1,226 @@ @@ -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; - 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 { 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; + } + } +} + diff --git a/src/router.js b/src/router.js index e5276dcf..76dfa5cb 100644 --- a/src/router.js +++ b/src/router.js @@ -19,6 +19,7 @@ import Security from "./components/settings/Security.vue"; import Backup from "./components/settings/Backup.vue"; import About from "./components/settings/About.vue"; import ManageStatusPage from "./pages/ManageStatusPage.vue"; +import AddStatusPage from "./pages/AddStatusPage.vue"; const routes = [ { @@ -103,6 +104,10 @@ const routes = [ path: "/manage-status-page", component: ManageStatusPage, }, + { + path: "/add-status-page", + component: AddStatusPage, + }, ], }, ],