71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<template>
|
|
<v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3">
|
|
<p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
|
|
<v-skeleton-loader v-if="fetching" type="text" class="bg-grey-darken-3"/>
|
|
<p v-else class="neon-text ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
|
|
<ScheduleTable :is-wide="isWide"/>
|
|
<p class="neon-text text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
|
|
<Links :is-wide="isWide"/>
|
|
<AdditionalButtons :is-wide="isWide"/>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script>
|
|
import ScheduleTable from "./Schedule/ScheduleTable.vue";
|
|
import Links from "./Schedule/Links.vue";
|
|
import AdditionalButtons from "./Schedule/AdditionalButtons.vue";
|
|
import {ref} from "vue";
|
|
import {useScheduleStore} from '../stores/schedule.js';
|
|
|
|
export default {
|
|
name: "Schedule",
|
|
components: {AdditionalButtons, Links, ScheduleTable},
|
|
data: () => ({
|
|
dates: ref(),
|
|
scheduleStore: useScheduleStore(),
|
|
fetching: true,
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth >= 460
|
|
}),
|
|
methods: {
|
|
parseDate(date){
|
|
let dateArr = date.split("-");
|
|
return dateArr[2] + "." + dateArr[1];
|
|
},
|
|
myEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
this.isWide = this.windowWidth >= 460;
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.myEventHandler);
|
|
},
|
|
mounted() {
|
|
this.scheduleStore.getDates().then(()=>{
|
|
this.dates = this.scheduleStore.dates;
|
|
this.fetching = false;
|
|
});
|
|
this.myEventHandler();
|
|
window.addEventListener("resize", this.myEventHandler, { passive: true });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
</style>
|