feat:#5 added first offline calendar functions

frontend/src/api/loadCalendar.ts

@@ -15,7 +15,8 @@
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { Module } from "../model/module";
-import { Calendar } from "../model/calendar";
+import tokenStore from "@/store/tokenStore.ts";
+import { Calendar } from "@/model/calendar.ts";
 
 export async function getCalender(token: string): Promise<Module[]> {
   const request = new Request("/api/collections/feeds/records/" + token, {
@@ -24,9 +25,10 @@ export async function getCalender(token: string): Promise<Module[]> {
 
   return await fetch(request).then((response) => {
     if (response.ok) {
-      return response
+      return response.json().then((calendarResponse: Calendar) => {
-        .json()
+        tokenStore().feed = calendarResponse;
-        .then((calendarResponse: Calendar) => calendarResponse.modules);
+        return calendarResponse.modules;
+      });
     } else {
       return [];
     }

frontend/src/components/RoomOccupationOffline.vue

@@ -21,16 +21,16 @@ import FullCalendar from "@fullcalendar/vue3";
 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 { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
-import {CalendarOptions, DatesSetArg, EventInput} from "@fullcalendar/core";
+import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 import allLocales from "@fullcalendar/core/locales-all";
 import router from "@/router";
-import {formatYearMonthDay} from "@/helpers/dates";
+import { formatYearMonthDay } from "@/helpers/dates";
-import {useQuery} from "@tanstack/vue-query";
+import { useQuery } from "@tanstack/vue-query";
-import {fetchRoomOccupancy} from "@/api/fetchRoomOccupancy";
+import { fetchRoomOccupancy } from "@/api/fetchRoomOccupancy";
-import {isValid} from "date-fns";
+import { isValid } from "date-fns";
-import {RoomOccupancyList} from "@/model/roomOccupancyList";
+import { RoomOccupancyList } from "@/model/roomOccupancyList";
 
 const { t } = useI18n({ useScope: "global" });
 

frontend/src/i18n/translations/en.json

@@ -95,8 +95,13 @@
       "error": "Error",
       "successDetail": "calendar successfully deleted",
       "errorDetail": "calendar could not be deleted",
-      "successDetailLoad": "calendar successfully loaded"
+      "successDetailLoad": "calendar successfully loaded",
-    }
+      "info": "info"
+    },
+    "calendarContainsNoModules": "calendar contains no modules",
+    "noCalendarInOfflineMode": "calendar isn't available in offline mode",
+    "calendarLoadedFromOfflineMode": "calendar loaded from offline cache",
+    "calendarLoadedFromServer": "calendar loaded from web"
   },
   "additionalModules": {
     "subTitle": "select additional modules that are not listed in the regular semester for your course",

frontend/src/model/roomOccupancyList.ts

@@ -14,7 +14,7 @@
 //You should have received a copy of the GNU Affero General Public License
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import {Binary, Document} from "bson";
+import { Binary, Document } from "bson";
 import { AnonymizedOccupancy } from "./event";
 import {
   Duration,
@@ -218,16 +218,23 @@ export class RoomOccupancyList {
       // Iterate over all bits in the current byte
       for (let bit_i = 0; bit_i < 8; bit_i++) {
         const isOccupied = (byte & (1 << (7 - bit_i))) !== 0;
-        const calculateOccupancyBitIndex = (byte_i: number, bit_i: number) => byte_i * 8 + bit_i;
+        const calculateOccupancyBitIndex = (byte_i: number, bit_i: number) =>
+          byte_i * 8 + bit_i;
 
-        if(firstOccupancyBit === null){
+        if (firstOccupancyBit === null) {
           if (isOccupied) {
             firstOccupancyBit = calculateOccupancyBitIndex(byte_i, bit_i);
           }
         } else {
           if (!isOccupied) {
-            const startTime = addMinutes(start, firstOccupancyBit * granularity);
+            const startTime = addMinutes(
-            const endTime = addMinutes(start, calculateOccupancyBitIndex(byte_i, bit_i) * granularity);
+              start,
+              firstOccupancyBit * granularity,
+            );
+            const endTime = addMinutes(
+              start,
+              calculateOccupancyBitIndex(byte_i, bit_i) * granularity,
+            );
             // add event between start and end of a block of boolean true values
             occupancyList.push(
               new AnonymizedOccupancy(
@@ -315,7 +322,8 @@ export class RoomOccupancyList {
       json.granularity,
       json.blocks,
       json.rooms.map(
-        (room: { name: string, occupancy: Binary }) => new RoomOccupancy(room.name, room.occupancy),
+        (room: { name: string; occupancy: Binary }) =>
+          new RoomOccupancy(room.name, room.occupancy),
       ),
     );
   }

frontend/src/store/tokenStore.ts

@@ -15,10 +15,20 @@
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
+import { Calendar } from "../model/calendar";
 
 const tokenStore = defineStore("tokenStore", {
   state: () => ({
     token: "",
+    feed: useLocalStorage("feed", {
+      collectionId: "",
+      collectionName: "",
+      created: "",
+      id: "",
+      modules: [],
+      updated: "",
+    } as Calendar),
   }),
   persist: true,
   actions: {

frontend/src/view/EditCalendarView.vue

@@ -50,22 +50,67 @@ function loadCalendar(): void {
   moduleStore().removeAllModules();
   tokenStore().setToken(token.value);
 
+  if (navigator.onLine) {
     getCalender(token.value).then((data: Module[]) => {
       if (data.length > 0) {
         data.forEach((module) => {
           moduleStore().addModule(module);
         });
         modules.value = moduleStore().modules;
+        toast.add({
+          severity: "success",
+          summary: t("editCalendarView.toast.success"),
+          detail: t("editCalendarView.calendarLoadedFromServer"),
+          life: 3000,
+        });
+
         router.push("/edit-calendar");
       } else {
         toast.add({
           severity: "error",
-        summary: t("editCalendarView.error"),
+          summary: t("editCalendarView.toast.error"),
           detail: t("editCalendarView.noCalendarFound"),
           life: 3000,
         });
       }
     });
+  } else {
+    if(tokenStore().feed.id === token.value) {
+      // get data from tokenStore feed if offline
+      const offlineModules = tokenStore().feed.modules;
+
+      if (offlineModules.length > 0) {
+        offlineModules.forEach((module) => {
+          moduleStore().addModule(module);
+        });
+
+        toast.add({
+          severity: "info",
+          summary: t("editCalendarView.toast.info"),
+          detail: t("editCalendarView.calendarLoadedFromOfflineMode"),
+          life: 3000,
+        });
+
+      } else {
+        toast.add({
+          severity: "info",
+          summary: t("editCalendarView.info"),
+          detail: t("editCalendarView.calendarContainsNoModules"),
+          life: 3000,
+        });
+      }
+    } else {
+      toast.add({
+        severity: "error",
+        summary: t("editCalendarView.toast.error"),
+        detail: t("editCalendarView.noCalendarInOfflineMode"),
+        life: 3000,
+      });
+      return;
+    }
+      modules.value = moduleStore().modules;
+      router.push("/edit-calendar");
+    }
 }
 </script>
 

frontend/src/view/UserCalendar.vue

@@ -12,6 +12,7 @@ const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
 
 const token = ref(tokenStore().token || ("" as string));
+const calendarViewerRef = ref<InstanceType<typeof CalendarViewer>>();
 
 // parse token from query parameter
 const urlParams = new URLSearchParams(window.location.search);
@@ -22,8 +23,6 @@ if (tokenFromUrl) {
   loadCalendar();
 }
 
-const calendarViewerRef = ref<InstanceType<typeof CalendarViewer>>();
-
 function loadCalendar() {
   try {
     token.value = extractToken(token.value);

frontend/vite.config.ts

@@ -96,6 +96,18 @@ export default defineConfig({
               },
             },
           },
+          {
+            // Add the runtime caching strategy for /api/modules
+            urlPattern: ({url}) => url.pathname.startsWith('/api/modules'),
+            method: 'GET',
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'modules-cache',
+              expiration: {
+                maxAgeSeconds: 24 * 60 * 60, // 1 day
+              },
+            },
+          },
           {
             urlPattern: /^https?.*/,
             handler: "NetworkFirst",