55 lines
1.5 KiB
Vue
55 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<{
|
|
assignmentsCompleted: number;
|
|
avgPassed: number;
|
|
}>();
|
|
|
|
const progress = computed(() => {
|
|
return {
|
|
SUCCESS: props.avgPassed,
|
|
FAIL: 100 - props.avgPassed,
|
|
UNKNOWN: 0,
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBox
|
|
:details-link="'/statistic/assignment'"
|
|
data-cy="dashboard.stats.assignments"
|
|
>
|
|
<template #title>{{ $t("a.Kompetenznachweis-Elemente") }}</template>
|
|
<template #content>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
|
|
<template #NUMBER>
|
|
<span
|
|
class="mr-3 text-4xl font-bold"
|
|
data-cy="dashboard.stats.assignments.completed"
|
|
>
|
|
{{ assignmentsCompleted }}
|
|
</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.{NUMBER} Bestanden')">
|
|
<template #NUMBER>
|
|
<span
|
|
class="mr-3 text-4xl font-bold"
|
|
data-cy="dashboard.stats.assignments.passed"
|
|
>
|
|
{{ `${Math.round(props.avgPassed)}%` }}
|
|
</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<ItProgress :status-count="progress"></ItProgress>
|
|
</template>
|
|
</BaseBox>
|
|
</template>
|