✨ completed routing for questions

frontend/src/api/getUserQuestions.ts

@@ -0,0 +1,43 @@
+interface Question {
+	QuestionID: number;
+	QuestionText: string;
+}
+
+interface Answer {
+	AnswerID: number;
+	QuestionID: number;
+	IsChatGPT: boolean;
+	AnswerText: string;
+}
+
+interface QuestionAnswerPair {
+	Question: Question;
+	Answers: Answer[];
+}
+
+interface QAData {
+	questions: QuestionAnswerPair[];
+}
+
+export const getUserQuestions = (respondentID: number): Promise<QAData> => {
+	let url = `http://localhost:8080/userquestions?respondentID=${respondentID}`;
+
+	const response = fetch(url, {
+		method: "GET",
+	})
+		.then((response) => {
+			if (!response.ok) {
+				throw new Error(`HTTP error! Status: ${response.status}`);
+			}
+			return response.json();
+		})
+		.then((data) => {
+			console.log(data);
+			localStorage.setItem("userQuestions", JSON.stringify(data));
+			return data;
+		})
+		.catch((error) => {
+			console.log(error);
+		});
+	return response;
+};

frontend/src/api/postUserformData.ts

@@ -7,7 +7,7 @@ export const postUserformData = (
 	education: string,
 	healthcare_personnel: string,
 	gender: string
-): postUserformDataReponse => {
+): Promise<postUserformDataReponse> => {
 	let url = "http://localhost:8080/submitform";
 	let personnel = healthcare_personnel == "Ja" ? true : false;
 

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

@@ -1,13 +1,15 @@
-<script>
+<script lang="ts">
     import UserFormInput from "../../userform/UserFormInput.svelte";
+    
+    export let answerText:string
+
 </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>
         <div class="bg-secondary p-6 rounded-xl text-sm">
-            Hei,
+            {answerText}
-            Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
         </div>
     </div>
     <div class="flex flex-col justify-start items-center gap-6">

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

@@ -1,5 +1,7 @@
-<script>
+<script lang="ts">
     import CircleExclamation from "../../../components/svg/CircleExclamation.svelte";
+
+    export let formQuestion:string
 </script>
 
 <div class="flex justify-center items-center h-20">
@@ -7,7 +9,7 @@
     <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>
         <div class="border-r-2 border-primary h-24"></div>
-        <p class="text-sm">Hvis man begynner skabbehandling før man har fått symptomer, men får symptomer iløpet av den uka før man skal smøre seg igjen etter 7 dager, har da ikke første smøringen virket?</p>
+        <p class="text-sm">{formQuestion}</p>
     </div>
     <div class="flex justify-end pr-20 items-center w-1/3">
         <a class="-" href="/errorreport">

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

@@ -1,6 +1,5 @@
 <script lang="ts">
     export let text: string;
-    export let url: string;
     export let filled = false;
     export let onclick: () => {};
 
@@ -11,4 +10,4 @@
     font-bold uppercase border-primary border-2 rounded-full px-8 py-3`
 </script>
 
-<a href={url}><button class={style} on:click={onclick}>{text}</button></a>
+<button class={style} on:click={onclick}>{text}</button>

frontend/src/routes/+page.svelte

@@ -15,7 +15,9 @@
             </ul>
         </div>
         <div class="flex justify-center items-center w-2/5">
-            <ButtonComponent text="Start undersøkelse" url="/userform" filled={false} />
+            <a href="/userform">
+                <ButtonComponent text="Start undersøkelse" filled={false} />
+            </a>
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">

frontend/src/routes/form/+page.server.ts

@@ -1,12 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load({ params }) {
-	const post = await getPostFromDatabase(params.slug);
-
-	if (post) {
-		return post;
-	}
-
-	error(404, 'Not found');
-}

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

@@ -1,24 +0,0 @@
-<script>
-    import FormHeader from "../../components/form/header/FormHeader.svelte";
-    import AnswerBox from "../../components/form/answerbox/AnswerBox.svelte";
-	import Footer from "../../components/form/footer/Footer.svelte";
-</script>
-
-<div class="flex flex-col h-full">
-    <FormHeader />
-    <div class="flex h-full justify-between gap-12">
-        <AnswerBox />
-        <AnswerBox />
-    </div>
-    <Footer />
-</div>
-
-<style lang="postcss">
-    :root {
-        color: theme(colors.content);
-        
-    }
-    p {
-        font-size: medium;
-    }
-</style>

frontend/src/routes/form/[slug]/+page.server.ts

@@ -0,0 +1,10 @@
+import { error } from "@sveltejs/kit";
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	let questionNumber = params;
+
+	if (questionNumber) return questionNumber;
+
+	error(404, "Not found");
+}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+    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;
+
+    let formQuestion: string = ""
+    let questionAnswer1: string = ""
+    let questionAnswer2: string = ""
+
+    onMount(async () => {
+        const questionNumber = data.slug
+        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)
+        };  
+    })
+</script>
+
+<div class="flex flex-col h-full">
+    <FormHeader formQuestion={formQuestion}/>
+    <div class="flex h-full justify-between gap-12">
+        <AnswerBox answerText={questionAnswer1}/>
+        <AnswerBox answerText={questionAnswer2}/>
+    </div>
+    <Footer />
+</div>
+
+<style lang="postcss">
+</style>

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

@@ -3,16 +3,22 @@
     import ArrowBack from "../../components/svg/ArrowBack.svelte";
 	import ButtonComponent from "../../components/userform/inputs/ButtonComponent.svelte";
 	import { postUserformData } from "../../api/postUserformData";
+	import { getUserQuestions } from "../../api/getUserQuestions";
+    import { goto } from "$app/navigation";
+
 
     let age: string = "18-20"
     let education: string = "PhD"
     let healthcare_personnel: string = "Ja"
     let gender: string = "Mann"
 
+    let firstUserQuestion: number = 0
+
     const handleUserformSubmit = async (age: string, education: string, healthcare_personnel: string, gender: string) => {
         const response = await postUserformData(age, education, healthcare_personnel, gender)
+        const userQuestions = await getUserQuestions(response.respondentID)
         
-        await getUserQuestions(response.respondentID)
+        goto("form/0")
     }
 </script>
 
@@ -34,7 +40,7 @@
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">
-        <ButtonComponent text="Start undersøkelse" url="/form" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender)} />
+        <ButtonComponent text="Start undersøkelse" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender)} />
     </div>
 </div>