htwkalender-pwa/frontend/src/view/EditCalendarView.vue

<!--
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
Copyright (C) 2024 HTWKalender support@htwkalender.de

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

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/>.
-->

<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";
import DynamicPage from "./DynamicPage.vue";
import { extractToken, isToken } from "@/helpers/token.ts";
const { t } = useI18n({ useScope: "global" });

const toast = useToast();

const token: Ref<string> = ref("");
const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);

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);

  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.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>

<template>
  <DynamicPage
    hide-content
    :headline="$t('editCalendarView.headline')"
    :sub-title="$t('editCalendarView.subTitle')"
    icon="pi pi-pencil"
    :button="{
      label: $t('editCalendarView.loadCalendar'),
      icon: 'pi pi-arrow-down',
      disabled: !isToken(token),
      onClick: loadCalendar,
    }"
  >
    <template #selection="{ flexSpecs }">
      <InputText
        v-model="token"
        type="text"
        :class="flexSpecs"
        autofocus
        @keyup.enter="loadCalendar"
      />
    </template>
  </DynamicPage>
</template>

<style scoped></style>