#8 add view and api to track activities

view/src/routes/+page.svelte

@@ -1,3 +1,4 @@
-<div class="flex justify-center items-center h-full">
+<div class="flex flex-col gap-24 justify-center items-center h-full">
 	<h1 class="text-9xl text-primary-content">Welcome to ME-FIT</h1>
+	<a href="/app" class="p-5 text-4xl btn btn-primary box-content"> Getting Started </a>
 </div>

view/src/routes/app/+page.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Auth } from 'firebase/auth';
+	import { goto } from '$app/navigation';
+
+	$: errorStr = '';
+
+	var auth: Auth | null = null;
+
+	let workouts: any[];
+	$: workouts = [];
+
+	async function handleSubmit(_submit: SubmitEvent) {
+		errorStr = '';
+
+		const form = _submit.target as HTMLFormElement;
+		const formData = new FormData(form);
+
+		try {
+			const response = await fetch('http://localhost:8080/workout', {
+				method: 'POST',
+				headers: {
+					Authorization: 'Bearer ' + (await auth?.currentUser?.getIdToken())
+				},
+				body: formData
+			});
+
+			if (response.ok) {
+				fetchWorkouts();
+				resetForm();
+			} else {
+				const data = await response.text();
+				errorStr = data;
+			}
+		} catch (error: any) {
+			errorStr = error.message;
+			console.error(error);
+		}
+	}
+
+	function resetForm() {
+		const form = document.querySelector('form') as HTMLFormElement;
+		form.reset();
+
+		const date = new Date();
+		const dateInput = document.getElementById('date') as HTMLInputElement;
+		dateInput.value = date.toISOString().split('T')[0];
+	}
+
+	async function fetchWorkouts() {
+		try {
+			const response = await fetch('http://localhost:8080/workout', {
+				headers: {
+					Authorization: 'Bearer ' + (await auth?.currentUser?.getIdToken())
+				},
+				method: 'GET'
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				console.log(data);
+				workouts = data;
+			} else {
+				errorStr = await response.text();
+			}
+		} catch (error: any) {
+			console.log(error);
+		}
+	}
+
+	onMount(async () => {
+		const authImp = import('$lib/firebase');
+
+		resetForm();
+
+		auth = (await authImp).auth;
+		await auth.authStateReady();
+		if (!auth?.currentUser) {
+			goto('/login');
+			return;
+		}
+
+		await fetchWorkouts();
+	});
+</script>
+
+<form
+	class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-36"
+	on:submit|preventDefault={handleSubmit}
+>
+	<h2 class="text-4xl mb-16">Track your workout</h2>
+	<input id="date" type="date" class="input input-bordered" value={new Date()} name="date" />
+
+	<select class="select select-bordered w-full" name="type">
+		<option>Push Ups</option>
+		<option>Pull Ups</option>
+	</select>
+
+	<input type="number" class="input input-bordered" placeholder="Sets" name="sets" />
+	<input type="number" class="input input-bordered" placeholder="Reps" name="reps" />
+
+	<button class="btn btn-primary self-end">Save</button>
+	{#if errorStr}
+		<p class="text-error">{errorStr}</p>
+	{/if}
+</form>
+
+<div class="overflow-x-auto mx-auto max-w-screen-lg">
+	<h2 class="text-4xl mt-60">Workout history</h2>
+	<table class="table">
+		<thead>
+			<tr>
+				<th>Date</th>
+				<th>Type</th>
+				<th>Sets</th>
+				<th>Reps</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			{#each workouts as workout}
+				<tr>
+					<th>{workout.date}</th>
+					<th>{workout.type}</th>
+					<th>{workout.sets}</th>
+					<th>{workout.reps}</th>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>