✨ 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;