Untitled
unknown
plain_text
4 years ago
12 kB
4
Indexable
<template>
<div style="background-color:white;">
<v-row no-gutters style="margin-bottom:10%; background-color:white;" class="">
<v-col cols="11">
<div style=" background-color:#686F84; border-radius:25px; margin-left:4%;" class="mt-5">
<div ref="messages" style="height:500px; overflow-y:scroll;" id="box">
<div v-show="id">
<div style="" v-for="x in data" :key="x.timestamp">
<div class="pl-8 pt-4" v-show="x.sender == 'client'">
<div class="float-left text-left" style="width:10%;" >
<v-avatar size="50">
<img
:src="x.pictureUrl"
alt=""
>
</v-avatar>
</div>
<div v-show="x.type == 'message'">
<p class="pa-4 text-left float-left card" style="font-size:0.8vw; background-color:white;">
{{x.msg}}
</p>
<p class=" ml-4 pt-5 text-left float-left" style="font-size:0.8vw; color:white;">
{{x.thaiTime}}
</p>
</div>
<div v-show="x.type == 'image'">
<div class="pa-4 text-left float-left card" style="background-color:white;">
<a :href="x.url" target="_blank">
<img width="100px" :src="x.url" alt="">
</a>
</div>
<p class=" mr-4 pl-1 pt-5 text-left float-left" style="font-size:0.8vw; color:white;">
{{x.thaiTime}}
</p>
</div>
<div style="clear:both;"></div>
</div>
<div class="pr-8 pt-4" v-show="x.sender == 'admin'">
<div class="float-right text-right" style="width:10%;" >
<v-avatar size="50">
<img
src="https://sprofile.line-scdn.net/0hD-l2aK_7GwJBSwwkocJlfTEbGGhiOkIQZHoEYnJCQWF4fghQa3hUYCdOFmd9LFgAaHhTZn1LRGVNWGxkXx3nNkZ7RTV4fFlUaCpQ4w"
alt=""
>
</v-avatar>
</div>
<div v-show="x.type == 'message'">
<p class="pa-4 text-right float-right card" style="font-size:0.8vw; color:white; background-color:black;">
{{x.msg}}
</p>
<p class=" mr-4 pt-5 text-right float-right" style="font-size:0.8vw; color:white;">
{{x.thaiTime}}
</p>
</div>
<div v-show="x.type == 'image'">
<div class="pa-4 text-right float-right card" style="background-color:white;">
<a :href="x.url" target="_blank">
<img width="100px" :src="x.url" alt="">
</a>
</div>
<p class=" mr-4 pt-5 text-right float-right" style="font-size:0.8vw; color:white;">
{{x.thaiTime}}
</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div v-for="x in temp" :key="x.msg">
<div class="pr-8 pt-4" v-show="x.msg">
<div class="float-right text-right" style="width:10%;" >
<v-avatar size="50">
<img
src="https://sprofile.line-scdn.net/0hD-l2aK_7GwJBSwwkocJlfTEbGGhiOkIQZHoEYnJCQWF4fghQa3hUYCdOFmd9LFgAaHhTZn1LRGVNWGxkXx3nNkZ7RTV4fFlUaCpQ4w"
alt=""
>
</v-avatar>
</div>
<div v-show="x.type == 'message'">
<p class="pa-4 text-right float-right card" style="font-size:0.8vw; color:white; background-color:black;">
{{x.msg}}
</p>
</div>
<div v-show="x.type == 'image'">
<div class="pa-4 text-right float-right card" style="background-color:white;">
<a :href="x.url" target="_blank">
<img width="100px" :src="x.url" alt="">
</a>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div v-show="!id" style="margin-top:30%;">
<v-card dark color="info" elevation="10" class="ma-2">
<p class="pa-10" style="font-size:1.4vw;">Please Select Chat</p>
</v-card>
</div>
</div>
<!-- input -->
<div class="text-left pl-4 pt-4 pb-2 card" style="margin-left:3%; margin-bottom:5%; margin-right:4%; background-color:white;">
<div >
<v-btn
color=""
class="text-none mt-0"
small
outlined
:loading="isSelecting"
@click="onButtonClick"
>
<v-icon centered>
mdi-attachment
</v-icon>
</v-btn>
<input
ref="uploader"
class="d-none"
type="file"
accept="image/*"
@change="uploadThumbnail"
>
<input v-on:keyup.enter="sendMsg" v-model="msg" class="chat_field ml-4" placeholder="send a message" rows="1" cols="50" style="width:70%; border:1px solid gray;"/>
<v-btn @click="sendMsg()" class="ml-4 mt-0" type="submit" small elevation="" color="info" style="width:10%;">
<v-icon small>
mdi-send
</v-icon>
</v-btn>
</div>
</div>
<div class="pt-2"></div>
</div>
</v-col>
</v-row>
</div>
</template>
<script>
import firebase from 'firebase'
import axios from 'axios';
export default {
props: ['id'],
async mounted () {
this.scrollDown()
},
watch: {
id: function () {
firebase.firestore().collection('chat').orderBy('time', 'asc').where("id", "==", this.id)
.onSnapshot((doc) => {
this.data = doc.docs.map(x => x.data())
this.scrollDown()
})
}
},
async created () {
firebase.firestore().collection('chat').orderBy('time', 'asc').where("id", "==", this.id)
.onSnapshot((doc) => {
this.data = doc.docs.map(x => x.data())
this.temp = []
this.scrollDown()
})
},
methods: {
async sendMsg () {
if (!this.msg) {
alert('none')
return
}
this.temp.push({
type: 'message',
msg: this.msg
})
this.scrollDown()
const id = this.id
const body = JSON.stringify({
id: id,
msg: this.msg
})
const headers = {
'Content-Type': 'application/json',
}
const a = await axios.post('https://asia-southeast1-boon-acbbb.cloudfunctions.net/message/LineBotPush', body, {headers})
this.msg = ''
console.log(a)
},
onButtonClick () {
this.isSelecting = true
window.addEventListener('focus', () => {
this.isSelecting = false
}, { once: true })
this.$refs.uploader.click()
},
async uploadThumbnail (e) {
this.selectedFile = e.target.files[0]
let _this = this
const reader = new FileReader()
reader.onload = function (e) {
console.log(e.target.result)
_this.displaySrc = e.target.result
}
reader.readAsDataURL(_this.selectedFile)
const url = await this.upload()
this.pushPhotoChat(url)
},
async pushPhotoChat (url) {
const id = this.id
const body = {
"id": id,
"url": url
}
const headers = {
'Content-Type': 'application/json',
}
await axios.post('https://asia-southeast1-boon-acbbb.cloudfunctions.net/pushPicture/LineBotPushImg', body, {headers})
},
async upload (id) {
const file = this.selectedFile
const metadata = {contentType : 'image/jpeg'}
const uploadTask = firebase.storage().ref(`chats/${id}/${Date.now()}`).put(file, metadata)
try {
const url = await uploadTask.then(snapshot => snapshot.ref.getDownloadURL() )
// eslint-disable-next-line
return url
} catch (err) {
// eslint-disable-next-line
console.log(err)
alert('error')
}
},
async scrollDown () {
await this.$nextTick()
setTimeout(() => {
document.getElementById('box').scrollTop = document.getElementById('box').scrollHeight
document.getElementById('box').scrollIntoView({block: 'end', behavior: 'smooth'});
}, 1000)
}
},
data() {
return {
temp: [],
data: '',
chats: [],
displaySrc: null,
isSelecting: false,
selectedFile: null,
msg: ''
}
},
}
</script>
<style scoped>
.card {
border-radius:20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.chat_field {
margin: 5px 0 5px 0;
border: 1px solid #e0e0e0;
position: relative;
width: 90%;
font-family: 'Roboto';
font-size: 12px;
line-height: 20px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
outline: none;
background: #fff;
display: inline-block;
resize: none;
padding: 5px;
border-radius: 3px;
}
</style>Editor is loading...