Skip to content

V
vue_chat
Commit 61fe620e by Hứa Minh Thành
Options

list chat users

parent da079ae9
Showing with 124 additions and 21 deletions
components/elements/menu.vue
...@@ -19,10 +19,13 @@ ...@@ -19,10 +19,13 @@
<li> <li>
<a href="" style="pointer-events: none; display: inline-block">Users</a> <a href="" style="pointer-events: none; display: inline-block">Users</a>
<ul class="sub"> <ul class="sub">
<nuxt-link to="/chat" tag="a">Cheesy</nuxt-link> <nuxt-link
<nuxt-link to="/chat" tag="a">Cheesy</nuxt-link> v-for="(user, key) in this.users"
<nuxt-link to="/chat" tag="a">Cheesy</nuxt-link> :key="key"
<nuxt-link to="/chat" tag="a">Cheesy</nuxt-link> :to="{ path: 'chat', query: { friendId: key }}"
tag="a"
>{{ user.mail }}</nuxt-link
>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -32,10 +35,14 @@ ...@@ -32,10 +35,14 @@
</template> </template>
<script> <script>
import axios from "axios";
export default { export default {
data() { data() {
return { return {
isLogin: false, isLogin: false,
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
users: [],
}; };
}, },
methods: { methods: {
...@@ -46,16 +53,34 @@ export default { ...@@ -46,16 +53,34 @@ export default {
.catch((err) => { .catch((err) => {
alert(err); alert(err);
}); });
this.users = [];
},
getlistUser: function () {
// get list user
axios
.get(this.urlFireBase + "/chat.json")
.then((res) => {
// remove current user
delete res.data[this.$store.state.user.uid];
this.users = res.data;
})
.catch(function (error) {
console.log(error);
});
}, },
}, },
computed: { computed: {
checkLogin: function() { checkLogin: function () {
return (this.$store.state.user !== null) ? true : false; this.getlistUser();
} return this.$store.state.user !== null ? true : false;
},
}, },
created: function () { created: function () {
if (this.$store.state.user !== null) { if (this.$store.state.user !== null) {
this.isLogin = true; this.isLogin = true;
this.getlistUser();
} else {
this.users = [];
} }
}, },
}; };
......
pages/chat/index.vue
<template> <template>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded"> <div
class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded"
>
<div class="form-chat"> <div class="form-chat">
<ul class="p-0 list-message"> <ul class="p-0 list-message">
<li> <li>
<div class="row comments mb-2"> <div class="row comments mb-2">
<div class="col-md-2 col-sm-2 col-3 text-center user-img"> <div class="col-md-2 col-sm-2 col-3 text-center user-img">
<img id="profile-photo" src="http://nicesnippets.com/demo/man01.png" class="rounded-circle" /> <img
id="profile-photo"
src="http://nicesnippets.com/demo/man01.png"
class="rounded-circle"
/>
</div> </div>
<div class="col-md-9 col-sm-9 col-9 comment rounded mb-2"> <div class="col-md-9 col-sm-9 col-9 comment rounded mb-2">
<h4 class="m-0"><a href="#">Jacks David</a></h4> <h4 class="m-0"><a href="#">Jacks David</a></h4>
<time class="text-white ml-3">1 hours ago</time> <time class="text-white ml-3">1 hours ago</time>
<p class="mb-0 text-white">Thank you for visiting all the way from New York.</p> <p class="mb-0 text-white">
Thank you for visiting all the way from New York.
</p>
</div> </div>
</div> </div>
</li> </li>
<ul class="p-0"> <ul class="p-0">
<li> <li>
<div class="row comments mb-2"> <div class="row comments mb-2">
<div class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"> <div
<img id="profile-photo" src="http://nicesnippets.com/demo/man02.png" class="rounded-circle" /> class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"
>
<img
id="profile-photo"
src="http://nicesnippets.com/demo/man02.png"
class="rounded-circle"
/>
</div> </div>
<div class="col-md-7 col-sm-7 col-8 comment rounded mb-2"> <div class="col-md-7 col-sm-7 col-8 comment rounded mb-2">
<h4 class="m-0"><a href="#">Steve Alex</a></h4> <h4 class="m-0"><a href="#">Steve Alex</a></h4>
<time class="text-white ml-3">1 week ago</time> <time class="text-white ml-3">1 week ago</time>
<p class="mb-0 text-white">Thank you for visiting all the way from NYC.</p> <p class="mb-0 text-white">
Thank you for visiting all the way from NYC.
</p>
</div> </div>
</div> </div>
</li> </li>
...@@ -48,11 +64,59 @@ ...@@ -48,11 +64,59 @@
</template> </template>
<script> <script>
import axios from "axios";
export default { export default {
} data() {
return {
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
};
},
methods: {
getListChat: function () {
// Get list user and friend
axios
.get(
this.urlFireBase +
"/chat/" +
this.$store.state.user.uid +
"/" +
this.$route.query.friendId +
".json"
)
.then((res) => {
// get mesages
let mes = res.data;
// Get list friend and user
axios
.get(
this.urlFireBase +
"/chat/" +
this.$route.query.friendId +
"/" +
this.$store.state.user.uid +
".json"
)
.then((res) => {
// remove current user
console.log(res);
})
.catch(function (error) {
console.log(error);
});
})
.catch(function (error) {
console.log(error);
});
},
},
created: function () {
this.getListChat();
console.log(this.$route.query.friendId);
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~/assets/css/bootstrap.min.css'; @import "~/assets/css/bootstrap.min.css";
@import '~/assets/scss/chat.scss'; @import "~/assets/scss/chat.scss";
</style> </style>
pages/regirst/index.vue
...@@ -82,8 +82,8 @@ export default { ...@@ -82,8 +82,8 @@ export default {
return { return {
title: "Create your account", title: "Create your account",
user: { user: {
name: "", name: "Name",
email: "", email: "Email",
password: "", password: "",
passConfirm: "", passConfirm: "",
photoURL: photoURL:
...@@ -115,9 +115,8 @@ export default { ...@@ -115,9 +115,8 @@ export default {
userSignUp: function (err) { userSignUp: function (err) {
if (this.user.isLogin) { if (this.user.isLogin) {
// upload img // upload img
if (this.imageData) { if (this.imageData) {
this.onUpload().then(url => { this.onUpload().then((url) => {
this.commonUpdateInfo(); this.commonUpdateInfo();
}); });
} else { } else {
...@@ -131,6 +130,21 @@ export default { ...@@ -131,6 +130,21 @@ export default {
password: this.user.password, password: this.user.password,
}) })
.then(() => { .then(() => {
const userId = this.$store.state.user.uid;
let data = {};
data[userId] = {
mail: this.user.email
};
axios
.patch(this.urlFireBase + "/chat.json", data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.user.email = ""; this.user.email = "";
this.user.password = ""; this.user.password = "";
//if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename') //if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename')
...@@ -166,7 +180,7 @@ export default { ...@@ -166,7 +180,7 @@ export default {
() => { () => {
this.uploadValue = 100; this.uploadValue = 100;
storageRef.snapshot.ref.getDownloadURL().then((url) => { storageRef.snapshot.ref.getDownloadURL().then((url) => {
resolve(url) resolve(url);
this.user.photoURL = url; this.user.photoURL = url;
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment