From 1815b08e88bd0981455048cf325b65d4200a8f2e Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 30 Jun 2023 14:08:59 +0000
Subject: [PATCH] feat(*): Add basic example estimation page

---
 src/components/AverageEstimate.svelte    |  8 +++
 src/components/EstimateGroupsList.svelte | 23 +++++++
 src/components/UsersList.svelte          | 20 ++++++
 src/routes/+page.svelte                  |  1 -
 src/routes/estimation/+page.svelte       | 77 ++++++++++++++++++++++++
 5 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AverageEstimate.svelte
 create mode 100644 src/components/EstimateGroupsList.svelte
 create mode 100644 src/components/UsersList.svelte
 create mode 100644 src/routes/estimation/+page.svelte

diff --git a/src/components/AverageEstimate.svelte b/src/components/AverageEstimate.svelte
new file mode 100644
index 0000000..aae6762
--- /dev/null
+++ b/src/components/AverageEstimate.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let average: string | number;
+</script>
+
+<div id="average-estimate">
+	<h2>Average Estimate</h2>
+	<p>{average}</p>
+</div>
diff --git a/src/components/EstimateGroupsList.svelte b/src/components/EstimateGroupsList.svelte
new file mode 100644
index 0000000..5190262
--- /dev/null
+++ b/src/components/EstimateGroupsList.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let estimateGroups: any;
+</script>
+
+<div id="estimate-groups-list">
+	<h2>Estimate Groups</h2>
+	<ul>
+		{#each Object.keys(estimateGroups) as estimate}
+			<li>
+				Estimate: {estimate}
+				<ul>
+					{#if estimateGroups[estimate].length >= 5}
+						<li>5+ people</li>
+					{:else}
+						{#each estimateGroups[estimate] as user}
+							<li>{user}</li>
+						{/each}
+					{/if}
+				</ul>
+			</li>
+		{/each}
+	</ul>
+</div>
diff --git a/src/components/UsersList.svelte b/src/components/UsersList.svelte
new file mode 100644
index 0000000..47d194a
--- /dev/null
+++ b/src/components/UsersList.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let estimates: any;
+	export let handleEstimateChange: any;
+</script>
+
+<div id="users-list">
+	<h2>Users</h2>
+	<ul>
+		{#each estimates as user}
+			<li>
+				{user.name}
+				<input
+					type="number"
+					value={user.estimate}
+					on:input={(e) => handleEstimateChange(e, user)}
+				/>
+			</li>
+		{/each}
+	</ul>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8633603..a4ca2ee 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,4 +5,3 @@
 </script>
 
 <h1>Estimation Poker</h1>
-
diff --git a/src/routes/estimation/+page.svelte b/src/routes/estimation/+page.svelte
new file mode 100644
index 0000000..f0f8ec1
--- /dev/null
+++ b/src/routes/estimation/+page.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import UsersList from '../../components/UsersList.svelte';
+	import EstimateGroupsList from '../../components/EstimateGroupsList.svelte';
+	import AverageEstimate from '../../components/AverageEstimate.svelte';
+
+	let estimates = [
+		{ name: 'User 1', estimate: 8 },
+		{ name: 'User 2', estimate: 8 },
+		{ name: 'User 3', estimate: 13 },
+		{ name: 'User 4', estimate: 13 },
+		{ name: 'User 5', estimate: 13 },
+		{ name: 'User 6', estimate: 21 },
+		{ name: 'User 7', estimate: 21 },
+		{ name: 'User 8', estimate: 21 },
+		{ name: 'User 9', estimate: 34 },
+		{ name: 'User 10', estimate: 34 },
+		{ name: 'User 11', estimate: 34 },
+		{ name: 'User 12', estimate: 34 },
+		{ name: 'User 13', estimate: 55 },
+		{ name: 'User 14', estimate: 55 },
+		{ name: 'User 15', estimate: 55 }
+	];
+
+	// Group users by their estimates
+	let estimateGroups: { [key: number]: string[] } = {};
+
+	function groupEstimates() {
+		estimateGroups = {};
+		estimates.forEach((estimate) => {
+			if (estimate.estimate !== null) {
+				if (estimateGroups[estimate.estimate]) {
+					estimateGroups[estimate.estimate].push(estimate.name);
+				} else {
+					estimateGroups[estimate.estimate] = [estimate.name];
+				}
+			}
+		});
+	}
+
+	function calculateAverageEstimate() {
+		let total = 0;
+		estimates.forEach((estimate) => {
+			if (estimate.estimate !== null) {
+				total += estimate.estimate;
+			}
+		});
+		return total / estimates.length;
+	}
+
+	let average = calculateAverageEstimate();
+
+	onMount(() => {
+		groupEstimates();
+	});
+
+	function handleEstimateChange(event: any, user: any) {
+		const { value } = event.target;
+		user.estimate = value !== '' ? Number(value) : null;
+		groupEstimates();
+		average = calculateAverageEstimate();
+	}
+</script>
+
+<h1>Estimation Page</h1>
+
+<UsersList {estimates} {handleEstimateChange} />
+
+{#if Object.keys(estimateGroups).length > 0}
+	<EstimateGroupsList {estimateGroups} />
+	<AverageEstimate {average} />
+{/if}
+
+<style>
+	/* CSS styles */
+	/* ... */
+</style>