ChatMsg funzionanti, da stilizzare

geografia-vue/src/assets/demo_messages.json

@@ -2,63 +2,45 @@
   "history": [
     {
       "id": 1,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name1",
+      "is_user": false,
-      "last_message": "🐱⛸️➡️?",
       "seen": false,
-      "date": "25/08/22",
+      "date": "22/09 12:12"
-      "new_messages": 1,
-      "is_user": false
     },
     {
       "id": 2,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name2",
+      "is_user": true,
-      "last_message": "🐱⛸️➡️?",
+      "seen": true,
-      "seen": false,
+      "date": "22/09 12:12"
-      "date": "25/08/22",
-      "new_messages": 1,
-      "is_user": true
     },
     {
       "id": 3,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name3",
+      "is_user": false,
-      "last_message": "🐱⛸️➡️?",
+      "seen": true,
-      "seen": false,
+      "date": "22/09 12:12"
-      "date": "25/08/22",
-      "new_messages": 1,
-      "is_user": false
     },
     {
       "id": 4,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name4",
+      "is_user": true,
-      "last_message": "🐱⛸️➡️?",
+      "seen": true,
-      "seen": false,
+      "date": "22/09 12:12"
-      "date": "25/08/22",
-      "new_messages": 1,
-      "is_user": true
     },
     {
       "id": 5,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name5",
+      "is_user": false,
-      "last_message": "🐱⛸️➡️?",
       "seen": false,
-      "date": "25/08/22",
+      "date": "22/09 12:12"
-      "new_messages": 1,
-      "is_user": false
     },
     {
       "id": 6,
-      "picture": "../assets/cat_skate.png",
+      "text": "🐱⛸️➡️?",
-      "name": "test-name6",
+      "is_user": true,
-      "last_message": "🐱⛸️➡️?",
+      "seen": true,
-      "seen": false,
+      "date": "22/09 12:12"
-      "date": "25/08/22",
-      "new_messages": 1,
-      "is_user": true
     }
   ]
 }

geografia-vue/src/components/ChatList.vue

@@ -1,7 +1,7 @@
 <script setup>
 //Fix v-if riga 20
 import ChatPreview from "@/components/ChatPreview.vue";
-import ChatView from "./ChatView.vue";
+import ChatView from "@/components/single_chat/ChatView.vue";
 </script>
 
 <template>
@@ -17,7 +17,7 @@ import ChatView from "./ChatView.vue";
       :chat-new-messages="chat.new_messages"
       @click="showChat(chat)"
     />
-    <ChatView v-if="selected-chat" />
+    <ChatView v-if="selectedChat" />
   </div>
 </template>
 
@@ -26,10 +26,13 @@ import demo_chats_json from "../assets/demo_chats.json";
 export default {
   demo_chats: demo_chats_json,
   selectedChat: false,
+  chatId: Number,
   methods: {
     showChat(chat) {
+      console.log(chat);
       this.$emit("change-header", [chat.picture, chat.name]);
       this.selectedChat = true;
+      this.chatId = chat.id;
     },
   },
 };

geografia-vue/src/components/keyboard/Keyboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="msg-composition"></div>
+  <div class="msg-composition"><p>I'm writing hereee</p></div>
 </template>
 
 <style scoped></style>

geografia-vue/src/components/single_chat/ChatHistory.vue

@@ -7,18 +7,22 @@ import ChatMsg from "./ChatMsg.vue";
 per permettero lo scrolling e una dimensione fissa -->
 
   <div id="ChatHistory">
-    <ChatMsg v-for="message in $options.demo_messages.history" :key="message.id"
+    <ChatMsg
-      :messageText="message.text"
+      v-for="message in $options.demo_messages.history"
-      :isUser="message.user"
+      :key="message.id"
+      :message-text="message.text"
+      :is-user="message.is_user"
+      :message-seen="message.seen"
+      :message-date="message.date"
     />
   </div>
 </template>
 
 <script>
 
+import demo_messages_json from "@/assets/demo_messages.json";
 export default {
-  components: {},
+  demo_messages: demo_messages_json,
-  setup() {},
 };
 </script>
 

geografia-vue/src/components/single_chat/ChatMsg.vue

@@ -4,15 +4,23 @@
     class="bubble bubble-bottom-left"
   >
     <p>{{ messageText }}</p>
+    <div class="message-seen" color="green">
+      <p v-if="messageSeen">✓✓</p>
+      <p v-else>✓</p>
+      <p>{{messageDate}}</p>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  // Change messageDate type to Date
   setup() {},
   props: {
     messageText: String,
     isUser: Boolean,
+    messageSeen: Boolean,
+    messageDate: String,
   },
 };
 </script>