WIP: Convert to use vue-router & improve layout

WIP: Fix security page & improve layout

WIP: Fix displaying current page

UI: Improve spacing

Chore: Improve styling
This commit is contained in:
Nelson Chan 2021-11-03 17:03:40 +08:00
parent f9bb48de13
commit 369cad90c1
5 changed files with 82 additions and 39 deletions

View File

@ -163,13 +163,13 @@ export default {
computed: {
settings() {
return this.$parent.$parent.settings;
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.saveSettings;
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.settingsLoaded;
return this.$parent.$parent.$parent.settingsLoaded;
},
guessTimezone() {
return dayjs.tz.guess();

View File

@ -23,7 +23,7 @@
<button class="btn btn-outline-info me-2" @click="shrinkDatabase">
{{ $t("Shrink Database") }} ({{ databaseSizeDisplay }})
</button>
<div class="form-text ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
<div class="form-text mt-2 mb-4 ms-2">{{ $t("shrinkDatabaseDescription") }}</div>
</div>
<button
class="btn btn-outline-danger me-2 mb-2"
@ -64,13 +64,13 @@ export default {
computed: {
settings() {
return this.$parent.$parent.settings;
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.saveSettings;
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.settingsLoaded;
return this.$parent.$parent.$parent.settingsLoaded;
},
databaseSizeDisplay() {
return (

View File

@ -5,6 +5,7 @@
<template v-if="!settings.disableAuth">
<p>
{{ $t("Current User") }}: <strong>{{ username }}</strong>
<button v-if="! settings.disableAuth" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
</p>
<h5 class="my-4">{{ $t("Change Password") }}</h5>
@ -60,7 +61,7 @@
</form>
</template>
<div v-if="!$parent.$parent.settings.disableAuth" class="mt-5 mb-3">
<div v-if="! settings.disableAuth" class="mt-5 mb-3">
<h5 class="my-4">
{{ $t("Two Factor Authentication") }}
</h5>
@ -82,7 +83,6 @@
<div class="mb-4">
<button v-if="settings.disableAuth" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
<button v-if="! settings.disableAuth" class="btn btn-primary me-2 mb-2" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
<button v-if="! settings.disableAuth" class="btn btn-danger me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
</div>
</div>
</div>
@ -244,13 +244,13 @@ export default {
computed: {
settings() {
return this.$parent.$parent.settings;
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.saveSettings;
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.settingsLoaded;
return this.$parent.$parent.$parent.settingsLoaded;
}
},

View File

@ -8,21 +8,25 @@
<div class="shadow-box">
<div class="row">
<div class="settings-menu">
<div v-for="(item, key) in subMenus"
:key="key"
class="menu-item"
:class="{ active: currentSubMenu == key }"
@click="currentSubMenu = key"
<router-link
v-for="(item, key) in subMenus"
:key="key"
:to="`/settings/${item.path}`"
>
{{ item.title }}
</div>
<div
class="menu-item"
:class="{ active: $route.name == `settings-${key}` }"
>
{{ item.title }}
</div>
</router-link>
</div>
<div class="settings-content">
<div class="settings-content-header">
{{ subMenus[currentSubMenu].title }}
{{ subMenus[$route.name.split("-")[1]].title }}
</div>
<div class="mx-3">
<component :is="subMenus[currentSubMenu].component" />
<router-view />
</div>
</div>
</div>
@ -32,16 +36,6 @@
</template>
<script>
import { markRaw } from "vue";
import Appearance from "../components/settings/Appearance.vue";
import General from "../components/settings/General.vue";
import Notifications from "../components/settings/Notifications.vue";
import MonitorHistory from "../components/settings/MonitorHistory.vue";
import Security from "../components/settings/Security.vue";
import Backup from "../components/settings/Backup.vue";
import About from "../components/settings/About.vue";
export default {
data() {
@ -55,34 +49,33 @@ export default {
subMenus: {
general: {
title: this.$t("General"),
component: markRaw(General),
path: "general",
},
appearance: {
title: this.$t("Appearance"),
component: markRaw(Appearance),
path: "appearance",
},
notifications: {
title: this.$t("Notifications"),
component: markRaw(Notifications),
path: "notifications",
},
monitorHistory: {
title: this.$t("Monitor History"),
component: markRaw(MonitorHistory),
path: "monitor-history",
},
security: {
title: this.$t("Security"),
component: markRaw(Security),
path: "security",
},
backup: {
title: this.$t("Backup"),
component: markRaw(Backup),
path: "backup",
},
about: {
title: this.$t("About"),
component: markRaw(About),
path: "about",
}
},
currentSubMenu: "general",
};
},
@ -142,6 +135,10 @@ footer {
flex: 0 0 auto;
width: 300px;
a {
text-decoration: none !important;
}
.menu-item {
border-radius: 10px;
margin: 0.5em;

View File

@ -11,6 +11,14 @@ import Setup from "./pages/Setup.vue";
const StatusPage = () => import("./pages/StatusPage.vue");
import Entry from "./pages/Entry.vue";
import Appearance from "./components/settings/Appearance.vue";
import General from "./components/settings/General.vue";
import Notifications from "./components/settings/Notifications.vue";
import MonitorHistory from "./components/settings/MonitorHistory.vue";
import Security from "./components/settings/Security.vue";
import Backup from "./components/settings/Backup.vue";
import About from "./components/settings/About.vue";
const routes = [
{
path: "/",
@ -59,6 +67,44 @@ const routes = [
{
path: "/settings",
component: Settings,
children: [
{
path: "general",
alias: "",
name: "settings-general",
component: General,
},
{
path: "appearance",
name: "settings-appearance",
component: Appearance,
},
{
path: "notifications",
name: "settings-notifications",
component: Notifications,
},
{
path: "monitor-history",
name: "settings-monitorHistory",
component: MonitorHistory,
},
{
path: "security",
name: "settings-security",
component: Security,
},
{
path: "backup",
name: "settings-backup",
component: Backup,
},
{
path: "about",
name: "settings-about",
component: About,
},
]
},
],
},