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