make styles and add some features

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 @@
 <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>
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 @@
 <template>
-  <div id="login">
+  <div id="login" class="inset-center bg-gray-900 p-4 rounded-lg shadow-lg">
       <form @submit="log_in">
-        <input type="text" placeholder="Login" v-model="login">
-        <input type="password" placeholder="Password" v-model="password">
+        <input type="text" placeholder="Login" v-model="login" class="w-full bg-gray-800 p-2 mb-2">
+        <input type="password" placeholder="Password" v-model="password" class="w-full bg-gray-800 p-2 mb-4">
 
-        <input type="submit" value="Login!">
+        <input type="submit" value="Login!" class="w-full bg-gray-800 p-2 mb-2">
       </form>
 
-      <router-link to="/register"> Still don't have an account? </router-link>
+      <router-link to="/register"> Nadal nie masz konta? </router-link>
       
     </div>
 </template>
@@ -54,4 +54,4 @@ export default {
 
 <style>
 
-</style>
\ No newline at end of file
+</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 @@
 <template>
-  <div id="register">
+  <div id="register" class="inset-center bg-gray-900 p-4 rounded-lg shadow-lg">
       <form @submit="register">
-        <input type="text" placeholder="Login" v-model="login">
-        <input type="password" placeholder="Password" v-model="password">
-        <input type="password" placeholder="Repeat password" v-model="repeat_password">     
+        <input type="text" placeholder="Login" v-model="login" class="w-full bg-gray-800 p-2 mb-2">
+        <input type="password" placeholder="Password" v-model="password" class="w-full bg-gray-800 p-2 mb-2">
+        <input type="password" placeholder="Repeat password" v-model="repeat_password" class="w-full bg-gray-800 p-2 mb-4">
 
-        <input type="submit" value="Register!">
+        <input type="submit" value="Register!" class="w-full bg-gray-800 p-2 mb-2">
       </form>
 
-      <router-link to="/login">Already have an account?</router-link>
+      <router-link to="/login">Juz masz konto?</router-link>
       
     </div>
 </template>
@@ -66,4 +66,4 @@ export default {
 
 <style>
 
-</style>
\ No newline at end of file
+</style>