diff --git a/quasar.conf.js b/quasar.conf.js
index b8f3fd42c7d8137b36902f4aba8610fdc2ed0b2b..304aaf8b97da9a4ecd16b63da0f3e3b95f37abba 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -22,6 +22,7 @@ module.exports = configure(function (/* ctx */) {
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
boot: [
+ 'firebase'
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
diff --git a/src/App.vue b/src/App.vue
index 3eac3064f7e739fb4c655f1ae33e7c0b166c5ec9..6491e00169990c90c34e6a3d4767997c4b3b2f80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,20 @@
<template>
<router-view />
</template>
+
<script>
import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
export default defineComponent({
- name: 'App'
+ name: 'App',
+
+ methods: {
+ ...mapActions('firebase', ['handleAuthStateChanged'])
+ },
+
+ mounted() {
+ this.handleAuthStateChanged()
+ }
})
</script>
diff --git a/src/boot/firebase.js b/src/boot/firebase.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9b7fd56290900bf469cf3413a7b28e63e42a55d
--- /dev/null
+++ b/src/boot/firebase.js
@@ -0,0 +1,31 @@
+// Firebase App (the core Firebase SDK) is always required and must be listed first
+import firebase from "firebase/app";
+// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
+// import * as firebase from "firebase/app"
+
+// If you enabled Analytics in your project, add the Firebase SDK for Analytics
+import "firebase/analytics";
+
+// Add the Firebase products that you want to use
+import "firebase/auth";
+import "firebase/database";
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+var firebaseConfig = {
+ apiKey: "AIzaSyB9Dav9F3qIlHcu9s4zuYbkt5mYBdrHJws",
+ authDomain: "nightlyfe-117a4.firebaseapp.com",
+ projectId: "nightlyfe-117a4",
+ storageBucket: "nightlyfe-117a4.appspot.com",
+ messagingSenderId: "928276199112",
+ appId: "1:928276199112:web:a8f1a82e5a2b272eb917fd",
+ measurementId: "G-Q0NX15EQ0Z"
+};
+
+// Initialize Firebase
+let firebaseApp = firebase.initializeApp(firebaseConfig);
+let firebaseAuth = firebaseApp.auth()
+let firebaseDb = firebaseApp.database()
+let analytics = firebaseApp.analytics()
+
+export { firebaseAuth, firebaseDb, analytics}
\ No newline at end of file
diff --git a/src/components/Friends.vue b/src/components/Friends.vue
index 9fa19e92fe3db8c3f5e0e60dbc1a039f8749bda3..64dcd74aaa6d8a6b175f6fb81466ef79487e48a2 100644
--- a/src/components/Friends.vue
+++ b/src/components/Friends.vue
@@ -2,12 +2,13 @@
q-toolbar.bg-primary.text-white.shadow-2
q-toolbar-title Contacts
q-list(bordered)
- q-item.q-my-sm(v-for='user in users', :key='user.id', to='/chat', clickable, v-ripple)
+ q-item.q-my-sm(v-for='(user, key) in users', :key='key', :to='"/chat/" + key', clickable, v-ripple)
q-item-section(avatar)
q-avatar(color='primary', text-color='white')
| {{ user.name.charAt(0) }}
q-item-section
q-item-label.text-weight-light.text-subtitle2 {{ user.name }}
+ q-item-label(caption, lines='1') @{{ user.username }}
q-item-section(side)
q-icon(name='chat_bubble', :color='user.online ? "light-green-6" : "blue-grey-5"')
q-toolbar.absolute-bottom.bg-primary.text-white.shadow-2
@@ -15,37 +16,17 @@ q-toolbar.absolute-bottom.bg-primary.text-white.shadow-2
</template>
<script>
+import { mapGetters } from 'vuex'
+
export default {
- data() {
- return {
- users: [
- {
- id: 1,
- name: 'Marco Endrizzi',
- online: true
- },
- {
- id: 2,
- name: 'Ahmed Henine',
- online: true
- },
- {
- id: 3,
- name: 'Maya Meylan',
- online: false
- },
- {
- id: 4,
- name: 'Gunes Kaan',
- online: false
- }
- ]
- }
- },
methods: {
addFriends() {
console.log('clicked')
}
+ },
+
+ computed: {
+ ...mapGetters('firebase', ['users'])
}
}
</script>
diff --git a/src/components/Login.vue b/src/components/LoginRegister.vue
similarity index 65%
rename from src/components/Login.vue
rename to src/components/LoginRegister.vue
index 74cd2870f7c636f68b995d79ad9d1d9265997d53..257f7450d40fe6a4c60219eda31762b3208fb08a 100644
--- a/src/components/Login.vue
+++ b/src/components/LoginRegister.vue
@@ -1,17 +1,20 @@
<template lang="pug">
q-form.q-pa-lg(@submit='submitForm')
- q-input.q-mb-md(v-model='email', type='email', label='Email')
- template(v-slot:prepend)
- q-icon(name='email')
- q-input.q-mb-md(v-model='username', v-if='tab == "register"', type='username', label='Username')
+ q-input.q-mb-md(v-model='formData.name', v-if='tab == "register"', type='name', label='Name')
template(v-slot:prepend)
q-icon(name='person')
- q-input.q-mb-md(type='password', v-model='password', label='Password')
+ q-input.q-mb-md(v-model='formData.username', v-if='tab == "register"', type='username', label='Username')
+ template(v-slot:prepend)
+ q-icon(name='alternate_email')
+ q-input.q-mb-md(v-model='formData.email', type='email', label='Email')
+ template(v-slot:prepend)
+ q-icon(name='email')
+ q-input.q-mb-md(type='password', v-model='formData.password', label='Password')
template(v-slot:prepend)
q-icon(name='lock')
//- Register only
q-card-section(v-if='tab == "register"')
- .text-center.q-pa-sm.q-gutter-xl
+ .text-center.q-py-sm.q-gutter-xl
q-btn(round, color='indigo-7', size='lg')
q-icon(name='fab fa-facebook-f', size='1.7rem')
q-btn(round, color='red-8', size='lg')
@@ -37,23 +40,29 @@ q-form.q-pa-lg(@submit='submitForm')
</template>
<script>
+import { mapActions } from 'vuex'
+
export default {
props: ['tab'],
data() {
return {
- email: '',
- username: '',
- password: ''
+ formData: {
+ name: '',
+ username: '',
+ email: '',
+ password: ''
+ }
}
},
methods: {
submitForm() {
if (this.tab == 'login') {
- console.log('login the user')
- } else {
- console.log('register the user')
+ this.loginUser(this.formData)
+ } else if (this.tab == 'register') {
+ this.registerUser(this.formData)
}
- }
+ },
+ ...mapActions('firebase', ['loginUser', 'registerUser'])
}
}
</script>
diff --git a/src/index.template.html b/src/index.template.html
index 45ed9912d41caac8ccebce0c37172142164f7283..89ffbf2c861284cfdec50473c53672c36ff1613c 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -23,28 +23,5 @@
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
- <!-- The core Firebase JS SDK is always required and must be listed first -->
- <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
-
- <!-- TODO: Add SDKs for Firebase products that you want to use
- https://firebase.google.com/docs/web/setup#available-libraries -->
- <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script>
-
- <script>
- // Your web app's Firebase configuration
- // For Firebase JS SDK v7.20.0 and later, measurementId is optional
- var firebaseConfig = {
- apiKey: "AIzaSyBPUdoB3wV6A9L-H1-J5POiQRmgqqcL9Bk",
- authDomain: "nightlyfe-308016.firebaseapp.com",
- projectId: "nightlyfe-308016",
- storageBucket: "nightlyfe-308016.appspot.com",
- messagingSenderId: "469882119194",
- appId: "1:469882119194:web:4ead2d00c69be60ec41da3",
- measurementId: "G-E6SZFDYGCD"
- };
- // Initialize Firebase
- firebase.initializeApp(firebaseConfig);
- firebase.analytics();
- </script>
</body>
</html>
diff --git a/src/layouts/ChatLayout.vue b/src/layouts/ChatLayout.vue
index b523cbba0508c2dcee8e628c5a6e6011fe2434c7..ec941f6c9e394db7e94ca5374bf059fd7da93b8f 100644
--- a/src/layouts/ChatLayout.vue
+++ b/src/layouts/ChatLayout.vue
@@ -10,10 +10,21 @@ q-layout(view='lHh lpr lff')
dense,
label='Back'
)
- q-toolbar-title.absolute-center {{ "NightLyfe" }}
+ q-toolbar-title.absolute-center.q-pl-xl {{ otherUserDetails.name }}
+ q-badge.q-ml-sm(
+ rounded,
+ align='middle',
+ :color='otherUserDetails.online ? "green" : "red"',
+ :label='otherUserDetails.online ? "online" : "offline"'
+ )
q-page-container
router-view
</template>
<script>
+import mixinOtherUserDetails from 'src/mixins/mixin-other-user-details.js'
+
+export default {
+ mixins: [mixinOtherUserDetails]
+}
</script>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 3fe427ab2c03ddf255443ce22beee69950de3b2c..8a7c79d4d3fc025fbdce4cf4f2722e0cb4dda0db 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -5,7 +5,12 @@ q-layout(view='lHh Lpr lFf')
q-scroll-area(style='height: calc(100% - 150px); margin-top: 150px')
q-list.padding
template(v-for='(menuItem, index) in menuList', :key='index')
- q-item(clickable, v-ripple, :to='menuItem.link')
+ q-item(
+ @click='menuItem.label == "Logout" ? (confirmLogout = true) : null',
+ clickable,
+ v-ripple,
+ :to='menuItem.link'
+ )
q-item-section(avatar)
q-icon(:name='menuItem.icon', :color='menuItem.color')
q-item-section
@@ -16,12 +21,12 @@ q-layout(view='lHh Lpr lFf')
style='height: 150px'
)
.row.absolute-bottom.bg-transparent.justify-center
- q-avatar(size='6.5em')
+ q-avatar(size='6.5em', style='margin-top: -95px')
img(
src='https://avataaars.io/?avatarStyle=Circle&topType=Eyepatch&facialHairType=Blank&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Default&skinColor=Light'
)
- .text-weight-bold Razvan Stoenescu
- div @rstoenescu
+ .text-bold.full-width.text-center {{ userDetails.name }}
+ div {{ "@" + userDetails.username }}
//- Right Drawer
q-drawer.bg-white(v-model='rightDrawer', side='right', :width='250', show-if-above)
Friends
@@ -30,6 +35,15 @@ q-layout(view='lHh Lpr lFf')
EventForm
q-dialog(v-model='newSignal', position='bottom')
SignalForm
+ //- Confirm Logout popup
+ q-dialog(v-model='confirmLogout', persistent)
+ q-card
+ q-card-section.row.items-center.q-pa-sm
+ q-avatar(rounded, icon='no_accounts', color='red', text-color='white')
+ span.q-ml-sm Are you sure you want to logout?
+ q-card-actions(align='right')
+ q-btn(flat, label='Cancel', color='primary', v-close-popup)
+ q-btn(@click='handleLogout()', flat, label='Confirm', color='primary', v-close-popup)
//- Page container and floating buttons
q-page-container
router-view
@@ -47,7 +61,7 @@ q-layout(view='lHh Lpr lFf')
import Friends from 'components/Friends.vue'
import EventForm from 'components/EventForm.vue'
import SignalForm from 'components/SignalForm.vue'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
export default {
name: 'MainLayout',
@@ -63,12 +77,22 @@ export default {
leftDrawer: false,
rightDrawer: false,
newEvent: false,
- newSignal: false
+ newSignal: false,
+ confirmLogout: false
}
},
+ methods: {
+ handleLogout() {
+ this.$router.push('/auth')
+ this.logoutUser()
+ },
+ ...mapActions('firebase', ['logoutUser'])
+ },
+
computed: {
- ...mapState(['menuList'])
+ ...mapState(['menuList']),
+ ...mapState('firebase', ['userDetails'])
}
}
</script>
diff --git a/src/mixins/mixin-other-user-details.js b/src/mixins/mixin-other-user-details.js
new file mode 100644
index 0000000000000000000000000000000000000000..0184609786f10e8d1909e33759634411803c3970
--- /dev/null
+++ b/src/mixins/mixin-other-user-details.js
@@ -0,0 +1,10 @@
+export default {
+ computed: {
+ otherUserDetails() {
+ if (this.$store.state.firebase.users[this.$route.params.otherUserId]) {
+ return this.$store.state.firebase.users[this.$route.params.otherUserId]
+ }
+ return {}
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Auth.vue b/src/pages/Auth.vue
index d5843685304e2e50b8f5cecab2b01fe37dd5cfa5..664d932344e62548736c3e8bf1e62498425f616a 100644
--- a/src/pages/Auth.vue
+++ b/src/pages/Auth.vue
@@ -6,7 +6,7 @@ q-layout.shadow-2.rounded-borders(view='lHh Lpr lff')
)
q-card.full-width(style='max-width: 1024px')
q-card-section.row.bg-primary.justify-center
- h4.text-h4.text-white.q-my-lg Welcome to NightLyfe
+ h4.text-h4.text-white.q-my-lg.text-weight-light Welcome to NightLyfe
q-tabs.text-grey(v-model='tab', active-color='primary', indicator-color='primary', align='justify')
q-tab(name='login', label='Login')
q-tab(name='register', label='Register')
@@ -27,7 +27,7 @@ export default {
}
},
components: {
- 'login-register': require('components/Login').default
+ 'login-register': require('components/LoginRegister').default
}
}
</script>
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index b1aa294babcfc5522eb99f13af4ef16ca5167850..ec9f7f0dd7bd3f7d7abe1fe7e975e57d793b0e26 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -1,54 +1,114 @@
<template lang="pug">
-q-banner.bg-grey-4.fixed-top(text-center='') User is Offline.
-.q-pa-md.column.col.justify-end
- q-chat-message(
- v-for='message in messages',
- :key='message.text',
- :name='message.from',
+q-page.q-pa-lg.column.justify-end.page-chat(ref='pageChat')
+ q-chat-message.text-weight-light(
+ v-for='(message, key) in messages',
+ :key='key',
+ :name='message.from == "me" ? userDetails.username : otherUserDetails.username',
:text='[message.text]',
- :sent='message.from == "me" ? true : false'
+ :sent='message.from == "me" ? true : false',
+ :stamp='message.time',
+ :bg-color='message.from == "me" ? "white" : "blue-3"',
+ avatar='https://cdn.quasar.dev/img/avatar1.jpg'
)
q-footer(elevated)
q-toolbar
q-form.full-width(@submit='sendMessage')
.row
- q-input.col-11(v-model='newMessage', bg-color='white', outlined, rounded, label='Message', dense)
+ q-input.col-11(
+ v-model='newMessage',
+ ref='newMessage',
+ bg-color='white',
+ outlined,
+ rounded,
+ label='Message',
+ dense
+ )
q-btn.col-1(type='submit', icon='send', color='white', round, dense, flat)
</template>
<script>
+import { mapState, mapActions } from 'vuex'
+import mixinOtherUserDetails from 'src/mixins/mixin-other-user-details.js'
+
export default {
+ mixins: [mixinOtherUserDetails],
+
data() {
return {
- newMessage: '',
- messages: [
- {
- text: 'Hello',
- from: 'me'
- },
- {
- text: 'Hi',
- from: 'them'
- },
- {
- text: 'How are you?',
- from: 'me'
- }
- ]
+ newMessage: ''
}
},
methods: {
+ currentTime() {
+ let d = new Date()
+ let h = d.getHours()
+ let m = d.getMinutes()
+
+ return String(h) + ':' + String(m)
+ },
+
sendMessage() {
- this.messages.push({
- text: this.newMessage,
- from: 'me'
+ this.firebaseSendMessage({
+ message: {
+ text: this.newMessage,
+ from: 'me',
+ time: this.currentTime()
+ },
+ otherUserId: this.$route.params.otherUserId
})
+ this.clearMessage()
+ this.scrollToBottom()
+ },
+
+ clearMessage() {
this.newMessage = ''
- }
+ this.$refs.newMessage.focus()
+ },
+
+ scrollToBottom() {
+ let pageChat = this.$refs.pageChat.$el
+ setTimeout(() => {
+ window.scrollTo(0, pageChat.scrollHeight)
+ }, 20)
+ },
+
+ ...mapActions('firebase', ['firebaseGetMessages', 'firebaseStopGettingMessages', 'firebaseSendMessage'])
+ },
+
+ computed: {
+ ...mapState('firebase', ['messages', 'userDetails'])
+ },
+
+ mounted() {
+ this.firebaseGetMessages(this.$route.params.otherUserId)
+ setTimeout(() => {
+ this.scrollToBottom()
+ }, 120)
+ },
+
+ // Fire when the user leaves the page
+ unmounted() {
+ this.firebaseStopGettingMessages()
}
}
</script>
-<style>
+<style lang='sass'>
+.page-chat
+ background: #e6fdff
+ &:after
+ content: ''
+ display: block
+ position: fixed
+ left: 0
+ right: 0
+ top: 0
+ bottom: 0
+ z-index: 0
+ opacity: 0.2
+ background-image: radial-gradient(circle at 100% 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 10%, silver 23%, white 23%, white 30%, silver 30%, silver 43%, white 43%, white 50%, silver 50%, silver 63%, white 63%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent)
+ background-size: 100px 50px
+.q-message
+ z-index: 1
</style>
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 252ff130d06e9348ea17ce9a89f705e3bf0ced7f..fe4d0b208924267bd87de0564ff939f45785085d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -8,7 +8,7 @@ const routes = [
]
},
{
- path: '/chat',
+ path: '/chat/:otherUserId',
component: () => import('layouts/ChatLayout.vue'),
children: [
{ path: '', component: () => import('pages/Chat.vue')}
diff --git a/src/static/data-structure.json b/src/static/data-structure.json
new file mode 100644
index 0000000000000000000000000000000000000000..3933ceb971454054e6046d2a35e02881f1946a73
--- /dev/null
+++ b/src/static/data-structure.json
@@ -0,0 +1,54 @@
+{
+ "users": {
+ "9HsxN1tMHNOfmQV3E16LNfcFTdc2": {
+ "name": "Test Name",
+ "username": "testusername",
+ "email": "test@test.com",
+ "online": false
+ },
+ "Oqk3C1ownieYIm8K0KgFqRXhKs53": {
+ "name": "Scientific Pig",
+ "username": "dontlookitup",
+ "email": "test3@test.com",
+ "online": false
+ },
+ "l7TY1PJocphLufQb3zN1tfRJYsy1": {
+ "name": "how is this working lmao",
+ "username": "amogus",
+ "email": "test4@test.com",
+ "online": false
+ },
+ "oVHXZPeYRbQPfKTCmH4LWJtmaeH2": {
+ "name": "Eric Sauce",
+ "username": "theSaucer",
+ "email": "test2@test.com",
+ "online": false
+ }
+ },
+ "chats": {
+ "9HsxN1tMHNOfmQV3E16LNfcFTdc2": {
+ "oVHXZPeYRbQPfKTCmH4LWJtmaeH2": {
+ "MESSAGEID1": {
+ "text": "Why eric 'sauce'?",
+ "from": "them"
+ },
+ "MESSAGEID2": {
+ "text": "Spaget",
+ "from": "me"
+ }
+ }
+ },
+ "oVHXZPeYRbQPfKTCmH4LWJtmaeH2": {
+ "9HsxN1tMHNOfmQV3E16LNfcFTdc2": {
+ "MESSAGEID1": {
+ "text": "Why eric 'sauce'?",
+ "from": "me"
+ },
+ "MESSAGEID2": {
+ "text": "Spaget",
+ "from": "them"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/store/firebase.js b/src/store/firebase.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4b69b78ebb98c74616a6da34dc5403a2b9ffca2
--- /dev/null
+++ b/src/store/firebase.js
@@ -0,0 +1,172 @@
+import { firebaseAuth, firebaseDb } from 'boot/firebase'
+
+let messagesRef
+
+const state = {
+ userDetails: {},
+ users: {},
+ messages: {}
+}
+
+const mutations = {
+ setUserDetails(state, payload) {
+ state.userDetails = payload
+ },
+
+ addUser(state, payload) {
+ state.users[payload.userId] = payload.userDetails
+ },
+
+ updateUser(state, payload) {
+ Object.assign(state.users[payload.userId], payload.userDetails)
+ },
+
+ addMessage(state, payload) {
+ state.messages[payload.messageId] = payload.messageDetails
+ },
+
+ clearMessages(state) {
+ state.messages = {}
+ }
+}
+
+const actions = {
+ loginUser({}, payload) {
+ firebaseAuth.signInWithEmailAndPassword(payload.email, payload.password)
+ .then(response => {
+ //pass
+ })
+ .catch(error => {
+ console.log(error.message)
+ })
+ },
+
+ logoutUser({}, payload) {
+ firebaseAuth.signOut()
+ },
+
+ registerUser({}, payload) {
+ firebaseAuth.createUserWithEmailAndPassword(payload.email, payload.password)
+ .then(response => {
+ let userId = firebaseAuth.currentUser.uid
+ firebaseDb.ref('users/' + userId).set({
+ name: payload.name,
+ username: payload.username,
+ email: payload.email,
+ online: true
+ })
+ })
+ .catch(error => {
+ console.log(error.message)
+ })
+ },
+
+ handleAuthStateChanged({ state, commit, dispatch }) {
+ firebaseAuth.onAuthStateChanged(user => {
+ if(user) {
+ // User logged in
+ let userId = firebaseAuth.currentUser.uid
+ firebaseDb.ref('users/' + userId).once('value', snapshot => {
+ let userDetails = snapshot.val()
+ commit('setUserDetails', {
+ name: userDetails.name,
+ username: userDetails.username,
+ email: userDetails.email,
+ userId: userId
+ })
+ })
+ dispatch('firebaseUpdateUser', {
+ userId: userId,
+ updates: {
+ online: true
+ }
+ })
+ dispatch('firebaseGetUsers')
+ this.$router.push('/')
+ }
+ else {
+ // User logged out
+ dispatch('firebaseUpdateUser', {
+ userId: state.userDetails.userId,
+ updates: {
+ online: false
+ }
+ })
+ commit('setUserDetails', {})
+ this.$router.replace('/auth')
+ }
+ })
+ },
+
+ firebaseUpdateUser({}, payload) {
+ firebaseDb.ref('users/' + payload.userId).update(payload.updates)
+ },
+
+ firebaseGetUsers({ commit }) {
+ firebaseDb.ref('users').on('child_added', snapshot => {
+ let userDetails = snapshot.val()
+ let userId = snapshot.key
+ commit('addUser', {
+ userId,
+ userDetails
+ })
+ })
+ firebaseDb.ref('users').on('child_changed', snapshot => {
+ let userDetails = snapshot.val()
+ let userId = snapshot.key
+ commit('updateUser', {
+ userId,
+ userDetails
+ })
+ })
+ },
+
+ firebaseGetMessages({ state, commit }, otherUserId) {
+ let userId = state.userDetails.userId
+ messagesRef = firebaseDb.ref('chats/' + userId + '/' + otherUserId)
+ messagesRef.on(
+ 'child_added', snapshot => {
+ let messageDetails = snapshot.val()
+ let messageId = snapshot.key
+ commit('addMessage', {
+ messageId,
+ messageDetails
+ })
+ }
+ )
+ },
+
+ firebaseStopGettingMessages({ commit }) {
+ if (messagesRef) {
+ messagesRef.off('child_added')
+ commit('clearMessages')
+ }
+ },
+
+ firebaseSendMessage({}, payload) {
+ firebaseDb.ref('chats/' + state.userDetails.userId + '/' + payload.otherUserId).push(payload.message)
+
+ payload.message.from = 'them'
+ firebaseDb.ref('chats/' + payload.otherUserId + '/' + state.userDetails.userId).push(payload.message)
+ }
+}
+
+const getters = {
+ users: state => {
+ let usersFiltered = {}
+ Object.keys(state.users).forEach(key => {
+ if (key !== state.userDetails.userId) {
+ usersFiltered[key] = state.users[key]
+ }
+ })
+ return usersFiltered
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions,
+ getters
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 3e08ded29cd28900f02c4c9d4a436b1fb3ae0806..e590963e9833dd2f8235db91d855ba0208e3cb10 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,10 @@
import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
+import mapStyles from './mapStyles'
+import menuList from './menuList'
+import firebase from './firebase'
+
// import example from './module-example'
/*
@@ -15,425 +19,11 @@ import { createStore } from 'vuex'
export default store(function (/* { ssrContext } */) {
const Store = createStore({
state: {
- menuList: [
- {
- icon: 'account_circle',
- label: 'User',
- color: 'blue',
- link: '/userinfo',
- separator: false
- },
- {
- icon: 'settings',
- label: 'Settings',
- color: 'blue-grey-7',
- link: '',
- separator: true
- },
- {
- icon: 'help',
- label: 'Privacy',
- color: 'accent',
- link: '',
- separator: false
- },
- {
- icon: 'error',
- label: 'Report a Problem',
- color: 'red-6',
- link: '',
- separator: false
- },
- {
- icon: 'feedback',
- label: 'Send Feedback',
- color: 'orange',
- link: '',
- separator: true
- },
- {
- icon: 'login',
- label: 'Login',
- color: 'green',
- link: '/auth',
- separator: false
- },
-
- ],
- mapStyles: [
- {
- "featureType": "all",
- "elementType": "labels",
- "stylers": [
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "all",
- "elementType": "labels.text",
- "stylers": [
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "all",
- "elementType": "labels.text.fill",
- "stylers": [
- {
- "saturation": 36
- },
- {
- "color": "#dee6f0"
- },
- {
- "lightness": 40
- },
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "all",
- "elementType": "labels.text.stroke",
- "stylers": [
- {
- "visibility": "off"
- },
- {
- "color": "#000000"
- },
- {
- "lightness": 16
- }
- ]
- },
- {
- "featureType": "all",
- "elementType": "labels.icon",
- "stylers": [
- {
- "visibility": "off"
- },
- {
- "hue": "#ff0000"
- }
- ]
- },
- {
- "featureType": "administrative",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#353c44"
- },
- {
- "lightness": 20
- }
- ]
- },
- {
- "featureType": "administrative",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 17
- },
- {
- "weight": 1.2
- }
- ]
- },
- {
- "featureType": "landscape",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 20
- }
- ]
- },
- {
- "featureType": "landscape",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#1c1e25"
- }
- ]
- },
- {
- "featureType": "landscape.man_made",
- "elementType": "labels.text",
- "stylers": [
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "landscape.man_made",
- "elementType": "labels.icon",
- "stylers": [
- {
- "visibility": "on"
- },
- {
- "hue": "#e0ff00"
- }
- ]
- },
- {
- "featureType": "poi",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 21
- }
- ]
- },
- {
- "featureType": "poi",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#1e212b"
- }
- ]
- },
- {
- "featureType": "poi",
- "elementType": "labels.text",
- "stylers": [
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "poi",
- "elementType": "labels.icon",
- "stylers": [
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "poi.park",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#365231"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "all",
- "stylers": [
- {
- "visibility": "off"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "lightness": 17
- },
- {
- "saturation": "11"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 29
- },
- {
- "weight": 0.2
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "labels.text.fill",
- "stylers": [
- {
- "visibility": "simplified"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "labels.icon",
- "stylers": [
- {
- "hue": "#ff7a00"
- },
- {
- "saturation": "79"
- },
- {
- "visibility": "on"
- },
- {
- "lightness": "-33"
- },
- {
- "gamma": "0.63"
- }
- ]
- },
- {
- "featureType": "road.arterial",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 18
- }
- ]
- },
- {
- "featureType": "road.arterial",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#256a72"
- },
- {
- "saturation": "61"
- }
- ]
- },
- {
- "featureType": "road.local",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 16
- }
- ]
- },
- {
- "featureType": "road.local",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "gamma": "1"
- },
- {
- "lightness": "0"
- },
- {
- "color": "#2d414b"
- }
- ]
- },
- {
- "featureType": "transit",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#000000"
- },
- {
- "lightness": 19
- },
- {
- "visibility": "off"
- }
- ]
- },
- {
- "featureType": "transit.line",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#eb0202"
- }
- ]
- },
- {
- "featureType": "transit.station",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#ff1d00"
- },
- {
- "saturation": "-35"
- },
- {
- "lightness": "-47"
- }
- ]
- },
- {
- "featureType": "transit.station",
- "elementType": "labels.icon",
- "stylers": [
- {
- "hue": "#00d4ff"
- },
- {
- "visibility": "simplified"
- },
- {
- "lightness": "0"
- },
- {
- "saturation": "0"
- },
- {
- "gamma": "0.5"
- }
- ]
- },
- {
- "featureType": "water",
- "elementType": "geometry",
- "stylers": [
- {
- "color": "#69bbcf"
- },
- {
- "lightness": 17
- }
- ]
- }
- ]
+ mapStyles: mapStyles['JSON'],
+ menuList: menuList['data']
},
modules: {
- // example
+ firebase
},
// enable strict mode (adds overhead!)
diff --git a/src/store/mapStyles.js b/src/store/mapStyles.js
new file mode 100644
index 0000000000000000000000000000000000000000..6329716d53e327329bc560b1955ffbd62e3f1d6b
--- /dev/null
+++ b/src/store/mapStyles.js
@@ -0,0 +1,373 @@
+export default {
+ 'JSON': [
+ {
+ "featureType": "all",
+ "elementType": "labels",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "saturation": 36
+ },
+ {
+ "color": "#dee6f0"
+ },
+ {
+ "lightness": 40
+ },
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.text.stroke",
+ "stylers": [
+ {
+ "visibility": "off"
+ },
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 16
+ }
+ ]
+ },
+ {
+ "featureType": "all",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "off"
+ },
+ {
+ "hue": "#ff0000"
+ }
+ ]
+ },
+ {
+ "featureType": "administrative",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#353c44"
+ },
+ {
+ "lightness": 20
+ }
+ ]
+ },
+ {
+ "featureType": "administrative",
+ "elementType": "geometry.stroke",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 17
+ },
+ {
+ "weight": 1.2
+ }
+ ]
+ },
+ {
+ "featureType": "landscape",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 20
+ }
+ ]
+ },
+ {
+ "featureType": "landscape",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#1c1e25"
+ }
+ ]
+ },
+ {
+ "featureType": "landscape.man_made",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "landscape.man_made",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "on"
+ },
+ {
+ "hue": "#e0ff00"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 21
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#1e212b"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.text",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "poi",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "visibility": "on"
+ }
+ ]
+ },
+ {
+ "featureType": "poi.park",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#365231"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "all",
+ "stylers": [
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "lightness": 17
+ },
+ {
+ "saturation": "11"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "geometry.stroke",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 29
+ },
+ {
+ "weight": 0.2
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "labels.text.fill",
+ "stylers": [
+ {
+ "visibility": "simplified"
+ }
+ ]
+ },
+ {
+ "featureType": "road.highway",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "hue": "#ff7a00"
+ },
+ {
+ "saturation": "79"
+ },
+ {
+ "visibility": "on"
+ },
+ {
+ "lightness": "-33"
+ },
+ {
+ "gamma": "0.63"
+ }
+ ]
+ },
+ {
+ "featureType": "road.arterial",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 18
+ }
+ ]
+ },
+ {
+ "featureType": "road.arterial",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#256a72"
+ },
+ {
+ "saturation": "61"
+ }
+ ]
+ },
+ {
+ "featureType": "road.local",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 16
+ }
+ ]
+ },
+ {
+ "featureType": "road.local",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "gamma": "1"
+ },
+ {
+ "lightness": "0"
+ },
+ {
+ "color": "#2d414b"
+ }
+ ]
+ },
+ {
+ "featureType": "transit",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#000000"
+ },
+ {
+ "lightness": 19
+ },
+ {
+ "visibility": "off"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.line",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#eb0202"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.station",
+ "elementType": "geometry.fill",
+ "stylers": [
+ {
+ "color": "#ff1d00"
+ },
+ {
+ "saturation": "-35"
+ },
+ {
+ "lightness": "-47"
+ }
+ ]
+ },
+ {
+ "featureType": "transit.station",
+ "elementType": "labels.icon",
+ "stylers": [
+ {
+ "hue": "#00d4ff"
+ },
+ {
+ "visibility": "simplified"
+ },
+ {
+ "lightness": "0"
+ },
+ {
+ "saturation": "0"
+ },
+ {
+ "gamma": "0.5"
+ }
+ ]
+ },
+ {
+ "featureType": "water",
+ "elementType": "geometry",
+ "stylers": [
+ {
+ "color": "#69bbcf"
+ },
+ {
+ "lightness": 17
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/store/menuList.js b/src/store/menuList.js
new file mode 100644
index 0000000000000000000000000000000000000000..837395257cfeb9fffd0a3716c0bc2ef30973010b
--- /dev/null
+++ b/src/store/menuList.js
@@ -0,0 +1,46 @@
+export default {
+ data: [
+ {
+ icon: 'account_circle',
+ label: 'User',
+ color: 'blue',
+ link: '/userinfo',
+ separator: false
+ },
+ {
+ icon: 'settings',
+ label: 'Settings',
+ color: 'blue-grey-7',
+ link: '',
+ separator: true
+ },
+ {
+ icon: 'help',
+ label: 'Privacy',
+ color: 'accent',
+ link: '',
+ separator: false
+ },
+ {
+ icon: 'error',
+ label: 'Report a Problem',
+ color: 'red-6',
+ link: '',
+ separator: false
+ },
+ {
+ icon: 'feedback',
+ label: 'Send Feedback',
+ color: 'orange',
+ link: '',
+ separator: true
+ },
+ {
+ icon: 'logout',
+ label: 'Logout',
+ color: 'black',
+ link: '',
+ separator: false
+ },
+ ]
+}
\ No newline at end of file
diff --git a/src/store/module-example/actions.js b/src/store/module-example/actions.js
deleted file mode 100644
index cf42235248229bf14f04e77a9ca239f0caae6fae..0000000000000000000000000000000000000000
--- a/src/store/module-example/actions.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export function someAction (/* context */) {
-}
diff --git a/src/store/module-example/getters.js b/src/store/module-example/getters.js
deleted file mode 100644
index ce8aa1f26bffc2d952395192050c4b27643d599c..0000000000000000000000000000000000000000
--- a/src/store/module-example/getters.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export function someGetter (/* state */) {
-}
diff --git a/src/store/module-example/index.js b/src/store/module-example/index.js
deleted file mode 100644
index babab8ec520e34a51ac8ece7387024dd41ba4079..0000000000000000000000000000000000000000
--- a/src/store/module-example/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './state'
-import * as getters from './getters'
-import * as mutations from './mutations'
-import * as actions from './actions'
-
-export default {
- namespaced: true,
- getters,
- mutations,
- actions,
- state
-}
diff --git a/src/store/module-example/mutations.js b/src/store/module-example/mutations.js
deleted file mode 100644
index ce57bfbced558dc936316f8918421bcab16952cc..0000000000000000000000000000000000000000
--- a/src/store/module-example/mutations.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export function someMutation (/* state */) {
-}
diff --git a/src/store/module-example/state.js b/src/store/module-example/state.js
deleted file mode 100644
index 6fd747ceba9f63969a407a2904027a0edb9cbe5c..0000000000000000000000000000000000000000
--- a/src/store/module-example/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function () {
- return {
- //
- }
-}