Skip to content

Commit

Permalink
Add banner for SA participation request
Browse files Browse the repository at this point in the history
  • Loading branch information
StefanieJaeger committed Sep 25, 2024
1 parent 2acc903 commit 6e2ade5
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 1 deletion.
81 changes: 81 additions & 0 deletions src/components/SAToastNotification.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<transition
enter-active-class="duration-500 ease"
enter-from-class="transform opacity-0"
leave-active-class="duration-500 ease"
leave-to-class="transform opacity-0"
>
<div
v-if="isActive"
class="rounded p-4 mb-2 bg-pink-600 text-white"
>
<p><b>Gestalte den Planer von morgen mit!</b></p>
<span v-if="!isExpanded">Wir suchen Teilnehmer für eine UX-Studie im Rahmen unserer SA zum Planer.</span>
<span v-if="isExpanded">
Für unsere SA suchen wir Teilnehmende für Interviews, Umfragen oder Tagebuchstudien.
Interesse? Melde dich bei uns!
Danke, Stefi &amp; Laura
</span>
<button
class="absolute right-2 top-2"
type="button"
@click="dismiss()"
>
<font-awesome-icon
:icon="['fa', 'circle-xmark']"
size="lg"
/>
</button>
<button
v-if="!isExpanded"
class="block rounded bg-slate-200/50 py-1 px-2 mt-2 hover:bg-slate-300/50 transition-colors duration-75"
type="button"
@click="toggleExpand()"
>
Mehr
</button>
<button
v-if="isExpanded"
class="block rounded bg-slate-200/50 py-1 px-2 mt-2 hover:bg-slate-300/50 transition-colors duration-75"
type="button"
@click="participate()"
>
Teilnehmen
</button>
</div>
</transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
const SA_TOAST_DISMISSED_KEY = 'sa_toast_dismissed';
export default defineComponent({
name: 'SAToastNotification',
data() {
return {
isActive: false,
isExpanded: false,
}
},
async mounted() {
const saToastDismissed = localStorage.getItem(SA_TOAST_DISMISSED_KEY);
this.isActive = !saToastDismissed;
},
methods: {
toggleExpand() {
this.isExpanded = !this.isExpanded;
},
dismiss() {
localStorage.setItem(SA_TOAST_DISMISSED_KEY, `${true}`);
this.isActive = false;
},
participate() {
/* eslint-disable-next-line max-len */
window.open("https://teams.microsoft.com/l/team/19%3A6zuS6jbWX4asXCCg1QzZbuFL4SC9prIAPL4haU5_bLg1%40thread.tacv2/conversations?groupId=3740cce2-50c5-4f44-9211-21f735b6c827&tenantId=a6e70fa3-1c7a-4aa2-a25e-836eea52ca22");
}
}
});
</script>
6 changes: 5 additions & 1 deletion src/views/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
@on-dismiss="removeUnknownModulesFromUrl"
/>
</div>
<div class="fixed top-2 right-2 ml-2 z-50 md:w-1/4">
<SAToastNotification />
</div>
<div class="flex space-x-2 overflow-auto before:m-auto after:m-auto p-4">
<SemesterComponent
v-for="semester in semesters"
Expand Down Expand Up @@ -127,6 +130,7 @@ import SemesterComponent from '../components/Semester.vue';
import FocusComponent from '../components/Focus.vue';
import BeautifulProgressIndicator from '../components/BeautifulProgressIndicator.vue';
import ToastNotification from '../components/ToastNotification.vue';
import SAToastNotification from '../components/SAToastNotification.vue';
import {getColorForCategoryId} from '../helpers/color-helper';
import type {Category, Focus, Module, Semester, UnknownModule} from '../helpers/types';
import {parseQuery} from "vue-router";
Expand All @@ -141,7 +145,7 @@ const currentSemester = SemesterInfo.now();
export default defineComponent({
name: 'Home',
components: { SemesterComponent, FocusComponent, BeautifulProgressIndicator, ToastNotification },
components: { SemesterComponent, FocusComponent, BeautifulProgressIndicator, ToastNotification, SAToastNotification },
data() {
return {
startSemester: undefined as SemesterInfo | undefined,
Expand Down

0 comments on commit 6e2ade5

Please sign in to comment.