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/assets/css/tailwind.css           | 31 ++++++++++++++++++
 src/components/group/GroupMaker.vue   | 21 +++++++++---
 src/components/group/GroupSender.vue  | 62 +++++++++++++++++++++++++----------
 src/components/group/Message.vue      | 20 +++--------
 src/components/searcher/Searcher.vue  | 41 +++++------------------
 src/components/searcher/Sugestion.vue | 21 +-----------
 src/main.js                           |  2 ++
 src/services/ChatService.js           | 12 +++++++
 src/views/Home.vue                    | 52 ++++++++++++++++++++++++++---
 src/views/Login.vue                   | 12 +++----
 src/views/Register.vue                | 14 ++++----
 11 files changed, 182 insertions(+), 106 deletions(-)
 create mode 100644 src/assets/css/tailwind.css

(limited to 'src')

diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
new file mode 100644
index 0000000..1028353
--- /dev/null
+++ b/src/assets/css/tailwind.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .inset-center {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    kbd {
+        @apply bg-gray-600;
+        @apply p-1;
+        @apply rounded-md;
+        @apply border-gray-800;
+        @apply font-fira;
+    }
+
+    .searcher {
+        @apply inset-center;
+        @apply w-2/3;
+        @apply h-90;
+        @apply shadow-lg;
+        @apply bg-gray-900;
+        @apply p-4 rounded-lg;
+        @apply border-2;
+        @apply border-blue-900;
+    }
+}
diff --git a/src/components/group/GroupMaker.vue b/src/components/group/GroupMaker.vue
index f3da293..06963e3 100644
--- a/src/components/group/GroupMaker.vue
+++ b/src/components/group/GroupMaker.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="group_maker">
-      Group maker
+  <div class="searcher">
+      <div class="text-2xl p-2"> Group maker </div>
       <form @submit="make_group">
           <input
               v-model="group_name"
               ref='input'
               type="text"
-              placeholder="Type group name..."
+              placeholder="Nazwa grupy..."
+              class="w-full bg-gray-800 mb-2 mt-10 p-2"
+              @keydown="hotkeys"
           />
 
-          <select multiple v-model="users_selection">
+          <select multiple class="w-full bg-gray-800 p-4 mb-10" v-model="users_selection">
 
             <option
               v-for="user in users"
@@ -19,6 +21,8 @@
             </option>
 
           </select>
+
+          <input type="submit" class="w-full p-2 bg-gray-800">
       </form>
   </div>
 </template>
@@ -69,6 +73,15 @@ export default {
         this.close()
 
       console.log(this.users)
+    },
+
+    hotkeys(e) {
+        switch(e.code) {
+            case 'Delete':
+                e.preventDefault()
+                this.$emit('close')
+                break
+        }
     }
   },
 
diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
index ba36949..a815561 100644
--- a/src/components/group/GroupSender.vue
+++ b/src/components/group/GroupSender.vue
@@ -1,12 +1,25 @@
 <template>
-  <div class="group_view">
-      <h1> {{group.name}} </h1>
-      <div class="messages">
+  <div
+      class="bg-gray-900 w-full m-2 mb-0 border-4"
+      :class="{
+        'border-red-900': isFocus,
+        'border-blue-900': !isFocus
+      }"
+  >
+
+      <h1 class="text-2xl p-2 bg-blue-900"> {{group.name}} </h1>
+      <div class="overflow-auto h-64 p-2" ref="messages">
         <Message v-for="message in messages" :key="message.id" :message="message" />
       </div>
 
       <form @submit="send_message">
-        <input v-model="message" type="text" ref="input" />
+          <input
+              v-model="message"
+              class="w-full bg-blue-900 p-2" placeholder="Napisz cos..." type="text" ref="input"
+              @focus="isFocus=true"
+              @blur="isFocus=false"
+              @keydown="hotkeys"
+          />
       </form>
   </div>
 </template>
@@ -20,6 +33,7 @@ export default {
     return {
       message: "",
       messages: [],
+      isFocus: false
     }
   },
 
@@ -45,13 +59,38 @@ export default {
 
       console.log(data)
 
-      if(status===200)
+      if(status===200){
         this.messages = data.messages
+        this.scroll_down()
+      }
     },
 
     push_message(message) {
-      if(message.receiver == this.group.id)
+      if(message.receiver == this.group.id){
         this.messages.push(message)
+        this.scroll_down()
+      }
+    },
+
+    scroll_down() {
+      this.$nextTick(function () {
+        const messages = this.$refs.messages
+        console.log(messages)
+        messages.scrollTop = messages.scrollHeight
+      })
+    },
+
+    hotkeys(e) {
+        switch(e.code) {
+            case 'Delete':
+                e.preventDefault()
+                this.$emit('close', this.group.id)
+                break
+            case 'Escape':
+                e.preventDefault()
+                this.$refs.input.blur()
+                break
+        }
     }
   },
 
