audiobookshelf/client/pages/config.vue

93 lines
2.4 KiB
Vue

<template>
<div id="page-wrapper" class="page p-6 overflow-y-auto relative" :class="streamAudiobook ? 'streaming' : ''">
<app-config-side-nav :is-open.sync="sideDrawerOpen" />
<div class="configContent" :class="`page-${currentPage}`">
<div class="w-full pb-4 px-2 flex md:hidden border-b border-white border-opacity-10 mb-2">
<span class="material-icons cursor-pointer" @click.stop.prevent="showMore">more_vert</span>
<p class="pl-3 capitalize">{{ currentPage }}</p>
</div>
<nuxt-child />
</div>
<div class="fixed bottom-0 right-0 w-10 h-10" @dblclick="setDeveloperMode"></div>
</div>
</template>
<script>
export default {
asyncData({ store, redirect, route }) {
if (!store.getters['user/getIsRoot']) {
// Non-Root user only has access to the listening stats page
if (route.name !== 'config-stats') {
redirect('/config/stats')
}
}
},
data() {
return {
sideDrawerOpen: false
}
},
watch: {
currentPage: {
handler() {
this.sideDrawerOpen = false
}
}
},
computed: {
streamAudiobook() {
return this.$store.state.streamAudiobook
},
currentPage() {
if (!this.$route.name) return 'Settings'
var routeName = this.$route.name.split('-')
if (routeName.length > 0) return routeName.slice(1).join('-')
return 'Settings'
}
},
methods: {
showMore() {
this.sideDrawerOpen = true
},
setDeveloperMode() {
var value = !this.$store.state.developerMode
this.$store.commit('setDeveloperMode', value)
this.$toast.info(`Developer Mode ${value ? 'Enabled' : 'Disabled'}`)
}
// saveMetadataComplete(result) {
// this.savingMetadata = false
// if (!result) return
// this.$toast.success(`Metadata saved for ${result.success} audiobooks`)
// },
// saveMetadataFiles() {
// this.savingMetadata = true
// this.$root.socket.once('save_metadata_complete', this.saveMetadataComplete)
// this.$root.socket.emit('save_metadata')
// }
},
mounted() {}
}
</script>
<style>
.configContent {
margin: auto;
width: 900px;
max-width: calc(100% - 176px);
}
.configContent.page-library-stats {
width: 1200px;
}
@media (max-width: 1024px) {
.configContent {
margin-left: 176px;
}
}
@media (max-width: 768px) {
.configContent {
margin-left: 0px;
width: 100%;
max-width: 100%;
}
}
</style>