Skip to content

Commit 8cd0044

Browse files
FelixTeutschjb-cc
FelixTeutsch
and
jb-cc
committed
feat(Frontend): implement app tour (SCRUM-290) (#193)
Co-authored-by: jb-cc <115902941+jb-cc@users.noreply.github.com>
1 parent b6ba097 commit 8cd0044

28 files changed

Lines changed: 651 additions & 67 deletions

File tree

‎Frontend/components/AppTour/AppTour.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script lang="ts" setup>
2+
import { useI18n } from 'vue-i18n';
3+
4+
interface AppTourProps {
5+
steps: Array<{
6+
source: string;
7+
alt: string;
8+
title: string;
9+
description: string;
10+
}>;
11+
currentStep: number;
12+
}
13+
14+
const props = defineProps<AppTourProps>();
15+
16+
const currentStepRef = computed(() => {
17+
return props.steps[props.currentStep];
18+
});
19+
20+
const { t } = useI18n();
21+
</script>
22+
23+
<template>
24+
<div
25+
class="flex-1 min-h-0 size-full p-8 flex flex-col gap-8 overflow-y-auto"
26+
>
27+
<ProgressBars
28+
:current-step="props.currentStep"
29+
:total-steps="props.steps.length"
30+
/>
31+
32+
<div
33+
class="flex-1 min-h-0 w-fit flex self-center border-4 border-base-300 rounded-3xl shadow-inner overflow-clip"
34+
>
35+
<img
36+
v-if="currentStepRef.source.endsWith('jpeg')"
37+
:alt="currentStepRef.alt"
38+
:src="currentStepRef.source"
39+
class="max-h-full w-auto object-cover"
40+
>
41+
<video
42+
v-else
43+
:key="currentStepRef.source"
44+
:aria-label="currentStepRef.alt"
45+
autoplay
46+
class="max-h-full w-auto object-cover"
47+
loop
48+
>
49+
<source
50+
:src="currentStepRef.source"
51+
type="video/mp4"
52+
>
53+
{{ t('generic.noVideoSupport') }}
54+
</video>
55+
</div>
56+
57+
<div class="flex flex-col gap-2 w-full h-fit">
58+
<h2 class="text-large">
59+
{{ currentStepRef.title }}
60+
</h2>
61+
<p class="text-body">
62+
{{ currentStepRef.description }}
63+
</p>
64+
</div>
65+
</div>
66+
</template>
67+
68+
<style scoped></style>

‎Frontend/components/CustomButton/CustomButton.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,10 @@ const buttonClasses = computed(() => {
107107
</script>
108108

109109
<template>
110-
<div class="flex flex-col items-center max-w-full">
110+
<div
111+
:class="{'w-full': props.block}"
112+
class="flex flex-col items-center max-w-full"
113+
>
111114
<div v-if="props.topText" class="mb-2">
112115
<span class="text-sm text-base-content/60 block text-center">{{ props.topText }}</span>
113116
</div>

‎Frontend/components/Progress/ProgressBars.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
3+
interface ProgressBarProps {
4+
totalSteps: number;
5+
currentStep: number;
6+
}
7+
8+
const props = defineProps<ProgressBarProps>();
9+
10+
</script>
11+
12+
<template>
13+
<div class="w-full h-fit gap-3 flex flex-row">
14+
<div
15+
v-for="i in props.totalSteps"
16+
:key="i"
17+
:class="{'bg-primary opacity-75': props.currentStep >= i-1, 'bg-base-300': props.currentStep < i-1}"
18+
class="h-3 w-full rounded-full"
19+
/>
20+
</div>
21+
</template>
22+
23+
<style scoped>
24+
25+
</style>

‎Frontend/components/SideDrawer/SideDrawer.vue‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script setup>
2-
import { useRouter } from "vue-router";
3-
import { useColorMode } from "#imports";
4-
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
2+
import {useRouter} from "vue-router";
3+
import {useColorMode} from "#imports";
4+
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
55
66
const colorMode = useColorMode();
77
const router = useRouter();
88
9-
const { t } = useI18n();
9+
const {t} = useI18n();
1010
1111
const props = defineProps({
1212
image: {
@@ -23,26 +23,26 @@ const props = defineProps({
2323
},
2424
role: {
2525
type: String,
26-
default: "student",
26+
default: "student",
2727
},
2828
});
2929
</script>
3030

3131
<template>
3232
<div class="drawer">
33-
<input id="my-drawer" type="checkbox" class="drawer-toggle" >
33+
<input id="my-drawer" class="drawer-toggle" type="checkbox">
3434
<div class="drawer-content">
3535
<label class="drawer-button" for="my-drawer">
3636
<div class="avatar">
3737
<div class="mask mask-squircle w-8 rounded-full">
3838
<img
39-
:alt="
39+
:alt="
4040
t('generic.profilePictureAlt', {
4141
firstName: props.firstName,
4242
lastName: props.lastName,
4343
})
4444
"
45-
:src="
45+
:src="
4646
props.image ||
4747
getPlaceholderImage(props.firstName, props.lastName)
4848
"
@@ -54,56 +54,58 @@ const props = defineProps({
5454

5555
<div class="drawer-side z-40">
5656
<label
57-
aria-label="close sidebar"
58-
class="drawer-overlay"
59-
for="my-drawer"
57+
aria-label="close sidebar"
58+
class="drawer-overlay"
59+
for="my-drawer"
6060
/>
6161
<div
62-
class="menu py-16 px-8 bg-base-200 text-base-content min-h-full w-80 flex flex-col"
62+
class="menu py-16 px-8 bg-base-200 text-base-content min-h-full w-80 flex flex-col"
6363
>
6464
<img
65-
:alt="t('generic.logoAlt')"
66-
:src="
65+
:alt="t('generic.logoAlt')"
66+
:src="
6767
colorMode?.value === 'dark'
6868
? '../images/appHeader_logo_dark.svg'
6969
: '../images/appHeader_logo_light.svg'
7070
"
71-
class="h-6 mb-8 cursor-pointer"
72-
@click="router.push('/')"
71+
class="h-6 mb-8 cursor-pointer"
72+
@click="router.push('/')"
7373
>
7474

7575
<ul class="space-y-3 flex-grow">
7676
<li>
77-
<NuxtLink
78-
:to="props.role ? `/${props.role.toLowerCase()}/profile` : `/`"
79-
>
80-
<FontAwesomeIcon class="text-xl mr-3" icon="user" />
77+
<NuxtLink
78+
:to="props.role ? `/${props.role.toLowerCase()}/profile` : `/`"
79+
>
80+
<FontAwesomeIcon class="text-xl mr-3" icon="user"/>
8181
{{ t("nav.profile") }}
8282
</NuxtLink>
8383
</li>
8484
<li>
8585
<NuxtLink
86-
:to="props.role ? `/${props.role.toLowerCase()}/settings` : `/`"
86+
:to="props.role ? `/${props.role.toLowerCase()}/settings` : `/`"
8787
>
88-
<FontAwesomeIcon icon="gear" class="text-xl mr-3" />
88+
<FontAwesomeIcon class="text-xl mr-3" icon="gear"/>
8989
{{ t("nav.settings") }}
9090
</NuxtLink>
9191
</li>
92-
<!-- <li>-->
93-
<!-- <NuxtLink to="/tour">-->
94-
<!-- <FontAwesomeIcon class="text-xl mr-3" icon="map" />-->
95-
<!-- {{ t("nav.appTour") }}-->
96-
<!-- </NuxtLink>-->
97-
<!-- </li>-->
9892
<li>
9993
<NuxtLink
100-
:to="
94+
:to="props.role ? `/${props.role.toLowerCase()}/app-tour` : `/`"
95+
>
96+
<FontAwesomeIcon class="text-xl mr-3" icon="map"/>
97+
{{ t("nav.appTour") }}
98+
</NuxtLink>
99+
</li>
100+
<li>
101+
<NuxtLink
102+
:to="
101103
props.role
102104
? `/${props.role.toLowerCase()}/data-protection`
103105
: `/`
104106
"
105107
>
106-
<FontAwesomeIcon class="text-xl mr-3" icon="user-shield" />
108+
<FontAwesomeIcon class="text-xl mr-3" icon="user-shield"/>
107109
{{ t("nav.dataProtection") }}
108110
</NuxtLink>
109111
</li>
@@ -113,7 +115,7 @@ const props = defineProps({
113115
<SignOutButton>
114116
<a href="/">
115117
<span>
116-
<FontAwesomeIcon class="text-xl" icon="fa-right-from-bracket" />
118+
<FontAwesomeIcon class="text-xl" icon="fa-right-from-bracket"/>
117119
{{ t("nav.logout") }}
118120
</span>
119121
</a>

‎Frontend/components/SupervisorStudentList/SupervisorStudentList.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,18 @@ const emailAddress = ref("");
8383
const clearInput = ref(false);
8484
const emailDomain = "fhstp.ac.at";
8585
86+
8687
const updateMail = (value: string) => {
8788
emailAddress.value = value;
8889
};
8990
90-
const editButtonLabel = computed(() => (isEditing.value ? "Done" : "Edit"));
91-
const editButtonIcon = computed(() => (isEditing.value ? "check" : "edit"));
91+
const editButtonLabel = computed(() => {
92+
return isEditing.value ? t('generic.done') : t('generic.edit');
93+
});
94+
95+
const editButtonIcon = computed(() => {
96+
return isEditing.value ? "check" : "edit";
97+
});
9298
9399
const confirm = async () => {
94100
if (!emailAddress.value) return;

0 commit comments

Comments
 (0)