Stundenaufzeichnung/src/routes/schaetzung/+page.svelte

<script lang="ts">
	import { month_of } from "$lib/util";
	import { enhance } from "$app/forms";

	interface Quarter {
		year: number;
		quarter: number;
		estimate_0: number;
		estimate_1: number;
		estimate_2: number;
	}
	interface Props {
		form: any;
		data: {
			estimates: Array<Quarter>;
		}
	}
	let { form, data }: Props = $props();

	const TODAY = new Date();
	const NEXT_QUART = (data?.estimates?.length > 0)
		? new Date(data.estimates[0].year + (data.estimates[0].quarter === 4 ? 1 : 0), 4 * (data.estimates[0].quarter - (data.estimates[0].quarter === 4 ? -4 : 0)))
		: TODAY;

	const add_quart = quart_from_date(NEXT_QUART);

	function quart_from_date(date: Date) {
		return Math.floor((date.getMonth()+1) / 4) + 1;
	}

	function month_from_quart(quart: number, num: number) {
		return new Date(TODAY.getFullYear(), (quart - 1) * 4 + num);
	}
</script>

<form id="form_add_quart" method="POST" action="?/add_quarter" use:enhance></form>

<table>
	<caption>Stundenschätzung</caption>
	
	<thead>
		<tr>
			<th style:width="20ch">Quartal</th>
			<th style:width="30ch">Monat</th>
			<th style:width="30ch">Schätzung</th>
			<th style:width="12ch">Aktion</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td rowspan="3">{add_quart}. Quartal {NEXT_QUART.getFullYear()}</td>
			
			<td>{month_of(month_from_quart(add_quart, 0))}</td>
			<!-- svelte-ignore a11y_positive_tabindex -->
			<td><input form="form_add_quart" type="text" tabindex="1" name="estimate_0" value={form?.data?.estimate_0}/></td>

			<td rowspan="3">
				<input form="form_add_quart" type="hidden" name="year" value={NEXT_QUART.getFullYear()}/>
				<input form="form_add_quart" type="hidden" name="quarter" value={add_quart}/>
				<button form="form_add_quart" type="submit">+</button>
			</td>
		</tr>
		<tr>
			<td>{month_of(month_from_quart(add_quart, 1))}</td>
			<!-- svelte-ignore a11y_positive_tabindex -->
			<td><input form="form_add_quart" type="text" tabindex="2" name="estimate_1" value={form?.data?.estimate_1}/></td>
		</tr>
		<tr>
			<td>{month_of(month_from_quart(add_quart, 2))}</td>
			<!-- svelte-ignore a11y_positive_tabindex -->
			<td><input form="form_add_quart" type="text" tabindex="3" name="estimate_2" value={form?.data?.estimate_2}/></td>
		</tr>
		
		{#each data.estimates as quarter}
			{@const rowspan = (quarter.estimate_0 != null ? 1 : 0) + (quarter.estimate_1 != null ? 1 : 0) + (quarter.estimate_2 != null ? 1 : 0)}
			{@const months = (() => { 
				let arr : { i: number, estimate: number}[] = []; 
				for (let i = 0; i < 3; ++i) { 
					if (quarter[`estimate_${i}`] != null) { 
						arr.push({i: i, estimate: quarter[`estimate_${i}`]}); 
					} 
				} 
				return arr; 
			})()}
			{#if months.length > 0}
				<tr>
					<td rowspan={rowspan}>
						{quarter.quarter}. Quartal {quarter.year}
					</td>
					
					<td>{month_of(month_from_quart(quarter.quarter, months[0].i))}</td>
					<td>{months[0].estimate.toFixed(2)}</td>

					<td rowspan={rowspan}>Edit</td>
				</tr>
				{#each months.slice(1) as month}
					<tr>
						<td>{month_of(month_from_quart(quarter.quarter, month.i))}</td>
						<td>{month.estimate.toFixed(2)}</td>
					</tr>
				{/each}
			{/if}
		{/each}
	</tbody>

{#if data.estimates === undefined || data.estimates.length === 0}
	<tfoot>
		<tr>
			<td class="td-no-elements" colspan="999">No records</td>
		</tr>
	</tfoot>
{/if}
</table>


<style>

form {
	width: fit-content;
	border: none;
}

table {
	width: 50%;
	margin: auto;

	border-collapse: collapse;
	border: 1px solid;
}

table caption {
	font-size: 25px;
	font-weight: bold;
}

tbody > tr > td {
	text-align: center;
}

/*tbody > tr:nth-child(odd) > td[rowspan="3"] {
	background: lightgray;
}

tbody > tr:nth-child(even) > td[rowspan="3"] {
	background: gray;
}*/

tbody > tr:nth-child(odd) {
	background: gray;
}

tbody > tr:nth-child(even) {
	background: lightgray;
}

tfoot {	
	border-top: 1px solid black;
}

.td-no-elements {
	text-align: center;
}
</style>