feat(Frontend): implement app tour (SCRUM-290)

Frontend/components/AppTour/AppTour.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+interface AppTourProps {
+  steps: Array<{
+    source: string;
+    alt: string;
+    title: string;
+    description: string;
+  }>;
+  currentStep: number;
+}
+
+const props = defineProps<AppTourProps>();
+
+const currentStepRef = computed(() => {
+  return props.steps[props.currentStep];
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div
+      class="flex-1 min-h-0 size-full p-8 flex flex-col gap-8 overflow-y-auto"
+  >
+    <ProgressBars
+        :current-step="props.currentStep"
+        :total-steps="props.steps.length"
+    />
+
+    <div
+        class="flex-1 min-h-0 w-fit flex self-center border-4 border-base-300 rounded-3xl shadow-inner overflow-clip"
+    >
+      <img
+          v-if="currentStepRef.source.endsWith('jpeg')"
+          :alt="currentStepRef.alt"
+          :src="currentStepRef.source"
+          class="max-h-full w-auto object-cover"
+      >
+      <video
+          v-else
+          :key="currentStepRef.source"
+          :aria-label="currentStepRef.alt"
+          autoplay
+          class="max-h-full w-auto object-cover"
+          loop
+      >
+        <source
+            :src="currentStepRef.source"
+            type="video/mp4"
+        >
+        {{ t('generic.noVideoSupport') }}
+      </video>
+    </div>
+
+    <div class="flex flex-col gap-2 w-full h-fit">
+      <h2 class="text-large">
+        {{ currentStepRef.title }}
+      </h2>
+      <p class="text-body">
+        {{ currentStepRef.description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

Frontend/components/CustomButton/CustomButton.vue

@@ -107,7 +107,10 @@ const buttonClasses = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center max-w-full">
+  <div
+      :class="{'w-full': props.block}"
+      class="flex flex-col items-center max-w-full"
+  >
     <div v-if="props.topText" class="mb-2">
       <span class="text-sm text-base-content/60 block text-center">{{ props.topText }}</span>
     </div>

Frontend/components/Progress/ProgressBars.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+
+interface ProgressBarProps {
+  totalSteps: number;
+  currentStep: number;
+}
+
+const props = defineProps<ProgressBarProps>();
+
+</script>
+
+<template>
+  <div class="w-full h-fit gap-3 flex flex-row">
+    <div
+        v-for="i in props.totalSteps"
+        :key="i"
+        :class="{'bg-primary opacity-75': props.currentStep >= i-1, 'bg-base-300': props.currentStep < i-1}"
+        class="h-3 w-full rounded-full"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

Frontend/components/SideDrawer/SideDrawer.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { useRouter } from "vue-router";
-import { useColorMode } from "#imports";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {useRouter} from "vue-router";
+import {useColorMode} from "#imports";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 
 const colorMode = useColorMode();
 const router = useRouter();
 
-const { t } = useI18n();
+const {t} = useI18n();
 
 const props = defineProps({
   image: {
@@ -23,26 +23,26 @@ const props = defineProps({
   },
   role: {
     type: String,
-      default: "student",
+    default: "student",
   },
 });
 </script>
 
 <template>
   <div class="drawer">
-    <input id="my-drawer" type="checkbox" class="drawer-toggle" >
+    <input id="my-drawer" class="drawer-toggle" type="checkbox">
     <div class="drawer-content">
       <label class="drawer-button" for="my-drawer">
         <div class="avatar">
           <div class="mask mask-squircle w-8 rounded-full">
             <img
-              :alt="
+                :alt="
                 t('generic.profilePictureAlt', {
                   firstName: props.firstName,
                   lastName: props.lastName,
                 })
               "
-              :src="
+                :src="
                 props.image ||
                 getPlaceholderImage(props.firstName, props.lastName)
               "
@@ -54,56 +54,58 @@ const props = defineProps({
 
     <div class="drawer-side z-40">
       <label
-        aria-label="close sidebar"
-        class="drawer-overlay"
-        for="my-drawer"
+          aria-label="close sidebar"
+          class="drawer-overlay"
+          for="my-drawer"
       />
       <div
-        class="menu py-16 px-8 bg-base-200 text-base-content min-h-full w-80 flex flex-col"
+          class="menu py-16 px-8 bg-base-200 text-base-content min-h-full w-80 flex flex-col"
       >
         <img
-          :alt="t('generic.logoAlt')"
-          :src="
+            :alt="t('generic.logoAlt')"
+            :src="
             colorMode?.value === 'dark'
               ? '../images/appHeader_logo_dark.svg'
               : '../images/appHeader_logo_light.svg'
           "
-          class="h-6 mb-8 cursor-pointer"
-          @click="router.push('/')"
+            class="h-6 mb-8 cursor-pointer"
+            @click="router.push('/')"
         >
 
         <ul class="space-y-3 flex-grow">
           <li>
-              <NuxtLink
-                  :to="props.role ? `/${props.role.toLowerCase()}/profile` : `/`"
-              >
-              <FontAwesomeIcon class="text-xl mr-3" icon="user" />
+            <NuxtLink
+                :to="props.role ? `/${props.role.toLowerCase()}/profile` : `/`"
+            >
+              <FontAwesomeIcon class="text-xl mr-3" icon="user"/>
               {{ t("nav.profile") }}
             </NuxtLink>
           </li>
           <li>
             <NuxtLink
-              :to="props.role ? `/${props.role.toLowerCase()}/settings` : `/`"
+                :to="props.role ? `/${props.role.toLowerCase()}/settings` : `/`"
             >
-              <FontAwesomeIcon icon="gear" class="text-xl mr-3" />
+              <FontAwesomeIcon class="text-xl mr-3" icon="gear"/>
               {{ t("nav.settings") }}
             </NuxtLink>
           </li>
-<!--          <li>-->
-<!--            <NuxtLink to="/tour">-->
-<!--              <FontAwesomeIcon class="text-xl mr-3" icon="map" />-->
-<!--              {{ t("nav.appTour") }}-->
-<!--            </NuxtLink>-->
-<!--          </li>-->
           <li>
             <NuxtLink
-              :to="
+                :to="props.role ? `/${props.role.toLowerCase()}/app-tour` : `/`"
+            >
+              <FontAwesomeIcon class="text-xl mr-3" icon="map"/>
+              {{ t("nav.appTour") }}
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+                :to="
                 props.role
                   ? `/${props.role.toLowerCase()}/data-protection`
                   : `/`
               "
             >
-              <FontAwesomeIcon class="text-xl mr-3" icon="user-shield" />
+              <FontAwesomeIcon class="text-xl mr-3" icon="user-shield"/>
               {{ t("nav.dataProtection") }}
             </NuxtLink>
           </li>
@@ -113,7 +115,7 @@ const props = defineProps({
           <SignOutButton>
             <a href="/">
               <span>
-                <FontAwesomeIcon class="text-xl" icon="fa-right-from-bracket" />
+                <FontAwesomeIcon class="text-xl" icon="fa-right-from-bracket"/>
                 {{ t("nav.logout") }}
               </span>
             </a>

Frontend/components/SupervisorStudentList/SupervisorStudentList.vue

@@ -83,12 +83,18 @@ const emailAddress = ref("");
 const clearInput = ref(false);
 const emailDomain = "fhstp.ac.at";
 
+
 const updateMail = (value: string) => {
   emailAddress.value = value;
 };
 
-const editButtonLabel = computed(() => (isEditing.value ? "Done" : "Edit"));
-const editButtonIcon = computed(() => (isEditing.value ? "check" : "edit"));
+const editButtonLabel = computed(() => {
+  return isEditing.value ? t('generic.done') : t('generic.edit');
+});
+
+const editButtonIcon = computed(() => {
+  return isEditing.value ? "check" : "edit";
+});
 
 const confirm = async () => {
   if (!emailAddress.value) return;