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

+colors

Browse source 
+components
This commit is contained in:
Miki 2023-12-29 12:07:49 +00:00
parent 2b694290f2
commit 660c4c08b1
7 changed files with 392 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/pnpm-lock.yaml generated
View file

@ -568,16 +568,16 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true
/acorn-jsx@5.3.2(acorn@8.11.2):
/acorn-jsx@5.3.2(acorn@8.11.3):
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies:
acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
acorn: 8.11.2
acorn: 8.11.3
dev: true
/acorn@8.11.2:
resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
/acorn@8.11.3:
resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
engines: {node: '>=0.4.0'}
hasBin: true
dev: true
@ -648,7 +648,7 @@ packages:
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
'@types/estree': 1.0.5
acorn: 8.11.2
acorn: 8.11.3
estree-walker: 3.0.3
periscopic: 3.1.0
dev: true
@ -884,8 +884,8 @@ packages:
resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
acorn: 8.11.2
acorn-jsx: 5.3.2(acorn@8.11.2)
acorn: 8.11.3
acorn-jsx: 5.3.2(acorn@8.11.3)
eslint-visitor-keys: 3.4.3
dev: true
@ -1478,7 +1478,7 @@ packages:
'@ampproject/remapping': 2.2.1
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.20
acorn: 8.11.2
acorn: 8.11.3
aria-query: 5.3.0
axobject-query: 3.2.1
code-red: 1.0.4

16
frontend/src/lib/button.svelte Normal file
View file

@ -0,0 +1,16 @@
<script>
export let handleClick;
export let title;
</script>
<button class="button" on:click={handleClick}>{title}</button>
<style>
.button {
border-radius: 8px;
margin-left: 0.2rem;
margin-right: 0.2rem;
margin-bottom: 8px;
margin-top: 8px;
}
</style>

31
frontend/src/lib/input.svelte Normal file
View file

@ -0,0 +1,31 @@
<script>
export let label;
export let value;
export let id;
function capitalize() {
value = value.charAt(0).toUpperCase() + value.slice(1);
console.log(`element: ${value}`);
}
</script>
<label class="label" for={id}>{label}</label>
<input bind:value on:change={capitalize} {id} type="text" />
<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>

26
frontend/src/lib/select.svelte Normal file
View file

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

11
frontend/src/lib/stores/colors.js Normal file
View file

@ -0,0 +1,11 @@
import { readable } from "svelte/store"
export const colors = readable([
"black",
"blue",
"red",
"green",
"yellow",
"pink",
"white",
]);

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

