Impostata tastiera e visualizzazione, FIX mettere pulsante nell'header, ToDo Catturare valori dei componenti alla conferma del mess

.gitignore

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

geografia-vue/src/App.vue

@@ -1,9 +1,36 @@
 <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="chatPicture"
+      :chat-name="chatName"
+      :header-chat="headerChat"
+    />
+    <ChatList @change-header="changeHeader" />
   </main>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      chatPicture: "",
+      chatName: "",
+      headerChat: false,
+    };
+  },
+  methods: {
+    changeHeader(e) {
+      this.chatPicture = e[0];
+      this.chatName = e[1];
+      this.headerChat = true;
+      console.table("header", e);
+    },
+  },
+};
+</script>

geografia-vue/src/assets/demo_chats.json

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

geografia-vue/src/assets/demo_messages.json

@@ -0,0 +1,46 @@
+{
+  "history": [
+    {
+      "id": 1,
+      "text": "🐱⛸️➡️?",
+      "is_user": false,
+      "seen": false,
+      "date": "22/09 12:12"
+    },
+    {
+      "id": 2,
+      "text": "🐱⛸️➡️?",
+      "is_user": true,
+      "seen": true,
+      "date": "22/09 12:12"
+    },
+    {
+      "id": 3,
+      "text": "🐱⛸️➡️?",
+      "is_user": false,
+      "seen": true,
+      "date": "22/09 12:12"
+    },
+    {
+      "id": 4,
+      "text": "🐱⛸️➡️?",
+      "is_user": true,
+      "seen": true,
+      "date": "22/09 12:12"
+    },
+    {
+      "id": 5,
+      "text": "🐱⛸️➡️?",
+      "is_user": false,
+      "seen": false,
+      "date": "22/09 12:12"
+    },
+    {
+      "id": 6,
+      "text": "🐱⛸️➡️?",
+      "is_user": true,
+      "seen": true,
+      "date": "22/09 12:12"
+    }
+  ]
+}

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/ChatHistory.vue

@@ -1,14 +0,0 @@
-<template>
-  <div id="ChatHistory">
-  </div>
-</template>
-
-<script>
-
-export default {
-  components: {},
-  setup() {},
-};
-</script>
-
-<style scoped></style>

geografia-vue/src/components/ChatList.vue

@@ -1,19 +1,26 @@
+<!-- eslint-disable vue/no-use-v-if-with-v-for -->
 <script setup>
+//Fix v-if riga 20
 import ChatPreview from "@/components/ChatPreview.vue";
-import ChatMsg from "@/components/ChatMsg.vue";
+import ChatView from "./single_chat/ChatView.vue";
 </script>
 
 <template>
-  <div id="background">
+  <!-- Fix nested conditions in ChatPreview -->
-    <li :key="chat.id" v-for="chat in $options.demo_chats.history">
+  <div id="background chat-list">
-      <ChatPreview
+    <ChatPreview
-        :chat-name="chat.name"
+      v-for="chat in $options.demo_chats.history"
-        :chat-last-message="chat.last_message"
+      v-if="!selectedChat"
-        :chat-seen="chat.seen"
+      :key="chat.id"
-        :chat-date="chat.date"
+      :chat-picture="chat.picture"
-        :chat-new-messages="chat.new_messages"
+      :chat-name="chat.name"
-      />
+      :chat-last-message="chat.last_message"
-    </li>
+      :chat-seen="chat.seen"
+      :chat-date="chat.date"
+      :chat-new-messages="chat.new_messages"
+      @click="showChat(chat)"
+    />
+    <ChatView v-if="selectedChat" :chat-id="chatId" @hideChat="hideChat" />
   </div>
 </template>
 
@@ -21,6 +28,19 @@ import ChatMsg from "@/components/ChatMsg.vue";
 import demo_chats_json from "../assets/demo_chats.json";
 export default {
   demo_chats: demo_chats_json,
+  data() {
+    return { selectedChat: false, chatId: null };
+  },
+  methods: {
+    showChat(chat) {
+      this.$emit("change-header", [chat.picture, chat.name]);
+      this.selectedChat = !this.selectedChat;
+      this.chatId = chat.id;
+    },
+    hideChat() {
+      this.selectedChat = false;
+    },
+  },
 };
 </script>
 

