added frontend and updated backend with docker, wrote some initial instructions

frontend/src/components/CourseSelection.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { Ref, ref } from "vue";
+import {
+  fetchCourse,
+  fetchModulesByCourseAndSemester,
+} from "../api/fetchCourse";
+import ModuleSelection from "./ModuleSelection.vue";
+import { Module } from "../model/module.ts";
+
+const courses = async () => {
+  return await fetchCourse();
+};
+
+const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
+const countries: Ref<{ name: string }[]> = ref([]);
+const semesters: Ref<{ name: string; value: string }[]> = ref([
+  { name: "Wintersemester", value: "ws" },
+  { name: "Sommersemester", value: "ss" },
+]);
+
+const selectedSemester: Ref<{ name: string; value: string }> = ref(
+  semesters.value[0],
+);
+
+courses().then(
+  (data) =>
+    (countries.value = data.map((course) => {
+      return { name: course };
+    })),
+);
+
+const modules: Ref<Module[]> = ref([]);
+
+async function getModules() {
+  modules.value = await fetchModulesByCourseAndSemester(
+    selectedCourse.value.name,
+    selectedSemester.value.value,
+  );
+}
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3 class="text-4xl">Welcome to the Course Calendar</h3>
+    </div>
+    <div
+      class="flex align-items-center justify-content-center h-4rem border-round m-2"
+    >
+      <h5 class="text-2xl">Please select a course</h5>
+    </div>
+    <div
+      class="flex align-items-center justify-content-center border-round m-2"
+    >
+      <Dropdown
+        v-model="selectedCourse"
+        :options="countries"
+        class="w-full md:w-25rem mx-2"
+        filter
+        option-label="name"
+        placeholder="Select a Course"
+        @change="getModules()"
+      ></Dropdown>
+      <Dropdown
+        v-model="selectedSemester"
+        :options="semesters"
+        class="w-full md:w-25rem mx-2"
+        option-label="name"
+        placeholder="Select a Semester"
+        @change="getModules()"
+      ></Dropdown>
+    </div>
+
+    <div
+      class="flex align-items-center justify-content-center border-round m-2"
+    >
+      <div class="flex flex-wrap justify-content-center">
+        <div class="flex align-items-center">
+          <ModuleSelection :modules="modules" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>