Compare commits

..

1 Commits

Author SHA1 Message Date
reddigriz 3c26215da3 Aggiornato README 2 years ago

1
.gitignore vendored

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

@ -1,36 +1,9 @@
<script setup>
//TODO: Fixare passaggio promps a header
import ChatList from "@/components/ChatList.vue";
import Header from "@/components/Header.vue";
</script>
<template>
<main>
<Header
:chat-picture="chatPicture"
:chat-name="chatName"
:header-chat="headerChat"
/>
<ChatList @change-header="changeHeader" />
<ChatList />
</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.

Before

Width:  |  Height:  |  Size: 2.5 MiB

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

@ -1,46 +0,0 @@
{
"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"
}
]
}

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

After

Width:  |  Height:  |  Size: 308 B

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

@ -1,26 +1,19 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<script setup>
//Fix v-if riga 20
import ChatPreview from "@/components/ChatPreview.vue";
import ChatView from "./single_chat/ChatView.vue";
import ChatMsg from "@/components/ChatMsg.vue";
</script>
<template>
<!-- Fix nested conditions in ChatPreview -->
<div id="background chat-list">
<div id="background">
<li :key="chat.id" v-for="chat in $options.demo_chats.history">
<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" />
</li>
</div>
</template>
@ -28,19 +21,6 @@ import ChatView from "./single_chat/ChatView.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>

@ -4,23 +4,15 @@
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>

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

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

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

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

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

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

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

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

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

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

@ -1,37 +0,0 @@
<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,6 +1,8 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import "./assets/main.css";
const app = createApp(App);

@ -1,24 +0,0 @@
/*
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