mirror of
https://github.com/Cronocide/WebMessage.git
synced 2025-01-22 11:18:25 +00:00
Fix occurences where duplicate chats will exist
Scaffolding for reactions 👀
This commit is contained in:
Aziz Hasanain
parent
72bf0cd246
commit
3e11254592
@ -39,6 +39,7 @@
|
||||
"vue-feather": "^1.1.1",
|
||||
"vue-js-popover": "^1.2.1",
|
||||
"vue-linkify": "^1.0.1",
|
||||
"vue-long-click": "^0.0.4",
|
||||
"vue-native-websocket": "^2.0.14",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuex": "^3.4.0"
|
||||
@ -58,4 +59,4 @@
|
||||
"vue-devtools": "^5.1.4",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
30
src/App.vue
30
src/App.vue
@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<simplebar class="chats" ref="chats" data-simplebar-auto-hide="false">
|
||||
<chat v-for="chat in filteredChats" :key="chat.id"
|
||||
:chatid="chat.address"
|
||||
:chatid="chat.personId"
|
||||
:author="chat.author"
|
||||
:text="chat.text"
|
||||
:date="chat.date"
|
||||
@ -110,10 +110,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
markAsRead (val) {
|
||||
let chatIndex = this.chats.findIndex(obj => obj.address == val)
|
||||
|
||||
let chatIndex = this.chats.findIndex(obj => obj.personId == val)
|
||||
if (chatIndex > -1) {
|
||||
let chat = this.chats[chatIndex]
|
||||
|
||||
if (!chat.read) {
|
||||
if (document.hasFocus()) {
|
||||
chat.read = true
|
||||
@ -181,25 +181,25 @@ export default {
|
||||
this.status = 0
|
||||
this.chats = []
|
||||
this.$store.commit('resetMessages')
|
||||
this.$router.push('/').catch(()=>{})
|
||||
|
||||
const baseURI = this.$store.getters.baseURI
|
||||
this.$connect(baseURI, {
|
||||
format: 'json',
|
||||
reconnection: true,
|
||||
})
|
||||
this.$router.push('/').catch(()=>{})
|
||||
},
|
||||
deleteChat (chat) {
|
||||
var chatIndex = this.chats.findIndex(obj => obj.id == chat.id)
|
||||
var chatIndex = this.chats.findIndex(obj => obj.personId == chat.personId)
|
||||
if (chatIndex > -1) {
|
||||
this.chats.splice(chatIndex, 1)
|
||||
}
|
||||
|
||||
if (this.$route.path == '/message/'+chat.address) {
|
||||
if (this.$route.path == '/message/'+chat.personId) {
|
||||
this.$router.push('/')
|
||||
}
|
||||
|
||||
this.$store.state.messagesCache[chat.address] = null
|
||||
this.$store.state.messagesCache[chat.personId] = null
|
||||
},
|
||||
composeMessage () {
|
||||
if (this.status == 2) this.$router.push('/message/new')
|
||||
@ -220,7 +220,7 @@ export default {
|
||||
for (let i = 0; i < this.chats.length; i++) {
|
||||
let chat = this.chats[i]
|
||||
this.sendSocket({ action: 'fetchMessages', data: {
|
||||
id: chat.address,
|
||||
id: chat.personId,
|
||||
offset: `0`,
|
||||
limit: `25`
|
||||
}
|
||||
@ -263,7 +263,7 @@ export default {
|
||||
} else {
|
||||
let arrayId = parseInt(id) - 1
|
||||
if (this.chats[arrayId]) {
|
||||
this.$router.push('/message/'+this.chats[arrayId].address).catch(()=>{})
|
||||
this.$router.push('/message/'+this.chats[arrayId].personId).catch(()=>{})
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -310,9 +310,10 @@ export default {
|
||||
},
|
||||
newMessage (data) {
|
||||
var chatData = data.chat[0]
|
||||
console.log(data)
|
||||
|
||||
if (chatData && chatData.id) {
|
||||
var chatIndex = this.chats.findIndex(obj => obj.id == chatData.id)
|
||||
if (chatData && chatData.personId) {
|
||||
var chatIndex = this.chats.findIndex(obj => obj.personId == chatData.personId)
|
||||
|
||||
if (chatIndex > -1) {
|
||||
this.chats.splice(chatIndex, 1)
|
||||
@ -370,15 +371,20 @@ export default {
|
||||
},
|
||||
onerror () {
|
||||
this.loading = false
|
||||
if (this.$socket && this.$socket.readyState == 1) return
|
||||
this.status = 1
|
||||
this.$store.commit('resetMessages')
|
||||
this.$router.push('/').catch(()=>{})
|
||||
this.chats = []
|
||||
},
|
||||
onclose () {
|
||||
onclose (e) {
|
||||
console.log(e)
|
||||
this.loading = false
|
||||
if (this.$socket && this.$socket.readyState == 1) return
|
||||
this.status = 0
|
||||
this.$store.commit('resetMessages')
|
||||
this.$router.push('/').catch(()=>{})
|
||||
this.chats = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,29 +19,30 @@
|
||||
</div>
|
||||
<template v-else-if="$route.params.id != 'new' || this.receiver != ''">
|
||||
<simplebar class="messages" ref="messages" data-simplebar-auto-hide="false">
|
||||
<div v-for="(msg, i) in sortedMessages" :id="msg.id" :key="msg.id">
|
||||
<div v-for="(msg, i) in sortedMessages" :key="msg.id">
|
||||
<div class="timegroup" v-html="dateGroup(i-1, i)" v-if="dateGroup(i-1, i) != ''"></div>
|
||||
|
||||
<div :ref="'msg'+msg.id" :class="(msg.sender == 1 ? 'send ' : 'receive ') + msg.type" class="messageGroup">
|
||||
<div v-if="msg.group && msg.sender != 1" class="senderName" v-html="$options.filters.twemoji(msg.author)"></div>
|
||||
|
||||
<template v-for="(text, i) in msg.texts">
|
||||
|
||||
<div v-for="(attachment, index) in text.attachments" :key="`${i}-${index}`" class="attachment">
|
||||
<template v-if="attachment[0] != '' && !attachment[0].includes('.pluginPayloadAttachment')">
|
||||
<expandable-image v-if="isImage(attachment[1])" :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
|
||||
<video-player v-else-if="isVideo(attachment[1])" :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
|
||||
<download-attachment v-else :path="attachment[0]" :type="attachment[1]" />
|
||||
</template>
|
||||
</div>
|
||||
<div :key="'wrapper'+i" v-longclick="openReactionMenu" style="display: contents;">
|
||||
<div v-for="(attachment, index) in text.attachments" :key="`${i}-${index}`" class="attachment">
|
||||
<template v-if="attachment[0] != '' && !attachment[0].includes('.pluginPayloadAttachment')">
|
||||
<expandable-image v-if="isImage(attachment[1])" :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
|
||||
<video-player v-else-if="isVideo(attachment[1])" :loadedData="scrollToBottom" :path="attachment[0]" :type="attachment[1]" />
|
||||
<download-attachment v-else :path="attachment[0]" :type="attachment[1]" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="message"
|
||||
:key="i"
|
||||
:class="(msg.texts.length-1 == i ? 'last ' : '') + (isEmojis(text.text) ? 'jumbo' : '')"
|
||||
:style="msg.sender == 1 && text.showStamp && (text.read > 0 || text.delivered > 0) ? 'margin-bottom: 0px;' : ''"
|
||||
v-if="$options.filters.twemoji(text.text) != ''">
|
||||
<span style="white-space: pre-wrap;" v-html="$options.filters.twemoji(text.text)" v-linkified></span>
|
||||
<div
|
||||
class="message"
|
||||
:key="i"
|
||||
:class="(msg.texts.length-1 == i ? 'last ' : '') + (isEmojis(text.text) ? 'jumbo' : '')"
|
||||
:style="msg.sender == 1 && text.showStamp && (text.read > 0 || text.delivered > 0) ? 'margin-bottom: 0px;' : ''"
|
||||
v-if="$options.filters.twemoji(text.text) != ''">
|
||||
<span style="white-space: pre-wrap;" v-html="$options.filters.twemoji(text.text)" v-linkified></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="receipt" :key="i+'receipt'" v-if="msg.sender == 1 && text.showStamp && (text.read > 0 || text.delivered > 0)">
|
||||
<span class="type">{{ text.read > 0 ? "Read" : "Delivered" }}</span> {{ humanReadableTimestamp(text.read > 0 ? text.read : text.delivered) }}
|
||||
@ -213,8 +214,8 @@ export default {
|
||||
return result.name + ` (${result.phone})`
|
||||
},
|
||||
onSubmit (result) {
|
||||
if (result && result.chatId) {
|
||||
this.$router.push('/message/'+result.chatId)
|
||||
if (result && result.personId) {
|
||||
this.$router.push('/message/'+result.personId)
|
||||
} else if (result) {
|
||||
this.autoCompleteInput(result)
|
||||
} else {
|
||||
@ -315,6 +316,16 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
openReactionMenu (e) {
|
||||
console.log(e)
|
||||
},
|
||||
sendReaction (text) {
|
||||
if (!this.messages[0]) return
|
||||
this.sendSocket({ action: 'sendReaction', data: {
|
||||
chatId: this.messages[0].chatId,
|
||||
guid: text.guid
|
||||
}})
|
||||
},
|
||||
sendText () {
|
||||
let messageText = this.messageText[this.$route.params.id]
|
||||
if (!messageText) messageText = ''
|
||||
@ -326,7 +337,7 @@ export default {
|
||||
let textObj = {
|
||||
text: messageText,
|
||||
attachments: this.$refs.uploadButton.attachments,
|
||||
address: this.messages[0] ? this.messages[0].address : this.receiver
|
||||
address: this.messages[0] ? this.messages[0].chatId : this.receiver
|
||||
}
|
||||
|
||||
document.getElementById("twemoji-textarea").innerHTML = ""
|
||||
@ -466,7 +477,7 @@ export default {
|
||||
socket: {
|
||||
fetchMessages (data) {
|
||||
if (this.$route.params.id == 'new') return
|
||||
if (data && data[0] && data[0].chatId != this.$route.params.id) return
|
||||
if (data && data[0] && (data[0].personId != this.$route.params.id)) return
|
||||
|
||||
if (this.offset == 0 && !this.$store.state.messagesCache[this.$route.params.id]) {
|
||||
this.messages = data
|
||||
@ -477,7 +488,8 @@ export default {
|
||||
this.postLoad()
|
||||
},
|
||||
setAsRead (data) {
|
||||
if (this.messages[0]['chatId'] == data.chatId) {
|
||||
if (this.$route.params.id == 'new') return
|
||||
if (this.messages[0]['chatId'] == data.chatId || this.$route.params.id == data.chatId) {
|
||||
let messageIndex = this.messages.findIndex(obj => obj.guid == data.guid)
|
||||
if (messageIndex > -1) {
|
||||
this.messages[messageIndex]['dateRead'] = data.read
|
||||
@ -493,8 +505,8 @@ export default {
|
||||
|
||||
if (this.$route.params.id == 'new') {
|
||||
if (Object.keys(message).length > 0) {
|
||||
if (message[0].address == this.receiver) {
|
||||
this.$router.push('/message/'+message[0].chatId)
|
||||
if (message[0].chatId == this.receiver) {
|
||||
this.$router.push('/message/'+message[0].personId)
|
||||
}
|
||||
}
|
||||
return
|
||||
@ -503,7 +515,7 @@ export default {
|
||||
if (Object.keys(message).length == 0) {
|
||||
console.log("Received a message, but content was empty.")
|
||||
} else {
|
||||
if (this.messages && this.messages.length > 0 && message[0]['chatId'] == this.messages[0]['chatId']) {
|
||||
if (this.messages && this.messages.length > 0 && message[0]['personId'] == this.$route.params.id) {
|
||||
if (this.messages.findIndex(obj => obj.id == message[0].id) != -1) return
|
||||
|
||||
this.messages.unshift(message[0])
|
||||
@ -862,7 +874,7 @@ export default {
|
||||
|
||||
.timegroup {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
// padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #999999;
|
||||
font-size: 11px;
|
||||
@ -949,7 +961,7 @@ export default {
|
||||
}
|
||||
|
||||
&.last {
|
||||
// margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
|
||||
@ -12,6 +12,7 @@ import linkify from 'vue-linkify'
|
||||
import $ from 'jquery'
|
||||
import Popover from 'vue-js-popover'
|
||||
import VueConfirmDialog from 'vue-confirm-dialog'
|
||||
import { longClickDirective } from 'vue-long-click'
|
||||
window.$ = $
|
||||
|
||||
const https = require('https')
|
||||
@ -40,6 +41,8 @@ Vue.prototype.$http = axios.create({
|
||||
Vue.mixin(mixins)
|
||||
|
||||
Vue.directive('linkified', linkify)
|
||||
Vue.directive('longclick', longClickDirective({ delay: 800, interval: 0 }))
|
||||
|
||||
|
||||
axios.defaults.headers.common['Authorization'] = store.state.password
|
||||
|
||||
|
||||
@ -10552,6 +10552,13 @@ vue-loader@^15.9.2:
|
||||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-long-click@^0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-long-click/-/vue-long-click-0.0.4.tgz#8679652a3c7183258a9558c1394e7d35ad4be63d"
|
||||
integrity sha512-1/8KMsON6k8ebGqOhBZKU69EWlTLv4+LUluwUxTMNYno9t7ztk8j6rNVwewbp9hULktEoe+jBnxMFBngsPQCaQ==
|
||||
dependencies:
|
||||
vue "^2.5.22"
|
||||
|
||||
vue-native-websocket@^2.0.14:
|
||||
version "2.0.14"
|
||||
resolved "https://registry.yarnpkg.com/vue-native-websocket/-/vue-native-websocket-2.0.14.tgz#fddb56f9f93d2ecc861486ee3c8f29506ea2a168"
|
||||
@ -10583,7 +10590,7 @@ vue-template-es2015-compiler@^1.9.0:
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
|
||||
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
|
||||
|
||||
vue@^2.1.6, vue@^2.6.11:
|
||||
vue@^2.1.6, vue@^2.5.22, vue@^2.6.11:
|
||||
version "2.6.12"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
|
||||
integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user