ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: wraps up dashboard boxes ui

This commit is contained in:
Livio Bieri 2023-10-30 09:56:04 +01:00
parent 63bcb44fa2
commit 235c3985e6
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/dashboard/BaseBox.vue
View File

@ -10,9 +10,12 @@ defineProps<{
<slot name="title"></slot>
</h4>
<slot name="content"></slot>
<router-link class="pt-8 underline" :to="detailsLink">
{{ $t("a.Details anschauen") }}
</router-link>
<div class="flex-grow"></div>
<div class="pt-8">
<router-link class="underline" :to="detailsLink">
{{ $t("a.Details anschauen") }}
</router-link>
</div>
</div>
</template>

2
client/src/components/dashboard/CompetenceSummaryBox.vue
View File

@ -12,6 +12,7 @@ defineProps<{
<template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
<template #content>
<div class="flex items-center">
<it-icon-smiley-happy class="mr-4 h-12 w-12"></it-icon-smiley-happy>
<i18next :translation="$t('a.{NUMBER} Das kann ich')">
<template #NUMBER>
<span class="mr-3 text-4xl font-bold">{{ successCount }}</span>
@ -19,6 +20,7 @@ defineProps<{
</i18next>
</div>
<div class="flex items-center">
<it-icon-smiley-thinking class="mr-4 h-12 w-12"></it-icon-smiley-thinking>
<i18next :translation="$t('a.{NUMBER} Das will ich nochmals anschauen')">
<template #NUMBER>
<span class="mr-3 text-4xl font-bold">{{ failCount }}%</span>

37
client/src/components/dashboard/FeedbackSummaryBox.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import BaseBox from "@/components/dashboard/BaseBox.vue";
defineProps<{
const props = defineProps<{
feedbackCount: number;
statisfactionMax: number;
statisfactionAvg: number;
@ -12,18 +12,29 @@ defineProps<{
<BaseBox :details-link="'/statistic/feedback'">
<template #title>{{ $t("a.Feedback Teilnehmer") }}</template>
<template #content>
<div class="flex items-center">
<i18next :translation="$t('a.{AVG} von {MAX}')">
<template #AVG>
<span class="mr-3 text-4xl font-bold">{{ statisfactionAvg }}</span>
</template>
<template #MAX>{{ statisfactionMax }}</template>
</i18next>
</div>
<div class="flex items-center">
<i18next :translation="$t('a.Total {NUMBER} Antworten')">
<template #NUMBER>{{ feedbackCount }}</template>
</i18next>
<div class="flex">
<!-- Left Pane -->
<div class="flex h-16 w-32 items-center justify-center rounded bg-green-500">
<i18next :translation="$t('a.{AVG} von {MAX}')">
<template #AVG>
<span class="pr-2 text-4xl font-bold">{{ props.statisfactionAvg }}</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 p-2">
<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>