diff --git a/src/components/chat/ChatComponent.vue b/src/components/chat/ChatComponent.vue
deleted file mode 100644
index 00b31ffff2e9367463ff1fb703437cc22d10349a..0000000000000000000000000000000000000000
--- a/src/components/chat/ChatComponent.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
- <div class="w-full h-full bg-teal-200">
- <div class="grid grid-cols-4 min-w-full border rounded">
- <div class="hidden sm:grid relative focus focus-within:text-gray-600">
- <ul class="overflow-auto">
- <h2 class="ml-2 mb-2 text-gray-600 text-lg mx">Samtaler:</h2>
- <ChatProfile profile="{{}}" lastMessage="{{}}"></ChatProfile>
- </ul>
- </div>
- <!-- Current Chat User-->
- <div class="col-span-4 sm:col-span-3 bg-white">
- <div class="flex border-gray-300 justify-between border-b">
- <div class="grid sm:hidden space-y-2">
- <div class="w-8 h-0.5 bg-gray-600"></div>
- <div class="w-8 h-0.5 bg-gray-600"></div>
- <div class="w-8 h-0.5 bg-gray-600"></div>
- </div>
- <div class="flex items-center self-center">
- <img class="h-10 w-10 m-2 rounded-full object-cover"
- src="https://images.pexels.com/photos/837358/pexels-photo-837358.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" />
- <span class="block font-bold text-base ml-2 text-gray-600">
- Sander Schrader
- </span>
- <span class="connected text-red-500 ml-2">
- <svg class="place-content-center" width="6" height="6">
- <circle cx="3" cy="3" r="3" fill="currentColor"></circle>
- </svg>
- </span>
- </div>
- <div></div>
- </div>
- <div class="w-full overflow-y-auto height">
- <ul>
- <div class="w-full break-words flex justify-start">
- <div style="max-width: 70%"
- class="bg-gray-100 rounded px-5 py-2 my-2 text-gray-700 relative">
- <span class="block">Hello bro htis is a test dajsalkdjø osajdkladkl sajldksjaklsj
- dksjdkas djklasklj adsjasdljaskdljkas dkløsdjlasdasdklnasa sdløkasdlk asdkasd ølasd
- kas øækasd kas als ddkaslødasøækdasklø løsakadskjløadlsks jadkj </span>
- <span class="block text-xs text-right">10:30pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-end">
- <div style="max-width: 70%" class="bg-blue-500 rounded px-5 py-2 my-2 text-white relative">
- <span class="block">Hello d sjka dj skajdlksjad klajlkd jslkajd lskajdlk ajk lsdjl
- kajsdklj akljdklaj kldja ølkdjlaksjdlø k asjdiadajsiodjasijd land laskdj
- kalsjdkasljdksaj døklasmkl daskldnakl jdklsadnklsad lknsjldn</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- <div class="w-full break-words flex justify-start">
- <div class="bg-gray-100 rounded px-5 py-2 my-2 text-gray-700 relative"
- style="max-width: 70%">
- <span class="block">Hello :)</span>
- <span class="block text-xs text-left">10:32pm</span>
- </div>
- </div>
- </ul>
- </div>
- <div class="align-bottom w-full py-3 px-3 flex items-center justify-between border-t border-gray-300">
- <input aria-placeholder="Escribe un mensaje aquÃ" placeholder="Escribe un mensaje aquÃ"
- class="py-2 mx-3 pl-5 block w-full rounded-full bg-gray-100 outline-none focus:text-gray-700"
- type="text" name="message" required />
-
- <button class="outline-none focus:outline-none" type="submit">
- <svg class="text-gray-400 h-7 w-7 origin-center transform rotate-90"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
- <path
- d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
- </svg>
- </button>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import ChatProfile from "@/components/ChatProfile.vue";
-
-export default {
- components: {
- ChatProfile,
- },
- data() {
- return {};
- },
-};
-</script>
diff --git a/src/components/chat/ChatComponentNew.vue b/src/components/chat/ChatComponentNew.vue
deleted file mode 100644
index 8a3d132d98c9ba9ada9af2cbfafb9dc1ae22595e..0000000000000000000000000000000000000000
--- a/src/components/chat/ChatComponentNew.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-
- <div id="wrapper">
- <div id="grid">
- <div class="menu">
- <h1>Hello</h1>
- <ChatProfile profile="{{}}" lastMessage="{{}}"></ChatProfile>
- </div>
- </div>
- </div>
-</template>
-
-<style>
- .wrapper {
- height: 100%;
- width: 100%;
- background-color: #696969;
- }
-
- .grid {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-template-rows: repeat(4, 1fr);
- grid-column-gap: 0px;
- grid-row-gap: 0px;
- }
-
- .menu {
- grid-area: 1 / 1 / 6 / 2;
- width: 100%;
- display: block;
- overflow: auto;
- }
- .div3 { grid-area: 1 / 2 / 6 / 6; }
-
-</style>
\ No newline at end of file
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 5155119d765207d17f0874fa9046103e3819c5a8..014e663004c9002a648a72ee77e5f1260ad6bbf4 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -8,6 +8,8 @@
</template>
<script>
+import {parseCurrentUser} from "@/utils/token-utils";
+
export default {
props: {
message: Object
@@ -17,16 +19,21 @@ export default {
abc: "abcde"
}
},
+ computed: {
+ userID() {
+ return parseCurrentUser().account_id;
+ }
+ },
methods: {
color() {
- return this?.message.from == 1 ? "bg-gray-300" : "bg-blue-600";
+ console.log(this.userID);
+ return this?.message.from == this.userID ? "bg-gray-300" : "bg-blue-600";
},
textColor() {
- return this?.message.from == 1 ? "text-gray-900" : "text-white";
+ return this?.message.from == this.userID ? "text-gray-900" : "text-white";
},
side () {
- console.log(this.message.from)
- return this?.message.from == 1 ? "justify-start" : "justify-end"
+ return this?.message.from == this.userID ? "justify-start" : "justify-end"
},
calculateTime() {
//let time = this.message.from;
diff --git a/src/components/chat/CurrentChat.vue b/src/components/chat/CurrentChat.vue
index f1d43f2720e20be9d002171d836739db2eb555c5..744c38a60f0ebdbcdd6286e3aa04a8c1977fd95a 100644
--- a/src/components/chat/CurrentChat.vue
+++ b/src/components/chat/CurrentChat.vue
@@ -27,7 +27,7 @@
<div class="flex items-center justify-between w-full p-3 border-t border-gray-300">
<input type="text" placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
- name="message" v-model="message"/>
+ name="message" v-model="message" />
<button v-on:click="sendMessage" style="padding: 10px; color: red;">
<svg class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -43,48 +43,75 @@
<script>
import ChatMessage from "./ChatMessage.vue"
import axios from 'axios';
+import { parseCurrentUser } from "@/utils/token-utils";
+import ws from '@/services/ws';
export default {
data: () => {
return {
- userid: 1,
messages: [],
- message: "",
- recipientID: 2
+ message: ""
};
},
components: { ChatMessage },
+ computed: {
+ userid() {
+ console.log(parseCurrentUser());
+ return parseCurrentUser().account_id;
+ },
+ recipientID() {
+ return this.userid == 1 ? 2 : 1;
+ }
+ },
methods: {
calculateSide(from) {
- console.log(from == this.userid ? 'end' : 'start')
+ console.log("userid ", this.userid)
return from == this.userid ? 'end' : 'start'
},
async sendMessage() {
const token = this.$store.state.user.token;
// Post new message to server /chats/users/{userId}/messages
- await axios.post(process.env.VUE_APP_BASEURL + `/chats/users/${this.recipientID}/messages`, {
+ await axios.post(process.env.VUE_APP_BASEURL + `chats/users/${this.recipientID}/messages`, {
message: this.message
}, {
headers: {
Authorization: `Bearer ${token}`
}
})
+ ws.sendMessage({ sender: parseInt(this.userid), recipient: this.recipientID });
+ this.reloadMessages();
+ },
+ async reloadMessages() {
+ const token = this.$store.state.user.token;
+ const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`
+ }
+ })
+ this.messages = await response.json()
}
},
async created() {
+ console.log(this.$store.state.user, " hello")
const token = this.$store.state.user.token;
console.log(process.env.VUE_APP_BASEURL);
// Fetch /chats/users/{userId}/messages from api
- const response = await fetch(`${process.env.VUE_APP_BASEURL}/chats/users/${this.recipientID}/messages`, {
+ const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
}
});
-
+
+ ws.on("NEW_MESSAGE", () => {
+ this.reloadMessages();
+ })
+
this.messages = await response.json()
}
}
diff --git a/src/main.js b/src/main.js
index 32472cfc34b97f2df35e1d89704bc9d91e39c6d1..faa873e19d71b1ae27c031044705bcf27c5c08db 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,5 +3,7 @@ import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./index.css";
+import ws from './services/ws';
createApp(App).use(router).use(store).mount("#app");
+console.log("WS", ws.test);
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 12c20751618d88cb768b8c529592b38fd164738a..4c7ab2f8e919cf03089b93ee6da0618a4102676a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,7 +47,6 @@ const routes = [
import(/* webpackChunkName: "register" */ "../views/ChatView.vue"),
},
{
- path: "/",
path: "/login",
name: "login",
component: LoginView,
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
index e544e8d27acb91313ef85b8d807b5046132a8769..e2419600b8f0ea4f9ee7c326461845da00c34729 100644
--- a/src/views/ChatView.vue
+++ b/src/views/ChatView.vue
@@ -17,15 +17,24 @@
<script>
import ChatProfile from "@/components/chat/ChatProfile.vue";
import CurrentChat from "@/components/chat/CurrentChat.vue";
-//import ChatComponent from "../components/ChatComponent.vue";
+import {parseCurrentUser} from "@/utils/token-utils";
export default {
components: {
- ChatProfile,
- CurrentChat
-},
+ ChatProfile,
+ CurrentChat
+ },
data() {
- return {};
+ return {
+ ws: null
+ };
+ },
+ computed: {
+ userID() {
+ return parseCurrentUser().account_id;
+ }
},
-};
+ async created() {
+ }
+}
</script>