+colors
+components
This commit is contained in:
parent
2b694290f2
commit
660c4c08b1
7 changed files with 392 additions and 274 deletions
16
frontend/pnpm-lock.yaml
generated
16
frontend/pnpm-lock.yaml
generated
|
|
@ -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
16
frontend/src/lib/button.svelte
Normal 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
31
frontend/src/lib/input.svelte
Normal 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
26
frontend/src/lib/select.svelte
Normal 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
11
frontend/src/lib/stores/colors.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { readable } from "svelte/store"
|
||||
|
||||
export const colors = readable([
|
||||
"black",
|
||||
"blue",
|
||||
"red",
|
||||
"green",
|
||||
"yellow",
|
||||
"pink",
|
||||
"white",
|
||||
]);
|
||||
|
|
@ -1,65 +1,55 @@
|
|||
<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"
|
||||
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';
|
||||
import { colors } from '$lib/stores/colors.js';
|
||||
|
||||
$: surfers = 2;
|
||||
|
||||
let colors = [
|
||||
"black",
|
||||
"blue",
|
||||
"red",
|
||||
"green",
|
||||
"yellow",
|
||||
"pink",
|
||||
"white",
|
||||
];
|
||||
$: heats = [];
|
||||
let surfer_list = [];
|
||||
$: heat = {};
|
||||
|
||||
$: surfers = 2;
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
|
||||
$: heats = [];
|
||||
let surfer_list = [];
|
||||
$: heat = {};
|
||||
function resetHeat() {
|
||||
surfers = 2;
|
||||
surfer_list = new Array();
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
|
||||
function resetHeat() {
|
||||
surfers = 2;
|
||||
surfer_list = new Array();
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
|
||||
heat = {
|
||||
number: 1,
|
||||
round: '',
|
||||
category: '',
|
||||
timer: 20,
|
||||
surfers: surfer_list
|
||||
}
|
||||
}
|
||||
heat = {
|
||||
number: 1,
|
||||
round: '',
|
||||
category: '',
|
||||
timer: 20,
|
||||
surfers: surfer_list
|
||||
};
|
||||
}
|
||||
|
||||
async function loadHeats() {
|
||||
const res = await fetch(`/api/loadheats`);
|
||||
const data = await res.json();
|
||||
for (let i in data) {
|
||||
for (let i in data) {
|
||||
heats[i] = data[i];
|
||||
console.log(`${i} retval: ${JSON.stringify(data[i])}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteHeat(id) {
|
||||
const res = await fetch(`/api/deleteheat`, {
|
||||
const res = await fetch(`/api/deleteheat`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(heats[id]),
|
||||
headers: {
|
||||
|
|
@ -68,71 +58,71 @@
|
|||
});
|
||||
console.log(`retval: ${JSON.stringify(res)}`);
|
||||
|
||||
console.log(JSON.stringify(heats[id]));
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
console.log(JSON.stringify(heats[id]));
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
}
|
||||
|
||||
function setHeat(id) {
|
||||
resetHeat();
|
||||
resetHeat();
|
||||
console.log(`setHeat: ${id}`);
|
||||
console.log(heats[id]);
|
||||
heat.number = heats[id].number;
|
||||
heat.round = heats[id].round;
|
||||
heat.category = heats[id].category;
|
||||
heat.timer = heats[id].timer;
|
||||
console.log(heats[id]);
|
||||
heat.number = heats[id].number;
|
||||
heat.round = heats[id].round;
|
||||
heat.category = heats[id].category;
|
||||
heat.timer = heats[id].timer;
|
||||
surfer_list = heats[id].surfers;
|
||||
surfers = surfer_list.length;
|
||||
surfers = surfer_list.length;
|
||||
}
|
||||
|
||||
function addSurfers() {
|
||||
surfers++;
|
||||
surfer_list.push({
|
||||
round: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
}
|
||||
function addSurfers() {
|
||||
surfers++;
|
||||
surfer_list.push({
|
||||
round: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
}
|
||||
|
||||
function removeSurfers() {
|
||||
surfers--;
|
||||
if (surfers < 2) surfers = 2;
|
||||
surfer_list.pop();
|
||||
}
|
||||
function removeSurfers() {
|
||||
surfers--;
|
||||
if (surfers < 2) surfers = 2;
|
||||
surfer_list.pop();
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if(hasDuplicateColors(surfer_list)) {
|
||||
alert('Colors must be unique');
|
||||
return;
|
||||
}
|
||||
async function save() {
|
||||
if (hasDuplicateColors(surfer_list)) {
|
||||
alert('Colors must be unique');
|
||||
return;
|
||||
}
|
||||
|
||||
if(surfer_list.length < 2) {
|
||||
alert('Must have at least 2 surfers');
|
||||
return;
|
||||
}
|
||||
if (surfer_list.length < 2) {
|
||||
alert('Must have at least 2 surfers');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.round === '') {
|
||||
alert('Must have a name');
|
||||
return;
|
||||
}
|
||||
if (heat.round === '') {
|
||||
alert('Must have a name');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.category === '') {
|
||||
alert('Must have a category');
|
||||
return;
|
||||
}
|
||||
if (heat.category === '') {
|
||||
alert('Must have a category');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.number === '') {
|
||||
alert('Must have a number');
|
||||
return;
|
||||
}
|
||||
if (heat.number === '') {
|
||||
alert('Must have a number');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.timer === '') {
|
||||
alert('Must have a timer');
|
||||
return;
|
||||
}
|
||||
if (heat.timer === '') {
|
||||
alert('Must have a timer');
|
||||
return;
|
||||
}
|
||||
|
||||
heat.surfers = surfer_list;
|
||||
heat.surfers = surfer_list;
|
||||
|
||||
const res = await fetch(`/api/saveheat`, {
|
||||
method: 'POST',
|
||||
|
|
@ -143,104 +133,142 @@
|
|||
});
|
||||
console.log(`retval: ${JSON.stringify(res)}`);
|
||||
|
||||
console.log(JSON.stringify(heat));
|
||||
console.log(JSON.stringify(heat));
|
||||
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
}
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
}
|
||||
|
||||
function hasDuplicateColors(arr) {
|
||||
const colors = [];
|
||||
function hasDuplicateColors(arr) {
|
||||
const colors = [];
|
||||
|
||||
console.log(JSON.stringify(arr));
|
||||
console.log(JSON.stringify(arr));
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
const color = arr[i].color;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const color = arr[i].color;
|
||||
|
||||
if(colors.includes(color)) {
|
||||
console.log(`duplicate color: ${color}`);
|
||||
return true;
|
||||
}
|
||||
if (colors.includes(color)) {
|
||||
console.log(`duplicate color: ${color}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
colors.push(color);
|
||||
}
|
||||
colors.push(color);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function capitalize(element, elementName) {
|
||||
element[elementName] = element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
|
||||
console.log(`element: ${element[elementName]}`);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
});
|
||||
function capitalize(element, elementName) {
|
||||
element[elementName] =
|
||||
element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
|
||||
console.log(`element: ${element[elementName]}`);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Header title="Heat setup" />
|
||||
|
||||
<div class="container">
|
||||
<div class="heat">
|
||||
<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 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"> <!-- on:keydown={(event) => {event.preventDefault()}} -->
|
||||
</div>
|
||||
<div class="heat">
|
||||
<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 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" />
|
||||
<!-- on:keydown={(event) => {event.preventDefault()}} -->
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="controller">
|
||||
<button class="plus" on:click={() => {addSurfers();}}>+</button>
|
||||
<span class="surfers">{surfers}</span>
|
||||
<button class="plus" on:click={() => {removeSurfers();}}>-</button>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="controller">
|
||||
<button
|
||||
class="plus"
|
||||
on:click={() => {
|
||||
addSurfers();
|
||||
}}>+</button
|
||||
>
|
||||
<span class="surfers">{surfers}</span>
|
||||
<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">
|
||||
<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}
|
||||
<!-- <option value="red" style="background-color: red;">Select color</option> -->
|
||||
<!-- <option value="red" style="background-color: red;">Red</option>
|
||||
{#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"
|
||||
/>
|
||||
<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}
|
||||
<!-- <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>
|
||||
<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</select>
|
||||
<!-- <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>
|
||||
</div>
|
||||
<div class="surfer">
|
||||
<button
|
||||
on:click={() => {
|
||||
setHeat(id);
|
||||
}}>{h.round} {h.number} {h.category}</button
|
||||
>
|
||||
<button
|
||||
class="plus"
|
||||
on:click={() => {
|
||||
deleteHeat(id);
|
||||
}}>X</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- <hr> -->
|
||||
|
|
@ -248,88 +276,84 @@
|
|||
<!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.heat {
|
||||
display: grid;
|
||||
grid-template-columns: auto 2fr auto 2fr;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heat {
|
||||
display:grid;
|
||||
grid-template-columns: auto 2fr auto 2fr;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.heat input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.heat input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.heat select {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.heat select {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.label {
|
||||
border: 2px solid #555;
|
||||
background-color: gray;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid #555;
|
||||
background-color: gray;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
.surfer {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
/* color: lightcyan; */
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.surfer input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.surfer {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
/* color: lightcyan; */
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.surfer select {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.surfer input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
}
|
||||
|
||||
.surfer select {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.plus {
|
||||
border-radius: 8px;
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.surfers {
|
||||
border: 1px solid #111;
|
||||
background-color: yellow;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
}
|
||||
.plus {
|
||||
border-radius: 8px;
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.surfers {
|
||||
border: 1px solid #111;
|
||||
background-color: yellow;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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: ""
|
||||
}
|
||||
let surfer = {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue