feat: replace list with table

feat: add delete functionality feat: add icons
2025-04-12 23:41:59 +02:00 · 2025-04-12 23:41:59 +02:00 · 209f9e09af
commit 209f9e09af
parent 47e027edc9
4 changed files with 180 additions and 50 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,15 @@
 {
 	"name": "fitlog",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "fitlog",
-			"version": "0.0.1",
+			"version": "0.0.2",
+			"dependencies": {
+				"@lucide/svelte": "^0.487.0"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^4.0.0",
 				"@sveltejs/adapter-static": "^3.0.8",
@ -22,7 +25,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@ -461,7 +463,6 @@
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
 			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
@ -476,7 +477,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@ -486,7 +486,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@ -496,20 +495,27 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lucide/svelte": {
+			"version": "0.487.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.487.0.tgz",
+			"integrity": "sha512-27b/wUzWrqDJu97+1iSV2X8L2JGRWH/mAWAjHgazWxhGxVu/kS0p3SbNu6w3skNmQNEku33EKU1v44IVwULzbw==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@ -801,7 +807,6 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@ -912,14 +917,12 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
 			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/acorn": {
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@ -932,7 +935,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@ -942,7 +944,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@ -968,7 +969,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@ -1064,14 +1064,12 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
 			"version": "1.4.6",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
 			"integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@ -1122,7 +1120,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@ -1142,14 +1139,12 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
 			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@ -1340,7 +1335,6 @@
 			"version": "5.25.10",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.25.10.tgz",
 			"integrity": "sha512-tOUlvm3goAhmELYKWYX3SchYeqlVlIcUfKA4qIgd6Urm7qDw3KiZP/wJtoRv3ZeRUHPorM9f6+lOlbFxUN8QoA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@ -1505,7 +1499,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
 	"name": "fitlog",
 	"private": true,
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@ -12,13 +12,16 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.2.5"
+	},
+	"dependencies": {
+		"@lucide/svelte": "^0.487.0"
 	}
 }
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@ -3,5 +3,5 @@
 export interface WorkoutEntry {
 	date: string;
 	workout_type: string;
-	duration_hours: number;
+	duration_minutes: number;
 }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -2,12 +2,13 @@
 	import { onMount } from "svelte";
 	import type { WorkoutEntry } from "$lib/types";
 	import { getWorkouts, saveWorkouts } from "$lib/storage";
+	import { Save, Trash2 } from "@lucide/svelte";

-	let workouts: WorkoutEntry[] = [];
+	let workouts: WorkoutEntry[] = $state([]);

-	let date = "";
-	let workout_type = "";
-	let duration_hours = 0;
+	let date = $state("");
+	let workout_type = $state("");
+	let duration_minutes = $state(0);

 	onMount(() => {
 		const today = new Date();
@ -15,39 +16,172 @@
 		workouts = getWorkouts();
 	});

+	function deleteRow(index: number) {
+		workouts = workouts.toSpliced(index, 1); // modern way to remove immutably
+		saveWorkouts(workouts);
+	}
+
+	function updateRow(index: number) {
+		alert(`Update row #${index + 1}`);
+	}
+
 	function on_save() {
 		const workout: WorkoutEntry = {
 			date: date,
 			workout_type: workout_type,
-			duration_hours: duration_hours,
+			duration_minutes: duration_minutes,
 		};

-		workouts = [...workouts, workout];
+		workouts.push(workout);

 		saveWorkouts(workouts);
-		workout_type = "";
-		duration_hours = 0;
 	}
 </script>

-<h1>FitLog <i>(0.0.2)</i></h1>
+<h1>FitLog <i>(0.0.3)</i></h1>

-<input type="date" bind:value={date} placeholder="Enter date" />
-<input type="text" bind:value={workout_type} placeholder="Enter workout type" />
-<input
-	type="number"
-	bind:value={duration_hours}
-	placeholder="Enter duration in Hours"
-/>
+<form onsubmit={on_save}>
+	<table>
+		<thead>
+			<tr>
+				<th>Date</th>
+				<th>Workout</th>
+				<th>Minutes</th>
+				<th></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>
+					<input
+						type="date"
+						bind:value={date}
+						placeholder="Enter date"
+						required
+					/>
+				</td>
+				<td
+					><input
+						type="text"
+						bind:value={workout_type}
+						placeholder="Enter workout type"
+						required
+					/></td
+				>
+				<td
+					><input
+						type="number"
+						bind:value={duration_minutes}
+						placeholder="Enter duration in Minutes"
+						min="15"
+						step="15"
+						required
+					/>
+				</td>
+				<td>
+					<button type="submit">
+						<Save color="green" />
+					</button>
+				</td>
+			</tr>
+			{#if workouts.length < 1}
+				<tr
+					><td colspan="4" style="text-align: center;"
+						><p>No entries.. yet!</p></td
+					></tr
+				>
+			{:else}
+				{#each workouts as wk, i}
+					<tr>
+						<td>{wk.date}</td>
+						<td>{wk.workout_type}</td>
+						<td>{wk.duration_minutes}</td>
+						<td>
+							<button onclick={() => deleteRow(i)}
+								><Trash2 color="red" /></button
+							>
+						</td>
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</form>

-<button on:click={on_save}>Save</button>
+<style>
+	:global body {
+		background-color: #222;
+		color: white;
+	}
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		border-radius: 12px;
+		overflow: hidden;
+	}

-{#if workouts.length}
-	<ul>
-		{#each workouts as workout}
-			<li>
-				{workout.date} - {workout.workout_type} - {workout.duration_hours}
-			</li>
-		{/each}
-	</ul>
-{/if}
+	thead {
+		background-color: #2d89ef;
+		color: #fff;
+	}
+
+	th,
+	td {
+		text-align: left;
+		padding: 16px;
+	}
+
+	tbody tr:nth-child(even) {
+		background-color: #f2f2f2;
+		color: #000;
+	}
+
+	tbody tr:hover {
+		background-color: #c2c2c2;
+		color: #000;
+		font-weight: bold;
+	}
+
+	th {
+		font-size: 1rem;
+	}
+
+	td {
+		font-size: 0.95rem;
+	}
+
+	button {
+		width: 3rem;
+		height: 2rem;
+		cursor: pointer;
+		border: none;
+		border-radius: 5px;
+		background-color: transparent;
+	}
+	button:hover {
+		background-color: #fff;
+	}
+	input[type="text"] {
+		width: 100%;
+		padding: 8px;
+		box-sizing: border-box;
+		font-size: 0.9rem;
+		border: 1px solid #ccc;
+		border-radius: 6px;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: #2d89ef;
+		box-shadow: 0 0 0 2px rgba(45, 137, 239, 0.2);
+	}
+	input[type="date"],
+	input[type="number"] {
+		width: 100%;
+		padding: 8px;
+		font-size: 0.9rem;
+		border: 1px solid #ccc;
+		border-radius: 6px;
+		box-sizing: border-box;
+	}
+</style>