+ stores
This commit is contained in:
parent
f72576878d
commit
646c998fb1
4 changed files with 326 additions and 161 deletions
36
src/lib/stores/categories.js
Normal file
36
src/lib/stores/categories.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { readable } from "svelte/store"
|
||||||
|
|
||||||
|
export const categories = readable([
|
||||||
|
{
|
||||||
|
name: "Under 12 Women",
|
||||||
|
title: "U12 W",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 12 Men",
|
||||||
|
title: "U12 M",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 14 Women",
|
||||||
|
title: "U14 W",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 14 Men",
|
||||||
|
title: "U14 M",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 16 Women",
|
||||||
|
title: "U16 W",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 16 Men",
|
||||||
|
title: "U16 M",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 18 Women",
|
||||||
|
title: "U18 W",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Under 18 Men",
|
||||||
|
title: "U18 M",
|
||||||
|
}
|
||||||
|
])
|
||||||
9
src/lib/stores/colors.js
Normal file
9
src/lib/stores/colors.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { readable } from "svelte/store"
|
||||||
|
|
||||||
|
export const colors = readable([
|
||||||
|
"black",
|
||||||
|
"red",
|
||||||
|
"green",
|
||||||
|
"yellow",
|
||||||
|
"white",
|
||||||
|
]);
|
||||||
40
src/lib/stores/rounds.js
Normal file
40
src/lib/stores/rounds.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { readable } from "svelte/store"
|
||||||
|
|
||||||
|
export const rounds = readable([
|
||||||
|
{
|
||||||
|
name: "Qualifying",
|
||||||
|
title: "QR",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Opening",
|
||||||
|
title: "OR",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Elimination",
|
||||||
|
title: "ER",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Round of 48",
|
||||||
|
title: "R48",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Round of 32",
|
||||||
|
title: "R32",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Round of 16",
|
||||||
|
title: "R16",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Quarterfinal",
|
||||||
|
title: "QF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Semifinal",
|
||||||
|
title: "SF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Final",
|
||||||
|
title: "F",
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
@ -1,173 +1,254 @@
|
||||||
<script>
|
<script>
|
||||||
let surfers = [
|
import { onMount } from "svelte";
|
||||||
{ name: "", score: 0, colore: "black" },
|
import { colors } from "$lib/stores/colors.js";
|
||||||
{ name: "", score: 0, colore: "black" },
|
import { rounds } from "$lib/stores/rounds.js";
|
||||||
];
|
import { categories } from "$lib/stores/categories.js";
|
||||||
|
|
||||||
let colors = [
|
|
||||||
"red",
|
|
||||||
"yellow",
|
|
||||||
"green",
|
|
||||||
"white",
|
|
||||||
"blue",
|
|
||||||
"black",
|
|
||||||
"cyan",
|
|
||||||
"violet",
|
|
||||||
"pink",
|
|
||||||
];
|
|
||||||
|
|
||||||
let round = [
|
|
||||||
"Qualifying",
|
|
||||||
"Opening",
|
|
||||||
"Elimination",
|
|
||||||
"Round 48",
|
|
||||||
"Round 32",
|
|
||||||
"Round 16",
|
|
||||||
"Quarterfinal",
|
|
||||||
"Semifinal",
|
|
||||||
"Final",
|
|
||||||
];
|
|
||||||
|
|
||||||
let category = [
|
|
||||||
"U12 M",
|
|
||||||
"U12 W",
|
|
||||||
"U14 M",
|
|
||||||
"U14 W",
|
|
||||||
"U16 M",
|
|
||||||
"U16 W",
|
|
||||||
"U18 M",
|
|
||||||
"U18 W",
|
|
||||||
];
|
|
||||||
|
|
||||||
|
let surfers = [];
|
||||||
|
let start = false;
|
||||||
let info = {
|
let info = {
|
||||||
time: "00",
|
time: "00",
|
||||||
cat: "U12 M",
|
cat: "U12 M",
|
||||||
round: "Qualifying",
|
round: "Qualifying",
|
||||||
heat: "1",
|
heat: "1",
|
||||||
};
|
};
|
||||||
|
let round_name = false;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
LoadFromLocalCache();
|
||||||
|
console.log(`onMount: ${JSON.stringify(surfers)}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
function LoadFromLocalCache() {
|
||||||
|
let srf = window.sessionStorage.getItem("surfers");
|
||||||
|
if (srf) {
|
||||||
|
console.log(`load cache: ${srf}`);
|
||||||
|
surfers = JSON.parse(srf);
|
||||||
|
start = JSON.parse(window.sessionStorage.getItem("start"));
|
||||||
|
info = JSON.parse(window.sessionStorage.getItem("info"));
|
||||||
|
console.log(
|
||||||
|
`loaded cache: ${JSON.stringify(surfers)} - ${start} - ${info}`,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
ResetLocalCache();
|
||||||
|
console.log(`no cache found`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResetLocalCache() {
|
||||||
|
console.log("ResetLocalCache");
|
||||||
|
window.sessionStorage.clear();
|
||||||
|
surfers = [
|
||||||
|
{ name: "", score: 0, colore: "black" },
|
||||||
|
{ name: "", score: 0, colore: "black" },
|
||||||
|
];
|
||||||
|
start = false;
|
||||||
|
info = {
|
||||||
|
time: "00",
|
||||||
|
cat: "U12 M",
|
||||||
|
round: "Qualifying",
|
||||||
|
heat: "1",
|
||||||
|
};
|
||||||
|
round_name = false;
|
||||||
|
console.log(`reset store: ${JSON.stringify(surfers)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SaveToLocalCahe() {
|
||||||
|
window.sessionStorage.setItem("surfers", JSON.stringify(surfers));
|
||||||
|
window.sessionStorage.setItem("info", JSON.stringify(info));
|
||||||
|
window.sessionStorage.setItem("start", JSON.stringify(start));
|
||||||
|
console.log(`update cache: ${JSON.stringify(surfers)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StartHeat() {
|
||||||
|
start = true;
|
||||||
|
SaveToLocalCahe();
|
||||||
|
}
|
||||||
|
|
||||||
|
function StopHeat() {
|
||||||
|
start = false;
|
||||||
|
SaveToLocalCahe;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CheckRound() {
|
||||||
|
if (!round_name) {
|
||||||
|
info.round = "Qualifying";
|
||||||
|
} else {
|
||||||
|
info.round = "QR";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasDuplicateColors() {
|
||||||
|
const colors = [];
|
||||||
|
|
||||||
|
console.log(JSON.stringify(priority.surfers));
|
||||||
|
|
||||||
|
for (let i = 0; i < priority.surfersCount; i++) {
|
||||||
|
const color = priority.surfers[i].color;
|
||||||
|
|
||||||
|
if (colors.includes(color)) {
|
||||||
|
console.log(`duplicate color: ${color}`);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
colors.push(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="score-container">
|
<div class="body">
|
||||||
<div class="info-box">
|
<div id="score-container">
|
||||||
<div class="Time">
|
<div class="info-box">
|
||||||
<span id="time">{info.time}:00</span>
|
<div class="Time">
|
||||||
</div>
|
{#if info.time > "00"}
|
||||||
<div class="Cat">
|
<span id="time">{info.time}:00</span>
|
||||||
<small><span id="round">{info.cat}</span></small>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="Round">
|
<div class="Cat">
|
||||||
<small><span id="round">{info.round}</span></small>
|
<small><span id="round">{info.cat}</span></small>
|
||||||
</div>
|
</div>
|
||||||
<div class="Heat">
|
<div class="Round">
|
||||||
<small><span id="heat">Heat {info.heat}</span></small>
|
<small><span id="round">{info.round}</span></small>
|
||||||
|
</div>
|
||||||
|
<div class="Heat">
|
||||||
|
<small><span id="heat">Heat {info.heat}</span></small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#each surfers as surfer}
|
||||||
|
{#if surfer.name != ""}
|
||||||
|
<div class="score-box">
|
||||||
|
<div
|
||||||
|
class="color"
|
||||||
|
style="background-color: {surfer.colore};"
|
||||||
|
id="color-{surfer.colore}">
|
||||||
|
</div>
|
||||||
|
<div class="surfer">{surfer.name}</div>
|
||||||
|
{#if surfer.score != 0}
|
||||||
|
<div class="score" id="score-1">{surfer.score}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#each surfers as surfer}
|
<!-- Form -->
|
||||||
{#if surfer.name != ""}
|
<div class="form-box">
|
||||||
<div class="score-box">
|
<form>
|
||||||
<div
|
<button type="submit" class="btn btn-primary mt-1 mb-3 w-100"
|
||||||
class="color"
|
>Start</button>
|
||||||
style="background-color: {surfer.colore};"
|
<div class="input-group mb-1">
|
||||||
id="color-{surfer.colore}">
|
<span class="input-group-text">tempo</span>
|
||||||
</div>
|
<input
|
||||||
<div class="surfer">{surfer.name}</div>
|
type="text"
|
||||||
<div class="score" id="score-1">{surfer.score}</div>
|
class="form-control time"
|
||||||
|
name="time"
|
||||||
|
required
|
||||||
|
pattern="^[0-9][0-9]$"
|
||||||
|
maxlength="2"
|
||||||
|
size="2"
|
||||||
|
bind:value={info.time} />
|
||||||
|
<span class="input-group-text">category</span>
|
||||||
|
<select
|
||||||
|
class="form-select"
|
||||||
|
name="category"
|
||||||
|
aria-label="Category"
|
||||||
|
bind:value={info.cat}>
|
||||||
|
{#each $categories as cat}
|
||||||
|
<option value={cat.title}>{cat.title}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Form -->
|
<div class="input-group">
|
||||||
<div class="form-box">
|
<span class="input-group-text">round</span>
|
||||||
<form>
|
<select
|
||||||
<button type="submit" class="btn btn-primary mt-1 mb-3 w-100"
|
name="round"
|
||||||
>Start</button>
|
class="form-select"
|
||||||
<div class="input-group mb-1">
|
aria-label="Round"
|
||||||
<span class="input-group-text">tempo</span>
|
bind:value={info.round}>
|
||||||
<input
|
{#each $rounds as rnd}
|
||||||
type="text"
|
{#if round_name}
|
||||||
class="form-control time"
|
<option value={rnd.title}>{rnd.name}</option>
|
||||||
name="time"
|
{:else}
|
||||||
required
|
<option value={rnd.name}>{rnd.name}</option>
|
||||||
pattern="^[0-9][0-9]$"
|
{/if}
|
||||||
maxlength="2"
|
{/each}
|
||||||
size="2"
|
</select>
|
||||||
bind:value={info.time} />
|
<div class="input-group-text">
|
||||||
<span class="input-group-text">category</span>
|
<input
|
||||||
<select
|
class="form-check-input mt-0"
|
||||||
class="form-select"
|
type="checkbox"
|
||||||
name="category"
|
bind:checked={round_name}
|
||||||
aria-label="Category"
|
on:change={CheckRound}
|
||||||
bind:value={info.cat}>
|
aria-label="Checkbox for following text input" />
|
||||||
{#each category as cat}
|
</div>
|
||||||
<option value={cat}>{cat}</option>
|
<span class="input-group-text">heat</span>
|
||||||
{/each}
|
<input
|
||||||
</select>
|
type="text"
|
||||||
</div>
|
class="form-control"
|
||||||
|
name="heat"
|
||||||
|
bind:value={info.heat}
|
||||||
|
pattern="^[0-9][0-9]?$"
|
||||||
|
maxlength="2"
|
||||||
|
size="2" />
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="surfer">
|
||||||
|
<ul>
|
||||||
|
{#each surfers as surfer, id}
|
||||||
|
<li>
|
||||||
|
<div class="input-group">
|
||||||
|
<!-- <span class="input-group-text">colore</span> -->
|
||||||
|
<select
|
||||||
|
class="form-select"
|
||||||
|
name="color"
|
||||||
|
aria-label="Color"
|
||||||
|
size="1"
|
||||||
|
bind:value={surfer.colore}
|
||||||
|
style="background-color: {surfer.colore};">
|
||||||
|
{#each $colors as col}
|
||||||
|
<option
|
||||||
|
value={col}
|
||||||
|
class="color"
|
||||||
|
style="background-color: {col}"
|
||||||
|
>{col}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
<span class="input-group-text">nome</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
name="nome-{id}"
|
||||||
|
bind:value={surfer.name} />
|
||||||
|
|
||||||
<div class="input-group">
|
<span class="input-group-text">score</span>
|
||||||
<span class="input-group-text">round</span>
|
<input
|
||||||
<select
|
type="number"
|
||||||
name="round"
|
class="form-control"
|
||||||
class="form-select"
|
name="score-{id}"
|
||||||
aria-label="Round"
|
bind:value={surfer.score} />
|
||||||
bind:value={info.round}>
|
</div>
|
||||||
{#each round as rnd}<option value={rnd}>{rnd}</option>{/each}
|
</li>
|
||||||
</select>
|
{/each}
|
||||||
<span class="input-group-text">heat</span>
|
</ul>
|
||||||
<input
|
</div>
|
||||||
type="text"
|
<button type="button" class="btn btn-primary mt-1 mb-1 w-100"
|
||||||
class="form-control"
|
>Add</button>
|
||||||
name="heat"
|
<div class="btn-group w-100" role="group" aria-label="save">
|
||||||
bind:value={info.heat}
|
<button
|
||||||
pattern="^[0-9][0-9]?$"
|
type="button"
|
||||||
maxlength="2"
|
class="btn btn-primary mt-1 mb-1 w-100"
|
||||||
size="2" />
|
on:click={SaveToLocalCahe}>Save</button>
|
||||||
</div>
|
<button
|
||||||
<hr />
|
type="button"
|
||||||
<div class="surfer">
|
class="btn btn-primary mt-1 mb-1 w-100"
|
||||||
<ul>
|
on:click={ResetLocalCache}>Reset</button>
|
||||||
{#each surfers as id}
|
</div>
|
||||||
<li>
|
</form>
|
||||||
<div class="input-group">
|
</div>
|
||||||
<!-- <span class="input-group-text">colore</span> -->
|
|
||||||
<select
|
|
||||||
class="form-select"
|
|
||||||
name="color"
|
|
||||||
aria-label="Color"
|
|
||||||
size="1"
|
|
||||||
bind:value={surfers[id].colore}
|
|
||||||
style="background-color: {surfers[id].colore};">
|
|
||||||
{#each colors as col}
|
|
||||||
<option
|
|
||||||
value={col}
|
|
||||||
class="color"
|
|
||||||
style="background-color: {col}"
|
|
||||||
>{col}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<span class="input-group-text">nome</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
name="nome-{id}"
|
|
||||||
value="" />
|
|
||||||
|
|
||||||
<span class="input-group-text">score</span>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
class="form-control"
|
|
||||||
name="score-{id}"
|
|
||||||
value="8.5" />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-primary mt-1 mb-1 w-100"
|
|
||||||
>Add</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -218,7 +299,7 @@
|
||||||
.Cat {
|
.Cat {
|
||||||
grid-area: Cat;
|
grid-area: Cat;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
justify-self: center;
|
justify-self: start;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
#font-weight: bold;
|
#font-weight: bold;
|
||||||
|
|
@ -226,7 +307,7 @@
|
||||||
.Round {
|
.Round {
|
||||||
grid-area: Round;
|
grid-area: Round;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
justify-self: center;
|
justify-self: start;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
#font-weight: bold;
|
#font-weight: bold;
|
||||||
|
|
@ -234,7 +315,7 @@
|
||||||
.Heat {
|
.Heat {
|
||||||
grid-area: Heat;
|
grid-area: Heat;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
justify-self: center;
|
justify-self: start;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
#font-weight: bold;
|
#font-weight: bold;
|
||||||
|
|
@ -274,12 +355,11 @@
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
.form-box {
|
.form-box {
|
||||||
position: grid;
|
width: 500px;
|
||||||
width: 400px;
|
|
||||||
background: rgba(50, 50, 50, 0.7);
|
background: rgba(50, 50, 50, 0.7);
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 150px;
|
margin-left: 450px;
|
||||||
margin-left: 100px;
|
margin-top: 100px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue