74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<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"> </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> |