feat: Add new data-manager service for professor and module management and a new frontend application with i18n and a professor dashboard.

frontend/Dockerfile

@@ -39,6 +39,9 @@ RUN echo "COMMIT_HASH=$COMMIT_HASH" >> .env.commit
 RUN npm install
 COPY . ./
 
+# execute the npm run dev command
+CMD ["npm", "run", "dev"]
+
 # production stage
 # https://hub.docker.com/r/bitnami/nginx -> always run as non-root user
 FROM docker.io/bitnami/nginx:latest AS prod

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "@vueuse/core": "^13.0.0",
         "country-flag-emoji-polyfill": "^0.1.8",
         "pinia": "^3.0.1",
+        "pocketbase": "^0.26.3",
         "primeflex": "^3.3.1",
         "primeicons": "^7.0.0",
         "primevue": "^3.53.1",
@@ -5593,6 +5594,12 @@
         "@vue/devtools-kit": "^7.7.2"
       }
     },
+    "node_modules/pocketbase": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.26.3.tgz",
+      "integrity": "sha512-5deUKRoEczpxxuHzwr6/DHVmgbggxylEVig8CKN+MjvtYxPUqX/C6puU0yaR2yhTi8zrh7J9s7Ty+qBGwVzWOQ==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",

frontend/package.json

@@ -23,6 +23,7 @@
     "@vueuse/core": "^13.0.0",
     "country-flag-emoji-polyfill": "^0.1.8",
     "pinia": "^3.0.1",
+    "pocketbase": "^0.26.3",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primevue": "^3.53.1",

frontend/src/components/MenuBar.vue

@@ -17,61 +17,86 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
 import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 import { useRoute } from "vue-router";
+import { pb, login, logout } from "../service/pocketbase";
+
 const { t } = useI18n({ useScope: "global" });
 
 const route = useRoute();
 
 const isDark = ref(true);
+const currentUser = ref(pb.authStore.model);
 
