sidski/helseveileder
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ completed routing for questions

Browse source
This commit is contained in:
haraldnilsen 2024-01-04 19:40:37 +01:00
parent 7e00f24fbd
commit b22140ba3f
11 changed files with 115 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/api/getUserQuestions.ts Normal file
View file

@ -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;
};

2
frontend/src/api/postUserformData.ts
View file

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

8
frontend/src/components/form/answerbox/AnswerBox.svelte
View file

@ -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,
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.
{answerText}
</div>
</div>
<div class="flex flex-col justify-start items-center gap-6">

6
frontend/src/components/form/header/FormHeader.svelte
View file

@ -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">

3
frontend/src/components/userform/inputs/ButtonComponent.svelte
View file

@ -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>

4
frontend/src/routes/+page.svelte
View file

@ -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">

12
frontend/src/routes/form/+page.server.ts
View file

@ -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');
}

24
frontend/src/routes/form/+page.svelte
View file

@ -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>

10
frontend/src/routes/form/[slug]/+page.server.ts Normal file
View file

@ -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");
}

40
frontend/src/routes/form/[slug]/+page.svelte Normal file
View file

@ -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>

10
frontend/src/routes/userform/+page.svelte
View file

@ -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>