add color and routing

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>

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>