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

Add DueDatesLongList to dashboard

This commit is contained in:
Lorenz Padberg 2023-06-15 16:45:18 +02:00
parent 639683c06d
commit 7ccc771ca7
7 changed files with 139 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/dueDates/DueDateSingle.vue
View File

@ -7,6 +7,7 @@
</template>
<script lang="ts" setup>
import { formatDate } from "@/components/dueDates/dueDatesUtils";
import type { DueDate } from "@/types";
import { defineProps } from "vue";
@ -15,32 +16,4 @@ const props = defineProps<{
}>();
console.log(props.dueDate);
const formatDate = (start_str, end_str) => {
const start = new Date(start_str);
const end = new Date(end_str);
const startDateString = get_date_string(start);
const endDateString = get_date_string(end);
// if start and end are on the same day, dont show the day twice
if (startDateString === endDateString) {
return `${startDateString} ${get_time_string(start)} - ${get_time_string(end)}`;
}
return `${startDateString} ${get_time_string(
start
)} - ${endDateString} ${get_time_string(end)}`;
};
const get_time_string = (date) => {
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
};
const get_date_string = (date) => {
return date.toLocaleDateString([], {
day: "numeric",
month: "short",
year: "numeric",
});
};
</script>

43
client/src/components/dueDates/DueDatesLongList.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="bg-white p-4">
<ul v-if="true">
<li
v-for="dueDate in dueDates"
:key="dueDate.id"
class="flex flex-row border-b py-4"
>
<p class="text-bold w-60">{{ dueDate.title }}</p>
<p class="grow">{{ formatDate(dueDate.start, dueDate.end) }}</p>
<p class="underline">
<a :href="dueDate.url" target="_blank">Details anschauen</a>
</p>
</li>
</ul>
<div v-else>Keine Termine Vorhanden</div>
</div>
</template>
<script lang="ts" setup>
import { dueDatesTestData } from "@/components/dueDates/DueDatesTestData";
import { formatDate } from "@/components/dueDates/DueDatesUtils.ts";
import { useCurrentCourseSession } from "@/composables";
import { defineProps } from "vue";
const props = defineProps<{
maxCount: {
default: 10;
type: number;
};
}>();
const courseSession = useCurrentCourseSession();
let dueDates = []; //courseSession.value.duedates.slice(0, props.maxCount);
//
// if (dueDates.length === 0) {
// dueDates = dueDatesTestData;
// }
dueDates = dueDatesTestData();
console.log("dueDates: ", dueDates);
console.log("maxCount: ", props.maxCount);
</script>

10
client/src/components/dueDates/DueDatesShortList.vue
View File

@ -1,10 +1,11 @@
<template>
<div>
<ul>
<div class="w-64">
<ul v-if="dueDates.length != 0">
<li v-for="dueDate in dueDates" :key="dueDate.id">
<SingleDueDate :due-date="dueDate"></SingleDueDate>
</li>
</ul>
<div v-else>Keine Termine Termine Vorhanden</div>
</div>
</template>
@ -13,16 +14,17 @@ import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
import { useCurrentCourseSession } from "@/composables";
import { defineProps } from "vue";
// TODO: MaxCount is not working
const props = defineProps<{
maxCount: {
type: number;
default: 3;
type: number;
};
}>();
const courseSession = useCurrentCourseSession();
console.log(props.maxCount);
const dueDates = courseSession.value.duedates.slice(0, 3);
const dueDates = courseSession.value.duedates.slice(0, props.maxCount);
console.log(courseSession.value.duedates);
</script>

58
client/src/components/dueDates/DueDatesTestData.ts Normal file
View File

@ -0,0 +1,58 @@
export const dueDatesTestData = () => {
return [
{
id: 1,
start: "2023-06-14T15:00:00+02:00",
end: "2023-06-14T18:00:00+02:00",
title: "Präsenzkurs Kickoff",
url: "/course/überbetriebliche-kurse/learn/kickoff/präsenzkurs-kickoff",
course_session: 2,
page: 383,
},
{
id: 2,
start: "2023-06-15T15:00:00+02:00",
end: "2023-06-15T18:00:00+02:00",
title: "Präsenzkurs Basis",
url: "/course/überbetriebliche-kurse/learn/basis/präsenzkurs-basis",
course_session: 2,
page: 397,
},
{
id: 3,
start: "2023-06-16T15:00:00+02:00",
end: "2023-06-16T18:00:00+02:00",
title: "Präsenzkurs Fahrzeug",
url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
course_session: 2,
page: 413,
},
{
id: 4,
start: "2023-06-16T15:00:00+02:00",
end: "2023-06-16T18:00:00+02:00",
title: "Präsenzkurs Flugzeuge",
url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
course_session: 2,
page: 413,
},
{
id: 5,
start: "2023-07-16T11:00:00+02:00",
end: "2023-07-16T18:00:00+02:00",
title: "Präsenzkurs Motorräder",
url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
course_session: 2,
page: 413,
},
{
id: 6,
start: "2023-08-09T15:00:00+02:00",
end: "2023-08-09T19:00:00+02:00",
title: "Präsenzkurs Fahrräder",
url: "/course/überbetriebliche-kurse/learn/fahrzeug/präsenzkurs-fahrzeug",
course_session: 2,
page: 413,
},
];
};

27
client/src/components/dueDates/DueDatesUtils.ts Normal file
View File

@ -0,0 +1,27 @@
export const formatDate = (start_str: string, end_str: string) => {
const start = new Date(start_str);
const end = new Date(end_str);
const startDateString = getDateString(start);
const endDateString = getDateString(end);
// if start and end are on the same day, dont show the day twice
if (startDateString === endDateString) {
return `${startDateString} ${getTimeString(start)} - ${getTimeString(end)}`;
}
return `${startDateString} ${getTimeString(start)} - ${endDateString} ${getTimeString(
end
)}`;
};
const getTimeString = (date: Date) => {
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
};
const getDateString = (date: Date) => {
return date.toLocaleDateString([], {
day: "numeric",
month: "short",
year: "numeric",
});
};

17
client/src/pages/DashboardPage.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import DueDatesLongList from "@/components/dueDates/DueDatesLongList.vue";
import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useUserStore } from "@/stores/user";
@ -70,21 +71,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
</div>
<div>
<h3 class="mb-6">Termine</h3>
<ul class="bg-white p-4">
<li class="flex flex-row py-4">
{{ $t("Zur Zeit sind keine Termine vorhanden") }}
</li>
<!-- li class="flex flex-row border-b py-4">
<p class="text-bold w-60">Austausch mit Trainer</p>
<p class="grow">Fr, 24. November 2022, 11 Uhr</p>
<p class="underline">Details anschauen</p>
</li>
<li class="flex flex-row py-4">
<p class="text-bold w-60">Vernetzen - Live Session</p>
<p class="grow">Di, 4. Dezember 2022, 10.30 Uhr</p>
<p class="underline">Details anschauen</p>
</li -->
</ul>
<DueDatesLongList></DueDatesLongList>
</div>
</div>
</main>

4
client/src/types.ts
View File

@ -560,8 +560,8 @@ export interface UserAssignmentCompletionStatus {
export type DueDate = {
id: number;
start: Date;
end: Date;
start: string;
end: string;
title: string;
url: string;
course_session: number | null;