<template>
    <div class="app">
        <div class="page">
            <h1>Uptime Dashboard</h1>
            <div v-for="target in targets" class="target">
                <p class="healthcheck"><span class="indicator">99.86%</span> {{ target.display }}</p>
                <div class="ping-container">
                    <div style="user-select: none" v-for="ping in target.pings" :class="ping.result">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Target} from "~/components/targets/Target";

const targets: Ref<Target[] | undefined> = ref();

onMounted(() => {
    Target.get((_targets: Target[]) => {
        targets.value = _targets;
    })
})
</script>

<style scoped>
.app {
    display: flex;
    justify-content: center;
    padding: 2rem;
}
.page {
    width: min(1140px, 100%);
    background-color: #222222;
    border-radius: 1rem;
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
}
.target {
    display: grid;
    grid-template-columns: 55% 45%;
}
.ping-container {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(50, 1fr);
    justify-content: end;
    direction: rtl;
}
.healthcheck {
    font-size: 1.125rem;
}
.UP {
    background-color: #74f474;
    border-radius: 0.25rem;
}
.DOWN {
    background-color: #ff4534;
    border-radius: 0.25rem;
}
.indicator {
    font-size: 0.90rem;
    font-weight: 550;
    width: 3.75rem;
    display: inline-flex;
    justify-content: center;
    background-color: #74f474;
    color: black;
    margin-right: 0.5rem;
    border-radius: 1rem;
}
</style>