gamebrary/src/App.vue

237 lines
6.8 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template>
<div id="app">
2019-01-11 21:52:08 +00:00
<nav-header />
2018-10-19 05:15:28 +00:00
2019-02-08 06:13:48 +00:00
<main :class="{ 'logged-in': user && !isPublic }" v-if="user && !isPublic">
2018-10-19 05:15:28 +00:00
<router-view />
</main>
2019-01-19 05:23:26 +00:00
2019-02-08 06:13:48 +00:00
<div class="auth" v-else>
<i class="fas fa-circle-notch fast-spin fa-3x" />
<h3>Authorizing</h3>
</div>
2019-01-19 05:23:26 +00:00
<toast />
2018-10-19 05:15:28 +00:00
</div>
</template>
<script>
import NavHeader from '@/components/NavHeader/NavHeader';
2019-01-19 05:23:26 +00:00
import Toast from '@/components/Toast/Toast';
2018-11-05 02:28:29 +00:00
import firebase from 'firebase/app';
import { debounce } from 'lodash';
2018-11-05 02:28:29 +00:00
import 'firebase/auth';
import 'firebase/firestore';
import { mapState } from 'vuex';
2018-11-05 02:28:29 +00:00
firebase.initializeApp({
apiKey: 'AIzaSyA6MsmnLtqT4b11r-j15wwreRypO3AodcA',
authDomain: 'gamebrary.com',
databaseURL: 'https://gamebrary-8c736.firebaseio.com',
projectId: 'gamebrary-8c736',
storageBucket: 'gamebrary-8c736.appspot.com',
messagingSenderId: '324529217902',
});
const db = firebase.firestore();
2018-10-19 05:15:28 +00:00
export default {
name: 'App',
components: {
NavHeader,
2019-01-19 05:23:26 +00:00
Toast,
2018-10-19 05:15:28 +00:00
},
computed: {
...mapState(['user', 'platform']),
2018-11-21 02:43:10 +00:00
isPublic() {
return this.$route.name === 'shareList';
},
},
mounted() {
if (this.isPublic) {
return;
}
2018-11-27 23:59:19 +00:00
if (this.user) {
2019-02-08 06:15:16 +00:00
this.$bus.$on('SAVE_SETTINGS', this.saveSettings);
this.$bus.$on('SAVE_TAGS', this.saveTags);
2018-11-27 23:59:19 +00:00
this.syncData();
2019-02-08 06:15:16 +00:00
return;
}
2019-02-08 06:15:16 +00:00
firebase.auth().getRedirectResult().then(({ user }) => {
if (user) {
this.init(user);
} else {
const GoogleAuth = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(GoogleAuth)
.catch((message) => {
this.$bus.$emit('TOAST', {
message,
type: 'error',
2019-01-24 06:18:34 +00:00
});
2019-02-08 06:15:16 +00:00
});
}
});
},
beforeDestroy() {
this.$bus.$off('SAVE_SETTINGS');
2019-02-08 06:15:16 +00:00
this.$bus.$off('SAVE_TAGS');
},
methods: {
saveSettings: debounce(
// eslint-disable-next-line
function(settings) {
db.collection('settings').doc(this.user.uid).set(settings, { merge: true })
.then(() => {
this.$store.commit('SET_SETTINGS', settings);
this.$bus.$emit('TOAST', { message: 'Settings saved' });
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'There was an error saving your settings', type: 'error' });
});
}, 500),
2019-02-08 06:15:16 +00:00
saveTags(tags, force) {
if (tags) {
db.collection('tags').doc(this.user.uid).set(tags, { merge: !force })
.then(() => {
this.$bus.$emit('TOAST', { message: 'Tags updated' });
})
.catch(() => {
this.$bus.$emit('TOAST', {
message: 'There was an error saving your tag',
type: 'error',
});
});
}
},
2018-11-27 23:59:19 +00:00
syncData() {
db.collection('lists').doc(this.user.uid)
.onSnapshot((doc) => {
if (doc.exists) {
const gameLists = doc.data();
this.$store.commit('SET_GAME_LISTS', gameLists);
}
});
db.collection('settings').doc(this.user.uid)
.onSnapshot((doc) => {
if (doc.exists) {
const settings = doc.data();
this.$store.commit('SET_SETTINGS', settings);
}
});
2019-02-08 06:15:16 +00:00
db.collection('tags').doc(this.user.uid)
.onSnapshot((doc) => {
if (doc.exists) {
const tags = doc.data();
this.$store.commit('SET_TAGS', tags);
}
});
2018-11-27 23:59:19 +00:00
},
init(user) {
this.$store.commit('SET_USER', user);
this.loadSettings();
2019-02-08 06:15:16 +00:00
this.loadTags();
this.loadLists();
2019-02-08 06:15:16 +00:00
this.syncData();
},
loadSettings() {
const docRef = db.collection('settings').doc(this.user.uid);
docRef.get().then((doc) => {
if (doc.exists) {
this.$store.commit('SET_SETTINGS', doc.data());
} else {
this.initSettings();
}
}).catch(() => {
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
});
},
loadLists() {
db.collection('lists').doc(this.user.uid).get()
.then((doc) => {
if (doc.exists) {
2018-11-21 02:43:10 +00:00
const data = doc.data();
this.$store.commit('SET_GAME_LISTS', data);
} else {
this.initList();
}
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
2019-02-08 06:15:16 +00:00
});
},
loadTags() {
db.collection('tags').doc(this.user.uid).get()
.then((doc) => {
if (doc.exists) {
const data = doc.data();
this.$store.commit('SET_TAGS', data);
}
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
});
},
initList() {
db.collection('lists').doc(this.user.uid).set({}, { merge: true })
.then(() => {
this.loadLists();
});
},
initSettings() {
db.collection('settings').doc(this.user.uid).set({}, { merge: true })
.then(() => {
this.loadSettings();
});
},
},
2018-10-19 05:15:28 +00:00
};
</script>
<style lang="scss" rel="stylesheet/scss">
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:700|Roboto:400,400italic,700);
2018-10-19 05:15:28 +00:00
@import "~styles/styles.scss";
body {
2018-10-29 23:53:49 +00:00
background: $color-dark-gray;
2018-10-19 05:15:28 +00:00
margin: 0;
font-size: 14px;
}
2018-11-27 07:15:27 +00:00
#app > main {
background: $color-gray;
2018-10-19 05:15:28 +00:00
}
h1, h2, h3, h4, h5, h6 {
font-family: "Fira Sans", sans-serif;
font-weight: 700;
}
2018-10-19 05:15:28 +00:00
body, p, a, li, blockquote {
font-family: "Roboto", sans-serif;
font-weight: 400;
2018-10-19 05:15:28 +00:00
}
</style>