@@ -72,14 +111,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.group_view {
-  width: 25%;
-}
-
-.messages {
-  overflow:auto;
-  height: 300px;
-}
-</style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
index eedcc6e..556deb9 100644
--- a/src/components/group/Message.vue
+++ b/src/components/group/Message.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="message" :class="{mine: is_message_mine}">
-      <div class="sender">{{ get_message_user }}</div>
-      <div class="content">{{ get_message_content }}</div>
-      <div class="date">{{ get_message_date }}</div>
+  <div class="w-full text-left mt-2" :class="{'text-right': is_message_mine}">
+      <div class="">{{ get_message_user }}</div>
+      <div class="">{{ get_message_content }}</div>
+      <div class="">{{ get_message_date }}</div>
   </div>
 </template>
 
@@ -29,15 +29,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.message {
-  width: 100%;
-  margin-bottom: 10px;
-  color: white;
-}
-
-.mine {
-  color: red;
-}
-</style>
diff --git a/src/components/searcher/Searcher.vue b/src/components/searcher/Searcher.vue
index f8dd51f..e74600a 100644
--- a/src/components/searcher/Searcher.vue
+++ b/src/components/searcher/Searcher.vue
@@ -1,7 +1,8 @@
 <template>
-  <div id="searcher">
+  <div class="searcher">
     <input 
-      type="text" 
+      type="text"
+      class="w-full bg-gray-800 p-2 mb-4"
       v-model='search' 
       ref='input' 
       @keydown="hotkeys" 
@@ -13,7 +14,7 @@
       v-for="sugestion in sugestions" 
       :key="sugestion[0]"
       :sugestion="sugestion"
-      :class="{selected: sugestion[0] === current[0]}"
+      :class="{'bg-gray-800': sugestion[0] === current[0]}"
     />
   </div>
 </template>
@@ -72,7 +73,11 @@ export default {
 
     hotkeys(e) {
       switch(e.code) {
-        case 'Escape':
+         case 'Escape':
+          e.preventDefault()
+          this.close()
+          break
+        case 'Delete':
           e.preventDefault()
           this.close()
           break
@@ -127,31 +132,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  #searcher {
-    position: absolute;
-    width: 30%;
-    height: 80%;
-    top: 50%;
-    left: 50%;
-    background-color: #202020;
-    padding: 20px;
-    border-radius: 10px;
-    transform: translate(-50%, -50%);
-  }
-
-  #searcher input {
-    width: 100%;
-    margin-bottom: 20px;
-    padding: 10px;
-    padding-right: 0px;
-    height: 20px;
-    border: none;
-    background-color: #303030;
-  }
-
-  .selected {
-    background-color: #505050;
-  }
-</style>
diff --git a/src/components/searcher/Sugestion.vue b/src/components/searcher/Sugestion.vue
index 4721ca2..15a177d 100644
--- a/src/components/searcher/Sugestion.vue
+++ b/src/components/searcher/Sugestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sugestion">
+  <div class="w-auto bg-gray-700 p-2 text-center mt-5">
       <span>{{sugestion[0]}}</span>
   </div>
 </template>
@@ -9,24 +9,5 @@ export default {
     props: {
         sugestion: Array
     },
-
-   created() {
-        this.$nextTick(function () {
-        })
-     }
-
 }
 </script>
-
-<style scoped>
-    .sugestion {
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        background-color: #303030;
-
-        margin-top: 10px;
-        padding: 5px;
-        padding-right: 0px;
-    }
-</style>
diff --git a/src/main.js b/src/main.js
index fd31090..50babcd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@ import Axios from 'axios'
 import Notifications from 'vue-notification'
 import VueHotkey from 'v-hotkey'
 
+import '@/assets/css/tailwind.css'
+
 Vue.config.productionTip = false
 
 Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`;
diff --git a/src/services/ChatService.js b/src/services/ChatService.js
index d077e9b..d03f250 100644
--- a/src/services/ChatService.js
+++ b/src/services/ChatService.js
@@ -37,5 +37,17 @@ export default {
             }
         })
         .catch(error => error_notify(error))
+    },
+
+    async get_group_detail(group_pk) {
+        return await axios
+        .get(url+`groups/detail/${group_pk}/`)
+        .then(res => {
+            return {
+                status: res.status,
+                data: res.data
+            }
+        })
+        .catch(error => error_notify(error))
     }
 }
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>
-- 
cgit v1.2.3