52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import { computed } from "vue";
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
|
|
const props = defineProps<{
|
|
daysCompleted: number;
|
|
avgParticipantsPresent: number;
|
|
}>();
|
|
|
|
const progressRecord = computed(() => {
|
|
return {
|
|
SUCCESS: props.avgParticipantsPresent,
|
|
FAIL: 100 - props.avgParticipantsPresent,
|
|
UNKNOWN: 0,
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBox :details-link="'/statistic/attendance'" data-cy="dashboard.stats.attendance">
|
|
<template #title>{{ $t("a.Anwesenheit") }}</template>
|
|
<template #content>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.NUMBER Präsenztage abgeschlossen')">
|
|
<template #NUMBER>
|
|
<span
|
|
class="mr-3 text-4xl font-bold"
|
|
data-cy="dashboard.stats.attendance.dayCompleted"
|
|
>
|
|
{{ daysCompleted }}
|
|
</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.NUMBER Teilnehmer anwesend')">
|
|
<template #NUMBER>
|
|
<span
|
|
class="mr-3 text-4xl font-bold"
|
|
data-cy="dashboard.stats.attendance.participantsPresent"
|
|
>
|
|
{{ `${avgParticipantsPresent}%` }}
|
|
</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<ItProgress :status-count="progressRecord"></ItProgress>
|
|
</template>
|
|
</BaseBox>
|
|
</template>
|