@ -1,19 +1,9 @@
<script>
import { onMount } from 'svelte';
import Header from "$lib/header-setup.svelte"
import {categories} from "$lib/stores/categories.js"
import {rounds} from "$lib/stores/rounds.js"
let colors = [
"black",
"blue",
"red",
"green",
"yellow",
"pink",
"white",
];
import Header from '$lib/header-setup.svelte';
import { categories } from '$lib/stores/categories.js';
import { rounds } from '$lib/stores/rounds.js';
import { colors } from '$lib/stores/colors.js';
$: surfers = 2;
@ -46,7 +36,7 @@
category: '',
timer: 20,
surfers: surfer_list
}
};
}
async function loadHeats() {
@ -102,32 +92,32 @@
}
async function save() {
if(hasDuplicateColors(surfer_list)) {
if (hasDuplicateColors(surfer_list)) {
alert('Colors must be unique');
return;
}
if(surfer_list.length < 2) {
if (surfer_list.length < 2) {
alert('Must have at least 2 surfers');
return;
}
if(heat.round === '') {
if (heat.round === '') {
alert('Must have a name');
return;
}
if(heat.category === '') {
if (heat.category === '') {
alert('Must have a category');
return;
}
if(heat.number === '') {
if (heat.number === '') {
alert('Must have a number');
return;
}
if(heat.timer === '') {
if (heat.timer === '') {
alert('Must have a timer');
return;
}
@ -154,10 +144,10 @@
console.log(JSON.stringify(arr));
for(let i = 0; i < arr.length; i++) {
for (let i = 0; i < arr.length; i++) {
const color = arr[i].color;
if(colors.includes(color)) {
if (colors.includes(color)) {
console.log(`duplicate color: ${color}`);
return true;
}
@ -169,7 +159,8 @@
}
function capitalize(element, elementName) {
element[elementName] = element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
element[elementName] =
element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
console.log(`element: ${element[elementName]}`);
}
@ -177,7 +168,6 @@
resetHeat();
loadHeats();
});
</script>
<Header title="Heat setup" />
@ -191,7 +181,7 @@
{/each}
</select>
<label class="label" for="number">Number</label>
<input bind:value={heat.number} id="number" type="number" min="1" max="20">
<input bind:value={heat.number} id="number" type="number" min="1" max="20" />
<label class="label" for="category">Category</label>
<select name="category" id="category" bind:value={heat.category}>
{#each $categories as category}
@ -199,24 +189,44 @@
{/each}
</select>
<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()}} -->
<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" />
<!-- on:keydown={(event) => {event.preventDefault()}} -->
</div>
<hr>
<hr />
<div class="controller">
<button class="plus" on:click={() => {addSurfers();}}>+</button>
<button
class="plus"
on:click={() => {
addSurfers();
}}>+</button
>
<span class="surfers">{surfers}</span>
<button class="plus" on:click={() => {removeSurfers();}}>-</button>
<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 bind:value={surfer_list[surfer].name} on:change={capitalize(surfer_list[surfer], "name")} id="name{surfer}" type="text">
<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 name="color" id="color{surfer}" bind:value={surfer_list[surfer].color} style="background-color: {surfer_list[surfer].color};">
{#each colors as color}
<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}
<!-- <option value="red" style="background-color: red;">Select color</option> -->
@ -230,16 +240,34 @@
<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
</div>
{/each}
</div>
<button class="plus" on:click={() => {save();}}>SAVE</button>
<button class="plus" on:click={() => {resetHeat();}}>RESET</button>
<hr>
<button
class="plus"
on:click={() => {
save();
}}>SAVE</button
>
<button
class="plus"
on:click={() => {
resetHeat();
}}>RESET</button
>
<hr />
{#each heats as h, id}
<div class="surfer">
<button on:click={() => {setHeat(id);}}>{h.round} {h.number} {h.category}</button>
<button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
<button
on:click={() => {
setHeat(id);
}}>{h.round} {h.number} {h.category}</button
>
<button
class="plus"
on:click={() => {
deleteHeat(id);
}}>X</button
>
</div>
{/each}
@ -248,13 +276,12 @@
<!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
<style>
.container {
background-color: lightgrey;
}
.heat {
display:grid;
display: grid;
grid-template-columns: auto 2fr auto 2fr;
font-size: 1.3rem;
margin-top: 8px;
@ -289,7 +316,6 @@
padding: 2px;
}
.surfer {
font-size: 1.3rem;
margin-top: 2px;
@ -310,7 +336,6 @@
margin-right: 0.1rem;
padding-top: 2px;
padding-bottom: 2px;
}
.surfer select {
@ -331,5 +356,4 @@
border-radius: 8px;
padding: 5px;
}
</style>

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

@ -1,24 +1,34 @@
<script>
import Header from "$lib/header-setup.svelte"
import {categories} from "$lib/stores/categories.js"
import Header from '$lib/header-setup.svelte';
import Button from '$lib/button.svelte';
import Select from '$lib/select.svelte';
import Input from '$lib/input.svelte';
import { categories } from '$lib/stores/categories.js';
let surfer = {
name: "",
category: ""
firstname: '',
lastname: '',
category: ''
};
$: value = '';
function onclick() {
alert('clicked');
}
</script>
<Header title="Surfer Edit" />
<div class="form">
<label for="name">Name</label>
<input type="text" id="name" bind:value={surfer.name}>
<label for="catrgoty">Category</label>
<select name="category" id="category">
{#each $categories as category}
<option value={category}>{category}</option>
{/each}
</select>
<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} />
</div>
<Button handleClick={onclick} title="SAVE"></Button>
<Button handleClick={onclick} title="Reset"></Button>
<hr />
<label for="surfer">{JSON.stringify(surfer)}</label>