💩 dynamically import answers

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

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

@@ -1,34 +1,62 @@
 <script lang="ts">
     import UserFormInput from "../../userform/UserFormInput.svelte";
-    import { convertAnswerData } from "$lib/convertAnswerData";
+    import { convertAnswerDataToNumeric, convertAnswerDataToString } from "$lib/convertAnswerData";
 	import { onMount } from "svelte";
 
     export let answerText:string
     export let answerNum:number
+    export let answerID:number
+
     let answeredAll:boolean
     
     let knowledge:string
     let empathy:string
     let helpfulness:string
 
-    const handleFormUpdate = (category:string, value:string) => {
+    const handleFormUpdate = () => {
         if (knowledge != "" && empathy != "" && helpfulness != "") {
             answeredAll = true
         }
 
-        let numericValue = convertAnswerData(value)
+        let knowledgeNumeric = convertAnswerDataToNumeric(knowledge)
-        switch (category) {
+        let empathyNumeric = convertAnswerDataToNumeric(empathy)
-            case "knowledge":
+        let helpfulnessNumeric = convertAnswerDataToNumeric(helpfulness)
-                knowledge = numericValue
-        }
 
-        return ""
+        let allFormAnswers = localStorage.getItem("allFormAnswers")
+
+        // First time submitting answer. Create map-array and add it to localstorage
+        if (!allFormAnswers) {
+            const formAnswer = new Map()
+            formAnswer.set(answerID, [knowledgeNumeric, empathyNumeric, helpfulnessNumeric])
+            let allFormAnswers = Array.from(formAnswer.entries())
+            localStorage.setItem('allFormAnswers', JSON.stringify(allFormAnswers));
+        } else {
+            let existingFormAnswers = JSON.parse(allFormAnswers);
+            let retrievedFormAnswers = new Map(existingFormAnswers)
+            retrievedFormAnswers.set(answerID, [knowledgeNumeric, empathyNumeric, helpfulnessNumeric])
+            let newFormAnswers = Array.from(retrievedFormAnswers.entries())
+            localStorage.setItem('allFormAnswers', JSON.stringify(newFormAnswers));
+        }
     }
 
     onMount(() => {
+        let allFormAnswers:string | null = localStorage.getItem("allFormAnswers")
+
+        if (allFormAnswers) {
+            let existingFormAnswers = JSON.parse(allFormAnswers);
+            let retrievedFormAnswers:Map<number, number[]> = new Map(existingFormAnswers)
+            let formAnswers = retrievedFormAnswers.get(answerID)
+            if (formAnswers) {
+                knowledge = convertAnswerDataToString(formAnswers[0])
+                empathy = convertAnswerDataToString(formAnswers[1])
+                helpfulness = convertAnswerDataToString(formAnswers[2])
+            }
+        } else {
             knowledge=""
             empathy=""
             helpfulness=""
+        }
+
     })
 
 </script>
@@ -41,8 +69,8 @@
         </div>
     </div>
     <div class="flex flex-col justify-start items-center gap-6">
-        <UserFormInput formData={knowledge} on:update={(e) => knowledge = e.detail} inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        <UserFormInput formData={knowledge} on:update={(e) => {knowledge = e.detail; handleFormUpdate()}} inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
-        <UserFormInput formData={empathy} on:update={(e) => empathy = e.detail} inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        <UserFormInput formData={empathy} on:update={(e) => {empathy = e.detail; handleFormUpdate()}} inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
-        <UserFormInput formData={helpfulness} on:update={(e) => helpfulness = e.detail} inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        <UserFormInput formData={helpfulness} on:update={(e) => {helpfulness = e.detail; handleFormUpdate()}} inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
     </div>
 </div>