summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/group/GroupSender.vue67
-rw-r--r--src/components/group/GroupView.vue47
-rw-r--r--src/components/group/Message.vue35
3 files changed, 102 insertions, 47 deletions
diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
new file mode 100644
index 0000000..160ca76
--- /dev/null
+++ b/src/components/group/GroupSender.vue
@@ -0,0 +1,67 @@
1<template>
2 <div class="group_view">
3 <h1> {{group.name}} </h1>
4 <div class="messages">
5 <Message v-for="message in messages" :key="message.id" :message="message" />
6 </div>
7
8 <form @submit="send_message">
9 <input v-model="message" type="text" ref="input" />
10 </form>
11 </div>
12</template>
13
14<script>
15import Message from '@/components/group/Message.vue'
16import ChatService from '@/services/ChatService.js'
17
18export default {
19 data() {
20 return {
21 message: "",
22 messages: []
23 }
24 },
25
26 props: {
27 group: Object
28 },
29
30 methods: {
31 close() {
32 this.$emit('close')
33 },
34
35 send_message(e) {
36 e.preventDefault()
37 console.log(this.message)
38 this.message = ""
39 },
40
41 async get_messages() {
42 let {status, data} = await ChatService.get_group_messages(this.group.id)
43
44 console.log(data)
45
46 if(status===200)
47 this.messages = data.messages
48 }
49 },
50
51 components: {
52 Message
53 },
54
55 created() {
56 this.$nextTick(function () {
57 this.$refs.input.focus()
58
59 this.get_messages()
60 })
61 }
62}
63</script>
64
65<style scoped>
66
67</style>
diff --git a/src/components/group/GroupView.vue b/src/components/group/GroupView.vue
deleted file mode 100644
index 1608cf4..0000000
--- a/src/components/group/GroupView.vue
+++ /dev/null
@@ -1,47 +0,0 @@
1<template>
2 <div class="group_view">
3 Group maker
4 <form @submit="send_message">
5 <inout type="text" ref="input" />
6 </form>
7 </div>
8</template>
9
10<script>
11import ChatService from "@/services/ChatService.js"
12
13export default {
14 data() {
15 return {
16 }
17 },
18
19 methods: {
20 close() {
21 this.$emit('close')
22 },
23 },
24
25 created() {
26 this.$nextTick(function () {
27 this.$refs.input.focus()
28 })
29 }
30}
31</script>
32
33<style scoped>
34
35.group_view {
36 position: absolute;
37 width: 30%;
38 height: 80%;
39 top: 50%;
40 left: 50%;
41 background-color: #202020;
42 padding: 20px;
43 border-radius: 10px;
44 transform: translate(-50%, -50%);
45 }
46
47</style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
new file mode 100644
index 0000000..56e2805
--- /dev/null
+++ b/src/components/group/Message.vue
@@ -0,0 +1,35 @@
1<template>
2 <div class="message">
3 <div class="sender">{{ get_message_user }}</div>
4 <div class="content">{{ get_message_content }}</div>
5 <div class="date">{{ get_message_date }}</div>
6 </div>
7</template>
8
9<script>
10export default {
11 props: {
12 message: Object
13 },
14
15 computed: {
16 get_message_user() { return this.message.sender.username },
17 get_message_content() { return this.message.message },
18 get_message_date() {
19 let date = new Date(this.message.create_date)
20 return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
21 },
22 },
23
24 created() {
25 this.$nextTick(function () {
26 })
27 }
28}
29</script>
30
31<style scoped>
32.message {
33 width: 100%;
34}
35</style>