New-site/resources/views/Schedule.vue

<template>
    <v-sheet class="mt-5 mb-5 rounded-lg w-75">
        <v-skeleton-loader v-if="fetching" type="text" />
        <p v-else class="ma-5 text-h4"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
        <ScheduleTable/>
        <Links/>
        <iframe
            src="https://player.twitch.tv/?channel=dhaverd&parent=localhost:8000/&muted=true"
            frameborder="0"
            allowfullscreen="true"
            scrolling="no"
            height="378"
            width="620"
        />
    </v-sheet>
</template>

<script>
import axios from "axios";
import ScheduleTable from "./Schedule/ScheduleTable.vue";
import Links from "./Schedule/Links.vue";

export default {
    name: "Schedule",
    components: {Links, ScheduleTable},
    data: () => ({
        dates: [],
        fetching: true,
        twitchStreamIsOnline: false
    }),
    methods: {
        parseDate(date){
            let dateArr = date.split("-");
            return dateArr[2] + "." + dateArr[1];
        },
        async getDates(){
            await axios
                .get('/api/v1/dates')
                .then(response => {
                    this.dates = response.data;
                    this.fetching = false;
                });
        },
        async checkTwitchStreamOnline(){
            await axios
                .get('https://api.twitch.tv/helix/search/channels?query=Dhaverd', {
                    headers: {
                        'Authorization': 'Bearer 2gbdx6oar67tqtcmt49t3wpcgycthx',
                        'Client-Id': 'wbmytr93xzw8zbg0p1izqyzzc5mbiz'
                    }
                })
                .then(response => {
                    for (let item in response.data){
                        console.log(item);
                    }
                });
        }
    },
    mounted() {
        this.getDates();
        this.checkTwitchStreamOnline();
    }
}
</script>

<style scoped>

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>