htwkalender/frontend/src/view/EditCalendarView.vue

<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<Map<string, 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: Module[]) => {
    if (data.length > 0) {
      data.forEach((module) => {
        moduleStore().addModule(module);
      });
      modules.value = moduleStore().modules;
      router.push("/edit-calendar");
    } else {
      toast.add({
        severity: "error",
        summary: t("editCalendarView.error"),
        detail: t("editCalendarView.noCalendarFound"),
        life: 3000,
      });
    }
  });
}
</script>

<template>
  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8 mb-7">
    <div class="flex align-items-center justify-content-center gap-2 mx-2">
      <h3 class="text-4xl">
        {{ $t("editCalendarView.headline") }}
      </h3>
      <i
        class="pi pi-pencil"
        style="font-size: 2rem"
      ></i>
    </div>
    <div
      class="flex justify-content-center"
    >
      <p class="text-2xl m-2">{{ $t("editCalendarView.subTitle") }}</p>
    </div>
    <div
      class="flex align-items-center justify-content-center m-4 w-full lg:w-8"
    >
      <InputText
        v-model="token"
        type="text"
        class="w-full"
        autofocus
        @keyup.enter="loadCalendar"
      />
    </div>
    <div
      class="flex align-items-center justify-content-end m-2 w-full lg:w-8"
    >
      <Button
        :label="$t('editCalendarView.loadCalendar')"
        icon="pi pi-arrow-down"
        class="col-12 md:col-4 mb-3 align-self-end"
        @click="loadCalendar"
      />
    </div>
  </div>
</template>

<style scoped></style>