-const items = computed(() => [
-  {
-    label: t("createCalendar"),
-    icon: "pi pi-fw pi-plus",
-    route: "/",
-  },
-  {
-    label: t("editCalendar"),
-    icon: "pi pi-fw pi-pencil",
-    route: "/edit",
-  },
-  {
-    label: t("rooms"),
-    icon: "pi pi-fw pi-angle-down",
-    info: "rooms",
-    items: [
-      {
-        label: t("roomFinderPage.roomSchedule"),
-        icon: "pi pi-fw pi-hourglass",
-        route: "/rooms/occupancy",
-      },
-      {
-        label: t("freeRooms.freeRooms"),
-        icon: "pi pi-fw pi-calendar",
-        route: "/rooms/free",
-      },
-    ],
-  },
-  {
-    label: t("faq"),
-    icon: "pi pi-fw pi-book",
-    route: "/faq",
-  },
-  {
-    label: t("imprint"),
-    icon: "pi pi-fw pi-id-card",
-    url: "https://www.htwk-leipzig.de/hochschule/kontakt/impressum/",
-  },
-  {
-    label: t("privacy"),
-    icon: "pi pi-fw pi-exclamation-triangle",
-    url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
-  },
-]);
+onMounted(() => {
+  pb.authStore.onChange((_, model) => {
+    currentUser.value = model;
+  });
+});
+
+onUnmounted(() => {
+  pb.authStore.onChange(() => {});
+});
+
+const items = computed(() => {
+  const menuItems = [
+    {
+      label: t("createCalendar"),
+      icon: "pi pi-fw pi-plus",
+      route: "/",
+    },
+    {
+      label: t("editCalendar"),
+      icon: "pi pi-fw pi-pencil",
+      route: "/edit",
+    },
+    {
+      label: t("rooms"),
+      icon: "pi pi-fw pi-angle-down",
+      info: "rooms",
+      items: [
+        {
+          label: t("roomFinderPage.roomSchedule"),
+          icon: "pi pi-fw pi-hourglass",
+          route: "/rooms/occupancy",
+        },
+        {
+          label: t("freeRooms.freeRooms"),
+          icon: "pi pi-fw pi-calendar",
+          route: "/rooms/free",
+        },
+      ],
+    },
+    {
+      label: t("faq"),
+      icon: "pi pi-fw pi-book",
+      route: "/faq",
+    },
+    {
+      label: t("imprint"),
+      icon: "pi pi-fw pi-id-card",
+      url: "https://www.htwk-leipzig.de/hochschule/kontakt/impressum/",
+    },
+    {
+      label: t("privacy"),
+      icon: "pi pi-fw pi-exclamation-triangle",
+      url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
+    },
+  ];
+
+  if (currentUser.value) {
+    menuItems.push({
+      label: "Professor Dashboard",
+      icon: "pi pi-fw pi-user",
+      route: "/professor/dashboard",
+    });
+  }
+
+  return menuItems;
+});
 
 function handleDarkModeToggled(isDarkVar: boolean) {
   // Do something with isDark value
@@ -143,6 +168,20 @@ function handleDarkModeToggled(isDarkVar: boolean) {
           @dark-mode-toggled="handleDarkModeToggled"
         ></DarkModeSwitcher>
         <LocaleSwitcher></LocaleSwitcher>
+        <Button
+          v-if="!currentUser"
+          label="Login"
+          icon="pi pi-sign-in"
+          class="p-button-text"
+          @click="login"
+        />
+        <Button
+          v-else
+          label="Logout"
+          icon="pi pi-sign-out"
+          class="p-button-text"
+          @click="logout"
+        />
       </div>
     </template>
   </Menubar>

frontend/src/i18n/translations/de.json

@@ -273,6 +273,18 @@
     "notFound": "Nicht gefunden, wonach du suchst?",
     "contact": "Kontakt aufnehmen"
   },
+  "professor": {
+    "dashboard": "Dashboard",
+    "intro": "Willkommen im HTWKalender Professor, im ersten Schritt wählen Sie Ihre Module aus. Die empfohlenen Module werden automatisch ausgewählt. Weitere Module können manuell angewählt werden.",
+    "nextStep": "Weiter",
+    "name": "Name",
+    "professor": "Professor",
+    "course": "Modul",
+    "semester": "Semester",
+    "match": "Abgleich",
+    "searchByName": "Filtern nach Name",
+    "searchByProfessor": "Filtern nach Professor"
+  },
   "footer": {
     "commitInfo": {
       "tooltip": "Version",
@@ -280,9 +292,9 @@
       "description": "Zeigt die Commit-ID der verwendeten Frontend-Version des HTWKalenders an. Für Debbugger und Entwickler.",
       "hash": "Commit-Hash",
       "component": "Komponente",
-      "components":{
+      "components": {
         "frontend": "Frontend"
       }
     }
   }
-}
+}

frontend/src/i18n/translations/en.json

@@ -273,6 +273,18 @@
     "notFound": "Not finding what you're looking for?",
     "contact": "Get in touch"
   },
+  "professor": {
+    "dashboard": "Dashboard",
+    "intro": "Welcome to the HTWKalender Professor, in the first step you select your modules. The recommended modules are automatically selected. Additional modules can be selected manually.",
+    "nextStep": "Next",
+    "name": "name",
+    "professor": "professor",
+    "course": "course",
+    "semester": "semester",
+    "match": "match",
+    "searchByName": "filter by name",
+    "searchByProfessor": "filter by professor"
+  },
   "footer": {
     "commitInfo": {
       "tooltip": "application version",
@@ -280,9 +292,9 @@
       "description": "Shows the commit id of the deployed frontend version of the HTWKalender. For debuggers and developers.",
       "hash": "commit hash",
       "component": "component",
-      "components":{
+      "components": {
         "frontend": "frontend"
       }
     }
   }
-}
+}

frontend/src/router/index.ts

