From c15488a725f744b54336eaee0f89f653e7a55290 Mon Sep 17 00:00:00 2001
From: Rien Maertens <rien.maertens@posteo.be>
Date: Fri, 17 Jan 2025 14:13:11 +0100
Subject: [PATCH] Add alert to UEQ survey

---
 web/src/components/SurveyAlert.vue    | 30 +++++++++++++++++++++++++++
 web/src/types/imports-components.d.ts |  2 ++
 web/src/views/analysis/overview.vue   |  6 ++++++
 3 files changed, 38 insertions(+)
 create mode 100644 web/src/components/SurveyAlert.vue

diff --git a/web/src/components/SurveyAlert.vue b/web/src/components/SurveyAlert.vue
new file mode 100644
index 000000000..946dd0714
--- /dev/null
+++ b/web/src/components/SurveyAlert.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+
+import { useStorage } from "@vueuse/core";
+import router from "@/router";
+
+const notAfter = new Date("2025-05-01");
+const state = useStorage('dolos-ueq-survey', new Date() < notAfter);
+const surveyLink = "https://ugent.qualtrics.com/jfe/form/SV_6QpMmrEuuoGSMWW";
+const goAndHide = () => {
+  state.value = false;
+  router.push(surveyLink);
+}
+
+</script>
+
+<template>
+  <v-alert
+      v-model="state"
+      title="Help Dolos!"
+      type="info"
+      closable
+  >
+    Give your honest opinion about Dolos by filling out this short survey
+    <v-chip color="default" variant="outlined" :href="surveyLink" :onclick="goAndHide"><b>Take the survey!</b></v-chip>
+  </v-alert>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/web/src/types/imports-components.d.ts b/web/src/types/imports-components.d.ts
index bac439083..ffa882dd8 100644
--- a/web/src/types/imports-components.d.ts
+++ b/web/src/types/imports-components.d.ts
@@ -33,6 +33,7 @@ declare module 'vue' {
     PairCodeMatch: typeof import('./../components/pair/PairCodeMatch.vue')['default']
     PairCodeMatchEditor: typeof import('./../components/pair/PairCodeMatchEditor.vue')['default']
     PairsTable: typeof import('./../components/pair/PairsTable.vue')['default']
+    QuestionnaireAlert: typeof import('./../components/QuestionnaireAlert.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SimilarityDisplay: typeof import('./../components/SimilarityDisplay.vue')['default']
@@ -44,6 +45,7 @@ declare module 'vue' {
     SubmissionHistogram: typeof import('./../components/submission/SubmissionHistogram.vue')['default']
     SubmissionsPairsTable: typeof import('./../components/submission/SubmissionsPairsTable.vue')['default']
     SubmissionsTable: typeof import('./../components/submission/SubmissionsTable.vue')['default']
+    SurveyAlert: typeof import('./../components/SurveyAlert.vue')['default']
     UploadFormCard: typeof import('./../components/upload/UploadFormCard.vue')['default']
     UploadInput: typeof import('./../components/upload/UploadInput.vue')['default']
     UploadsTable: typeof import('./../components/upload/UploadsTable.vue')['default']
diff --git a/web/src/views/analysis/overview.vue b/web/src/views/analysis/overview.vue
index 74c06fa5f..16bd6c44a 100644
--- a/web/src/views/analysis/overview.vue
+++ b/web/src/views/analysis/overview.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <SurveyAlert></SurveyAlert>
     <div class="hero">
       <h2 v-if="reportName" class="hero-title">
         {{ reportName }}
@@ -241,6 +242,7 @@ import {
   usePairStore,
   useMetadataStore,
 } from "@/api/stores";
+import router from "@/router";
 
 const apiStore = useApiStore();
 const fileStore = useFileStore();
@@ -319,6 +321,10 @@ const calculateBinColor = (x0: number, x1: number): string => {
   // x1 represents the end value of the bin.
   return x1 <= apiStore.cutoff ? "rgba(25, 118, 210, 0.25)" : "#1976D2";
 };
+
+const gotoSurvey = () => {
+  router.push("https://ugent.qualtrics.com/jfe/form/SV_6QpMmrEuuoGSMWW");
+}
 </script>
 
 <style lang="scss" scoped>