From c6b4c6a90a3bb77add64994f51d3e2af790c8452 Mon Sep 17 00:00:00 2001
From: jdlugosz963 <jdlugosz963@gmail.com>
Date: Fri, 17 Dec 2021 00:22:38 +0100
Subject: make styles and add some features

---
 src/views/Home.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 4 deletions(-)

(limited to 'src/views/Home.vue')

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 @@
 <template>
   <div class="home" v-hotkey="keymap">
-      Hi {{get_username}}!
+      <div class="inset-center">
+        <div class="text-center bg-gray-900 p-5 rounded-lg">
+          <p class="text-3xl capitalize">Witaj, {{get_username}}!</p>
+          <p class="mt-5"><kbd>Ctl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> </p>
+        </div>
+      </div>
 
-      <div v-for="group in groups" :key="group.name" >
+     <div class="flex flex-row justify-around">
           <GroupSender
+              v-for="group in groups"
               :group="group"
               :socket="socket"
+              :key="group.name"
+              @close="closeGroupSender"
           />
       </div>
 
@@ -27,6 +35,7 @@
 import Searcher from '@/components/searcher/Searcher.vue'
 import GroupMaker from '@/components/group/GroupMaker.vue'
 import GroupSender from  '@/components/group/GroupSender.vue'
+import ChatService from '@/services/ChatService.js'
 import io from 'socket.io-client'
 
 const popups = {
@@ -62,12 +71,29 @@ export default {
         let groups = this.groups.slice()
         let index = groups.findIndex(o => o.name===group.name)
 
+        if(groups.length >=3)
+          groups.shift()
+
         if(index >= 0)
             groups.splice(index, 1)
         else
             groups.push(group)
 
         this.groups = groups
+    },
+
+    async joinAllGroupsSocket() {
+        const {data, status} = await ChatService.get_all_user_groups()
+
+        if(status === 200)
+            data.forEach(group => {
+                this.socket.emit("join_group", {group_id: group.id})
+            })
+    },
+
+    closeGroupSender(group_id) {
+      const index = this.groups.findIndex(group => group.id === group_id)
+      this.groups.splice(index, 1)
     }
   },
 
@@ -82,7 +108,7 @@ export default {
         'ctrl+shift+p': this.toogleSearcherShow,
         'esc': this.hideGroup
       }
-    }
+    },
   },
 
   components: {
@@ -99,6 +125,7 @@ export default {
     this.socket = io()
     this.socket.auth = { token: this.$store.getters.get_token };
     this.socket.connect();
+    this.joinAllGroupsSocket()
 
     this.socket.on("connect", () => {
         console.log("Socket connected!")
@@ -107,7 +134,24 @@ export default {
     this.socket.on("disconnect", () => {
         console.log("Scoket dsiconected")
     })
+
+    this.socket.on("receive_group_message", async ({message}) => {
+      const index = this.groups.findIndex(group => {return group.id === message.receiver})
+
+      if(index<0) {
+          const {status, data} = await ChatService.get_group_detail(message.receiver)
+          if(status!==200)
+              return
+
+          this.$notify({
+              type: 'success',
+              title: `Groupa: ${data.name}`,
+              text: `${message.sender.username}, napisal "${message.message}"`,
+              duration: -1
+          })
+      }
+    })
   }
-  
+
 }
 </script>
-- 
cgit v1.2.3