feat:#5 added datetime input for search and fixed nav bar

frontend/src/api/fetchRoom.ts

@@ -6,8 +6,8 @@ export async function fetchRoom(): Promise<string[]> {
     .then((response) => {
       return response.json();
     })
-    .then((roomsResponse) => {
-      roomsResponse.forEach((room: string) => rooms.push(room));
+    .then((roomsResponse: [] | null) => {
+      roomsResponse?.forEach((room: string) => rooms.push(room));
     });
   return rooms;
 }
@@ -22,17 +22,15 @@ export async function fetchEventsByRoomAndDuration(
     "/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date,
   )
     .then((response) => {
-      console.log(response);
       return response.json();
     })
-    .then((eventsResponse) => {
-      console.log("Response:", eventsResponse);
-      eventsResponse.forEach((event: AnonymizedEventDTO) => events.push(event));
+    .then((eventsResponse: [] | null) => {
+      eventsResponse?.forEach((event: AnonymizedEventDTO) =>
+        events.push(event),
+      );
     })
     .catch((error) => {
-      console.log("Error fetching events: ", error);
       return Promise.reject(error);
     });
-  console.log("occupations: ", events);
   return events;
 }

frontend/src/components/FaqPage.vue

@@ -208,6 +208,16 @@
         <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
         <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
       </div>
+      <div class="grid my-2">
+        <div class="col">{{ $t("faqView.ninthQuestion") }}</div>
+        <div class="col">
+          {{ $t("faqView.ninthAnswer") }}
+          <a href="https://git.imn.htwk-leipzig.de/ekresse/htwkalender"
+            >Gitlab</a
+          >
+          .
+        </div>
+      </div>
       <p>
         {{ $t("faqView.notFound") }}<br />
         <a href="/imprint">{{ $t("faqView.contact") }}</a>

frontend/src/components/MenuBar.vue

@@ -26,7 +26,7 @@ const items = computed(() => [
         route: "/rooms",
       },
       {
-        label: t("roomFinderPage.freeRooms"),
+        label: t("freeRooms.freeRooms"),
         icon: "pi pi-fw pi-calendar",
         route: "/rooms/free",
       },
@@ -59,31 +59,58 @@ const items = computed(() => [
         </Button>
       </router-link>
     </template>
-    <template #item="{ item }">
+    <template #item="{ item, props, root }">
       <router-link
         v-if="item.route"
         v-slot="{ navigate }"
         :to="item.route"
         custom
       >
-        <Button
-          :label="String(item.label)"
-          :icon="item.icon"
-          text
-          severity="secondary"
-          :class="item.route === $route.path ? 'active' : ''"
+        <a
+          :class="
+            item.route === $route.path
+              ? 'flex align-items-center active'
+              : 'flex align-items-center'
+          "
+          v-bind="props.action"
           @click="navigate"
-        />
+        >
+          <span :class="item.icon" />
+          <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
+          <Badge
+            v-if="item.badge"
+            :class="{ 'ml-auto': !root, 'ml-2': root }"
+            :value="item.badge"
+          />
+          <span
+            v-if="item.shortcut"
+            class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
+            >{{ item.shortcut }}</span
+          >
+        </a>
       </router-link>
-      <Button
+      <a
         v-else
-        :label="String(item.label)"
-        :icon="item.icon"
-        text
-        severity="secondary"
-        @click="item.url"
+        :class="
+          item.route === $route.path
+            ? 'flex align-items-center active'
+            : 'flex align-items-center'
+        "
+        v-bind="props.action"
       >
-      </Button>
+        <span :class="item.icon" />
+        <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
+        <Badge
+          v-if="item.badge"
+          :class="{ 'ml-auto': !root, 'ml-2': root }"
+          :value="item.badge"
+        />
+        <span
+          v-if="item.shortcut"
+          class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
+          >{{ item.shortcut }}</span
+        >
+      </a>
     </template>
     <template #end>
       <div class="flex align-items-stretch justify-content-center">
@@ -104,7 +131,7 @@ const items = computed(() => [
   border-radius: 6px;
 }
 
-:deep(.p-button .p-button-label::after) {
+:deep(.p-menuitem-link .p-menuitem-label::after) {
   content: "";
   display: block;
   width: 0;
@@ -113,7 +140,7 @@ const items = computed(() => [
   transition: width 0.3s;
 }
 
-:deep(.p-button.active .p-button-label::after) {
+:deep(.p-menuitem-link.active .p-menuitem-label::after) {
   width: 100%;
 }
 </style>

frontend/src/components/RoomOccupation.vue

@@ -47,7 +47,7 @@ async function getOccupation() {
     currentDateTo.value,
   )
     .then((events) => {
-      occupations.value = events.map((event, index) => {
+      occupations.value = events?.map((event, index) => {
         return {
           id: index,
           start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),

frontend/src/i18n/translations/de.json

@@ -20,14 +20,17 @@
   },
   "roomFinderPage": {
     "roomSchedule": "Raumbelegung",
-    "freeRooms": "Freie Räume",
-    "headline": "Raumfinder",
+    "headline": "Raumbelegung",
     "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
     "dropDownSelect": "Bitte wähle einen Raum aus",
     "noRoomsAvailable": "Keine Räume verfügbar",
     "available": "verfügbar",
     "occupied": "belegt"
   },
+  "freeRooms": {
+    "freeRooms": "Freie Räume",
+    "detail": "Bitte wähle einen Zeitraum aus, um alle Räume ohne Belegung anzuzeigen."
+  },
   "moduleSelection": {
     "selectAll": "Alle anwählen",
     "deselectAll": "Alle abwählen",
@@ -223,6 +226,8 @@
     "seventhAnswer": "Studenpläne sind erstmal nur für die ausgewählten Semester gültig. Da durch Wahlpflichtmodule oder deine Planung sich Veränderungen ergeben können.",
     "eighthQuestion": "Preis und Entwicklung?",
     "eighthAnswer": "Die Kosten können durch das selbständiges Hosting vollständig ausgelagert werden. Die Entwicklung soll als aktives Git Projekt auch durch die Community verwaltet werden.",
+    "ninthQuestion": "Wo kann ich den Quellcode einsehen und mitwirken?",
+    "ninthAnswer": "Wenn du dich für die Entwicklung und den Quelltext interessierst, kannst du jederzeit als HTWK Student daran mitarbeiten. Dort findest alle Informationen im ",
     "notFound": "Nicht gefunden, wonach du suchst?",
     "contact": "Kontakt aufnehmen"
   }

frontend/src/i18n/translations/en.json

@@ -19,15 +19,18 @@
     "semesterDropDown": "please select a semester"
   },
   "roomFinderPage": {
-    "roomSchedule": "room schedule",
-    "freeRooms": "free rooms",
-    "headline": "room finder",
-    "detail": "please select a room to view the occupancy",
+    "roomSchedule": "room occupancy",
+    "headline": "room occupancy plan",
+    "detail": "Please select a room to view the occupancy.",
     "dropDownSelect": "please select a room",
     "noRoomsAvailable": "no rooms listed",
     "available": "available",
     "occupied": "occupied"
   },
+  "freeRooms": {
+    "freeRooms": "free rooms",
+    "detail": "Please select a time period to display rooms that have no occupancy."
+  },
   "moduleSelection": {
     "selectAll": "select all",
     "deselectAll": "deselect all",
@@ -223,6 +226,8 @@
     "seventhAnswer": "Timetables are initially only valid for the selected semesters, as changes can occur due to elective modules or your planning.",
     "eighthQuestion": "Cost and development?",
     "eighthAnswer": "Costs can be completely outsourced through self-hosting. Development is intended to be managed by the community as an active Git project.",
+    "ninthQuestion": "Where could i find the source code?",
+    "ninthAnswer": "If you want to contribute, you can do so at any time if you are a HTWK student. The source code is available on ",
     "notFound": "Not finding what you're looking for?",
     "contact": "Get in touch"
   }

frontend/src/main.ts

@@ -35,6 +35,7 @@ import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
 import Checkbox from "primevue/checkbox";
 import Skeleton from "primevue/skeleton";
+import Calendar from "primevue/calendar";
 import i18n from "./i18n";
 
 const app = createApp(App);
@@ -72,5 +73,6 @@ app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
 app.component("Skeleton", Skeleton);
+app.component("Calendar", Calendar);
 
 app.mount("#app");

frontend/src/router/index.ts

@@ -12,6 +12,7 @@ const EditAdditionalModules = () =>
   import("../view/editCalendar/EditAdditionalModules.vue");
 const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");
+const FreeRooms = () => import("../view/FreeRooms.vue");
 
 import i18n from "../i18n";
 
@@ -25,9 +26,14 @@ const router = createRouter({
     },
     {
       path: "/rooms",
-      name: "room-finder",
+      name: "room-schedule",
       component: RoomFinder,
     },
+    {
+      path: "/rooms/free",
+      name: "free-rooms",
+      component: FreeRooms,
+    },
     {
       path: "/faq",
       name: "faq",

frontend/src/view/FreeRooms.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import DynamicPage from "@/view/DynamicPage.vue";
+
+const selected: Ref<{ name: string }> = ref({ name: "" });
+
+const dates = ref();
+</script>
+
+<template>
+  <DynamicPage
+    :hide-content="selected.name === ''"
+    :headline="$t('freeRooms.freeRooms')"
+    :sub-title="$t('freeRooms.detail')"
+    icon="pi pi-search"
+  >
+    <template #selection>
+      <Calendar
+        v-model="dates"
+        class="flex-1 m-0"
+        :placeholder="$t('roomFinderPage.dropDownSelect')"
+        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :auto-filter-focus="true"
+        selection-mode="range"
+        :manual-input="false"
+        :show-time="true"
+        :show-seconds="true"
+      />
+      <Button icon="pi pi-search" />
+    </template>
+    <template #content>
+      <Button>Button</Button>
+    </template>
+  </DynamicPage>
+</template>

frontend/src/view/RoomFinder.vue

@@ -3,20 +3,16 @@ import { Ref, ref } from "vue";
 import { fetchRoom } from "../api/fetchRoom.ts";
 import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";
+import { computedAsync } from "@vueuse/core";
 
-const rooms = async () => {
-  return await fetchRoom();
-};
-
-const roomsList: Ref<{ name: string }[]> = ref([]);
-const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
-
-rooms().then(
-  (data) =>
-    (roomsList.value = data.map((room) => {
+const roomsList = computedAsync(async () => {
+  return await fetchRoom().then((data) =>
+    data.map((room) => {
       return { name: room };
-    })),
-);
+    }),
+  );
+});
+const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
 </script>
 
 <template>