From 49379b11b8dfa179fd81398e8b4b5423c7275038 Mon Sep 17 00:00:00 2001
From: jdlugosz963 <jdlugosz963@gmail.com>
Date: Wed, 15 Dec 2021 14:53:33 +0100
Subject: add Groups View and message fetcher
---
src/components/group/GroupSender.vue | 67 ++++++++++++++++++++++++++++++++++++
src/components/group/GroupView.vue | 47 -------------------------
src/components/group/Message.vue | 35 +++++++++++++++++++
3 files changed, 102 insertions(+), 47 deletions(-)
create mode 100644 src/components/group/GroupSender.vue
delete mode 100644 src/components/group/GroupView.vue
create mode 100644 src/components/group/Message.vue
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 @@
+<template>
+ <div class="group_view">
+ <h1> {{group.name}} </h1>
+ <div class="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" />
+ </form>
+ </div>
+</template>
+
+<script>
+import Message from '@/components/group/Message.vue'
+import ChatService from '@/services/ChatService.js'
+
+export default {
+ data() {
+ return {
+ message: "",
+ messages: []
+ }
+ },
+
+ props: {
+ group: Object
+ },
+
+ methods: {
+ close() {
+ this.$emit('close')
+ },
+
+ send_message(e) {
+ e.preventDefault()
+ console.log(this.message)
+ this.message = ""
+ },
+
+ async get_messages() {
+ let {status, data} = await ChatService.get_group_messages(this.group.id)
+
+ console.log(data)
+
+ if(status===200)
+ this.messages = data.messages
+ }
+ },
+
+ components: {
+ Message
+ },
+
+ created() {
+ this.$nextTick(function () {
+ this.$refs.input.focus()
+
+ this.get_messages()
+ })
+ }
+}
+</script>
+
+<style scoped>
+
+</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 @@
-<template>
- <div class="group_view">
- Group maker
- <form @submit="send_message">
- <inout type="text" ref="input" />
- </form>
- </div>
-</template>
-
-<script>
-import ChatService from "@/services/ChatService.js"
-
-export default {
- data() {
- return {
- }
- },
-
- methods: {
- close() {
- this.$emit('close')
- },
- },
-
- created() {
- this.$nextTick(function () {
- this.$refs.input.focus()
- })
- }
-}
-</script>
-
-<style scoped>
-
-.group_view {
- position: absolute;
- width: 30%;
- height: 80%;
- top: 50%;
- left: 50%;
- background-color: #202020;
- padding: 20px;
- border-radius: 10px;
- transform: translate(-50%, -50%);
- }
-
-</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 @@
+<template>
+ <div class="message">
+ <div class="sender">{{ get_message_user }}</div>
+ <div class="content">{{ get_message_content }}</div>
+ <div class="date">{{ get_message_date }}</div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ message: Object
+ },
+
+ computed: {
+ get_message_user() { return this.message.sender.username },
+ get_message_content() { return this.message.message },
+ get_message_date() {
+ let date = new Date(this.message.create_date)
+ return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
+ },
+ },
+
+ created() {
+ this.$nextTick(function () {
+ })
+ }
+}
+</script>
+
+<style scoped>
+.message {
+ width: 100%;
+}
+</style>
--
cgit v1.2.3