admon code for results

components/MainPoll.vue

@@ -21,7 +21,7 @@
                         réaliser la distribution des œufs,
                     </li>
                     <li>
-                        être Référent d’un resultsproduit.
+                        être Référent d’un produit.
                     </li>
                     <li>
                         être Référent du local de distribution (si officiellement créé), Référent Impression,
@@ -150,25 +150,26 @@
                 9) <b>Cas par cas :</b> Colette Payen-Vigne,Valérie Lambert, et Laura Math nous font par de leur
                 impossibilité de réaliser les permanences de distribution les vendredi soir.
                 <div>
-                    → Valérie : Depuis 4 ans elle s’occupe des cerises en été et elle nous dit que ça occupe plus que 4
+                    9.1) → Valérie : Depuis 4 ans elle s’occupe des cerises en été et elle nous dit que ça occupe plus
+                    que 4
                     distributions, et donc qu’en terme d’engagement, elle fait sa part.
 
-                    <component :is="questionComponent" question-id="9-Valérie" :results="results"
+                    <component :is="questionComponent" question-id="9.1" :results="results"
                         :values="['Je suis ok avec ça.', 'Non, je ne suis pas d’accord.']"
                         :colors="['#87E169', '#FF824B']" />
                 </div>
                 <div>
-                    → Laura : elle est référente Viande pour la ferme de Bellevue des produits, et nous dit avoir
+                    9.2) → Laura : elle est référente Viande pour la ferme de Bellevue des produits, et nous dit avoir
                     trouver une organisation pour faire des permanences de distribution le vendredi soir.
 
-                    <component :is="questionComponent" question-id="9-Laura" :results="results"
+                    <component :is="questionComponent" question-id="9.2" :results="results"
                         :values="['Je suis ok avec ça.', 'Non, je ne suis pas d’accord.']"
                         :colors="['#87E169', '#FF824B']" />
                 </div>
                 <div>
-                    → Colette : elle propose de distribuer les œufs de temps en temps, pour faire sa part.
+                    9.3) → Colette : elle propose de distribuer les œufs de temps en temps, pour faire sa part.
 
-                    <component :is="questionComponent" question-id="9-Colette" :results="results"
+                    <component :is="questionComponent" question-id="9.3" :results="results"
                         :values="['Je suis ok avec ça.', 'Non, je ne suis pas d’accord.']"
                         :colors="['#87E169', '#FF824B']" />
                 </div>

components/QuestionChoice.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="emphased">
+        <div>
+            <input class="hidden" checked ref="input" type="radio" value="unset" :name="questionId">
+        </div>
         <RadioButton v-for="(val, index) in values" :key="index" :index="index" :question-id="questionId" :val="val"
             :color="colors[index] ?? 'unset'" />
     </div>
@@ -32,4 +35,8 @@ const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"]
 .emphased div:last-child {
     border-right: 1px solid #444;
 }
+
+.hidden {
+    display: none;
+}
 </style>

middleware/vote.global.ts

@@ -3,10 +3,11 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
 
   const code = to.query.code;
   if (to.path === "/poll") {
+    console.log(`${runtimeConfig.public.apiBase}/check/${code}`)
     const { error } = await useFetch(`${runtimeConfig.public.apiBase}/check/${code}`);
     if (error.value && error.value.statusCode !== 200) {
       if(error.value.statusCode == 403){
-        return navigateTo({path:"/results", query:to.query});
+        return navigateTo({path:"/finished", query:to.query});
       }
       throw createError({
         statusCode: error.value.statusCode,
@@ -17,7 +18,18 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     return;
   }
 
+  if(to.path === "/finished"){
+    return
+  }
+
   if(to.path === "/results"){
+    if(code != "fc6d9f50-68af-4df5-95d4-36745c2938c9"){
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Invalid code",
+        message: "Vous ne pouvez pas accéder aux résultats avec ce code !"
+      });
+    }
     return
   }
 

pages/finished.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        Merci d'avoir voté !
+        <br />
+        L'organisateur du sondage vous communiquera les résultats prochainement.
+    </div>
+
+</template>

pages/poll.vue

@@ -1,7 +1,8 @@
 <template>
   <MainPoll :question-component="QuestionChoice" @submit="submitForm">
     <template #submit>
-      <button type="submit" id="form-submit">Valider</button>
+      <div id="error">{{ errorMessage }}</div>
+      <button id="form-submit" type="submit">Valider</button>
     </template>
   </MainPoll>
 </template>
@@ -15,22 +16,34 @@ const runtimeConfig = useRuntimeConfig()
 
 const route = useRoute()
 
+const errorMessage = ref("")
+
+
 async function submitForm(e: Event) {
   const target = e.target
   if (!target || !(target instanceof HTMLFormElement)) {
     throw Error("Form target not found")
   }
+  const formObject = Object.fromEntries(new FormData(target))
+  const filtered = Object.keys(Object.fromEntries(Object.entries(formObject).filter(([key, value]) => value == "unset"
+  ))).sort((a, b) => (Number(a) || Number(a[0])) - (Number(b) || Number(b[0])))
+  console.log(filtered)
+  if (filtered.length > 0) {
+    errorMessage.value = `Vous n'avez pas répondu à toutes les questions ! Veuillez répondre aux questions suivantes : ${filtered.join(", ")}`
+    return
+  }
   await $fetch(`${runtimeConfig.public.apiBase}/vote/${route.query.code}`, {
     method: "POST",
     body: Object.fromEntries(new FormData(target))
   })
 
-  navigateTo({ path: "/results", query: route.query })
+  navigateTo({ path: "/finished", query: route.query })
 }
 </script>
 
 <style>
 #form-submit {
+  cursor: pointer;
   padding: .375rem .75rem;
   border-width: 0px;
   border-color: rgb(0, 0, 0);
@@ -39,4 +52,8 @@ async function submitForm(e: Event) {
   color: white;
   font-size: 1em;
 }
+
+#error {
+  color: #E94A4D;
+}
 </style>