added information button to additional Modules

frontend/src/components/AdditionalModules.vue

@@ -9,6 +9,7 @@ import { useDialog } from "primevue/usedialog";
 const dialog = useDialog();
 
 import router from "../router";
+import { fetchModule } from "../api/fetchModule.ts";
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -38,7 +39,12 @@ const ModuleInformation = defineAsyncComponent(
 );
 
 //TODO add missing module prop informations for ModuleInformation.vue
-function showInfo(module : Module) {
+async function showInfo(moduleName : string) {
+
+  const module: Ref<Module> = ref(new Module("", "", "", "", "", []));
+  await fetchModule(moduleName).then((data) => {
+     module.value = data;
+  });
   dialog.open(ModuleInformation, {
     props: {
       style: {
@@ -108,7 +114,7 @@ function selectChange() {
                 rounded
                 outlined
                 aria-label="Information"
-                @click.stop="showInfo(slotProps.option)"
+                @click.stop="showInfo(slotProps.option.name)"
               ></Button>
               <DynamicDialog />
             </div>

frontend/src/components/ModuleInformation.vue

@@ -4,9 +4,6 @@ import { Module } from "../model/module.ts";
 
 const dialogRef = inject("dialogRef") as any;
 const module = dialogRef.value.data.module as Module;
-
-console.debug(module);
-
 </script>
 
 <template>
@@ -14,11 +11,27 @@ console.debug(module);
     <h2>{{ module.name }}</h2>
     <table>
       <tr>
-        <td>Course:</td>
-        <td>{{ module.course }}</td>
+        <td>Course: {{ module.course }}</td>
       </tr>
       <tr>
-        <td>Termine:</td>
+        <td>Person: {{ module.prof }}</td>
+      </tr>
+      <tr>
+        <td>Semester: {{ module.semester }}</td>
+      </tr>
+      <tr>
+        <td>
+          <div class="card">
+            <DataTable :value="module.events" tableStyle="min-width: 50rem">
+              <Column field="day" header="Day"></Column>
+              <Column field="start" header="Start"></Column>
+              <Column field="end" header="End"></Column>
+              <Column field="rooms" header="Room"></Column>
+              <Column field="eventType" header="Type"></Column>
+              <Column field="week" header="Week"></Column>
+            </DataTable>
+          </div>
+        </td>
       </tr>
     </table>
   </div>