Untitled

<template>
<!-- TradingVueJs 101 (example from 'Getting Started' ) -->
    <div  fluid style="background-color:white; height:100vh;">
        <v-row  no-gutters style="">
            <v-col cols="3">
                <div class="ma-4">
                    <div style="border:1px gray solid; border-radius:25px; background-color:#f3f6fb;">
                        <div class="float-center pa-4" >
                            <v-avatar size="100">
                                <img
                                    src="https://sprofile.line-scdn.net/0hD-l2aK_7GwJBSwwkocJlfTEbGGhiOkIQZHoEYnJCQWF4fghQa3hUYCdOFmd9LFgAaHhTZn1LRGVNWGxkXx3nNkZ7RTV4fFlUaCpQ4w"
                                    alt=""
                                >
                            </v-avatar>
                            <p class="pt-2 ma-0" style="font-size:2vw;">
                                หุ้นเบรค
                            </p>
                            <p class="ma-0">
                                1:1
                            </p> 
                        </div>
                    </div>
                    
                </div>
                <div style="clear:both;"></div>
                <div class="text-center pa-4" >
                    <p>Select Mode</p>     
                    <v-btn to="chat" outlined medium elevation="" color="">1:1</v-btn>
                    <v-btn to="/" class="ml-2" outlined medium elevation="" color="">Settings</v-btn>                        
                </div>
            </v-col>
            <v-col cols="1"></v-col>
            <v-col md="4" sm="8" xs="12">
                <v-card
                    style="margin-top:5%;"
                    class=""
                    elevation=""
                    max-width=""
                >  
                    <div style="margin-left:10%; margin-right:10%;">
                        <h1 class="pt-4">
                            Boon
                        </h1>
                        <p  style=" cursor:pointer;" class="text-left pl-4 pt-10 float-left">
                              New Symbol
                        </p>
                        <div style="clear:both;"></div>
                        <v-text-field :disabled="loading" :loading="loading"  label="" append-icon=""  v-model="symbol" outlined color></v-text-field>
                        <v-btn @click="updateMessage" :loading="loading"  class="mt-1" x-large block color="primary" dark>Submit</v-btn>                        
                        <div class="pt-10"></div>
                    </div>
                </v-card>
            </v-col>
            <v-col cols="3">
                <div style="height:100%;" class="mr-8">
                    <div class="" style="margin-top:8%;">
                        <v-card  style="height:400px; overflow:auto; margin-left:10%;">
                            <div hover v-for="x in items" :key="x.msg" class="pb-4" >
                                <div class="float-left" style="width:30%;" >
                                    <v-avatar class="mt-6" size="50">
                                        <img
                                            :src="x.url"
                                            alt=""
                                        >
                                        </v-avatar>
                                </div>
                                <div style="" class="float-left" >
                                    <p class="text-left mt-8" style="">
                                        {{x.name}}
                                    </p>
                                </div>
                                <div style="clear:both;"></div>
                            </div>
                        </v-card>
                    </div>
                </div>
            </v-col>
        </v-row>
    </div>
</template>

<script>
import firebase from 'firebase'
import axios from 'axios'
export default {
    async mounted () {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                
                // ...
            } else {
                this.$router.push({name: 'login'})
                // User is signed out
                // ...
            }
        });
        const ref = firebase.firestore().collection('stock').orderBy('name', 'asc').get()
        this.items = await ref.then(x => x.docs.map(y => y.data()))
        console.log(this.items)
    },
    name: 'app',
    methods: {
        async check () {
            // http://127.0.0.1:5000/ 
            // https://main-qtct3sspsa-em.a.run.app/checkStock
            let bodyFormData = new FormData();
            bodyFormData.append('symbol', this.symbol)
            const data = await axios.post("https://main-qtct3sspsa-em.a.run.app/handler",
                {
                    data: bodyFormData
                },
                {
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }
                )
            
            if (data) {
                console.log("dd")
            } else {
                alert('ไม่มีหุ้นตัวนี้')
            }
        },
        async updateMessage () {
            this.loading = true
            if (!this.symbol) {return}
            const ref = firebase.firestore().collection('stock').doc(this.symbol)
            await ref.set({message: this.msg, name: this.symbol, url: ''})
            await this.check()
            this.loading = false
            
        },
        choose () {
            this.toggle = true
        },
        addNew() {
            this.toggle = false
        },
        onResize () {
            this.width = window.innerWidth
            this.height = window.innerHeight
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onResize)
    },
    data() {
        return {
            loading: false,
            toggle: true,
            symbol: '',
            msg: '',
            items: [
            ],
            select: ''
        }
    }
}
</script>