+
+
+
+
+
-
-
- {{ $t("Title") }}:
-
+
+
+
+
+
+
+
+
+
+
+
-
-
- {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})
-
- {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
-
+
+
+
+ {{ $t("Create Incident") }}
+
+
-
-
-
- {{ $t("Post") }}
-
+
+
+ {{ $t("Title") }}:
+
-
-
- {{ $t("Edit") }}
-
+ {{ $t("Content") }}:
+
-
-
- {{ $t("Cancel") }}
-
+
+
+ {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})
+
+ {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
+
+
-
-
- {{ $t("Style") }}: {{ $t(incident.style) }}
+
+
+
+ {{ $t("Post") }}
-
-
-
-
- {{ $t("Unpin") }}
-
-
-
+
+
+ {{ $t("Edit") }}
+
-
-
-
-
- {{ $t("No Services") }}
-
+
+
+ {{ $t("Cancel") }}
+
-
-
-
- {{ $t("All Systems Operational") }}
+
+
+ {{ $t("Style") }}: {{ $t(incident.style) }}
+
+
+
+
+
+
+ {{ $t("Unpin") }}
+
+
-
-
- {{ $t("Partially Degraded Service") }}
+
+
+
+
+ {{ $t("No Services") }}
-
-
- {{ $t("Degraded Service") }}
-
+
+
+
+ {{ $t("All Systems Operational") }}
+
+
+
+
+ {{ $t("Partially Degraded Service") }}
+
+
+
+
+ {{ $t("Degraded Service") }}
+
+
+
+
+
+
+
-
-
-
-
-
+
+ {{ $t("Description") }}:
+
-
- {{ $t("Description") }}:
-
+
+
+
+
+ {{ $t("Add Group") }}
+
+
-
-
-
-
- {{ $t("Add Group") }}
-
+
+
+
+
+
+
+ {{ $t("No monitors available.") }} {{ $t("Add one") }}
+
+
-
-
-
-
-
-
- {{ $t("No monitors available.") }} {{ $t("Add one") }}
+
+
+
+ 👀 {{ $t("statusPageNothing") }}
-
-
-
-
-
- 👀 {{ $t("statusPageNothing") }}
+
-
+
-
-
@@ -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,
+ },
],
},
],
- - {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }}) - +
+ + {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }}) + +