<template>
    <div class="resource-container node-container">
        <div class="header">
            <p>Name</p>
            <p>Alter</p>
            <p>Status</p>
            <p>CPU</p>
            <p>RAM</p>
        </div>
        <NodeComponent :node-stats="ns" v-for="ns, index in nodeStats" class="resource" :class="{ even: index % 2 }"></NodeComponent>
    </div>
</template>

<script setup lang="ts">
import { NodeStats } from '~/classes/Node';
import { getNodes } from '~/requests/nodes';

const nodeStats: Ref<NodeStats[] | undefined> = ref(undefined);

let interval: NodeJS.Timeout | undefined = undefined;
onMounted(() => {
    loadNodes();
    interval = setInterval(() => {
        loadNodes();
    }, 10000)
})
onUnmounted(() => {
    clearInterval(interval);
});

function loadNodes()
{
    getNodes((_nodes: NodeStats[]) => {
        nodeStats.value = _nodes;
    });
}
</script>

<style>
.node-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.action-buttons {
    display: flex;
    gap: 0.5rem;
}
</style>