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

✨ added POST-endpoint for userform

Browse source 
Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-12-21 19:31:14 +01:00
parent b78003b4fc
commit dd8f22b043
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
7 changed files with 74 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/userform/UserFormInput.svelte
View file

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

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

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

12
frontend/src/components/userform/inputs/RadioButtons.svelte
View file

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

7
frontend/src/components/userform/inputs/Select.svelte
View file

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