Untitled

 avatar
unknown
plain_text
3 years ago
12 kB
3
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...