73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
|
<div class="ping tile-m">
|
|
<p class="left-center">{{ dayjs(ping.timestamp).format("DD.MM.YYYY HH:mm") }}</p>
|
|
<div class="center">
|
|
<p class="indicator center" :class="ping.result">{{ ping.code }}</p>
|
|
</div>
|
|
<p @click="open = !open" class="dropdown-icon">
|
|
<UiIcon class="pointer" v-if="!open">keyboard_arrow_down</UiIcon>
|
|
<UiIcon class="pointer" v-if="open">keyboard_arrow_up</UiIcon>
|
|
</p>
|
|
<div class="dropdown" v-if="open">
|
|
<pre>{{ JSON.stringify(JSON.parse(ping.body), null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import dayjs from "dayjs";
|
|
import type {Ping} from "~/components/targets/Target";
|
|
|
|
const open = ref(false);
|
|
|
|
defineProps<{
|
|
ping: Ping
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ping {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0.25rem;
|
|
align-content: center;
|
|
height: max-content;
|
|
}
|
|
.ping > * {
|
|
min-height: 1.75rem;
|
|
}
|
|
.indicator {
|
|
color: black;
|
|
border-radius: 1rem;
|
|
width: 3.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
.dropdown {
|
|
grid-column: 1 / -1;
|
|
margin-top: 1rem;
|
|
}
|
|
.dropdown > * {
|
|
font-family: "Source Code Pro", monospace;
|
|
font-optical-sizing: auto;
|
|
font-weight: 600;
|
|
background-color: #151515;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.dropdown-icon {
|
|
margin-top: 0.25rem;
|
|
padding-top: 0.125rem;
|
|
|
|
}
|
|
.dropdown-icon * {
|
|
font-size: 1.5rem;
|
|
}
|
|
.UP {
|
|
background-color: #74f474;
|
|
}
|
|
.DOWN {
|
|
background-color: #ff4534;
|
|
color: white;
|
|
}
|
|
</style> |