geografia-vue/src/components/ChatPreview.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="chat-preview">
+  <button class="chat-preview" name="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

@@ -1,19 +0,0 @@
-<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>

geografia-vue/src/components/Header.vue

@@ -0,0 +1,32 @@
+<template>
+  <header>
+    <div v-if="headerChat" 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>
+    <div v-else>
+      <div id="header">
+        <p>Geografia</p>
+      </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 +0,0 @@
-<template>
-  <div class="msg-composition">
-   <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/KeyboardWord.vue

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

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="keyboard" @click="selectedWord('⛸️')">
+    <p>I'm writing hereee</p>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    selectedWord(word) {
+      this.$emit("selectedWord", word);
+    },
+  },
+};
+</script>
+<style scoped></style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="keyboard-word">
+    <label for="word">
+      <input type="text" />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,38 @@
+<script setup>
+import Keyboard from "./Keyboard.vue";
+import KeyboardWord from "./KeyboardWord.vue";
+import PhraseType from "./PhraseType.vue";
+</script>
+
+<template>
+  <div>
+    <button alt="Back" name="Back" @click="this.$emit('hideMessageHistory')">←</button>
+    <KeyboardWord ref="subject" />
+    <KeyboardWord ref="object" />
+    <KeyboardWord ref="verb" />
+    <PhraseType />
+    <button name="confirm" @click="confirm">OK?</button>
+    <Keyboard @selectedWord="selectedWord" />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    selectedWord(e) {
+      console.log("selectedWord", e);
+    },
+    confirm() {
+      var message = {
+        subject: this.$refs.subject.items,
+        object: this.$refs.object.items,
+        verb: this.$refs.verb.items,
+        tipo_frase: this.$refs.phraseType.items,
+      };
+      console.log(message);
+    },
+  },
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="phrase-type-selection" @click="popup = true">
+    <p>+|-|?-|?+</p>
+  </div>
+  <div class="popup" v-if="popup">
+    <button name="phrase-type" value="+" @click="selectedPhraseType('+')">
+      +
+    </button>
+    <button name="phrase-type" value="-" @click="selectedPhraseType('-')">
+      -
+    </button>
+    <button name="phrase-type" value="?-" @click="selectedPhraseType('?-')">
+      ?-
+    </button>
+    <button name="phrase-type" value="?+" @click="selectedPhraseType('?+')">
+      ?+
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { phraseType: null, popup: false };
+  },
+  methods: {
+    selectedPhraseType(phraseType) {
+      this.phraseType = phraseType;
+    },
+  },
+};
+</script>
+<style scoped></style>

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

@@ -0,0 +1,31 @@
+<script setup>
+import ChatMsg from "./ChatMsg.vue";
+</script>
+
+<template>
+  <!-- Modificare la proprieta' css z-index 
+per permettero lo scrolling e una dimensione fissa -->
+
+  <div id="ChatHistory">
+    <ChatMsg
+      v-for="message in $options.demo_messages.history"
+      :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 {
+  demo_messages: demo_messages_json,
+  props: {
+    chatId: Number,
+  },
+};
+</script>
+
+<style scoped></style>

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>

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

@@ -0,0 +1,37 @@
+<script setup>
+import MessageComposition from "../keyboard/MessageComposition.vue";
+import ChatHistory from "./ChatHistory.vue";
+</script>
+
+<template>
+  <div>
+    <!-- Move this button in the header -->
+    <div id="chat-view" v-show="!writeMessage">
+      <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
+      <ChatHistory :chat-id="chatId" />
+      <button
+        alt="write message"
+        name="write-message"
+        @click="this.writeMessage = true"
+      >
+        +
+      </button>
+    </div>
+    <MessageComposition
+      v-if="writeMessage"
+      :chat-id="chatId"
+      @hideMessageHistory="this.writeMessage = false"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { writeMessage: false };
+  },
+  props: { chatId: Number },
+};
+</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,
+});