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

Add new component for displaying an attendence day

This commit is contained in:
Ramon Wenger 2023-04-25 17:22:49 +02:00
parent 2ef998c12f
commit 34546d35e2
4 changed files with 49 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/pages/learningPath/learningContentPage/attendanceDay/AttendanceDay.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
<it-icon-calendar class="w-[60px] grid-in-icon" />
<h2 class="text-large font-bold grid-in-title">Datum</h2>
<p class="grid-in-value">{{ attendanceDay.date }}</p>
</div>
<div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
<it-icon-location class="w-[60px] grid-in-icon" />
<h2 class="text-large font-bold grid-in-title">Standort</h2>
<p class="grid-in-value">{{ attendanceDay.location }}</p>
</div>
<div class="grid grid-cols-icon-card content-between gap-x-4 grid-areas-icon-card">
<it-icon-trainer class="w-[60px] grid-in-icon" />
<h2 class="text-large font-bold grid-in-title">Trainer</h2>
<p class="grid-in-value">{{ attendanceDay.trainer }}</p>
</div>
</template>
<script setup lang="ts">
import type { CourseSessionAttendanceDay } from "@/types";
export interface Props {
attendanceDay: CourseSessionAttendanceDay;
}
defineProps<Props>();
</script>

29
client/src/pages/learningPath/learningContentPage/blocks/AttendanceDayBlock.vue
View File

@ -2,13 +2,15 @@
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { LearningContent } from "@/types";
import { computed } from "vue";
import AttendanceDay from "../attendanceDay/AttendanceDay.vue";
import LearningContentSimpleLayout from "../layouts/LearningContentSimpleLayout.vue";
const courseSessionsStore = useCourseSessionsStore();
interface Value {
export interface Value {
description: string;
}
const courseSessionsStore = useCourseSessionsStore();
const props = defineProps<{
value: Value;
content: LearningContent;
@ -20,12 +22,21 @@ const attendanceDay = computed(() => {
</script>
<template>
<div class="container-medium">
<div class="lg:mt-8">
<div class="text-large my-4">
<div v-if="attendanceDay">{{ attendanceDay }}</div>
<div v-else>Für diese Durchführung existieren noch keine Details</div>
<LearningContentSimpleLayout
:title="content.title"
learning-content-type="attendance_day"
>
<div class="container-medium">
<div class="lg:mt-8">
<div class="text-large my-4">
<div v-if="attendanceDay">
<AttendanceDay :attendance-day="attendanceDay" />
</div>
<div v-else>
Für diese Durchführung {{ content.id }} existieren noch keine Details
</div>
</div>
</div>
</div>
</div>
</LearningContentSimpleLayout>
</template>

2
client/src/utils/typeMaps.ts
View File

@ -31,7 +31,7 @@ export function learningContentTypeData(t: LearningContentType): LearningContent
case "feedback":
return { title: "Feedback", icon: "it-icon-lc-feedback" };
case "attendance_day":
return { title: "Feedback", icon: "it-icon-lc-exercise" };
return { title: "Präsenztag", icon: "it-icon-lc-training" };
case "placeholder":
return { title: "In Umsetzung", icon: "it-icon-lc-document" };
}

2
client/tailwind.config.js
View File

@ -50,10 +50,12 @@ module.exports = {
"fst fst snd snd trd trd fth fth",
],
"rating-scale-slim": ["bar bar bar", "fst mid fth"],
"icon-card": ["icon title", "icon value"]
},
gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
"horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
"icon-card": "60px auto"
},
gridTemplateRows: {
"horizontal-bar-chart": "200px 40px",