Passaggio dei promps, Header

.gitignore

@@ -24,3 +24,4 @@ node_modules/
 # Generated by Cordova
 /plugins/
 /platforms/
+.vscode

geografia-vue/src/App.vue

@@ -1,9 +1,31 @@
 <script setup>
+//TODO: Fixare passaggio promps a header
 import ChatList from "@/components/ChatList.vue";
+import Header from "@/components/Header.vue";
 </script>
 
 <template>
   <main>
-    <ChatList />
+    <Header
+      :chat-picture="chat-picture"
+      :chat-name="chat-name"
+      :header-chat="header-chat"
+    />
+    <ChatList @change-header="changeHeader" />
   </main>
 </template>
+
+<script>
+export default {
+  chatPicture: { type: String, default: "" },
+  chatName: { type: String, default: "" },
+  headerChat: { type: Boolean, default: false },
+  methods: {
+    changeHeader(e) {
+      this.chatPicture = e[1];
+      this.chatName = e[2];
+      this.headerChat = true;
+    },
+  },
+};
+</script>

geografia-vue/src/assets/demo_chats.json

@@ -2,6 +2,7 @@
   "history": [
     {
       "id": 1,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name1",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -11,6 +12,7 @@
     },
     {
       "id": 2,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name2",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -20,6 +22,7 @@
     },
     {
       "id": 3,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name3",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -29,6 +32,7 @@
     },
     {
       "id": 4,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name4",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -38,6 +42,7 @@
     },
     {
       "id": 5,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name5",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -47,6 +52,7 @@
     },
     {
       "id": 6,
+      "picture": "../assets/cat_skate.png",
       "name": "test-name6",
       "last_message": "🐱⛸️➡️?",
       "seen": false,

geografia-vue/src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

geografia-vue/src/components/ChatList.vue

@@ -1,19 +1,23 @@
 <script setup>
+//Fix v-if riga 20
 import ChatPreview from "@/components/ChatPreview.vue";
-import ChatMsg from "@/components/ChatMsg.vue";
+import ChatView from "./ChatView.vue";
 </script>
 
 <template>
-  <div id="background">
+  <div id="background chat-list">
-    <li :key="chat.id" v-for="chat in $options.demo_chats.history">
+    <ChatPreview
-      <ChatPreview
+      v-for="chat in $options.demo_chats.history"
-        :chat-name="chat.name"
+      :key="chat.id"
-        :chat-last-message="chat.last_message"
+      :chat-picture="chat.picture"
-        :chat-seen="chat.seen"
+      :chat-name="chat.name"
-        :chat-date="chat.date"
+      :chat-last-message="chat.last_message"
-        :chat-new-messages="chat.new_messages"
+      :chat-seen="chat.seen"
-      />
+      :chat-date="chat.date"
-    </li>
+      :chat-new-messages="chat.new_messages"
+      @click="showChat(chat)"
+    />
+    <ChatView v-if="selected-chat" />
   </div>
 </template>
 
@@ -21,6 +25,13 @@ import ChatMsg from "@/components/ChatMsg.vue";
 import demo_chats_json from "../assets/demo_chats.json";
 export default {
   demo_chats: demo_chats_json,
+  selectedChat: false,
+  methods: {
+    showChat(chat) {
+      this.$emit("change-header", [chat.picture, chat.name]);
+      this.selectedChat = true;
+    },
+  },
 };
 </script>
 

geografia-vue/src/components/ChatPreview.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="chat-preview">
+  <button class="chat-preview">
     <div class="chat-picture">
-      <img src="" alt="chat-picture">
+      <figure>
+        <img src="chat-picture" alt="chat-picture">
+      </figure>
     </div>
     <div class="chat-text">
       <div class="chat-name">
@@ -27,14 +29,14 @@
         </div>
       </div>
     </div>
-  </div>
+  </button>
 </template>
 
 <script>
 export default {
   setup() {},
   props: {
-    picProfile: String,
+    ChatPicture: String,
     chatName: String,
     chatLastMessage: String,
     chatSeen: Boolean,

geografia-vue/src/components/ChatView.vue

@@ -6,13 +6,21 @@ import ChatHistory from "./ChatHistory.vue";
 <template>
   <div>
     <ChatHistory />
-    <v-if="writeMessage" Keyboard />
+    <button
+      alt="write-message"
+      name="write-message"
+      @click="write-message == true"
+    >
+      +
+    </button>
+    <Keyboard v-if="write-message" />
   </div>
 </template>
 
 <script>
 export default {
   setup() {},
+  props: { chat: Object },
 };
 </script>
 

geografia-vue/src/components/Header.vue

@@ -0,0 +1,30 @@
+<template>
+  <header>
+    <div id="header">
+      <p>Geografia</p>
+    </div>
+    <div v-if="header-chat" id="header-chat">
+      <div class="chat-picture">
+        <figure>
+          <img src="chat-picture" alt="The chat picture" />
+        </figure>
+      </div>
+      <div class="chat-name">
+        <h3>{{ chatName }}</h3>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  setup() {},
+  props: {
+    ChatPicture: { type: String, default: "" },
+    chatName: { type: String, default: "" },
+    headerChat: { type: Boolean, default: true },
+  },
+};
+</script>
+
+<style scoped></style>

geografia-vue/src/components/Keyboard.vue

@@ -1,17 +1,5 @@
 <template>
-  <div class="msg-composition">
+  <div class="msg-composition"></div>
-   <KeyboardWord type="subject" />
-   <KeyboardWord type="object" />
-   <KeyboardWord type="verb" />
-  </div>
 </template>
 
-<script>
-import KeyboardWord from "./KeyboardWord.vue";
-export default {
-   components: { KeyboardWord },
-  setup() {},
-};
-</script>
-
 <style scoped></style>

geografia-vue/src/components/MessageComposition.vue

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

geografia-vue/src/main.js

@@ -1,8 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-
 import App from "./App.vue";
-
 import "./assets/main.css";
 
 const app = createApp(App);

geografia-vue/src/router.js.bck

@@ -0,0 +1,24 @@
+/* 
+  VueRouter inutile fino allo sviluppo dell'handler dei messaggi
+  e solo nel caso si voglia supportare l'uso di url nella versione web
+*/
+
+import { createRouter, createWebHashHistory } from "vue-router";
+
+2; // 1. Define route components.
+const ChatList = { template: "./components/ChatList.vue" };
+// const ChatView = { template: "./components/ChatView.vue" };
+// const MessageComposition = { template: "./components/MessageComposition.vue" };
+
+// 2. Define some routes
+const routes = [
+  { path: "/", component: ChatList },
+  //   { path: "/chat_view", component: ChatView },
+  //   { path: "/chat_view/write", component: MessageComposition },
+];
+
+// 3. Create the router instance and pass the `routes` option
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});