53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
import { getBlendedColorForRating } from "@/utils/ratingToColor";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
feedbackCount: number;
|
|
statisfactionMax: number;
|
|
statisfactionAvg: number;
|
|
}>();
|
|
|
|
const satisfactionColor = computed(() => {
|
|
return getBlendedColorForRating(props.statisfactionAvg);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBox :details-link="'/statistic/feedback'">
|
|
<template #title>{{ $t("a.Feedback Teilnehmer") }}</template>
|
|
<template #content>
|
|
<div class="flex items-center">
|
|
<!-- Left Pane -->
|
|
<div
|
|
class="mr-3 flex items-center justify-center rounded p-4"
|
|
:style="{ backgroundColor: satisfactionColor }"
|
|
>
|
|
<i18next :translation="$t('a.{AVG} von {MAX}')">
|
|
<template #AVG>
|
|
<span class="pr-2 text-4xl font-bold">
|
|
{{ props.statisfactionAvg.toFixed(1) }}
|
|
</span>
|
|
</template>
|
|
<template #MAX>
|
|
<span class="pl-1 text-sm">{{ props.statisfactionMax }}</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<!-- Right Pane -->
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<span class="font-bold">{{ $t("a.Allgemeine Zufriedenheit") }}</span>
|
|
<div class="self-start">
|
|
<i18next :translation="$t('a.Total {NUMBER} Antworten')">
|
|
<template #NUMBER>
|
|
<span class="font-bold">{{ props.feedbackCount }}</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
</template>
|