diff options
author | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-17 00:22:38 +0100 |
---|---|---|
committer | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-17 00:22:38 +0100 |
commit | c6b4c6a90a3bb77add64994f51d3e2af790c8452 (patch) | |
tree | c4faaf7e4e48fa09b555c0f4ba50e204f73e8617 /src/views/Home.vue | |
parent | cee635ff1db9ba7c9212547831287efe56c69a1f (diff) | |
download | lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.tar.gz lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.zip |
make styles and add some features
Diffstat (limited to 'src/views/Home.vue')
-rw-r--r-- | src/views/Home.vue | 52 |
1 files changed, 48 insertions, 4 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 @@ | |||
27 | import Searcher from '@/components/searcher/Searcher.vue' | 35 | import Searcher from '@/components/searcher/Searcher.vue' |
28 | import GroupMaker from '@/components/group/GroupMaker.vue' | 36 | import GroupMaker from '@/components/group/GroupMaker.vue' |
29 | import GroupSender from '@/components/group/GroupSender.vue' | 37 | import GroupSender from '@/components/group/GroupSender.vue' |
38 | import ChatService from '@/services/ChatService.js' | ||
30 | import io from 'socket.io-client' | 39 | import io from 'socket.io-client' |
31 | 40 | ||
32 | const popups = { | 41 | const 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> |