Merge branch 'main' into calendar-fix

TUM-Dev · Jul 19, 2024 · c1bc256 · c1bc256
2 parents cd066e7 + 77def99
commit c1bc256
Show file tree

Hide file tree

Showing 10 changed files with 561 additions and 463 deletions.
diff --git a/data/processors/areatree/config.areatree b/data/processors/areatree/config.areatree
@@ -576,8 +576,8 @@
     -5622:Sportanlage Garching / Dusch Container:
     5701:Munich Institute of Biomedical Engineering, MIBE (ehem. IMETUM, ZIMT, MSB)|MIBE:
     5801:Leibnitz-Rechenzenturm (LRZ):
-    5901:Elektro- und Informationstechnik (EI, ZEITlab):5901,ei-garching[building]
-    5932:Siemens Science Center Garching:5932,siemens-garching
+    5901:Elektro- und Informationstechnik (EI, ZEITlab):5901,ei-garching
+    5932:Siemens Technology Center (STC):5932,siemens-garching
     812:Galileo Garching|Galileo:galileo[joined_building]
       8120:Conference Center:
       8121:Courtyard Hotel:

diff --git a/requirements-dev.txt b/requirements-dev.txt
@@ -1,7 +1,7 @@
-mypy==1.10.1
+mypy==1.11.0
 pre-commit==3.7.1
 pytest==8.2.2
-ruff==0.5.2
+ruff==0.5.3
 types-Pillow==10.2.0.20240520
 types-PyYAML==6.0.12.20240311
 types-requests==2.32.0.20240712

diff --git a/server/Cargo.lock b/server/Cargo.lock
diff --git a/webclient/components/CalendarFull.vue b/webclient/components/CalendarFull.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import FullCalendar from "@fullcalendar/vue3";
 import type { CalendarOptions, EventInput, EventSourceFuncArg } from "@fullcalendar/core";
+import listPlugin from "@fullcalendar/list";
+import timeGridPlugin from "@fullcalendar/timegrid";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import type { components, operations } from "~/api_types";
 import deLocale from "@fullcalendar/core/locales/de";
@@ -17,6 +19,29 @@ const { locale } = useI18n({ useScope: "local" });
 const earliest_last_sync = defineModel<string | null>("earliest_last_sync");
 const locations = defineModel<Map<string, CalendarLocation>>("locations");
 
