gamebrary/src/App.vue
2021-03-04 10:14:21 -07:00

122 lines
2.3 KiB
Vue

<template>
<div
id="app"
:dir="dir"
v-shortkey="KEYBOARD_SHORTCUTS"
@shortkey="handleShortcutAction"
>
<dock v-if="user || isPublicRoute" />
<global-modals />
<main :class="{
'authorizing': !user,
'bg-dark text-white': darkTheme,
'offset': !isBoard,
}"
>
<router-view />
</main>
</div>
</template>
<script>
import Dock from '@/components/Dock';
import GlobalModals from '@/components/GlobalModals';
import firebase from 'firebase/app';
import { mapState, mapGetters } from 'vuex';
import { KEYBOARD_SHORTCUTS, FIREBASE_CONFIG } from '@/constants';
firebase.initializeApp(FIREBASE_CONFIG);
export default {
name: 'App',
components: {
Dock,
GlobalModals,
},
data() {
return {
debugUserId: null,
KEYBOARD_SHORTCUTS,
};
},
computed: {
...mapState(['user', 'settings', 'sessionExpired']),
...mapGetters(['darkTheme']),
userId() {
return this.debugUserId || this.user.uid;
},
dir() {
const { settings } = this;
return settings && settings.language === 'ar' ? 'rtl' : 'ltr';
},
isPublicRoute() {
return this.$route.meta && this.$route.meta.public;
},
isBoard() {
return ['public-board', 'board'].includes(this.$route.name);
},
},
async mounted() {
await this.$store.dispatch('GET_TWITCH_TOKEN');
this.init();
},
methods: {
handleShortcutAction(data) {
this.$bus.$emit('HANDLE_SHORTCUT', data);
},
init() {
if (this.isPublicRoute) {
return;
}
if (this.user) {
this.load();
} else if (this.$route.name !== 'auth') {
this.$router.replace({ name: 'auth' });
}
},
load() {
this.$store.dispatch('LOAD_RELEASES');
this.$store.dispatch('LOAD_WALLPAPERS');
this.$store.dispatch('SYNC_LOAD_SETTINGS');
this.$store.dispatch('SYNC_LOAD_TAGS');
this.$store.dispatch('SYNC_LOAD_NOTES');
this.$store.dispatch('SYNC_LOAD_PROGRESSES');
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss">
@import "~styles/styles";
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
main {
height: 100vh;
overflow-y: auto;
&.authorizing {
width: 100%;
left: 0;
}
&.offset {
padding-left: calc(58px + .5rem);
}
}
</style>