From 87865871df4f892e79304ea5e4e113da266a7e9c Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 1 Jun 2025 11:43:00 +0200
Subject: [PATCH] add color and routing

---
 components/QuestionChoice.vue |  6 ++++--
 components/QuestionResult.vue |  7 ++++---
 error.vue                     | 18 ++++++++++++++++++
 middleware/vote.global.ts     | 30 ++++++++++++++++++++++++++++++
 nuxt.config.ts                |  7 ++++++-
 pages/poll.vue                | 33 ++++++++++++++++++++-------------
 pages/results.vue             | 14 +++++++++++---
 7 files changed, 93 insertions(+), 22 deletions(-)
 create mode 100644 error.vue
 create mode 100644 middleware/vote.global.ts

diff --git a/components/QuestionChoice.vue b/components/QuestionChoice.vue
index 29f7545..bbdea2a 100644
--- a/components/QuestionChoice.vue
+++ b/components/QuestionChoice.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="emphased">
-        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
+        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index"
+            :style="{ background: colors[index] }">
             <input type="radio" :value="val" :name="String(questionId)">
             <label :for="`${questionId}-${val}`">{{ val }}</label>
         </div>
@@ -11,10 +12,11 @@
 <script setup lang="ts">
 interface Props {
     values?: string[]
+    colors?: string[]
     questionId: string
 }
 
-const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], questionId } = defineProps<Props>()
+const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], colors = ["#4DB544", "#87E169", "#FFC33C", "#FF824B", "#E94A4D"], questionId } = defineProps<Props>()
 
 </script>
 
diff --git a/components/QuestionResult.vue b/components/QuestionResult.vue
index 92d5b1e..2b6fd9f 100644
--- a/components/QuestionResult.vue
+++ b/components/QuestionResult.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="emphased">
         <div v-for="(amount, val) in filtered_results" :id="`${questionId}-${val}`" :key="val"
-            :style="{ width: `${(amount / total) * 100}%` }">
+            :style="{ width: `${(amount / total) * 100}%`, background: colors[values.indexOf(val)] }">
             <span>({{ amount }}){{ val }}</span>
         </div>
     </div>
@@ -12,11 +12,12 @@
 
 interface Props {
     values?: string[]
+    colors?: string[]
     results: { [question_id: string]: { [values: string]: number } }
     questionId: string
 }
 
-const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], results, questionId } = defineProps<Props>()
+const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], colors = ["#4DB544", "#87E169", "#FFC33C", "#FF824B", "#E94A4D"], results, questionId } = defineProps<Props>()
 
 const filtered_results = computed(() => {
     if (!(questionId in results)) {
@@ -57,7 +58,7 @@ const total = computed(() => Object.values(filtered_results.value).reduce((acc,
 .emphased:after {
     content: "";
     position: absolute;
-    z-index: -1;
+    z-index: 100;
     top: -10px;
     bottom: -10px;
     left: 50%;
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..ad56823
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const { error } = defineProps({
+    error: Object as () => NuxtError
+})
+
+// const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+    <div>
+        <h2>{{ error?.statusCode }}</h2>
+        <div>{{ error?.statusMessage }}</div>
+        <div>{{ error?.message }}</div>
+        <!-- <button @click="handleError">Clear errors</button> -->
+    </div>
+</template>
\ No newline at end of file
diff --git a/middleware/vote.global.ts b/middleware/vote.global.ts
new file mode 100644
index 0000000..ac13fb1
--- /dev/null
+++ b/middleware/vote.global.ts
@@ -0,0 +1,30 @@
+export default defineNuxtRouteMiddleware(async (to, _from) => {
+  const runtimeConfig = useRuntimeConfig()
+
+  const code = to.query.code;
+  if (to.path === "/poll") {
+    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});
+      }
+      throw createError({
+        statusCode: error.value.statusCode,
+        statusMessage: error.value.statusMessage,
+        message: error.value.data.message
+      });
+    }
+    return;
+  }
+
+  if(to.path === "/results"){
+    return
+  }
+
+  // In a real app you would probably not redirect every route to `/`
+  // however it is important to check `to.path` before redirecting or you
+  // might get an infinite redirect loop
+  if (to.path !== "/") {
+    return navigateTo("/");
+  }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 43a52a2..42404d3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,5 +2,10 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/eslint']
+  modules: ['@nuxt/eslint'],
+  runtimeConfig:{
+    public: {
+      apiBase: '/api'
+    }
+  }
 })
\ No newline at end of file
diff --git a/pages/poll.vue b/pages/poll.vue
index 3ea0cee..553f9c2 100644
--- a/pages/poll.vue
+++ b/pages/poll.vue
@@ -1,23 +1,30 @@
 <template>
-    <MainPoll :question-component="QuestionChoice" @submit="submitForm">
-        <template #submit>
-            <button type="submit">Submit</button>
-        </template>
-    </MainPoll>
+  <MainPoll :question-component="QuestionChoice" @submit="submitForm">
+    <template #submit>
+      <button type="submit">Submit</button>
+    </template>
+  </MainPoll>
 </template>
 
 <script setup lang="ts">
 import { MainPoll } from '#components';
 import QuestionChoice from '~/components/QuestionChoice.vue';
 
+
+const runtimeConfig = useRuntimeConfig()
+
+const route = useRoute()
+
 async function submitForm(e: Event) {
-    const target = e.target
-    if (!target || !(target instanceof HTMLFormElement)) {
-        throw Error("Form target not found")
-    }
-    await $fetch("http://localhost:3000/vote/beautifulAccessCode", {
-        method: "POST",
-        body: Object.fromEntries(new FormData(target))
-    })
+  const target = e.target
+  if (!target || !(target instanceof HTMLFormElement)) {
+    throw Error("Form target not found")
+  }
+  await $fetch(`${runtimeConfig.public.apiBase}/vote/${route.query.code}`, {
+    method: "POST",
+    body: Object.fromEntries(new FormData(target))
+  })
+
+  navigateTo({ path: "/results", query: route.query })
 }
 </script>
\ No newline at end of file
diff --git a/pages/results.vue b/pages/results.vue
index 34eeb01..fa29e40 100644
--- a/pages/results.vue
+++ b/pages/results.vue
@@ -10,10 +10,18 @@
 <script setup lang="ts">
 import QuestionResult from '~/components/QuestionResult.vue';
 
-const { data, error } = await useFetch<{ [question_id: string]: { [values: string]: number } }>('http://localhost:3000/results/beautifulAccessCode', {
+const runtimeConfig = useRuntimeConfig()
+
+const route = useRoute()
+
+const { data, error } = await useFetch<{ [question_id: string]: { [values: string]: number } }>(`${runtimeConfig.public.apiBase}/results/${route.query.code}`, {
 })
 
-if (error) {
-    console.log(error.value)
+if (error && error.value) {
+    throw createError({
+        statusCode: error.value.statusCode,
+        statusMessage: error.value.statusMessage,
+        message: error.value.data.message
+    });
 }
 </script>