Add alert to UEQ survey

Author: rien

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>

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']

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>