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

frontend/src/components/AdditionalModules.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { ref, Ref } from "vue";
+import { Module } from "../model/module.ts";
+import { fetchAllModules } from "../api/fetchCourse.ts";
+import moduleStore from "../store/moduleStore.ts";
+import { createIndividualFeed } from "../api/createFeed.ts";
+import { MultiSelectAllChangeEvent } from "primevue/multiselect";
+import tokenStore from "../store/tokenStore.ts";
+import router from "../router";
+
+const fetchedModules = async () => {
+  return await fetchAllModules();
+};
+
+const modules: Ref<Module[]> = ref([]);
+
+const selectedModules: Ref<Module[]> = ref([] as Module[]);
+
+fetchedModules().then(
+  (data) =>
+    (modules.value = data.map((module: Module) => {
+      return module;
+    })),
+);
+
+async function finalStep() {
+  selectedModules.value.forEach((module: Module) => {
+    moduleStore().addModule(module);
+  });
+
+  const token: string = await createIndividualFeed(moduleStore().modules);
+  tokenStore().setToken(token);
+  await router.push("/calendar-link");
+}
+
+const display = (module: Module) => module.Name + " (" + module.Course + ")";
+
+const selectAll = ref(false);
+
+const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
+  selectedModules.value = event.checked
+    ? modules.value.map((module) => module)
+    : [];
+  selectAll.value = event.checked;
+};
+
+function selectChange() {
+  selectAll.value = selectedModules.value.length === modules.value.length;
+}
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3>
+        Select additional Modules that are not listed in the regular semester
+        for your Course
+      </h3>
+    </div>
+    <div class="card flex align-items-center justify-content-center m-2">
+      <MultiSelect
+        v-model="selectedModules"
+        :max-selected-labels="1"
+        :option-label="display"
+        :options="modules"
+        :select-all="selectAll"
+        :virtual-scroller-options="{ itemSize: 70 }"
+        class="custom-multiselect"
+        filter
+        placeholder="Select additional modules"
+        @change="selectChange()"
+        @selectall-change="onSelectAllChange($event)"
+      >
+        <template #option="slotProps">
+          <div class="flex align-items-center">
+            <p class="text-1xl white-space-normal">
+              {{ display(slotProps.option) }}
+            </p>
+          </div>
+        </template>
+        <template #footer>
+          <div class="py-2 px-3">
+            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
+            item{{
+              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
+            }}
+            selected.
+          </div>
+        </template>
+      </MultiSelect>
+    </div>
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <Button @click="finalStep()"> Create Calendar</Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-multiselect) {
+  width: 50rem;
+}
+
+:deep(.custom-multiselect li) {
+  height: unset;
+}
+</style>