Compare commits
8 Commits
master
...
feature_ke
| Author | SHA1 | Date |
|---|---|---|
reddigriz
|
f760f81c38 | 2 years ago |
|
reddigriz
|
3e4630fe36 | 2 years ago |
|
reddigriz
|
ed4ea2df0f | 2 years ago |
|
reddigriz
|
480796efa4 | 2 years ago |
|
reddigriz
|
ce0b73fdf9 | 2 years ago |
|
reddigriz
|
f48095e150 | 2 years ago |
|
reddigriz
|
4985c9151e | 2 years ago |
|
reddigriz
|
db59f38f9d | 2 years ago |
@ -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 |
@ -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,14 +0,0 @@
|
||||
<template>
|
||||
<div id="ChatHistory">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
setup() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -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="selectedWord('⛸️')">
|
||||
<p>I'm writing hereee</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectedWord(word) {
|
||||
this.$emit("selectedWord", word);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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…
Reference in New Issue