Untitled
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...