uptime-kuma/src/pages/Settings.vue

189 lines
4.7 KiB
Vue
Raw Normal View History

2021-06-25 13:55:49 +00:00
<template>
2021-08-19 18:37:59 +00:00
<transition name="slide-fade" appear>
<div>
<h1 v-show="show" class="mb-3">
2021-08-24 08:44:58 +00:00
{{ $t("Settings") }}
2021-08-19 18:37:59 +00:00
</h1>
<div class="shadow-box">
<div class="row">
2021-10-20 10:54:20 +00:00
<div class="settings-menu">
<router-link
v-for="(item, key) in subMenus"
:key="key"
:to="`/settings/${item.path}`"
2021-10-20 10:54:20 +00:00
>
<div
class="menu-item"
:class="{ active: $route.name == `settings-${key}` }"
>
{{ item.title }}
</div>
</router-link>
2021-06-25 13:55:49 +00:00
</div>
2021-10-20 10:54:20 +00:00
<div class="settings-content">
<div class="settings-content-header">
{{ subMenus[$route.name.split("-")[1]].title }}
2021-10-20 10:54:20 +00:00
</div>
<div class="mx-3">
<router-view />
2021-10-07 08:30:16 +00:00
</div>
2021-08-19 18:37:59 +00:00
</div>
</div>
2021-06-25 13:55:49 +00:00
</div>
2021-08-19 18:37:59 +00:00
</div>
</transition>
2021-06-25 13:55:49 +00:00
</template>
<script>
export default {
2021-06-25 13:55:49 +00:00
data() {
return {
2021-10-20 10:54:20 +00:00
2021-08-19 18:37:59 +00:00
show: true,
2021-07-31 13:57:58 +00:00
2021-10-20 10:54:20 +00:00
settings: {},
settingsLoaded: false,
subMenus: {
general: {
title: this.$t("General"),
path: "general",
2021-10-20 10:54:20 +00:00
},
appearance: {
title: this.$t("Appearance"),
path: "appearance",
2021-10-20 10:54:20 +00:00
},
notifications: {
title: this.$t("Notifications"),
path: "notifications",
2021-10-20 10:54:20 +00:00
},
monitorHistory: {
title: this.$t("Monitor History"),
path: "monitor-history",
2021-10-20 10:54:20 +00:00
},
security: {
title: this.$t("Security"),
path: "security",
2021-10-20 10:54:20 +00:00
},
backup: {
title: this.$t("Backup"),
path: "backup",
2021-10-20 10:54:20 +00:00
},
about: {
title: this.$t("About"),
path: "about",
2021-10-20 10:54:20 +00:00
}
2021-07-31 15:41:24 +00:00
},
};
2021-06-25 13:55:49 +00:00
},
2021-07-01 13:47:14 +00:00
mounted() {
2021-07-31 13:57:58 +00:00
this.loadSettings();
2021-07-01 13:47:14 +00:00
},
2021-06-25 13:55:49 +00:00
methods: {
2021-07-31 13:57:58 +00:00
loadSettings() {
this.$root.getSocket().emit("getSettings", (res) => {
this.settings = res.data;
2021-08-09 10:46:57 +00:00
if (this.settings.searchEngineIndex === undefined) {
this.settings.searchEngineIndex = false;
}
2021-09-15 12:40:26 +00:00
if (this.settings.entryPage === undefined) {
this.settings.entryPage = "dashboard";
}
if (this.settings.keepDataPeriodDays === undefined) {
2021-10-12 15:28:21 +00:00
this.settings.keepDataPeriodDays = 180;
}
2021-10-20 10:54:20 +00:00
this.settingsLoaded = true;
});
2021-07-31 13:57:58 +00:00
},
saveSettings() {
this.$root.getSocket().emit("setSettings", this.settings, (res) => {
this.$root.toastRes(res);
this.loadSettings();
});
2021-07-31 13:57:58 +00:00
},
2021-06-25 13:55:49 +00:00
},
};
2021-06-25 13:55:49 +00:00
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.shadow-box {
padding: 20px;
2021-10-20 10:54:20 +00:00
min-height: calc(100vh - 155px);
max-height: calc(100vh - 30px);
}
2021-10-20 10:54:20 +00:00
footer {
color: #aaa;
font-size: 13px;
margin-top: 20px;
padding-bottom: 30px;
text-align: center;
}
2021-10-20 10:54:20 +00:00
.settings-menu {
flex: 0 0 auto;
width: 300px;
a {
text-decoration: none !important;
}
2021-10-20 10:54:20 +00:00
.menu-item {
border-radius: 10px;
margin: 0.5em;
padding: 0.7em 1em;
cursor: pointer;
}
2021-09-01 15:09:32 +00:00
2021-10-20 10:54:20 +00:00
.menu-item:hover {
background: $highlight-white;
.dark & {
background: $dark-header-bg;
}
2021-10-20 10:54:20 +00:00
}
2021-09-01 15:09:32 +00:00
2021-10-20 10:54:20 +00:00
.menu-item.active {
background: $highlight-white;
border-left: 4px solid $primary;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.dark & {
background: $dark-header-bg;
}
2021-09-01 15:09:32 +00:00
}
}
2021-08-29 18:22:49 +00:00
2021-10-20 10:54:20 +00:00
.settings-content {
flex: 0 0 auto;
width: calc(100% - 300px);
.settings-content-header {
width: calc(100% + 20px);
border-bottom: 1px solid #dee2e6;
border-radius: 0 10px 0 0;
margin-top: -20px;
margin-right: -20px;
padding: 12.5px 1em;
font-size: 26px;
.dark & {
background: $dark-header-bg;
border-bottom: 0;
}
}
2021-08-29 18:22:49 +00:00
}
2021-06-25 13:55:49 +00:00
</style>