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

frontend/src/components/ModuleSelection.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { computed, PropType, Ref, ref, watch } from "vue";
+import { Module } from "../model/module.ts";
+import moduleStore from "../store/moduleStore";
+import router from "../router";
+
+const props = defineProps({
+  modules: {
+    type: Array as PropType<Module[]>,
+    required: true,
+  },
+});
+
+// array of modules with boolean if selected with getter and setter
+const modulesWithSelection: Ref<{ module: Module; selected: boolean }[]> = ref(
+  props.modules.map((module) => {
+    return { module: module, selected: false };
+  }),
+);
+
+//watch for changes in modules prop and update modulesWithSelection
+
+function selectedModules(): Module[] {
+  return modulesWithSelection.value
+    .filter((module) => module.selected)
+    .map((module) => module.module);
+}
+
+const currentModules = computed(() => props.modules);
+
+function selectAllModules(selection: boolean) {
+  modulesWithSelection.value.forEach((module) => {
+    module.selected = selection;
+  });
+}
+
+const allSelected: Ref<boolean> = ref(true);
+
+computed(() => {
+  return modulesWithSelection.value.every((module) => module.selected);
+});
+
+watch(currentModules, (newValue: Module[]) => {
+  modulesWithSelection.value = newValue.map((module) => {
+    return { module: module, selected: false };
+  });
+});
+
+function nextStep() {
+  console.log("next step");
+  selectedModules().forEach((module) => {
+    moduleStore().addModule(module);
+  });
+
+  console.debug(moduleStore().modules);
+
+  router.push("/additional-modules");
+}
+</script>
+
+<template>
+  <div class="flex flex-column card-container">
+    <div class="flex align-items-center justify-content-center mb-3">
+      <Button
+        :disabled="selectedModules().length < 1"
+        class="col-4 justify-content-center"
+        @click="nextStep()"
+        >Next Step
+      </Button>
+    </div>
+    <div class="flex align-items-center justify-content-center">
+      <DataView :value="modulesWithSelection" data-key="name">
+        <template #header>
+          <div class="flex justify-content-between flex-wrap">
+            <div class="flex align-items-center justify-content-center">
+              <h3>Selected Modules - {{ selectedModules().length }}</h3>
+            </div>
+            <div class="flex align-items-center justify-content-center">
+              <ToggleButton
+                v-model="allSelected"
+                class="w-12rem"
+                off-icon="pi pi-times"
+                off-label="Unselect All"
+                on-icon="pi pi-check"
+                on-label="Select All"
+                @click="selectAllModules(!allSelected)"
+              />
+            </div>
+          </div>
+        </template>
+        <template #empty>
+          <p class="p-4 text-2xl font-bold text-900 empty-message">
+            No Modules found for this course
+          </p>
+        </template>
+        <template #list="slotProps">
+          <div class="col-12">
+            <div
+              class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"
+            >
+              <div
+                class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"
+              >
+                <div
+                  class="flex flex-column align-items-center sm:align-items-start gap-3"
+                >
+                  <div class="text-2xl">
+                    {{ slotProps.data.module.Name }}
+                  </div>
+                </div>
+                <div
+                  class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"
+                >
+                  <ToggleButton
+                    v-model="modulesWithSelection[slotProps.index].selected"
+                    class="w-9rem"
+                    off-icon="pi pi-times"
+                    off-label="Unselected"
+                    on-icon="pi pi-check"
+                    on-label="Selected"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DataView>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@media screen and (min-width: 962px) {
+  .empty-message {
+    width: 50rem;
+  }
+}
+</style>