@@ -142,6 +142,14 @@ const routes: RouterOptions = {
         label: "createCalendar",
       },
     },
+    {
+      path: "/professor/dashboard",
+      name: "professor-dashboard",
+      component: () => import("../view/professor/ProfessorDashboard.vue"),
+      meta: {
+        label: "professor.dashboard",
+      },
+    },
   ],
 };
 

frontend/src/service/pocketbase.ts

@@ -0,0 +1,27 @@
+import PocketBase from 'pocketbase';
+
+// const domain = "cal.htwk-leipzig.de";
+// const baseUri = "https://" + domain;
+
+// For development, we might want to use the local backend
+// const backendUrl = import.meta.env.DEV ? 'http://127.0.0.1:8090' : baseUri;
+// But since we are running in docker, the frontend might be accessing the backend via a different URL or proxy.
+// The existing code uses relative paths for API calls which go through the reverse proxy.
+// PocketBase SDK needs a full URL or it defaults to /. 
+// If we are serving frontend from the same domain as backend (via proxy), / is fine.
+// However, the proxy config shows backend at /api/ and pocketbase at /_/? 
+// Let's check reverseproxy.conf
+
+export const pb = new PocketBase("/");
+
+// Note: OAuth2 redirect URL should be configured in Keycloak/OIDC provider as:
+// Development: http://localhost/callback
+// Production: https://cal.htwk-leipzig.de/callback
+
+export const login = async () => {
+    await pb.collection('users').authWithOAuth2({ provider: 'oidc' });
+}
+
+export const logout = () => {
+    pb.authStore.clear();
+}

