From db399e2aa286192a82938b67199298fbabf7b469 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 11 Nov 2024 17:04:44 +0100
Subject: [PATCH] Add attendance widget and status component

---
 .../cockpitPage/AttendanceOverview.vue        | 21 +++++++++
 .../cockpit/cockpitPage/AttendanceStatus.vue  | 43 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
 create mode 100644 client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue

diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
new file mode 100644
index 00000000..fd256034
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { ATTENDANCE_ROUTE } from "@/router/names";
+import AttendanceStatus from "./AttendanceStatus.vue";
+
+const attendanceRoute = {
+  name: ATTENDANCE_ROUTE,
+};
+</script>
+
+<template>
+  <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
+    <div>
+      <h2 class="text-base font-bold">Präsenzkurs</h2>
+      <p class="text-sm text-gray-800">4. März 2024</p>
+    </div>
+    <AttendanceStatus status="now" />
+    <router-link :to="attendanceRoute" class="underline">
+      {{ $t("a.Anwesenheit anschauen") }}
+    </router-link>
+  </div>
+</template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
new file mode 100644
index 00000000..489e7e7f
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type Status = "done" | "soon" | "now"; // todo: define this
+
+export interface Props {
+  status: Status;
+}
+
+const props = defineProps<Props>();
+
+const style = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "bg-green-200";
+    case "soon":
+      return "bg-gray-200";
+    case "now":
+    default:
+      return "bg-sky-200";
+  }
+});
+
+const icon = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "it-icon-check";
+    case "soon":
+    case "now":
+    default:
+      return "it-icon-info";
+  }
+});
+</script>
+<template>
+  <div
+    class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
+    :class="style"
+  >
+    <component :is="icon" class="h-7 w-7" />
+    <p>Du hast die Anwesenheit bestätigt.</p>
+  </div>
+</template>