Creato componente contenitore messaggio, impostata bozza della visualizzazione di una chat TODO Routing e Keyboard

geografia-vue/package.json

@@ -2,7 +2,7 @@
   "name": "geografia_vue",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview --port 4173",
     "test:unit": "vitest --environment jsdom",

geografia-vue/src/components/ChatHistory.vue

@@ -1,19 +1,12 @@
 <template>
   <div id="ChatHistory">
-    {v-for key="messages" message in history.messages
-    <ChatMsg />
-    }
-    <div id="WriteMsg" border-radius="100%" color="white" background="blue">
-      +
-    </div>
-    {v-if (WriteMsg)} <Keyboard />
   </div>
 </template>
 
 <script>
-import Keyboard from "./Keyboard.vue";
+
 export default {
-  components: { Keyboard },
+  components: { },
   setup() {},
 };
 </script>

geografia-vue/src/components/ChatList.vue

@@ -1,18 +1,23 @@
 <script setup>
 import ChatPreview from "@/components/ChatPreview.vue";
+import ChatMsg from "@/components/ChatMsg.vue";
 </script>
 
 <template>
   <div id="background">
     <li :key="chat.id" v-for="chat in history">
       <ChatPreview
-        :chatName=chat.name
+        :chat-name="chat.name"
-        :chatLastMsg=chat.last_msg
+        :chat-last-msg="chat.last_msg"
-        :chatSeen=chat.seen
+        :chat-seen="chat.seen"
-        :chatDate=chat.date
+        :chat-date="chat.date"
-        :chatNewMessages=chat.new_messages
+        :chat-new-messages="chat.new_messages"
       />
     </li>
+    <ChatMsg
+      :msg-text="history.chats.last_msg"
+      :is-user="history.chats.is_user"
+    />
   </div>
 </template>
 
@@ -25,10 +30,11 @@ export default {
         chats: {
           id: 1,
           name: "test-name",
-          last_msg: "test-msg",
+          last_msg: "🐱⛸️➡️?",
           seen: false,
           date: "25/08/22",
           new_messages: 1,
+          is_user: false,
         },
       },
     };

geografia-vue/src/components/ChatMsg.vue

@@ -1,15 +1,65 @@
 <template>
-  <div class="chat-msg">
+  <div
-    {{v-if MsgSender != "user"}}
+    v-bind:class="[isUser ? 'mainUserMsg' : 'secondaryUserMsg']"
-      $MsgType = "Receiver"
+    class="bubble bubble-bottom-left"
-    <div class="$MsgType">Sent text here</div>
+  >
+    <p>{{ msgText }}</p>
   </div>
 </template>
 
 <script>
 export default {
   setup() {},
+  props: {
+    msgText: String,
+    isUser: Boolean,
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.mainUserMsg {
+  --chat-bg-color: #368dda;
+  --msg-position: absolute;
+  --msg-right: 0;
+  --msg-border-right: 24px solid var(--chat-bg-color);
+  --msg-border-left: 12px solid transparent;
+  --msg-border-position-left: 70%;
+}
+.secondaryUserMsg {
+  --chat-bg-color: green;
+  --msg-position: relative;
+  --msg-right: none;
+  --msg-border-right: 12px solid transparent;
+  --msg-border-left: 24px solid var(--chat-bg-color);
+  --msg-border-position-left: 12%;
+}
+
+.bubble {
+  position: var(--msg-position);
+  right: var(--msg-right);
+  font-family: sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  width: 200px;
+  background: var(--chat-bg-color);
+  border-radius: 40px;
+  padding: 20px;
+  text-align: center;
+  color: black;
+}
+
+.bubble-bottom-left:before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  border-right: var(--msg-border-right);
+  border-left: var(--msg-border-left);
+  border-top: 12px solid var(--chat-bg-color) fff;
+  border-bottom: 25px solid transparent;
+  left: var(--msg-border-position-left);
+  right: var(--msg-border-position-right);
+  bottom: -24px;
+}
+</style>

geografia-vue/src/components/ChatPreview.vue

@@ -41,16 +41,6 @@ export default {
     chatDate: String,
     chatNewMessages: Number,
   },
-  methods: {
-    fetchCats(){
-      var url = "https://api.thecatapi.com/v1/images/search?api_key=live_wErMWjgaxvhV4nsfoyHxwyvscBbfBW606hsQB6iWeG4oLY0IleWSKrs2XgQaQIYB"
-      fetch(url).then((response) => {
-        return response.json()
-      }).then((data)=>{
-        return data.url
-      })
-    },
-  }
 };
 </script>
 

geografia-vue/src/components/ChatView.vue

@@ -0,0 +1,19 @@
+<script setup>
+import Keyboard from "./Keyboard.vue";
+import ChatHistory from "./ChatHistory.vue";
+</script>
+
+<template>
+  <div>
+    <ChatHistory />
+    <v-if="writeMessage" Keyboard />
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {},
+};
+</script>
+
+<style scoped></style>