Compare commits

...

8 Commits

1
.gitignore vendored

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

@ -1,11 +1,39 @@
# geografia-fe
Il frontend di Geografia
Il frontend di Geografia - Check branch development
https://www.figma.com/file/Q5zVqd0YQNPZ8qWW4CjPDR/Geografia?node-id=0%3A1
TODO:
- Completare view su tutti i componenti
- Sezione Write messages
- Stilizzare app
- Strutturare Handler
- Implementare libreria telegram
Ci sono 3 componenti principali dell'app:
- Backend a.k.a interprete (?) - https://git.tropici.net/ifdo/geografia
- Handler
Si occupa di ricevere, mandare i messaggi dei vari servizi a cui si e' iscritti.
E' possibile rendere l'app agnostica verso il mezzo di trasporto dei messaggi.
Detta come magno, si possono costruire funzioni ad hoc per ogni servizio di messaggistica, basta convertire i messaggi in un oggetto json compreso dall'app.
Per ora sara' incentrata su telegram.
- Chat
La visualizzazione dell'app
L'app è costruita da due framework:
1. Vue - Visualizzazione e logica del UI attraverso combo js+nodejs
2. Cordova - Permette di trasformare quanto sopra in app mobile, sia iOS che android
L'app puo' funzionare su mobile e teoricamente come web app visto che e' costruita con Vue.
Sono gia' impostati dei pezzi di url (anche se primitivi) attraverso vue-route.
## Vue
Composto da quattro componenti principali
1. Lista delle chat attive
@ -32,3 +60,14 @@ Composto da quattro componenti principali
4a. Blocco per disegno/emoji
4b. Tastiera con disegni/emoji
La struttura completa dell'app e' su Figma
## Testare il progetto
Entrare nella cartella geografia-vue
Eseguire `npm i`
Eseguire `npx run dev`
Prendere nota dell'url stampato su console e andarci/cliccarci/blablabla

File diff suppressed because it is too large Load Diff

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

@ -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,

@ -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"
}
]
}

@ -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>

Before

Width:  |  Height:  |  Size: 308 B

@ -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">
<li :key="chat.id" v-for="chat in $options.demo_chats.history">
<ChatPreview
:chat-name="chat.name"
:chat-last-message="chat.last_message"
:chat-seen="chat.seen"
:chat-date="chat.date"
:chat-new-messages="chat.new_messages"
/>
</li>
<!-- Fix nested conditions in ChatPreview -->
<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)"
/>
<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>

@ -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,

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

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

@ -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>

@ -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>

@ -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>

@ -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>

@ -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");

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

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

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

@ -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
}

@ -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)
})

@ -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
}
}

@ -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,
});
Loading…
Cancel
Save