57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div class="narrow ping-page" v-if="target">
|
|
<div class="content-xl">
|
|
<h1>{{ target.displayName }}</h1>
|
|
<div class="col-2">
|
|
<div class="tile-l uptime">
|
|
<h3>1-Hour Uptime</h3>
|
|
<RatioComponent :ratio="target.last1Hour" :status="target.status"></RatioComponent>
|
|
</div>
|
|
<div class="tile-l uptime">
|
|
<h3>24-Hours Uptime</h3>
|
|
<RatioComponent :ratio="target.last24Hour" :status="target.status"></RatioComponent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<PingComponent :ping="ping" v-for="ping in target.pings"></PingComponent>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Target} from "~/components/targets/Target";
|
|
import PingComponent from "~/components/pings/PingComponent.vue";
|
|
|
|
const target: Ref<Target | undefined> = ref();
|
|
|
|
onMounted(() => {
|
|
const key = useRoute().params.target as string;
|
|
Target.getByKey(key, (_target: Target) => {
|
|
target.value = _target;
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ping-page {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
gap: 2rem;
|
|
height: 100vh;
|
|
padding: 2rem;
|
|
}
|
|
.main {
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.main > *:not(*:last-of-type) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.uptime {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |