78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useVVByLink } from "@/composables";
|
|
import { SUPPORT_LOCALES } from "@/i18nextWrapper";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import type { AvailableLanguages } from "@/stores/user";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { isVVLearningMentor } from "@/utils/utils";
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
import * as log from "loglevel";
|
|
|
|
log.debug("AppFooter created");
|
|
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
const vvBuyLink = useVVByLink();
|
|
const hideVersion = (import.meta.env.VITE_APP_ENVIRONMENT || "local").startsWith(
|
|
"prod"
|
|
);
|
|
|
|
async function changeLocale(language: AvailableLanguages) {
|
|
await userStore.updateUserProfile({ language });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
|
|
<div>{{ $t("footer.copyright") }}</div>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.dataProtectionLink')" target="_blank">
|
|
{{ $t("footer.dataProtectionText") }}
|
|
</a>
|
|
</div>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.imprintLink')" target="_blank">
|
|
{{ $t("footer.imprintText") }}
|
|
</a>
|
|
</div>
|
|
<router-link
|
|
v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
|
|
class="lg:ml-8"
|
|
:to="vvBuyLink.href.value"
|
|
data-cy="buy-vv-link"
|
|
>
|
|
{{ $t("a.Lehrgang kaufen") }}
|
|
</router-link>
|
|
<div class="flex-grow"></div>
|
|
<div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div>
|
|
<Menu>
|
|
<MenuButton class="text-left lg:ml-8" data-cy="language-switch-button">
|
|
<it-icon-globe class="relative top-[2px] h-4 w-4" />
|
|
<span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span>
|
|
</MenuButton>
|
|
<div class="relative">
|
|
<MenuItems
|
|
class="absolute bottom-0 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-0"
|
|
>
|
|
<MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1">
|
|
<button
|
|
class=""
|
|
:data-cy="`language-selector-${locale}`"
|
|
@click="changeLocale(locale)"
|
|
>
|
|
<span class="ml-2 inline">{{ $t(`language.${locale}`) }}</span>
|
|
</button>
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</div>
|
|
</Menu>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.contactLink')" target="_blank">
|
|
{{ $t("footer.contactText") }}
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped></style>
|