modulplaner-frontend/src/components/modals/OldSemesterReminderModal.vue

<template>
  <BaseModal
    :show="stateStore.showingOldPlanReminderModal"
    @close="close"
  >
    <h1 class="text-3xl font-bold leading-6 text-gray-900 dark:text-white">
      Altes Semester
    </h1>

    <p class="mt-10 mb-10">
      Deine Planung liegt in einem vergangenen Semester (<span
        class="font-bold"
      >{{ classesVersionStore.semester }}</span>)!
    </p>

    <p class="mt-10 mb-10">
      Du kannst in den Einstellungen (<font-awesome-icon
        icon="fa-solid fa-cog"
      />) das Semester des aktuellen Plans ändern oder einen neuen Plan
      erstellen (<font-awesome-icon icon="fa-solid fa-plus" />), um ins neuste
      Semester zu gelangen.
    </p>

    <p class="text-gray-700 dark:text-gray-200">
      Oder du bearbeitest deinen Plan weiter im alten Semester mit den Modulen
      die damals zur Auswahl standen.
    </p>

    <div class="flex justify-end mt-10 gap-4">
      <button
        class="bg-green-500 text-white py-2 px-5 rounded"
        @click="close"
      >
        Verstanden
      </button>
    </div>
  </BaseModal>
</template>

<script lang="ts">
import { useStateStore } from "../../stores/state";
import { useClassVersionStore } from "../../stores/ClassVersion";
import BaseModal from "./BaseModal.vue";

export default {
  name: "ClassUpdateModal",
  components: {
    BaseModal,
  },
  setup() {
    const stateStore = useStateStore();
    const classesVersionStore = useClassVersionStore();

    return {
      stateStore,
      classesVersionStore,
    };
  },
  methods: {
    close() {
      this.stateStore.showingOldPlanReminderModal = false;
    },
  },
};
</script>

<style scoped></style>