added information button to additional Modules

backend/service/addRoute.go

@@ -11,6 +11,7 @@ import (
 	"htwkalender/service/room"
 	"io"
 	"net/http"
+	"net/url"
 	"os"
 )
 
@@ -181,7 +182,8 @@ func AddRoutes(app *pocketbase.PocketBase) {
 			Method: http.MethodGet,
 			Path:   "/api/module",
 			Handler: func(c echo.Context) error {
-				name := c.QueryParam("name")
+				name := c.Request().Header.Get("Name")
+				name, err := url.QueryUnescape(name)
 				module, err := events.GetModuleByName(app, name)
 
 				if err != nil {

backend/service/events/eventService.go

@@ -49,6 +49,8 @@ func GetAllModulesDistinct(app *pocketbase.PocketBase, c echo.Context) error {
 func GetModuleByName(app *pocketbase.PocketBase, name string) (model.Module, error) {
 	events, err := db.FindAllEventsByModule(app, name)
 
+	println("Module: ", name)
+
 	if err != nil || len(events) == 0 {
 		return model.Module{}, err
 	} else {

frontend/src/api/fetchModule.ts

@@ -0,0 +1,27 @@
+import { Module } from "../model/module.ts";
+
+export async function fetchModule( name: string): Promise<Module> {
+  const request = new Request("/api/module", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Name: encodeURI(name),
+    },
+  });
+
+  return await fetch(request)
+    .then((response) => {
+      return response.json();
+    })
+    .then(
+      (module: Module) =>
+        new Module(
+          module.name,
+          module.course,
+          module.name,
+          module.prof,
+          module.semester,
+          module.events,
+        ),
+    );
+}

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>Course: {{ module.course }}</td>
-        <td>{{ 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>

frontend/src/main.ts

@@ -25,6 +25,7 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import DynamicDialog from 'primevue/dynamicdialog';
 import DialogService from 'primevue/dialogservice';
+import ProgressSpinner from 'primevue/progressspinner';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -50,4 +51,5 @@ app.component("AccordionTab", AccordionTab);
 app.component("DataTable", DataTable);
 app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
+app.component("ProgressSpinner", ProgressSpinner);
 app.mount("#app");

frontend/src/model/event.ts

@@ -0,0 +1,14 @@
+
+export class Event {
+  constructor(
+    public name: string,
+    public day: string,
+    public start: string,
+    public end: string,
+    public prof: string,
+    public week: string,
+    public eventType: string,
+    public rooms: string,
+    public notes: string,
+  ) {}
+}

frontend/src/model/module.ts

@@ -1,7 +1,12 @@
+import { Event } from './event';
+
 export class Module {
   constructor(
     public name: string,
     public course: string,
     public userDefinedName: string,
+    public prof: string,
+    public semester: string,
+    public events: Event[] = [],
   ) {}
 }