htwkalender-pwa/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";
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: "Error",
      detail: "Invalid token",
      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-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 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 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>