Resolve "lint, test and build for frontend image"

2026-01-16 16:52:24 +01:00 · 2024-01-12 13:58:52 +00:00
parent 718d190a04
commit d4d0c5199c
16 changed files with 1970 additions and 150 deletions
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -31,15 +31,15 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e =
 <template>

 <Button
+  id="dark-mode-switcher"
  size="small"
  class="p-button-rounded w-full md:w-auto"
-  id="dark-mode-switcher"
  style="margin-right: 1rem"
  :severity="isDark ? 'warning' : 'info'"
  @click="toggleTheme"
  >
-  <i class="pi pi-sun" v-if="isDark"></i>
-  <i class="pi pi-moon" v-else></i>
+  <i v-if="isDark" class="pi pi-sun"></i>
+  <i v-else class="pi pi-moon"></i>
 </Button>

 </template>
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
-import DarkModeSwitcher from "./DarkModeSwitcher.vue"
+import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 const { t } = useI18n({ useScope: "global" });

 const items = computed(() => [
@@ -43,12 +43,7 @@ const items = computed(() => [
  <Menubar :model="items" class="menubar justify-content-between flex-wrap">
    <template #start>
      <router-link v-slot="{ navigate }" :to="`/`" custom>
-        <Button 
-          severity="secondary"
-          text
-          class="p-0 mx-2"
-          @click="navigate"
-        >
+        <Button severity="secondary" text class="p-0 mx-2" @click="navigate">
          <img
            width="50"
            height="50"
@@ -65,12 +60,12 @@ const items = computed(() => [
          :label="String(item.label)"
          :icon="item.icon"
          text
-          @click="navigate"
          severity="secondary"
+          @click="navigate"
        />
      </router-link>
    </template>
-    <template #end class="align-items-stretch">
+    <template #end>
      <div class="flex align-items-stretch justify-content-center">
        <DarkModeSwitcher></DarkModeSwitcher>
        <LocaleSwitcher></LocaleSwitcher>
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -125,9 +125,9 @@ async function finalStep() {
      <Button
        :disabled="store.isEmpty()"
        class="col-12 md:col-4 mb-3 align-self-end"
-        @click="finalStep()"
        icon="pi pi-save"
        :label="$t('renameModules.nextStep')"
+        @click="finalStep()"
      />
    </div>  
  </div>
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -4,7 +4,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
-import { CalendarOptions, EventInput } from "@fullcalendar/core";
+import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -46,111 +46,114 @@ async function getOccupation() {
    currentDateFrom.value,
    currentDateTo.value,
  )
-  .then((events) => {
-    occupations.value = events.map((event, index) => {
-      return {
-        id: index,
-        start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-        end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-        showFree: event.free
-      };
-    });
+    .then((events) => {
+      occupations.value = events.map((event, index) => {
+        return {
+          id: index,
+          start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+          end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+          showFree: event.free,
+        };
+      });

-    const calendar = fullCalendar.value?.getApi();
-    calendar?.refetchEvents();
-  })
-  .catch((error) => {
-    console.log(error);
-  });
+      const calendar = fullCalendar.value?.getApi();
+      calendar?.refetchEvents();
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }

 import allLocales from "@fullcalendar/core/locales-all";

-const calendarOptions: ComputedRef<CalendarOptions> = computed(() => 
-  ({
-    locales: allLocales,
-    locale: t("languageCode"),
-    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-    // local debugging of mobilePage variable in object creation on ternary expression
-    initialView: mobilePage.value ? "Day" : "week",
-    dayHeaderFormat: { weekday: "short", omitCommas: true },
-    slotDuration: "00:15:00",
-    eventTimeFormat: {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: false,
-    },
-    height: "auto",
-    views: {
-      week: {
-        description: "Wochenansicht",
-        type: "timeGrid",
-        slotLabelFormat: {
-          hour: "numeric",
-          minute: "2-digit",
-          omitZeroMinute: false,
-          meridiem: false,
-          hour12: false,
-        },
-        dateAlignment: "week",
-        titleFormat: { month: "short", day: "numeric" },
-        slotMinTime: "06:00:00",
-        slotMaxTime: "22:00:00",
-        duration: { days: 7 },
-        firstDay: 1,
-        allDaySlot: false,
-        hiddenDays: [0],
+const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
+  locales: allLocales,
+  locale: t("languageCode"),
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+  // local debugging of mobilePage variable in object creation on ternary expression
+  initialView: mobilePage.value ? "Day" : "week",
+  dayHeaderFormat: { weekday: "short", omitCommas: true },
+  slotDuration: "00:15:00",
+  eventTimeFormat: {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  },
+  height: "auto",
+  views: {
+    week: {
+      description: "Wochenansicht",
+      type: "timeGrid",
+      slotLabelFormat: {
+        hour: "numeric",
+        minute: "2-digit",
+        omitZeroMinute: false,
+        meridiem: false,
+        hour12: false,
      },
-      Day: {
-        type: "timeGrid",
-        slotLabelFormat: {
-          hour: "numeric",
-          minute: "2-digit",
-          omitZeroMinute: false,
-          meridiem: false,
-          hour12: false,
-        },
-        titleFormat: { month: "short", day: "numeric" },
-        slotMinTime: "06:00:00",
-        slotMaxTime: "22:00:00",
-        duration: { days: 1 },
-        allDaySlot: false,
-        hiddenDays: [0],
+      dateAlignment: "week",
+      titleFormat: { month: "short", day: "numeric" },
+      slotMinTime: "06:00:00",
+      slotMaxTime: "22:00:00",
+      duration: { days: 7 },
+      firstDay: 1,
+      allDaySlot: false,
+      hiddenDays: [0],
+    },
+    Day: {
+      type: "timeGrid",
+      slotLabelFormat: {
+        hour: "numeric",
+        minute: "2-digit",
+        omitZeroMinute: false,
+        meridiem: false,
+        hour12: false,
      },
+      titleFormat: { month: "short", day: "numeric" },
+      slotMinTime: "06:00:00",
+      slotMaxTime: "22:00:00",
+      duration: { days: 1 },
+      allDaySlot: false,
+      hiddenDays: [0],
    },
-    headerToolbar: {
-      end: "prev,next today",
-      center: "title",
-      start: "week,Day",
-    },
+  },
+  headerToolbar: {
+    end: "prev,next today",
+    center: "title",
+    start: "week,Day",
+  },

-    datesSet: function (dateInfo: any) {
-      const view = dateInfo.view;
-      const offset = new Date().getTimezoneOffset();
-      const startDate = new Date(
-        view.activeStart.getTime() - offset * 60 * 1000,
-      );
-      const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
-      currentDateFrom.value = startDate.toISOString().split("T")[0];
-      currentDateTo.value = endDate.toISOString().split("T")[0];
-      getOccupation();
-    },
-    events: function (_info: any, successCallback: any, _: any) {
-      successCallback(
-        occupations.value.map((event) => {
-          return {
-            id: event.id.toString(),
-            start: event.start,
-            end: event.end,
-            color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
-            textColor: event.showFree ? "var(--green-50)" : "var(--primary-color-text)",
-            title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
-          } as EventInput;
-        }),
-      );
-    },
-  })
-);
+  datesSet: function (dateInfo: DatesSetArg) {
+    const view = dateInfo.view;
+    const offset = new Date().getTimezoneOffset();
+    const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
+    const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
+    currentDateFrom.value = startDate.toISOString().split("T")[0];
+    currentDateTo.value = endDate.toISOString().split("T")[0];
+    getOccupation();
+  },
+  events: function (
+    _info: unknown,
+    successCallback: (events: EventInput[]) => void,
+  ) {
+    successCallback(
+      occupations.value.map((event) => {
+        return {
+          id: event.id.toString(),
+          start: event.start,
+          end: event.end,
+          color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+          textColor: event.showFree
+            ? "var(--green-50)"
+            : "var(--primary-color-text)",
+          title: event.showFree
+            ? t("roomFinderPage.available")
+            : t("roomFinderPage.occupied"),
+        } as EventInput;
+      }),
+    );
+  },
+}));
 </script>
 <template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions" />