streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

+color input

Browse source
This commit is contained in:
Miki 2023-12-29 16:58:39 +00:00
parent 10dfefbbb0
commit d7e9576bb7
3 changed files with 38 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/lib/color.svelte Normal file
View file

@ -0,0 +1,27 @@
<script>
import { colors } from '$lib/stores/colors.js';
export let label;
export let id;
export let value;
</script>
<label class="label" for={id}>{label}</label>
<select name={id} {id} bind:value style="background-color: {value}">
{#each $colors as color}
<option value={color} style="background-color: {color}">{color}</option>
{/each}
</select>
<style>
.label {
border: 2px solid #555;
background-color: gray;
border-radius: 8px;
padding: 2px;
}
select {
font-size: 1.2rem;
}
</style>

72
frontend/src/routes/setup/+page.svelte
View file

@ -4,9 +4,10 @@
import { categories } from '$lib/stores/categories.js';
import { rounds } from '$lib/stores/rounds.js';
import { colors } from '$lib/stores/colors.js';
import Number from '$lib/number.svelte'
import Input from '$lib/input.svelte'
import Select from '$lib/select.svelte'
import Number from '$lib/number.svelte';
import Input from '$lib/input.svelte';
import Select from '$lib/select.svelte';
import Color from '$lib/color.svelte';
import Button from '../../lib/button.svelte';
$: surfers = 2;
@ -182,86 +183,29 @@
<div class="container">
<div class="heat">
<Select label="Round" id="round" bind:value={heat.round} options={$rounds} />
<!-- <label class="label" for="round">Round</label>
<select name="round" id="round" bind:value={heat.round}>
{#each $rounds as round}
<option value={round}>{round}</option>
{/each}
</select> -->
<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
<!-- <label class="label" for="number">Number</label>
<input bind:value={heat.number} id="number" type="number" min="1" max="20" /> -->
<Select label="Category" id="category" options={$categories} bind:value={heat.category} />
<!-- <label class="label" for="category">Category</label>
<select name="category" id="category" bind:value={heat.category}>
{#each $categories as category}
<option value={category}>{category}</option>
{/each}
</select> -->
<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
<!-- <label class="label" for="timer">Duration</label>
<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" /> -->
<!-- on:keydown={(event) => {event.preventDefault()}} -->
</div>
<hr />
<div class="controller">
<Button handleClick={addSurfers} label="+" />
<!-- <button
class="plus"
on:click={() => {
addSurfers();
}}>+</button
> -->
<span class="surfers">{surfers}</span>
<Button handleClick={removeSurfers} label="-" />
<!-- <button
class="plus"
on:click={() => {
removeSurfers();
}}>-</button
> -->
</div>
{#each Array(surfers) as _, surfer}
<div class="surfer">
<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
<!-- <label class="label" for="name{surfer}">Name</label>
<input
bind:value={surfer_list[surfer].name}
on:change={capitalize(surfer_list[surfer], 'name')}
id="name{surfer}"
type="text"
/> -->
<Select id="color{surfer}" label="Color" options={$colors} bind:value={surfer_list[surfer].color} selectStyle="background-color: {surfer_list[surfer].color};"/>
<!-- <label class="label" for="color{surfer}">Color</label>
<select
name="color"
id="color{surfer}"
bind:value={surfer_list[surfer].color}
style="background-color: {surfer_list[surfer].color};"
>
{#each $colors as color}
<option value={color} style="background-color: {color};">{color}</option>
{/each}
</select> -->
<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
<Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} />
</div>
{/each}
</div>
<button
class="plus"
on:click={() => {
save();
}}>SAVE</button
>
<button
class="plus"
on:click={() => {
resetHeat();
}}>RESET</button
>
<Button handleClick={save} label="SAVE" />
<Button handleClick={resetHeat} label="RESET" />
<hr />
{#each heats as h, id}
<div class="surfer">

3
frontend/src/routes/surfers/+page.svelte
View file

@ -3,7 +3,7 @@
import Button from '$lib/button.svelte';
import Select from '$lib/select.svelte';
import Input from '$lib/input.svelte';
import Number from "$lib/number.svelte"
import Number from '$lib/number.svelte';
import { categories } from '$lib/stores/categories.js';
let surfer = {
@ -26,7 +26,6 @@
<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
<Number label="Heat" id="heat" min="1" max="20" bind:value={surfer.num} />
</div>
<Button handleClick={onclick} title="SAVE"></Button>