+number
This commit is contained in:
Linux User
parent
660c4c08b1
commit
10dfefbbb0
5 changed files with 73 additions and 31 deletions
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
export let handleClick;
|
||||
export let title;
|
||||
export let label;
|
||||
</script>
|
||||
|
||||
<button class="button" on:click={handleClick}>{title}</button>
|
||||
<button class="button" on:click={handleClick}>{label}</button>
|
||||
|
||||
<style>
|
||||
.button {
|
||||
|
|
|
|||
29
frontend/src/lib/number.svelte
Normal file
29
frontend/src/lib/number.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
export let label
|
||||
export let id
|
||||
export let value
|
||||
export let min = 1;
|
||||
export let max
|
||||
export let step = 1;
|
||||
</script>
|
||||
|
||||
<label class="label" for={id}>{label}</label>
|
||||
<input bind:value={value} id={id} type="number" min={min} max={max} step={step}/>
|
||||
|
||||
<style>
|
||||
.label {
|
||||
border: 2px solid #555;
|
||||
background-color: gray;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
<script>
|
||||
export let label;
|
||||
export let id;
|
||||
export let options;
|
||||
export let options = [];
|
||||
export let value;
|
||||
export let optionStyle = "";
|
||||
export let selectStyle
|
||||
</script>
|
||||
|
||||
<label class="label" for={id}>{label}</label>
|
||||
<select name={id} {id} bind:value>
|
||||
<select name={id} {id} bind:value style={selectStyle}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
<option value={option} style={optionStyle}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +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 Button from '../../lib/button.svelte';
|
||||
|
||||
$: surfers = 2;
|
||||
|
||||
|
|
@ -87,9 +91,12 @@
|
|||
|
||||
function removeSurfers() {
|
||||
surfers--;
|
||||
if (surfers < 2) surfers = 2;
|
||||
if (surfers < 2) {
|
||||
surfers = 2;
|
||||
} else {
|
||||
surfer_list.pop();
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (hasDuplicateColors(surfer_list)) {
|
||||
|
|
@ -174,52 +181,60 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="heat">
|
||||
<label class="label" for="round">Round</label>
|
||||
<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>
|
||||
<label class="label" for="number">Number</label>
|
||||
<input bind:value={heat.number} id="number" type="number" min="1" max="20" />
|
||||
<label class="label" for="category">Category</label>
|
||||
</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>
|
||||
<label class="label" for="timer">Duration</label>
|
||||
<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" />
|
||||
</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
|
||||
<Button handleClick={addSurfers} label="+" />
|
||||
<!-- <button
|
||||
class="plus"
|
||||
on:click={() => {
|
||||
addSurfers();
|
||||
}}>+</button
|
||||
>
|
||||
> -->
|
||||
<span class="surfers">{surfers}</span>
|
||||
<button
|
||||
<Button handleClick={removeSurfers} label="-" />
|
||||
<!-- <button
|
||||
class="plus"
|
||||
on:click={() => {
|
||||
removeSurfers();
|
||||
}}>-</button
|
||||
>
|
||||
> -->
|
||||
</div>
|
||||
|
||||
{#each Array(surfers) as _, surfer}
|
||||
<div class="surfer">
|
||||
<label class="label" for="name{surfer}">Name</label>
|
||||
<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"
|
||||
/>
|
||||
<label class="label" for="color{surfer}">Color</label>
|
||||
/> -->
|
||||
<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}"
|
||||
|
|
@ -229,14 +244,7 @@
|
|||
{#each $colors as color}
|
||||
<option value={color} style="background-color: {color};">{color}</option>
|
||||
{/each}
|
||||
<!-- <option value="red" style="background-color: red;">Select color</option> -->
|
||||
<!-- <option value="red" style="background-color: red;">Red</option>
|
||||
<option value="blue" style="background-color: blue;">Blue</option>
|
||||
<option value="green" style="background-color: green;">Green</option>
|
||||
<option value="yellow" style="background-color: yellow;">Yellow</option>
|
||||
<option value="orange" style="background-color: orange;">Orange</option>
|
||||
<option value="violet" style="background-color: violet;">Violet</option> -->
|
||||
</select>
|
||||
</select> -->
|
||||
<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@
|
|||
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 { categories } from '$lib/stores/categories.js';
|
||||
|
||||
let surfer = {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
category: ''
|
||||
category: '',
|
||||
num: '1'
|
||||
};
|
||||
|
||||
$: value = '';
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue