summaryrefslogtreecommitdiffstats
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/Home.vue52
-rw-r--r--src/views/Login.vue12
-rw-r--r--src/views/Register.vue14
3 files changed, 61 insertions, 17 deletions
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d85760b..205a260 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,11 +1,19 @@
1<template> 1<template>
2 <div class="home" v-hotkey="keymap"> 2 <div class="home" v-hotkey="keymap">
3 Hi {{get_username}}! 3 <div class="inset-center">
4 <div class="text-center bg-gray-900 p-5 rounded-lg">
5 <p class="text-3xl capitalize">Witaj, {{get_username}}!</p>
6 <p class="mt-5"><kbd>Ctl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> </p>
7 </div>
8 </div>
4 9
5 <div v-for="group in groups" :key="group.name" > 10 <div class="flex flex-row justify-around">
6 <GroupSender 11 <GroupSender
12 v-for="group in groups"
7 :group="group" 13 :group="group"
8 :socket="socket" 14 :socket="socket"
15 :key="group.name"
16 @close="closeGroupSender"
9 /> 17 />
10 </div> 18 </div>
11 19
@@ -27,6 +35,7 @@
27import Searcher from '@/components/searcher/Searcher.vue' 35import Searcher from '@/components/searcher/Searcher.vue'
28import GroupMaker from '@/components/group/GroupMaker.vue' 36import GroupMaker from '@/components/group/GroupMaker.vue'
29import GroupSender from '@/components/group/GroupSender.vue' 37import GroupSender from '@/components/group/GroupSender.vue'
38import ChatService from '@/services/ChatService.js'
30import io from 'socket.io-client' 39import io from 'socket.io-client'
31 40
32const popups = { 41const popups = {
@@ -62,12 +71,29 @@ export default {
62 let groups = this.groups.slice() 71 let groups = this.groups.slice()
63 let index = groups.findIndex(o => o.name===group.name) 72 let index = groups.findIndex(o => o.name===group.name)
64 73
74 if(groups.length >=3)
75 groups.shift()
76
65 if(index >= 0) 77 if(index >= 0)
66 groups.splice(index, 1) 78 groups.splice(index, 1)
67 else 79 else
68 groups.push(group) 80 groups.push(group)
69 81
70 this.groups = groups 82 this.groups = groups
83 },
84
85 async joinAllGroupsSocket() {
86 const {data, status} = await ChatService.get_all_user_groups()
87
88 if(status === 200)
89 data.forEach(group => {
90 this.socket.emit("join_group", {group_id: group.id})
91 })
92 },
93
94 closeGroupSender(group_id) {
95 const index = this.groups.findIndex(group => group.id === group_id)
96 this.groups.splice(index, 1)
71 } 97 }
72 }, 98 },
73 99
@@ -82,7 +108,7 @@ export default {
82 'ctrl+shift+p': this.toogleSearcherShow, 108 'ctrl+shift+p': this.toogleSearcherShow,
83 'esc': this.hideGroup 109 'esc': this.hideGroup
84 } 110 }
85 } 111 },
86 }, 112 },
87 113
88 components: { 114 components: {
@@ -99,6 +125,7 @@ export default {
99 this.socket = io() 125 this.socket = io()
100 this.socket.auth = { token: this.$store.getters.get_token }; 126 this.socket.auth = { token: this.$store.getters.get_token };
101 this.socket.connect(); 127 this.socket.connect();
128 this.joinAllGroupsSocket()
102 129
103 this.socket.on("connect", () => { 130 this.socket.on("connect", () => {
104 console.log("Socket connected!") 131 console.log("Socket connected!")
@@ -107,7 +134,24 @@ export default {
107 this.socket.on("disconnect", () => { 134 this.socket.on("disconnect", () => {
108 console.log("Scoket dsiconected") 135 console.log("Scoket dsiconected")
109 }) 136 })
137
138 this.socket.on("receive_group_message", async ({message}) => {
139 const index = this.groups.findIndex(group => {return group.id === message.receiver})
140
141 if(index<0) {
142 const {status, data} = await ChatService.get_group_detail(message.receiver)
143 if(status!==200)
144 return
145
146 this.$notify({
147 type: 'success',
148 title: `Groupa: ${data.name}`,
149 text: `${message.sender.username}, napisal "${message.message}"`,
150 duration: -1
151 })
152 }
153 })
110 } 154 }
111 155
112} 156}
113</script> 157</script>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index cb5c8d8..2763840 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,13 +1,13 @@
1<template> 1<template>
2 <div id="login"> 2 <div id="login" class="inset-center bg-gray-900 p-4 rounded-lg shadow-lg">
3 <form @submit="log_in"> 3 <form @submit="log_in">
4 <input type="text" placeholder="Login" v-model="login"> 4 <input type="text" placeholder="Login" v-model="login" class="w-full bg-gray-800 p-2 mb-2">
5 <input type="password" placeholder="Password" v-model="password"> 5 <input type="password" placeholder="Password" v-model="password" class="w-full bg-gray-800 p-2 mb-4">
6 6
7 <input type="submit" value="Login!"> 7 <input type="submit" value="Login!" class="w-full bg-gray-800 p-2 mb-2">
8 </form> 8 </form>
9 9
10 <router-link to="/register"> Still don't have an account? </router-link> 10 <router-link to="/register"> Nadal nie masz konta? </router-link>
11 11
12 </div> 12 </div>
13</template> 13</template>
@@ -54,4 +54,4 @@ export default {
54 54
55<style> 55<style>
56 56
57</style> \ No newline at end of file 57</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index eb382c5..fa8822b 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,14 +1,14 @@
1<template> 1<template>
2 <div id="register"> 2 <div id="register" class="inset-center bg-gray-900 p-4 rounded-lg shadow-lg">
3 <form @submit="register"> 3 <form @submit="register">
4 <input type="text" placeholder="Login" v-model="login"> 4 <input type="text" placeholder="Login" v-model="login" class="w-full bg-gray-800 p-2 mb-2">
5 <input type="password" placeholder="Password" v-model="password"> 5 <input type="password" placeholder="Password" v-model="password" class="w-full bg-gray-800 p-2 mb-2">
6 <input type="password" placeholder="Repeat password" v-model="repeat_password"> 6 <input type="password" placeholder="Repeat password" v-model="repeat_password" class="w-full bg-gray-800 p-2 mb-4">
7 7
8 <input type="submit" value="Register!"> 8 <input type="submit" value="Register!" class="w-full bg-gray-800 p-2 mb-2">
9 </form> 9 </form>
10 10
11 <router-link to="/login">Already have an account?</router-link> 11 <router-link to="/login">Juz masz konto?</router-link>
12 12
13 </div> 13 </div>
14</template> 14</template>
@@ -66,4 +66,4 @@ export default {
66 66
67<style> 67<style>
68 68
69</style> \ No newline at end of file 69</style>