✨ navigation between questions okaydokay

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

frontend/src/components/form/answerbox/AnswerBox.svelte

@@ -2,12 +2,13 @@
     import UserFormInput from "../../userform/UserFormInput.svelte";
     
     export let answerText:string
+    export let answerNum:number
 
 </script>
 
 <div class="flex flex-col">
     <div class="flex flex-col gap-2 mb-6">
-        <h1 class="text-xl text-primary font-bold text-center">Svar 2:</h1>
+        <h1 class="text-xl text-primary font-bold text-center">Svar {answerNum}:</h1>
         <div class="bg-secondary p-6 rounded-xl text-sm">
             {answerText}
         </div>

frontend/src/components/form/footer/Footer.svelte

@@ -1,20 +1,30 @@
-<script>
+<script lang="ts">
 	import ArrowChevron from "../../svg/ArrowChevron.svelte";
     import ButtonComponent from "../../userform/inputs/ButtonComponent.svelte";
+    import { goto } from "$app/navigation";
+
+    export let questionNum:number
+
+    const gotoNextPage = async (questionNum: number) => {        
+        goto(`${questionNum + 1}`)
+    }
+
+    const gotoPrevPage = async (questionNum: number) => {
+        goto(`${questionNum - 1}`)
+    }
 </script>
 
 <div class="flex justify-center items-center gap-8">
-    <a href="/">
-        <button class="flex items-center gap-2 text-primary font-semibold">
-            <ArrowChevron width=16 direction="left"/>
-            Forrige spørsmål
-        </button>
-    </a>
-    <ButtonComponent text="Send inn svar" url="/" filled={true} />
-    <a href="/">
-        <button class="flex items-center gap-2 text-primary font-semibold opacity-50">
-            Neste spørsmål
-            <ArrowChevron width=16 direction="right"/>
-        </button>
-    </a>
+    <button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
+        <ArrowChevron width=16 direction="left"/>
+        Forrige spørsmål
+    </button>
+    <button disabled={questionNum == 0 || questionNum % 4 != 0} 
+    class={`${questionNum == 0 || questionNum % 4 != 0 ?  "text-primary opacity-50" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-8 py-3`}>
+            Send inn svar
+    </button>
+    <button disabled={questionNum != 0 && questionNum % 4 == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"}`} on:click={() => gotoNextPage(questionNum)}>
+        Neste spørsmål
+        <ArrowChevron width=16 direction="right"/>
+    </button>
 </div>

frontend/src/components/form/header/FormHeader.svelte

@@ -2,12 +2,13 @@
     import CircleExclamation from "../../../components/svg/CircleExclamation.svelte";
 
     export let formQuestion:string
+    export let questionNum:number
 </script>
 
 <div class="flex justify-center items-center h-20">
     <div class="w-1/3"/>
     <div class="flex justify-center items-center w-2/3 gap-4">
-        <h1 class="text-xl text-primary font-bold text-center">Spørsmål 3</h1>
+        <h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>
         <div class="border-r-2 border-primary h-24"></div>
         <p class="text-sm">{formQuestion}</p>
     </div>

frontend/src/components/userform/inputs/ButtonComponent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     export let text: string;
     export let filled = false;
-    export let onclick: () => {};
+    export let onclick: any;
 
     let style:string;
 

frontend/src/routes/form/[slug]/+page.svelte

@@ -2,7 +2,6 @@
     import FormHeader from "../../../components/form/header/FormHeader.svelte";
     import AnswerBox from "../../../components/form/answerbox/AnswerBox.svelte";
 	import Footer from "../../../components/form/footer/Footer.svelte";
-
     import { onMount } from "svelte"
 
     export let data;
@@ -10,31 +9,36 @@
     let formQuestion: string = ""
     let questionAnswer1: string = ""
     let questionAnswer2: string = ""
+    let questionNumber: number = 0
 
-    onMount(async () => {
-        const questionNumber = data.slug
+    // Reactive statement to react on 'data.slug' changes
+    $: if (data && data.slug !== undefined) {
+        questionNumber = data.slug;
+        updateQuestionData();
+    }
+
+    // Refactored data updating logic into a function
+    function updateQuestionData() {
         let localstoragequestions = localStorage.getItem("userQuestions");
-	    if (localstoragequestions) {
-            let questions = JSON.parse(localstoragequestions).questions
-            console.log(questions)
-            formQuestion = questions[questionNumber].Question.QuestionText
-            questionAnswer1 = questions[questionNumber].Answers[0].AnswerText
-            questionAnswer2 = questions[questionNumber].Answers[1].AnswerText
-            console.log(formQuestion)
-            console.log(questionAnswer1)
-            console.log(questionAnswer2)
-        };  
-    })
+        if (localstoragequestions) {
+            let questions = JSON.parse(localstoragequestions).questions;
+            formQuestion = questions[questionNumber].Question.QuestionText;
+            questionAnswer1 = questions[questionNumber].Answers[0].AnswerText;
+            questionAnswer2 = questions[questionNumber].Answers[1].AnswerText;
+        }
+    }
+
+    // On mount, call the update function
+    onMount(() => {
+        updateQuestionData();
+    });
 </script>
 
 <div class="flex flex-col h-full">
-    <FormHeader formQuestion={formQuestion}/>
+    <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
     <div class="flex h-full justify-between gap-12">
-        <AnswerBox answerText={questionAnswer1}/>
-        <AnswerBox answerText={questionAnswer2}/>
+        <AnswerBox answerNum={1} answerText={questionAnswer1}/>
+        <AnswerBox answerNum={2} answerText={questionAnswer2}/>
     </div>
-    <Footer />
-</div>
-
-<style lang="postcss">
-</style>
+    <Footer questionNum={Number(questionNumber)}/>
+</div>

frontend/src/routes/userform/+page.svelte

@@ -15,6 +15,7 @@
     let firstUserQuestion: number = 0
 
     const handleUserformSubmit = async (age: string, education: string, healthcare_personnel: string, gender: string) => {
+        localStorage.clear()
         const response = await postUserformData(age, education, healthcare_personnel, gender)
         const userQuestions = await getUserQuestions(response.respondentID)