mirror of
https://github.com/jcreek/EstimationPoker.git
synced 2026-07-13 02:53:46 +00:00
feat(*): Add basic example estimation page
This commit is contained in:
@@ -5,4 +5,3 @@
|
||||
</script>
|
||||
|
||||
<h1>Estimation Poker</h1>
|
||||
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user