64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<template>
|
|
<section class="flex flex-col items-center p-4">
|
|
<template v-if="loading">
|
|
<TextSkeleton custom-class="h-7 w-40" />
|
|
<CircleSkeleton custom-class="mt-2 h-[140px] w-[140px]" />
|
|
<BlockSkeleton custom-class="mt-2 h-5 w-36" />
|
|
</template>
|
|
|
|
<template v-else>
|
|
<p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
|
|
<div class="relative h-[140px] w-[140px]" :class="statusColorClass">
|
|
<svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
|
|
<circle
|
|
class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
|
|
cx="60"
|
|
cy="60"
|
|
:r="chartRadius"
|
|
/>
|
|
<circle
|
|
class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
|
|
cx="60"
|
|
cy="60"
|
|
:r="chartRadius"
|
|
:style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
|
|
/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
|
|
import BlockSkeleton from "~/components/skeleton/BlockSkeleton.vue"
|
|
import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
|
|
|
|
defineProps<{
|
|
loading: boolean
|
|
hostName: string
|
|
statusColorClass: string
|
|
chartRadius: number
|
|
chartCircumference: number
|
|
chartOffset: number
|
|
remainingPercentText: string
|
|
usedText: string
|
|
totalText: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.m-success {
|
|
color: rgb(var(--m-success));
|
|
}
|
|
|
|
.m-error {
|
|
color: rgb(var(--m-error));
|
|
}
|
|
</style>
|