+interface Color {
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+}
+
+function colorForType(entry_type: "lecture" | "exercise" | "exam" | "barred" | "other"): Color | Record<string, never> {
+  switch (entry_type) {
+    case "lecture":
+      return { backgroundColor: "#93bae6", borderColor: "#3070b3", textColor: "#13243e" };
+    case "exercise":
+      return { backgroundColor: "#e6bbe2", borderColor: "#c56fb9", textColor: "#3f1837" };
+    case "exam":
+      return { backgroundColor: "#fdba74", borderColor: "#f97316", textColor: "#431407" };
+    case "other":
+      return { backgroundColor: "#d4d4d8", borderColor: "#71717a", textColor: "#09090b" };
+    case "barred":
+      return { backgroundColor: "#fca5a5", borderColor: "#ef4444", textColor: "#450a0a" };
+    default:
+      return {};
+  }
+}
+
 async function fetchEvents(arg: EventSourceFuncArg): Promise<EventInput[]> {
   const body: CalendarBody = {
     start_after: arg.startStr,
@@ -38,12 +63,13 @@ async function fetchEvents(arg: EventSourceFuncArg): Promise<EventInput[]> {
     items.push(
       ...v.events.map((e) => {
         const title = locale.value == "de" ? e.title_de : e.title_en;
+        const color = colorForType(e.entry_type);
         return {
           id: e.id.toString(),
           title: show_room_names ? `${k} ${title}` : title,
           start: new Date(e.start_at),
           end: new Date(e.end_at),
-          classes: [e.entry_type],
+          ...color,
         };
       }),
     );
@@ -64,19 +90,20 @@ function extractInfos(data: CalendarResponse): void {
 }
 
 const calendarOptions: CalendarOptions = {
-  plugins: [dayGridPlugin],
-  initialView: "dayGridWeek",
+  plugins: [timeGridPlugin, dayGridPlugin, listPlugin],
+  initialView: "timeGridWeek",
   weekends: false,
   events: fetchEvents,
   headerToolbar: {
     left: "prev,next",
     center: "title",
-    right: "dayGridMonth,dayGridWeek,dayGridDay",
+    right: "dayGridMonth,timeGridWeek,timeGridDay,list",
   },
   locale: locale.value == "de" ? deLocale : enLocale,
   height: 700,
+  // like '14:30'
+  displayEventEnd: false,
   eventTimeFormat: {
-    // like '14:30'
     hour: "2-digit",
     minute: "2-digit",
     meridiem: false,
@@ -88,11 +115,30 @@ const calendarOptions: CalendarOptions = {
   <div class="flex max-h-[700px] min-h-[700px] grow flex-col">
     <FullCalendar :options="calendarOptions">
       <template #eventContent="arg">
-        <div class="overflow-x-auto">
-          <b>{{ arg.timeText }}</b>
-          <i class="ps-1">{{ arg.event.title }}</i>
-        </div>
+        <NuxtLink
+          :to="`https://campus.tum.de/tumonline/ee/ui/ca2/app/desktop/#/pl/ui/$ctx/!wbTermin.wbEdit?pTerminNr=${arg.event.id}`"
+          external
+          class="flex gap-1 overflow-x-auto overflow-y-auto"
+          :class="arg.view.type == 'timeGridWeek' ? 'flex-col' : 'flex-row'"
+        >
+          <template v-if="arg.view.type == 'timeGridWeek'">
+            <span class="font-medium">{{ arg.event.title }}</span>
+            <span class="text-zinc-700 font-normal"
+              >{{ arg.timeText }} - {{ arg.event.end.toLocaleTimeString(locale, { timeStyle: "short" }) }}</span
+            >
+          </template>
+          <template v-else>
+            <span class="font-normal">{{ arg.timeText }} ({{ arg.event.start - arg.event.end }})</span>
+            <span class="font-medium">{{ arg.event.title }}</span>
+          </template>
+        </NuxtLink>
       </template>
     </FullCalendar>
   </div>
 </template>
+
+<style lang="postcss">
+.fc-event-main {
+  @apply flex;
+}
+</style>
diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
@@ -88,20 +88,26 @@ Thanks`,
               </template>
             </I18nT>
           </Toast>
-          <CalendarRoomSelector :data="locations" />
-          <CalendarFull
-            v-model:earliest_last_sync="earliest_last_sync"
-            v-model:locations="locations"
-            :showing="calendar.showing"
-          />
-          <p class="pt-2 text-xs">
-            {{ t("footer.disclaimer") }} <br />
-            {{ t("footer.please_check") }}
-            <template v-if="earliest_last_sync !== null">
-              <br />
-              {{ t("footer.last_sync", [earliest_last_sync]) }}
-            </template>
-          </p>
+          <div v-if="locations.size === 0" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
+            <Spinner class="h-8 w-8" />
+            {{ t("Loading data...") }}
+          </div>
+          <div :class="{ '!invisible': locations.size === 0 }">
+            <CalendarRoomSelector :data="locations" />
+            <CalendarFull
+              v-model:earliest_last_sync="earliest_last_sync"
+              v-model:locations="locations"
+              :showing="calendar.showing"
+            />
+            <p class="pt-2 text-xs">
+              {{ t("footer.disclaimer") }} <br />
+              {{ t("footer.please_check") }}
+              <template v-if="earliest_last_sync !== null">
+                <br />
+                {{ t("footer.last_sync", [earliest_last_sync]) }}
+              </template>
+            </p>
+          </div>
         </div>
       </template>
     </NuxtErrorBoundary>
@@ -123,6 +129,7 @@ de:
     please_check: Im Zweifelsfall prüfe bitte den offiziellen TUMonline-Kalender.
     last_sync: Stand {0}
   call_for_feedback: Diese Funktion ist neu. Wenn du Feedback dazu hast, nutze doch bitte das {feedbackForm}.
+  Loading data...: Loading data...
 en:
   title: Calendar
   close: Close
@@ -137,4 +144,5 @@ en:
     please_check: If in doubt, please check the official calendar on TUMonline
     last_sync: Updated {0}
   call_for_feedback: This feature is new. If you have some feedback about it, feel free to use the {feedbackForm}.
+  Loading data...: Lädt daten...
 </i18n>
diff --git a/webclient/components/CalendarRoomSelector.vue b/webclient/components/CalendarRoomSelector.vue
@@ -13,6 +13,7 @@ const { t } = useI18n({ useScope: "local" });
 const runtimeConfig = useRuntimeConfig();
 
 type DetailsResponse = components["schemas"]["DetailsResponse"];
+
 async function addLocation() {
   let location: string = "";
   while (!location) {
@@ -49,10 +50,6 @@ async function addLocation() {
 
 <template>
   <ul v-if="calendar.showing.length" class="mb-6 flex gap-2 overflow-x-auto">
-    <li v-if="data.size === 0" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
-      <Spinner class="h-8 w-8" />
-      {{ t("Loading data...") }}
-    </li>
     <li
       v-for="[key, location] in data.entries()"
       :key="key"
@@ -71,7 +68,8 @@ async function addLocation() {
         </small>
         <small>
           <Btn :to="location.calendar_url" variant="link" size="text-xs font-semibold rounded-md">
-            <CalendarIcon class="mb-0.5 h-4 w-4" /> {{ t("view_in_tumonline") }}
+            <CalendarIcon class="mb-0.5 h-4 w-4" />
+            {{ t("view_in_tumonline") }}
           </Btn>
         </small>
       </div>
@@ -112,7 +110,6 @@ de:
     error_already_exists: |-
       Der Ort ist bereits im Kalender eingetragen.
       Möchtest du es mit einer anderen ID erneut versuchen?
-  Loading data...: Lädt daten...
 en:
   add_location: add additional location to the calendar
   view_in_tumonline: View in TUMonline
@@ -133,5 +130,4 @@ en:
     error_already_exists: |-
       Location is already in the calendar.
       Want to retry with a different id?
-  Loading data...: Loading data...
 </i18n>
diff --git a/webclient/components/ShareButton.vue b/webclient/components/ShareButton.vue
@@ -17,11 +17,12 @@ const { copy, copied, isSupported: clipboardIsSupported } = useClipboard({ sourc
 const { share, isSupported: shareIsSupported } = useShare();
 
 const modalOpen = ref(false);
-const shareOptions = computed<UseShareOptions>(() => ({
-  title: props.name,
-  text: document.title,
-  url: clipboardSource.value,
-}));
+const shareOptions = () =>
+  ({
+    title: props.name,
+    text: document.title,
+    url: clipboardSource.value,
+  }) as UseShareOptions;
 </script>
 
 <template>

diff --git a/webclient/package.json b/webclient/package.json
@@ -13,9 +13,11 @@
     "format": "prettier --plugin=prettier-plugin-tailwindcss --end-of-line lf --write ."
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.14",
-    "@fullcalendar/daygrid": "^6.1.14",
-    "@fullcalendar/vue3": "^6.1.14",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
+    "@fullcalendar/list": "6.1.15",
+    "@fullcalendar/timegrid": "6.1.15",
+    "@fullcalendar/vue3": "6.1.15",
     "@headlessui/vue": "1.7.22",
     "@heroicons/vue": "2.1.5",
     "@nuxt/content": "2.13.1",
@@ -25,11 +27,11 @@
     "@vueuse/nuxt": "10.11.0",
     "maplibre-gl": "4.5.0",
     "nightwind": "1.1.13",
-    "nuxt": "3.12.3",
+    "nuxt": "3.12.4",
     "sharp": "0.33.4",
     "swagger-ui": "5.17.14",
     "swaggerdark": "github:octycs/SwaggerDark#f02d394c8ff698cdd93e09c2188b058d2d686ca3",
-    "vue": "3.4.32",
+    "vue": "3.4.33",
     "vue-router": "4.4.0",
     "vue3-carousel": "0.3.3"
   },

diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
@@ -187,9 +187,7 @@ onMounted(() => {
             >
               <CalendarDaysIcon class="text-blue-600 mt-0.5 h-4 w-4" />
             </button>
-            <ClientOnly>
-              <ShareButton :coords="data.coords" :name="data.name" />
-            </ClientOnly>
+            <ShareButton :coords="data.coords" :name="data.name" />
             <DetailsFeedbackButton ref="feedbackButton" />
             <!-- <button class="btn btn-link btn-action btn-sm"
                   :title="t('header.favorites')">