summaryrefslogtreecommitdiffstats
path: root/src/components/group
diff options
context:
space:
mode:
authorjdlugosz963 <jdlugosz963@gmail.com>2021-12-17 00:22:38 +0100
committerjdlugosz963 <jdlugosz963@gmail.com>2021-12-17 00:22:38 +0100
commitc6b4c6a90a3bb77add64994f51d3e2af790c8452 (patch)
treec4faaf7e4e48fa09b555c0f4ba50e204f73e8617 /src/components/group
parentcee635ff1db9ba7c9212547831287efe56c69a1f (diff)
downloadlom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.tar.gz
lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.zip
make styles and add some features
Diffstat (limited to 'src/components/group')
-rw-r--r--src/components/group/GroupMaker.vue21
-rw-r--r--src/components/group/GroupSender.vue62
-rw-r--r--src/components/group/Message.vue20
3 files changed, 66 insertions, 37 deletions
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 @@
1<template> 1<template>
2 <div class="group_maker"> 2 <div class="searcher">
3 Group maker 3 <div class="text-2xl p-2"> Group maker </div>
4 <form @submit="make_group"> 4 <form @submit="make_group">
5 <input 5 <input
6 v-model="group_name" 6 v-model="group_name"
7 ref='input' 7 ref='input'
8 type="text" 8 type="text"
9 placeholder="Type group name..." 9 placeholder="Nazwa grupy..."
10 class="w-full bg-gray-800 mb-2 mt-10 p-2"
11 @keydown="hotkeys"
10 /> 12 />
11 13
12 <select multiple v-model="users_selection"> 14 <select multiple class="w-full bg-gray-800 p-4 mb-10" v-model="users_selection">
13 15
14 <option 16 <option
15 v-for="user in users" 17 v-for="user in users"
@@ -19,6 +21,8 @@
19 </option> 21 </option>
20 22
21 </select> 23 </select>
24
25 <input type="submit" class="w-full p-2 bg-gray-800">
22 </form> 26 </form>
23 </div> 27 </div>
24</template> 28</template>
@@ -69,6 +73,15 @@ export default {
69 this.close() 73 this.close()
70 74
71 console.log(this.users) 75 console.log(this.users)
76 },
77
78 hotkeys(e) {
79 switch(e.code) {
80 case 'Delete':
81 e.preventDefault()
82 this.$emit('close')
83 break
84 }
72 } 85 }
73 }, 86 },
74 87
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 @@
1<template> 1<template>
2 <div class="group_view"> 2 <div
3 <h1> {{group.name}} </h1> 3 class="bg-gray-900 w-full m-2 mb-0 border-4"
4 <div class="messages"> 4 :class="{
5 'border-red-900': isFocus,
6 'border-blue-900': !isFocus
7 }"
8 >
9
10 <h1 class="text-2xl p-2 bg-blue-900"> {{group.name}} </h1>
11 <div class="overflow-auto h-64 p-2" ref="messages">
5 <Message v-for="message in messages" :key="message.id" :message="message" /> 12 <Message v-for="message in messages" :key="message.id" :message="message" />
6 </div> 13 </div>
7 14
8 <form @submit="send_message"> 15 <form @submit="send_message">
9 <input v-model="message" type="text" ref="input" /> 16 <input
17 v-model="message"
18 class="w-full bg-blue-900 p-2" placeholder="Napisz cos..." type="text" ref="input"
19 @focus="isFocus=true"
20 @blur="isFocus=false"
21 @keydown="hotkeys"
22 />
10 </form> 23 </form>
11 </div> 24 </div>
12</template> 25</template>
@@ -20,6 +33,7 @@ export default {
20 return { 33 return {
21 message: "", 34 message: "",
22 messages: [], 35 messages: [],
36 isFocus: false
23 } 37 }
24 }, 38 },
25 39
@@ -45,13 +59,38 @@ export default {
45 59
46 console.log(data) 60 console.log(data)
47 61
48 if(status===200) 62 if(status===200){
49 this.messages = data.messages 63 this.messages = data.messages
64 this.scroll_down()
65 }
50 }, 66 },
51 67
52 push_message(message) { 68 push_message(message) {
53 if(message.receiver == this.group.id) 69 if(message.receiver == this.group.id){
54 this.messages.push(message) 70 this.messages.push(message)
71 this.scroll_down()
72 }
73 },
74
75 scroll_down() {
76 this.$nextTick(function () {
77 const messages = this.$refs.messages
78 console.log(messages)
79 messages.scrollTop = messages.scrollHeight
80 })
81 },
82
83 hotkeys(e) {
84 switch(e.code) {
85 case 'Delete':
86 e.preventDefault()
87 this.$emit('close', this.group.id)
88 break
89 case 'Escape':
90 e.preventDefault()
91 this.$refs.input.blur()
92 break
93 }
55 } 94 }
56 }, 95 },
57 96
@@ -72,14 +111,3 @@ export default {
72 } 111 }
73} 112}
74</script> 113</script>
75
76<style scoped>
77.group_view {
78 width: 25%;
79}
80
81.messages {
82 overflow:auto;
83 height: 300px;
84}
85</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 @@
1<template> 1<template>
2 <div class="message" :class="{mine: is_message_mine}"> 2 <div class="w-full text-left mt-2" :class="{'text-right': is_message_mine}">
3 <div class="sender">{{ get_message_user }}</div> 3 <div class="">{{ get_message_user }}</div>
4 <div class="content">{{ get_message_content }}</div> 4 <div class="">{{ get_message_content }}</div>
5 <div class="date">{{ get_message_date }}</div> 5 <div class="">{{ get_message_date }}</div>
6 </div> 6 </div>
7</template> 7</template>
8 8
@@ -29,15 +29,3 @@ export default {
29 } 29 }
30} 30}
31</script> 31</script>
32
33<style scoped>
34.message {
35 width: 100%;
36 margin-bottom: 10px;
37 color: white;
38}
39
40.mine {
41 color: red;
42}
43</style>