Skip to content

Instantly share code, notes, and snippets.

@vitorvargasdev

vitorvargasdev/Event.vue

Created October 25, 2019 18:26
Show Gist options
  • Save vitorvargasdev/fb17739d6f98e04864f2ff56ac479e14 to your computer and use it in GitHub Desktop.
Save vitorvargasdev/fb17739d6f98e04864f2ff56ac479e14 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Event.vue
<template>
<span>
<v-card>
<v-btn color="transparent" @click="voltar()">
<v-icon>mdi-backburger</v-icon>
</v-btn>
<v-container fluid v-for="evento in event" :key="evento.id">
<v-row justify="center" class="pt-12">
<h2>{{ evento.league.name }}</h2>
</v-row>
<v-row class="pa-12" justify="center">
<span>
<span class="mr-2">
<img
v-show="evento.home.image_id"
:src="'https://assets.b365api.com/images/team/m/'+evento.home.image_id+'.png'"
class="mr-2"
/>
{{ evento.home.name }}
</span>
<span class="ml-2 mr-2">V</span>
<span class="mr-2">
{{ evento.away.name }}
<img
v-show="evento.away.image_id"
:src="'https://assets.b365api.com/images/team/m/'+evento.away.image_id+'.png'"
class="ml-2"
/>
</span>
</span>
</v-row>
</v-container>
<v-container fluid v-show="odds">
{{ odds.main }}
<v-row justify="center">
<v-expansion-panels popout focusable>
<v-expansion-panel>
<v-expansion-panel-header>Resultado em tempo integral</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Hipotese dupla</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa ou Empate</th>
<th class="text-left">Empate ou Visita</th>
<th class="text-left">Casa ou Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Resultado correto</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col :cols="$isMobile ? 12 : 4">
<v-card>
<v-card-title class="subheading font-weight-bold">Casa</v-card-title>
<v-divider></v-divider>
<v-simple-table>
<template v-slot:default>
<thead></thead>
<tbody>
<tr>
<td>1-2</td>
<td>
<v-btn color="green" class="float-right">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-col>
<v-col :cols="$isMobile ? 12 : 4">
<v-card>
<v-card-title class="subheading font-weight-bold">Empate</v-card-title>
<v-divider></v-divider>
<v-simple-table>
<template v-slot:default>
<thead></thead>
<tbody>
<tr>
<td>1-1</td>
<td>
<v-btn color="green" class="float-right">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-col>
<v-col :cols="$isMobile ? 12 : 4">
<v-card>
<v-card-title class="subheading font-weight-bold">Visita</v-card-title>
<v-divider></v-divider>
<v-simple-table>
<template v-slot:default>
<thead></thead>
<tbody>
<tr>
<td>1-2</td>
<td>
<v-btn color="green" class="float-right">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Intervalo / Final do Jogo</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Gols Mais/Menos</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Para ambas as equipes marcarem</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Empate anula a aposta</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>Resultado / Para ambas as equipes marcarem</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Casa</th>
<th class="text-left">Empate</th>
<th class="text-left">Visita</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
<td>
<v-btn color="green">1.00</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-row>
</v-container>
</v-card>
</span>
</template>
<script>
import axios from "axios";
axios.defaults.headers.common = {
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": window.csrf_token
};
export default {
props: ["event_id", "bet365_id"],
data() {
return {
event: null,
odds: null,
Intervals: []
};
},
methods: {
voltar() {
this.$emit("voltar", true);
this.Intervals.forEach(clearInterval);
},
event_load() {
axios.post("/api/event", { id: this.event_id }).then(res => {
this.event = res.data;
});
},
odds_load() {
async function odds(id) {
let res = await axios.post("/api/event/odds", { id });
return res;
}
odds(this.bet365_id).then(response => {
this.odds = response.data;
});
var Interval = setInterval(
() =>
odds(this.bet365_id).then(response => {
this.odds = response.data;
}),
5000
);
this.Intervals.push(Interval);
}
},
mounted() {
this.event_load();
this.odds_load();
},
watch: {
event_id() {
this.event_load();
this.odds_load();
}
}
};
</script>
<style lang="css" scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment