Rotonda set up

.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/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
+      v-for="chat in $options.demo_chats.history"
+      v-if="!selectedChat"
+      :key="chat.id"
+      :chat-picture="chat.picture"
       :chat-name="chat.name"
       :chat-last-message="chat.last_message"
       :chat-seen="chat.seen"
       :chat-date="chat.date"
       :chat-new-messages="chat.new_messages"
+      @click="showChat(chat)"
     />
-    </li>
+    <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">
     <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="selectWord">
+    <p>I'm writing hereee</p>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    selectedWord() {
+      this.$emit("selectedWord", "a");
+    },
+  },
+};
+</script>
+<style scoped></style>

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

@@ -1,13 +1,12 @@
 <template>
-  <div id="ChatHistory">
+  <div class="keyboard-word">
+    <p>placeholder word</p>
   </div>
 </template>
 
 <script>
-
 export default {
-  components: {},
+  props: {},
-  setup() {},
 };
 </script>
 

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

@@ -0,0 +1,31 @@
+<script setup>
+import Keyboard from "./Keyboard.vue";
+import KeyboardWord from "./KeyboardWord.vue";
+</script>
+
+<template>
+  <div>
+    <KeyboardWord :key="soggetto" @click="test" />
+    <KeyboardWord :key="oggetto" @click="test" />
+    <KeyboardWord :key="verbo" @click="test" />
+    <Keyboard @selectedWord="selectedWord" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { focus: "" };
+  },
+  methods: {
+    test(e) {
+      console.log(e);
+    },
+    selectedWord() {
+      console.log("selectedWord");
+    },
+  },
+};
+</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,12 +1,7 @@
 import { createApp } from "vue";
-import { createPinia } from "pinia";
-
 import App from "./App.vue";
-
 import "./assets/main.css";
 
 const app = createApp(App);
 
-app.use(createPinia());
-
 app.mount("#app");

geografia-vue/src/rotonda/app_exit.js

@@ -0,0 +1,3 @@
+function updateChats(){
+    //vue local msg store
+}

geografia-vue/src/rotonda/ccq_exit.js

@@ -0,0 +1,9 @@
+import './errors.json'
+
+function translateToText(chat_message){
+    console.log(chat_message)
+}
+
+function translateToDrawnings(chat_message){
+    console.log(chat_message)
+}

geografia-vue/src/rotonda/errors.json

@@ -0,0 +1,6 @@
+{
+    "errors": {
+        "ER01": {"messageConsole":"ER01 - Message destination unknown ","messageUser":"🚫 ER01! 📞👨‍💻🙏"}
+        "ER02": {"messageConsole":"ER02 - Message channel unknown ","messageUser":"🚫 ER02! 📞👨‍💻🙏"}
+    }
+}

geografia-vue/src/rotonda/internetto_exit/internetto_main.js

@@ -0,0 +1,8 @@
+import './telegram_exit'
+import './errors.json'
+
+function send(chat_message) {
+    if (chat_message == 'tg') {
+        telegram_exit.send(chat_message)
+    } //error ER02
+}

geografia-vue/src/rotonda/internetto_exit/telegram_exit.js

@@ -0,0 +1,38 @@
+import { Airgram, Auth, prompt, toObject } from 'airgram'
+
+const airgram = new Airgram({
+    apiId: process.env.APP_ID | undefined,
+    apiHash: process.env.APP_HASH,
+    command: process.env.TDLIB_COMMAND,
+    logVerbosityLevel: 2
+})
+
+airgram.use(new Auth({
+    code: () => prompt(`Please enter the secret code:\n`),
+    phoneNumber: () => prompt(`Please enter your phone number:\n`)
+}))
+
+void (async () => {
+    const me = toObject(await airgram.api.getMe())
+    console.log(`[Me] `, me)
+})
+
+// Getting all updates
+airgram.use((ctx, next) => {
+    if ('update' in ctx) {
+        console.log(`[all updates][${ctx._}]`, JSON.stringify(ctx.update))
+    }
+    return next()
+})
+
+// Getting new messages
+airgram.on('updateNewMessage', async ({ update }) => {
+    const { message } = update
+    console.log('[new message]', message)
+})
+
+// Getting new messages
+airgram.on('sendNewMessage', async ({ update }) => {
+    const { message } = update
+    console.log('[new message]', message)
+})

geografia-vue/src/rotonda/main_rotonda.js

@@ -0,0 +1,23 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import './internetto_exit/internetto_main'
+import './ccq_exit'
+import './errors.json'
+/*
+ER01 = Errore Rotodona 01 - Message destination unknown
+*/
+
+// Internal function - here messages are translated
+function message_delivery(chat_message) {
+    try {
+        if (chat_message.destination == 'external') {
+            return internetto_exit.send(ccq_exit.translateToText(chat_message))
+        } else if (chat_message.destination == 'internal') {
+            return app.receive(ccq_exit.translateToDrawnings(chat_message))
+        } else {
+            throw errors.E01.messageConsole + chat_message
+        }
+    } catch (e) {
+        console.error(e)
+        return e.messageUser
+    }
+}

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,
+});