Add duedates to frontend

client/src/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue

@@ -1,13 +1,48 @@
 <template>
-  <p class="mb-4 font-bold">{{ $t("dueDates.nextDueDates") }}:</p>
-  <!-- ul>
-    <li class="border-b border-t py-3">
-      <p class="pr-12">24. November 2022, 11 Uhr - Austausch mit Trainer</p>
-    </li>
-    <li class="border-b py-3">
-      <p class="pr-12">4. Dezember 2022, 10.30 Uhr - Vernetzen - Live Session</p>
-    </li>
-  </ul>
-  <p class="pt-2 underline">Alle Termine anzeigen</p -->
-  <p class="min-h-[150px] pt-2">{{ $t("Zur Zeit sind keine Termine vorhanden") }}</p>
+  <div>
+    <ul>
+      <li v-for="dueDate in dueDates" :key="dueDate.id">
+        <div class="m-3 p-1">
+          <p class="text-bold">{{ dueDate.title }}</p>
+          <div>{{ formatDate(dueDate.start, dueDate.end) }}</div>
+          <a :href="dueDate.url" target="_blank">Details anschauen</a>
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { useCurrentCourseSession } from "@/composables";
+
+defineProps<{}>();
+
+const courseSession = useCurrentCourseSession();
+console.log(courseSession.value);
+
+const dueDates = courseSession.value.duedates;
+
+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();
+};
+</script>

client/src/types.ts

@@ -442,6 +442,7 @@ export interface CourseSession {
   assignment_details_list: CourseSessionAssignmentDetails[];
   documents: CircleDocument[];
   users: CourseSessionUser[];
+  duedates: DueDate[];
 }
 
 export type Role = "MEMBER" | "EXPERT" | "TUTOR";
@@ -556,3 +557,13 @@ export interface UserAssignmentCompletionStatus {
   completion_status: AssignmentCompletionStatus;
   evaluation_grade: number | null;
 }
+
+export type DueDate = {
+  id: number;
+  start: Date;
+  end: Date;
+  title: string;
+  url: string;
+  course_session: number | null;
+  page: number | null;
+};

server/vbv_lernwelt/duedate/models.py

@@ -17,7 +17,7 @@ class DueDate(models.Model):
     course_session = models.ForeignKey(
         'course.CourseSession',
         on_delete=models.CASCADE,
-        related_name='events',
+        related_name='duedates',
         null=True,
         blank=True,
     )