diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue index a5e36d1261e04def67965731d519adc01b2eaabb..56aa69895176e1f41d4543b10ad59e90e801bce3 100644 --- a/src/components/ChatComponents/ChatComponent.vue +++ b/src/components/ChatComponents/ChatComponent.vue @@ -20,7 +20,7 @@ v-for="(message, i) in messages" v-bind:key="i" > - <rental-message v-if="message?.createdAt"></rental-message> + <rental-message v-if="message?.createdAt" :rent="message"></rental-message> <ChatMessage v-else :message="message" @@ -176,7 +176,6 @@ export default { } ); this.rents = await response.json(); - console.log("rents", this.rents); }, async getRecipient() { const token = this.$store.state.user.token; @@ -196,6 +195,8 @@ export default { }, watch: { async 'recipientID'() { + this.rents = []; + this.msgs = []; await this.reloadMessages(); await this.getRecipient(); await this.reloadRents(); diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue index 1e98dd15316f8891484adabf095fce86592a5159..9e1caa0a2d87881bf1035af9c7bb05bf49ccdece 100644 --- a/src/components/ChatComponents/ChatProfile.vue +++ b/src/components/ChatComponents/ChatProfile.vue @@ -47,7 +47,30 @@ export default { ); }, lastMessageTime() { - return "5 min"; + // Calculate time since last message + const time = this.conversation.lastMessage.timestamp; + const now = new Date(); + const diff = now - time; + const seconds = Math.floor(diff / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + const months = Math.floor(days / 30); + const years = Math.floor(months / 12); + + if (seconds < 60) { + return "Just now"; + } else if (minutes < 60) { + return minutes + " minutes ago"; + } else if (hours < 24) { + return hours + " hours ago"; + } else if (days < 30) { + return days + " days ago"; + } else if (months < 12) { + return months + " months ago"; + } else { + return years + " years ago"; + } }, src() { return this.conversation.recipient.picture ? this.conversation.recipient.picture : require("@/assets/defaultUserProfileImage.jpg"); diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue index cc979e963f2f07ab27f286c06878b9e66098e21a..a297175de8644d7537c033c46a587b6a19d0bc94 100644 --- a/src/components/ChatComponents/ChatsComponent.vue +++ b/src/components/ChatComponents/ChatsComponent.vue @@ -9,8 +9,9 @@ :key="i" @recipient="selectUser" ></ChatProfile> - <div class="button"> - <colored-button text="Ny Samtale"></colored-button> + <!-- If no conversatiosn show no conversations found --> + <div v-if="conversations.length === 0" class="no-conversations"> + <p>Ingen samtaler</p> </div> </div> <div class="current-chat"> @@ -25,7 +26,6 @@ import ChatProfile from './ChatProfile.vue'; import ChatComponent from './ChatComponent.vue'; import { parseCurrentUser } from "@/utils/token-utils"; import ws from "@/services/ws"; -import ColoredButton from '../BaseComponents/ColoredButton.vue'; export default { props: { @@ -49,7 +49,7 @@ export default { recipientID: null }; }, - components: { ChatProfile, ChatComponent, ColoredButton}, + components: { ChatProfile, ChatComponent}, computed: { userid() { return parseCurrentUser().accountId; @@ -107,6 +107,15 @@ export default { width: 100%; } + .no-conversations { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + } + .nothing-selected p { font-size: 2rem; font-weight: bold; diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue index 6fc53f85494dbd873a4507422e84d18fd2380ae3..23b3a73eb1d04fc9bc401340b9859debc27643bc 100644 --- a/src/components/ChatComponents/RentalMessage.vue +++ b/src/components/ChatComponents/RentalMessage.vue @@ -27,15 +27,48 @@ <script> export default { + props: { + rent: { + type: Object, + default () { + return { + createdAd: 0, + fromTime: 0, + isAccepted: false, + listingId: 0, + message: "", + rentId: 0, + renterId: 0, + toTime: 0 + } + } + }, + }, data() { return { - img: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80', - extra: 'hello', - to: '', - from: '', - price: '200' + } - } + }, + computed: { + img() { + return 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80'//this.rent.listing.imageUrl; + }, + from() { + // take ms and turn into date and return date + return new Date(this.rent.fromTime).toLocaleDateString(); + }, + to() { + return new Date(this.rent.toTime).toLocaleDateString(); + }, + price() { + // Calculate price from price * days + return this.rent.listing.pricePerDay * Math.ceil((this.rent.toTime - this.rent.fromTime) / (1000 * 60 * 60 * 24)); + }, + extra() { + return this.rent.message || "Ingen Melding"; + } + }, + } </script>