86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<template>
|
|
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
|
|
<v-sheet class="mt-5 mb-5 rounded-lg w-75">
|
|
<p class="text-h3 ma-5">Расписание стримов</p>
|
|
<p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
|
|
<div class="w-100 d-flex justify-center">
|
|
<v-table class="text-h5 w-66">
|
|
<tbody>
|
|
<tr v-for="schedule in schedules">
|
|
<td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
|
|
<td>{{ schedule.name }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</div>
|
|
<p class="text-h3 ma-5">Ссылочки</p>
|
|
<div class="w-100 d-flex justify-center">
|
|
<v-list class="w-66">
|
|
<v-list-item class="ma-5" style="background-color: #1976D2; color: #FFFFFF" elevation="6" v-for="link in links" :href="link.link">
|
|
<template v-slot:prepend>
|
|
<v-avatar :image="link.image" rounded="0"></v-avatar>
|
|
</template>
|
|
<v-list-item-title>{{ link.link_name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
<!--
|
|
|
|
-->
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: "Schedule",
|
|
data: () => ({
|
|
links: [],
|
|
schedules: [],
|
|
dates: []
|
|
}),
|
|
methods: {
|
|
parseDate(date){
|
|
let dateArr = date.split("-");
|
|
return dateArr[2] + "." + dateArr[1];
|
|
}
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get('/api/v1/links')
|
|
.then(response => (this.links = response.data));
|
|
axios
|
|
.get('/api/v1/schedules')
|
|
.then(response => (this.schedules = response.data));
|
|
axios
|
|
.get('/api/v1/dates')
|
|
.then(response => (this.dates = response.data));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.bg-gradient {
|
|
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
|
background-size: 200% 200%;
|
|
animation: gradient 15s ease infinite;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
</style>
|