✨ added POST-endpoint for userform

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

frontend/src/api/postFormData.ts

@@ -0,0 +1,22 @@
+export const postFormData = (
+	age: string,
+	education: string,
+	healthcare_personnel: string,
+	gender: string
+) => {
+	let url = "http://localhost:8080/submitform";
+	let personnel = healthcare_personnel == "Ja" ? true : false;
+
+	const response = fetch(url, {
+		method: "POST",
+		body: JSON.stringify({
+			age: age,
+			education: education,
+			healthcare_personnel: personnel,
+			gender: gender,
+		}),
+	}).catch((error) => {
+		console.log(error);
+	});
+	return response;
+};

frontend/src/components/userform/UserFormInput.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    function handleFormChange(selectedValue: string) {
+        dispatch('update', selectedValue);
+    }
+
     export let inputType:string
     export let label:string
     export let options: string[]
+    export let formData: string
 	import RadioButtons from "./inputs/RadioButtons.svelte"
     import Select from "./inputs/Select.svelte";
 </script>
@@ -9,9 +16,9 @@
 <div class="flex justify-start items-center h-1/4 w-full ">
     <p class="text-primary font-bold w-1/5">{label}:</p>
     {#if inputType == "radio"}
-        <RadioButtons options={options}/>
+        <RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/>
     {/if}
     {#if inputType == "select"}
-        <Select options={options}/>
+        <Select on:update={(e) => handleFormChange(e.detail)} options={options}/>
     {/if}
 </div>

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

@@ -2,14 +2,13 @@
     export let text: string;
     export let url: string;
     export let filled = false;
+    export let onclick: () => {};
 
     let style:string;
 
-    if (!filled) {
-        style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";
-    } else {
-        style = "bg-primary text-bg font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-bg hover:text-primary";
-    }
+    style = `${!filled ? "text-primary hover:bg-primary hover:text-bg" 
+    : "bg-primary text-bg hover:bg-bg hover:text-primary"} 
+    font-bold uppercase border-primary border-2 rounded-full px-8 py-3`
 </script>
 
-<a href={url}><button class={style}>{text}</button></a>
+<a href={url}><button class={style} on:click={onclick}>{text}</button></a>

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

@@ -1,12 +1,18 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    function handleButtonClick(selectedValue: string) {
+        dispatch('update', selectedValue);
+    }
     export let options:string[]
+    export let selected: string
 </script>
 
 <div class="flex justify-between w-full">
 {#each options as data, index (data)}
-    <div class="flex flex-col justify-start items-center w-12 text-center">
-        <button name={data} class="h-6 w-6 rounded-full border-2 border-primary hover:bg-primary"></button>
+    <button name={data} on:click={() => handleButtonClick(data)} class="flex flex-col justify-start items-center w-12 text-center">
+        <div class={`${selected == data && "bg-primary"} h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}></div>
         <label class="text-primary text-sm mt-1" for={data}>{data}</label>
-    </div>
+    </button>
 {/each}
 </div>

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

@@ -1,9 +1,14 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    function handleButtonClick(selectedValue: string) {
+        dispatch('update', selectedValue);
+    }
     export let options:string[]
 </script>
 
 <select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
     {#each options as data, index (data)}
-        <option id={data}>{data}</option>
+        <option on:click={() => handleButtonClick(data)} id={data}>{data}</option>
     {/each}
 </select>

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

@@ -1,7 +1,13 @@
-<script>
+<script lang="ts">
     import UserFormInput from "../../components/userform/UserFormInput.svelte";
     import ArrowBack from "../../components/svg/ArrowBack.svelte";
 	import ButtonComponent from "../../components/userform/inputs/ButtonComponent.svelte";
+	import { postFormData } from "../../api/postFormData";
+
+    let age: string = "18-20"
+    let education: string = "PhD"
+    let healthcare_personnel: string = "Ja"
+    let gender: string = "Mann"
 </script>
 
 <div class="flex flex-col justify-center gap-20 h-full ">
@@ -16,14 +22,14 @@
             <p>Vi vil igjen nevne at denne undersøkelsen er helt anonym og informasjonen vil kun bli brukt til å forbedre vår tjeneste.</p>  
         </div>
         <div class="flex flex-col justify-start items-center w-2/4">
-            <UserFormInput inputType="radio" label="Alder" options={["18-20", "20-30", "30-40", "40-50", "50-60"]}/>
-            <UserFormInput inputType="select" label="Utdanningsgrad" options={["PhD", "Master", "Fagbrev", "Bachelor"]}/>
-            <UserFormInput inputType="radio" label="Helsepersonell" options={["Ja", "Nei"]}/>
-            <UserFormInput inputType="radio" label="Kjønn" options={["Mann", "Kvinne", "Annet"]}/>
+            <UserFormInput formData={age} on:update={(e) => age = e.detail} inputType="radio" label="Alder" options={["18-20", "20-30", "30-40", "40-50", "50-60"]}/>
+            <UserFormInput formData={education} on:update={(e) => education = e.detail} inputType="select" label="Utdanningsgrad" options={["PhD", "Master", "Fagbrev", "Bachelor"]}/>
+            <UserFormInput formData={healthcare_personnel} on:update={(e) => healthcare_personnel = e.detail} inputType="radio" label="Helsepersonell" options={["Ja", "Nei"]}/>
+            <UserFormInput formData={gender} on:update={(e) => gender = e.detail} inputType="radio" label="Kjønn" options={["Mann", "Kvinne", "Annet"]}/>
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">
-        <ButtonComponent text="Start undersøkelse" url="/form" filled={true} />
+        <ButtonComponent text="Start undersøkelse" url="/form" filled={true} onclick={() => postFormData(age, education, healthcare_personnel, gender)} />
     </div>
 </div>