modulplaner-frontend/src/components/layout/HeaderBar.vue

<template>
  <div class="visible-in-print">
    <div class="flex items-center">
      <img
        src="../../assets/logo.svg"
        alt="Logo"
        width="45"
        height="45"
        class="mr-3 inline"
      >
      <div>
        <span class="font-bold text-2xl block">{{ SCHOOL_NAME }} Modulplaner</span>
        <span class="text-xs text-gray-400 block">Made with <font-awesome-icon icon="fa-solid fa-heart" /> by Sean
          Blackburn</span>
      </div>
    </div>
  </div>

  <div
    class="w-full bg-gray-800 dark:bg-black px-5 md:px-10 py-5 hidden-in-print flex justify-between gap-4 relative"
  >
    <!-- <img
      v-if="stateStore.hasShownHelpWantedModal"
      title="Nachfolger gesucht!"
      class="absolute h-full bottom-0 right-24 cursor-pointer hidden md:block"
      src="../../assets/searching-single.svg"
      @click="
        stateStore.hasShownHelpWantedModal = !stateStore.hasShownHelpWantedModal
      "
    /> -->

    <div class="flex items-center text-gray-200">
      <img
        src="../../assets/logo.svg"
        alt="Logo"
        width="42"
        height="42"
        class="mr-3"
      >
      <div class="hidden md:block">
        <span class="font-bold text-2xl block">{{ SCHOOL_NAME }} Modulplaner</span>
        <span class="text-xs text-gray-400 block">Made with <font-awesome-icon icon="fa-solid fa-heart" /> by Sean
          Blackburn</span>
      </div>
    </div>

    <div class="text-center text-gray-200 text-xs md:text-base">
      <p class="text-red-500">
        Alle Angaben ohne Gewähr! Bei Fehlern:
        <a
          title="Modulplaner GitLab Issues"
          class="text-blue-400 underline"
          target="_blank"
          rel="noreferrer noopener"
          :href="URLS.GITLAB_REPO_TICKET"
        >Ticket</a>
      </p>
      <p>
        <span class="hidden md:inline">PDF Version:</span>

        <Popper
          :arrow="true"
          :hover="true"
          :z-index="30"
          style="border: 0px solid transparent; margin: 0px"
        >
          <span
            class="p-1 px-2 ml-2 rounded inline text-xs md:text-sm font-mono"
            :class="[
              classVersionStore.isLatestSemesterVersion
                ? 'bg-gray-700 cursor-help'
                : 'bg-red-700 pulsating-orange p-1.5 px-4 cursor-pointer',
            ]"
            :title="
              !classVersionStore.isLatestSemesterVersion
                ? 'Click to upgrade'
                : 'Aktuellste Version'
            "
            @click="showClassUpgrader"
          >{{ currentVersionStr }}
          </span>
          <template #content>
            <span
              v-if="!classVersionStore.isLatestSemesterVersion"
              class="p-3 m-2 font-bold block dark:bg-orange-700 bg-orange-500 text-white rounded-md cursor-pointer"
              @click="showClassUpgrader"
            >Veraltete Stundenplan-Version!</span>
            Export: {{ configStore.config.export_date }}<br>
            Parse: {{ configStore.config.parse_date }}
          </template>
        </Popper>
      </p>
    </div>

    <div
      class="flex items-center justify-end"
      style="width: 42px"
    >
      <AdditionalInfo />
    </div>
  </div>
</template>

<script lang="ts">
import { useConfigStore } from "../../stores/config";
import Popper from "vue3-popper";
import AdditionalInfo from "../modals/AdditionalInfo.vue";
import { useClassVersionStore } from "../../stores/ClassVersion";
import { useStateStore } from "../../stores/state";
import { URLS, SCHOOL_NAME } from "../../helpers";

export default {
  name: "HeaderBar",
  components: {
    Popper,
    AdditionalInfo,
  },
  setup() {
    const configStore = useConfigStore();
    const classVersionStore = useClassVersionStore();
    const stateStore = useStateStore();

    return {
      configStore,
      classVersionStore,
      stateStore,
      URLS,
      SCHOOL_NAME,
    };
  },
  computed: {
    currentVersionStr(): string {
      if (
        this.classVersionStore.semester == null &&
        this.classVersionStore.version == null
      )
        return "Laden...";

      if (this.classVersionStore.semester == "latest")
        return this.configStore.config.pdf_version;

      return `${this.classVersionStore.semester} / ${this.classVersionStore.version}`;
    },
  },
  methods: {
    showClassUpgrader() {
      if (this.classVersionStore.isLatestSemesterVersion) return;
      this.stateStore.upgradingClassVersion = true;
    },
  },
};
</script>

<style scoped>
.pulsating-orange {
  animation-name: color;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes color {
  to {
    background-color: rgb(194 65 12);
  }
}
</style>