frontend/src/view/professor/ProfessorDashboard.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { pb } from "../../service/pocketbase";
+import { Module } from "../../model/module";
+import { useI18n } from "vue-i18n";
+import Button from "primevue/button";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Skeleton from "primevue/skeleton";
+import InputText from "primevue/inputtext";
+import { FilterMatchMode } from "primevue/api";
+import { useRouter } from "vue-router";
+
+const { t } = useI18n({ useScope: "global" });
+const router = useRouter();
+
+const modules = ref<Module[]>(new Array(10));
+const selectedModules = ref<Module[]>([]);
+const loading = ref(true);
+
+const filters = ref({
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  prof: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+});
+
+onMounted(async () => {
+  try {
+    // Check if user is authenticated
+    if (!pb.authStore.isValid || !pb.authStore.token) {
+      console.error("User is not authenticated");
+      router.push("/");
+      return;
+    }
+
+    console.log("Auth token:", pb.authStore.token); // Debug
+
+    // Make request with explicit Authorization header
+    const response = await fetch("/api/professor/modules", {
+      method: "GET",
+      headers: {
+        "Authorization": pb.authStore.token,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const result = await response.json();
+    
+    // Convert API response to Module instances with all required fields
+    const moduleObjects = result.map((apiModule: any) => new Module(
+      apiModule.uuid,
+      apiModule.name,
+      apiModule.course,
+      apiModule.eventType || "",
+      apiModule.name, // userDefinedName defaults to module name
+      apiModule.prof,
+      apiModule.semester,
+      false, // reminder defaults to false
+      [] // events defaults to empty array
+    ));
+    
+    // Sort modules by confidence score (highest first)
+    // Note: confidenceScore is not part of Module class, so we need to preserve it
+    const sortedModules = moduleObjects.map((module: Module, index: number) => {
+      const originalData = result[index];
+      return {
+        ...module,
+        confidenceScore: originalData.confidenceScore || 0
+      };
+    }).sort((a: any, b: any) => {
+      return (b.confidenceScore || 0) - (a.confidenceScore || 0); // Descending order
+    });
+    
+    modules.value = sortedModules;
+    
+    // Pre-select modules with confidence score >= 0.7 (good match or better)
+    selectedModules.value = sortedModules.filter((m: any) => (m.confidenceScore || 0) >= 0.7);
+    
+    console.log("Modules loaded:", modules.value.length, "Pre-selected:", selectedModules.value.length);
+  } catch (error: any) {
+    console.error("Failed to fetch modules", error);
+    // If unauthorized, redirect to home
+    if (error.status === 401 || error.message?.includes("401")) {
+      pb.authStore.clear();
+      router.push("/");
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+const createCalendar = () => {
+  // Similar to course selection, we want to proceed to rename or just view calendar
+  // We can store the selected modules in the store and redirect
+  // But wait, the store is for the "current" calendar creation session.
+  // If we want to use the existing flow:
+  
+  // 1. Clear store? Or just add?
+  // Let's assume we want to start fresh or add to existing.
+  // For now, let's just construct the URL parameters or use the store.
+  
+  // Actually, the user wants "custom calendar creation process ... selection of modules and the renaming".
+  // So we can redirect to /rename-modules with the selected modules pre-filled in the store.
+  
+  import("../../store/moduleStore").then(({ default: useModuleStore }) => {
+    const store = useModuleStore();
+    store.removeAllModules();
+    selectedModules.value.forEach((m) => store.addModule(m));
+    router.push("/rename-modules");
+  });
+};
+</script>
+
+<template>
+  <div class="card">
+    <h1>{{ t("professor.dashboard") }}</h1>
+    <p>{{ t("professor.intro") }}</p>
+
+
+    <DataTable
+      v-model:selection="selectedModules"
+      v-model:filters="filters"
+      :value="modules"
+      dataKey="uuid"
+      responsiveLayout="scroll"
+      paginator
+      :rows="10"
+      :rows-per-page-options="[5, 10, 20, 50]"
+      filter-display="row"
+      :show-gridlines="true"
+      :striped-rows="true"
+    >
+      <Column selectionMode="multiple" headerStyle="width: 3em">
+        <template v-if="loading" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column 
+        field="name" 
+        :header="t('professor.name')"
+        :show-filter-menu="false"
+        :show-clear-button="false"
+      >
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter"
+            :placeholder="t('professor.searchByName')"
+            @input="filterCallback()"
+          />
+        </template>
+        <template v-if="loading" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column 
+        field="prof" 
+        :header="t('professor.professor')"
+        :show-filter-menu="false"
+        :show-clear-button="false"
+      >
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter"
+            :placeholder="t('professor.searchByProfessor')"
+            @input="filterCallback()"
+          />
+        </template>
+        <template v-if="loading" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column field="course" :header="t('professor.course')">
+        <template v-if="loading" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column field="semester" :header="t('professor.semester')">
+        <template v-if="loading" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column field="confidenceScore" :header="t('professor.match')" sortable>
+        <template #body="slotProps">
+          <div v-if="loading">
+            <Skeleton></Skeleton>
+          </div>
+          <div v-else>
+            <span v-if="slotProps.data.confidenceScore >= 0.9" style="color: green; font-weight: bold;">
+              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
+            </span>
+            <span v-else-if="slotProps.data.confidenceScore >= 0.7" style="color: #4CAF50;">
+              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
+            </span>
+            <span v-else-if="slotProps.data.confidenceScore >= 0.5" style="color: orange;">
+              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
+            </span>
+            <span v-else style="color: #999;">
+              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
+            </span>
+          </div>
+        </template>
+      </Column>
+    </DataTable>
+
+    <div class="flex justify-content-end mt-4">
+      <Button
+        :label="t('professor.nextStep')"
+        icon="pi pi-arrow-right"
+        @click="createCalendar"
+        :disabled="selectedModules.length === 0"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  padding: 2rem;
+}
+</style>

frontend/vite.config.ts

@@ -79,6 +79,7 @@ export default defineConfig({
     watch: {
       usePolling: true,
     },
+    allowedHosts: ["localhost", "127.0.0.1", "::1", "cal.htwk-leipzig.de", "htwkalender-frontend"],
     proxy: {
       "/api": {
         target: "http://localhost:8090/api",