feat:#60 added localization for more pages

frontend/src/view/EditCalendarView.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import { Module } from "../model/module";
+import moduleStore from "../store/moduleStore";
+import { getCalender } from "../api/loadCalendar";
+import router from "../router";
+import tokenStore from "../store/tokenStore";
+import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
+const toast = useToast();
+
+const token: Ref<string> = ref("");
+const modules: Ref<Module[]> = ref(moduleStore().modules);
+
+function extractToken(token: string): string {
+  const tokenRegex = /^[a-z0-9]{15}$/;
+  const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
+
+  if (tokenRegex.test(token)) {
+    return token;
+  }
+
+  const match = tokenUriRegex.exec(token);
+  if (match) {
+    return match[1];
+  }
+
+  throw new Error("Invalid token");
+}
+
+function loadCalendar(): void {
+  try {
+    token.value = extractToken(token.value);
+  } catch (e) {
+    toast.add({
+      severity: "error",
+      summary: t("editCalendarView.error"),
+      detail: t("editCalendarView.invalidToken"),
+      life: 3000,
+    });
+    return;
+  }
+
+  moduleStore().removeAllModules();
+  tokenStore().setToken(token.value);
+
+  getCalender(token.value).then((data) => {
+    data.forEach((module) => {
+      moduleStore().addModule(module);
+    });
+    modules.value = data;
+  });
+
+  router.push("/edit-additional-modules");
+}
+</script>
+
+<template>
+  <Toast />
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+      <h3 class="text-4xl">
+        {{$t("editCalendarView.headline")}}
+        <i
+          class="pi pi-pencil vertical-align-baseline ml-2"
+          style="font-size: 2rem"
+        ></i>
+      </h3>
+    </div>
+    <div
+      class="flex align-items-center justify-content-center h-4rem border-round"
+    >
+      <p class="text-2xl">{{$t("editCalendarView.subTitle")}}</p>
+    </div>
+    <div
+      class="flex align-items-center justify-content-center border-round m-2"
+    >
+      <InputText v-model="token" type="text" autofocus />
+    </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>