Ship first version
This commit is contained in:
parent
03ca0754dd
commit
2bbfdf3f3e
7 changed files with 264 additions and 43 deletions
|
|
@ -1,15 +1,15 @@
|
|||
<script lang="ts">
|
||||
// import svelteLogo from "./assets/svelte.svg";
|
||||
// import viteLogo from "/vite.svg";
|
||||
import { currentView } from "./lib/store.ts";
|
||||
import { currentView } from "./lib/store";
|
||||
import Nav from "./lib/Nav.svelte";
|
||||
import Summary from "./lib/Summary.svelte";
|
||||
import GymProgress from "./lib/GymProgress.svelte";
|
||||
import CardioProgress from "./lib/CardioProgress.svelte";
|
||||
import DietProgress from "./lib/DietProgress.svelte";
|
||||
</script>
|
||||
|
||||
<div class="chrome">
|
||||
<Nav />
|
||||
<main>
|
||||
{#if $currentView === 0}
|
||||
<Summary />
|
||||
|
|
@ -20,26 +20,13 @@
|
|||
{#if $currentView === 2}
|
||||
<CardioProgress />
|
||||
{/if}
|
||||
{#if $currentView === 3}
|
||||
<DietProgress />
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
pacardg: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.chrome {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
|
|
@ -49,6 +36,7 @@
|
|||
flex: 1;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,7 +1,72 @@
|
|||
<script lang="ts">
|
||||
import { cardio, currentView } from "./store";
|
||||
const remaining = $cardio.length;
|
||||
const days = ["ons", "fre", "mån"];
|
||||
let done = $derived($cardio.filter((c) => c.completed).length);
|
||||
|
||||
const back = () => {
|
||||
currentView.update((_) => 0);
|
||||
};
|
||||
</script>
|
||||
|
||||
<h1>Cardio</h1>
|
||||
<div>
|
||||
<button onclick={() => back()}><-</button>
|
||||
<h1>
|
||||
Cardio {done}/{remaining}
|
||||
</h1>
|
||||
<progress max={remaining} value={done}></progress>
|
||||
<div class="calendar">
|
||||
{#each $cardio as col, i}
|
||||
<article>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={col.completed} />
|
||||
<strong
|
||||
>{(col.run_for as number[])
|
||||
.map((m) => `${m} min`)
|
||||
.join(" + ")}, {col.pause_for} vila</strong
|
||||
>
|
||||
<small>{days[i % 3]} {col.planned_at}</small>
|
||||
</label>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0.5em 0.25em;
|
||||
}
|
||||
|
||||
article {
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 7px;
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "input name" "input date";
|
||||
padding: 1.5em;
|
||||
|
||||
input {
|
||||
grid-area: input;
|
||||
}
|
||||
strong {
|
||||
grid-area: name;
|
||||
}
|
||||
small {
|
||||
grid-area: date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article:has(:checked) {
|
||||
border-color: #080;
|
||||
background-color: #afa;
|
||||
}
|
||||
|
||||
article:nth-child(1) {
|
||||
grid-column: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
79
src/lib/DietProgress.svelte
Normal file
79
src/lib/DietProgress.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<script lang="ts">
|
||||
import { diet, currentView } from "./store";
|
||||
const dayscount = $diet.days.length;
|
||||
let done = $derived($diet.days.filter((c) => c.completed).length);
|
||||
|
||||
const back = () => {
|
||||
currentView.update((_) => 0);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button onclick={() => back()}><-</button>
|
||||
<h1>
|
||||
Diet {done}/{dayscount}
|
||||
</h1>
|
||||
<progress max={dayscount} value={done}></progress>
|
||||
|
||||
<div class="calendar">
|
||||
{#each $diet.days as day, i}
|
||||
<article>
|
||||
{#if day.date in $diet.reds}
|
||||
<div class="red">
|
||||
{$diet.reds[day.date]}
|
||||
</div>
|
||||
{:else}
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={day.completed} />
|
||||
{day.date}
|
||||
</label>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em 0.25em;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #ddd;
|
||||
color: #888;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
article {
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 7px;
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "input name" "input date";
|
||||
padding: 1.5em;
|
||||
|
||||
input {
|
||||
grid-area: input;
|
||||
}
|
||||
strong {
|
||||
grid-area: name;
|
||||
}
|
||||
small {
|
||||
grid-area: date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article:has(:checked) {
|
||||
border-color: #080;
|
||||
background-color: #afa;
|
||||
}
|
||||
|
||||
article:nth-child(1) {
|
||||
grid-column: 3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,67 @@
|
|||
<script lang="ts">
|
||||
import { gym, currentView } from "./store";
|
||||
const remaining = $gym.length;
|
||||
let done = $derived($gym.filter((c) => c.completed).length);
|
||||
|
||||
const back = () => {
|
||||
currentView.update((_) => 0);
|
||||
};
|
||||
</script>
|
||||
|
||||
<h1>Gym</h1>
|
||||
<div>
|
||||
<button onclick={() => back()}><-</button>
|
||||
<h1>
|
||||
Gym {done}/{remaining}
|
||||
</h1>
|
||||
<progress max={remaining} value={done}></progress>
|
||||
<div class="calendar">
|
||||
{#each $gym as col}
|
||||
<article>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={col.completed} />
|
||||
<strong>{col.name}</strong>
|
||||
<small>{col.planned_at}</small>
|
||||
</label>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0.5em 0.25em;
|
||||
}
|
||||
|
||||
article {
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 7px;
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "input name" "input date";
|
||||
padding: 1.5em;
|
||||
|
||||
input {
|
||||
grid-area: input;
|
||||
}
|
||||
strong {
|
||||
grid-area: name;
|
||||
}
|
||||
small {
|
||||
grid-area: date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article:has(:checked) {
|
||||
border-color: #080;
|
||||
background-color: #afa;
|
||||
}
|
||||
|
||||
article:nth-child(1) {
|
||||
grid-column: 3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { currentView } from "./store.js";
|
||||
const navigate = (v: 0 | 1 | 2) => {
|
||||
currentView.update((_) => v);
|
||||
};
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<button onclick={() => navigate(0)}>Summary</button>
|
||||
<button onclick={() => navigate(1)}>Weights</button>
|
||||
<button onclick={() => navigate(2)}>Cardio</button>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,62 @@
|
|||
<script lang="ts">
|
||||
import { gym, cardio } from "./store";
|
||||
import { gym, cardio, diet, currentView } from "./store";
|
||||
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
||||
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
||||
let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
|
||||
|
||||
const navigate = (v: 0 | 1 | 2 | 3) => {
|
||||
currentView.update((_) => v);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h1>Summary</h1>
|
||||
<ul>
|
||||
<li>{$gym.length} gym</li>
|
||||
<li>{$cardio.length} cardio</li>
|
||||
<ul class="cards">
|
||||
<li>
|
||||
<button onclick={() => navigate(1)}>
|
||||
<i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick={() => navigate(2)}>
|
||||
<i>{cardioProgress}</i> / {$cardio.length}
|
||||
<span>löppass lufsade</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick={() => navigate(3)}>
|
||||
<i>{dietProgress}</i> / {$diet.days.length}
|
||||
<span>dagar på diet</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cards {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1em;
|
||||
|
||||
> li {
|
||||
flex: 1;
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
|
||||
button {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue