added page and edit backend for edit calendar by token

frontend/src/api/fetchModule.ts

@@ -1,4 +1,4 @@
-import { Module } from "../model/module.ts";
+import { Module } from "../model/module";
 
 export async function fetchModule( name: string): Promise<Module> {
   const request = new Request("/api/module", {

frontend/src/api/loadCalendar.ts

@@ -0,0 +1,16 @@
+import { Module } from "../model/module";
+import { Calendar } from "../model/calendar";
+
+export async function getCalender( token: string): Promise<Module[]> {
+  const request = new Request("/api/collections/feeds/records/" + token, {
+    method: "GET",
+  });
+
+  return await fetch(request)
+    .then((response) => {
+      return response.json();
+    })
+    .then(
+      (calendarResponse: Calendar) => calendarResponse.modules
+    );
+}

frontend/src/components/MenuBar.vue

@@ -7,6 +7,11 @@ const items = ref([
     icon: "pi pi-fw pi-plus",
     url: "/",
   },
+  {
+    label: "Edit Calendar",
+    icon: "pi pi-fw pi-pencil",
+    url: "/edit",
+  },
   {
     label: "FAQ",
     icon: "pi pi-fw pi-book",

frontend/src/components/editCalendar/loadCalender.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import { ref, Ref } from "vue";
+import moduleStore from "../../store/moduleStore";
+import { getCalender } from "../../api/loadCalendar";
+
+const token: Ref<string> = ref("");
+
+
+function loadCalendar() {
+  moduleStore().removeAllModules();
+
+  getCalender(token.value).then((data) => {
+    console.log(data);
+    data.forEach((module) => {
+      moduleStore().addModule(module);
+    });
+  });
+}
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem border-round">
+      <p class="text-2xl">Please enter your existing calendar token</p>
+    </div>
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <InputText type="text" v-model="token" />
+    </div>
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <Button label="Load Calendar" @click="loadCalendar" />
+  </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/model/calendar.ts

@@ -0,0 +1,10 @@
+import { Module } from "./module";
+
+export type Calendar = {
+  collectionId: string;
+  collectionName: string;
+  created: string;
+  id: string;
+  modules: Module[];
+  updated: string;
+}

frontend/src/router/index.ts

@@ -6,6 +6,7 @@ import CalendarLink from "../components/CalendarLink.vue";
 import Imprint from "../components/Imprint.vue";
 import PrivacyPolicy from "../components/PrivacyPolicy.vue";
 import RenameModules from "../components/RenameModules.vue";
+import EditCalendarView from "../view/editCalendarView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,6 +31,11 @@ const router = createRouter({
       name: "calendar-link",
       component: CalendarLink,
     },
+    {
+      path: "/edit",
+      name: "edit",
+      component: EditCalendarView,
+    },
     {
       path: "/privacy-policy",
       name: "privacy-policy",

frontend/src/store/moduleStore.ts

@@ -12,6 +12,9 @@ const moduleStore = defineStore("moduleStore", {
     removeModule(module: Module) {
       this.modules.splice(this.modules.indexOf(module), 1);
     },
+    removeAllModules() {
+      this.modules = [];
+    }
   },
 });
 

frontend/src/view/editCalendarView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import LoadCalender from "../components/editCalendar/loadCalender.vue";
+
+
+
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+      <h3 class="text-2xl">Edit your HTWKalender <i class="pi pi-calendar vertical-align-baseline" style="font-size: 2rem"></i></h3>
+    </div>
+    <div class="flex align-items-center justify-content-center">
+      <LoadCalender />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>