<script setup lang="ts">
import Base from "@/views/Base.vue";
import PlayIcon from "@/components/PlayIcon.vue";
import ExternalIcon from "@/components/ExternalIcon.vue";
import LocationIcon from "@/components/LocationIcon.vue";
import Error from "@/components/Error.vue";
import Station from "@/components/Station.vue";
import { api } from "@";
import { ref, onMounted, onUnmounted } from "vue";

const error = ref(null);
const stations = ref(null);
const update = ref(null);

const stationsInfo = async () => {
    error.value = null;

    await api.stationsInfo({ throwOnError: true })
        .then(async stationsInfo => {
            stations.value = stationsInfo.data;
            console.log(stations.value);
        })
        .catch(err => {
            stations.value = null;
            error.value = "Failed to get stations list";
        });
};

onMounted(async () => {
    await stationsInfo();
    update.value = setInterval(stationsInfo, 10000);
});

onUnmounted(() => {
    clearInterval(update.value);
});

</script>

<template>
    <Base>
    <Error :value="error" />
    <Station :stationInfo="station" v-for="station in stations" />
    </Base>
</template>
