From 425c91ff6b5136cce83203e53e816543fa0c02d3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 23 Nov 2022 14:26:26 +0100
Subject: [PATCH] Add initial Feedback component

---
 client/src/components/Feedback.vue | 57 ++++++++++++++++++++++++++++++
 client/src/pages/DashboardPage.vue |  2 ++
 2 files changed, 59 insertions(+)
 create mode 100644 client/src/components/Feedback.vue

diff --git a/client/src/components/Feedback.vue b/client/src/components/Feedback.vue
new file mode 100644
index 00000000..bf9da76f
--- /dev/null
+++ b/client/src/components/Feedback.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>Feedback</h1>
+    <div>
+      <h1>Motivation</h1>
+      <p>Würden Sie den Kurs weiterempfehlen?</p>
+      <ItCheckbox :checked="recommend" @toggle="recommend = !recommend" />
+    </div>
+    <div>
+      <h2>Zufriedenheit insgesamt</h2>
+      <ItCheckbox />
+    </div>
+    <RadioGroup v-model="selected">
+      <RadioGroupLabel>Motivation</RadioGroupLabel>
+      <div class="flex flex-row justify-around">
+        <RadioGroupOption
+          v-for="motivation in motivations"
+          :key="motivation.id"
+          v-slot="{ checked }"
+          :value="motivation.id"
+        >
+          <div :class="checked ? 'bg-blue-200' : ''">
+            <RadioGroupLabel>
+              {{ motivation.name }}
+            </RadioGroupLabel>
+          </div>
+        </RadioGroupOption>
+      </div>
+    </RadioGroup>
+  </div>
+</template>
+
+<script setup>
+import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+import {
+  RadioGroup,
+  RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from "@headlessui/vue";
+import { ref } from "vue";
+
+const motivations = [
+  {
+    name: "Work",
+    id: 1,
+  },
+  {
+    name: "Fun",
+    id: 2,
+  },
+];
+
+const selected = ref(motivations[0]);
+const satisfaction = ref(0);
+const recommend = ref(true);
+</script>
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index 6a6477c0..46242edf 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/client/src/pages/DashboardPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Feedback from "@/components/Feedback.vue";
 import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
@@ -75,6 +76,7 @@ onMounted(async () => {
           </ul>
         </div>
       </div>
+      <Feedback />
     </main>
     <aside class="lg:w-[343px] m-8 lg:order-1">
       <div class="mx-auto text-center pb-6 mb-6 border-b">