feat: init grade table

frontend/src/lib/components/grades/GradesRow.svelte

@@ -0,0 +1,41 @@
+<script context="module" lang="ts">
+	export type Semester = '1/8' | '2/8' | '1/9' | '2/9';
+	export type Grade = {
+		subject?: string;
+		semesters: {
+			[semester in Semester]?: string;
+		};
+	};
+</script>
+
+<script lang="ts">
+	export let grade: Grade;
+	const SEMESTERS: Semester[] = ['1/8', '2/8', '1/9', '2/9'];
+</script>
+
+<div class="flex">
+	<input bind:value={grade.subject} type="text" />
+	{#each SEMESTERS as semester}
+		<select bind:value={grade.semesters[semester]} name="">
+			<option value="" />
+			<option value="1">1</option>
+			<option value="2">2</option>
+			<option value="3">3</option>
+			<option value="4">4</option>
+			<option value="5">5</option>
+		</select>
+	{/each}
+</div>
+
+<style lang="postcss">
+	input {
+		@apply hover:border-sspsBlue rounded-lg border border-2 bg-[#f8fafb] outline-none;
+		@apply w-1/2 w-full px-2;
+		@applytransition-colors duration-300;
+	}
+	select {
+		@apply ml-0.5 w-1/6;
+		@apply hover:border-sspsBlue rounded-lg border border-2 bg-[#f8fafb] outline-none;
+		@apply transition-colors  duration-300;
+	}
+</style>

frontend/src/lib/components/grades/GradesTable.svelte

@@ -0,0 +1,85 @@
+<script context="module" lang="ts">
+	export type GradeBackend = {
+		subject: string;
+		grade: number;
+		semester: Semester;
+	};
+</script>
+
+<script lang="ts">
+	import GradesRow, { type Grade, type Semester } from './GradesRow.svelte';
+
+	let gradesLocal: Array<Grade> = Array.from({ length: 8 }, () => {
+		return {
+			subject: '',
+			semesters: {
+				'1/8': undefined,
+				'2/8': undefined,
+				'1/9': undefined,
+				'2/9': undefined
+			}
+		};
+	});
+
+	export let grades: Array<GradeBackend>;
+
+	// Convert local Grade type to expanded GradesBackend type
+	$: {
+		const gradesTemp: Array<GradeBackend> = [];
+		for (let index = 0; index < gradesLocal.length; index++) {
+			const grade = gradesLocal[index];
+			for (const semester in grade.semesters) {
+				const semesterTyped = semester as Semester;
+				if (grade.semesters[semesterTyped] && grade.subject) {
+					const gradeString = grade.semesters[semesterTyped]!;
+					gradesTemp.push({
+						subject: grade.subject,
+						grade: Number(gradeString),
+						semester: semesterTyped
+					});
+				}
+			}
+		}
+		grades = gradesTemp;
+	}
+</script>
+
+<div class="mx-auto mt-8 flex max-h-[22rem] w-full flex-col overflow-scroll lg:w-4/5">
+	<div class="flex text-gray-400">
+		<span class="w-1/2 text-center">Známky</span>
+		<span class="ml-0.5 w-1/6 text-center">1/8</span>
+		<span class="ml-0.5 w-1/6 text-center">2/8</span>
+		<span class="ml-0.5 w-1/6 text-center">1/9</span>
+		<span class="ml-0.5 w-1/6 text-center">2/9</span>
+	</div>
+	{#each gradesLocal as _, i}
+		<GradesRow bind:grade={gradesLocal[i]} />
+	{/each}
+	<button
+		class="ml-auto w-24 rounded-full bg-gray-400 p-1 text-xl text-white transition-colors duration-300 hover:bg-gray-500"
+		on:click={() => {
+			gradesLocal = [
+				...gradesLocal,
+				{
+					subject: '',
+					semesters: {
+						'1/8': undefined,
+						'2/8': undefined,
+						'1/9': undefined,
+						'2/9': undefined
+					}
+				}
+			];
+		}}>+</button
+	>
+	<button
+		class="ml-auto w-24 rounded-full bg-gray-400 p-1 text-xl text-white transition-colors duration-300 hover:bg-gray-500"
+		on:click={() => {
+			alert(JSON.stringify(gradesLocal));
+			alert(JSON.stringify(grades));
+		}}>+</button
+	>
+</div>
+
+<style lang="postcss">
+</style>

frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte

@@ -21,10 +21,11 @@
 	import * as yup from 'yup';
 	import type { CandidateData } from '$lib/stores/candidate';
 	import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte';
+	import GradesTable from '$lib/components/grades/GradesTable.svelte';
 
-	const pageCount = 6;
+	const pageCount = 7;
 	let pageIndex = 0;
-	let pagesFilled = [false, false, false, false, false, false];
+	let pagesFilled = [false, false, false, false, false, false, false];
 	let pageTexts = [
 		'Zpracování osobních údajů',
 		'Registrace',
@@ -244,11 +245,23 @@
 				values.parents = values.parents.filter(
 					(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
 				);
-				// @ts-ignore
+				let addressArray: Array<string> = [
-				let addressArray: Array<string> = [values.candidate.street + ' ' + values.candidate.houseNumber, values.candidate.city, values.candidate.zip];
+					// @ts-ignore
+					values.candidate.street + ' ' + values.candidate.houseNumber,
+					// @ts-ignore
+					values.candidate.city,
+					// @ts-ignore
+					values.candidate.zip
+				];
 				values.candidate.address = addressArray.map((x) => x.replaceAll(',', '').trim()).join(',');
 				// @ts-ignore
-				delete values.candidate.street; delete values.candidate.houseNumber; delete values.candidate.city; delete values.candidate.zip;
+				delete values.candidate.street;
+				// @ts-ignore
+				delete values.candidate.houseNumber;
+				// @ts-ignore
+				delete values.candidate.city;
+				// @ts-ignore
+				delete values.candidate.zip;
 
 				await apiFillDetails(values);
 				goto('/dashboard');
@@ -377,6 +390,8 @@
 		pageIndex = 2; // skip gdpr page
 		pageTexts[2] = 'Úprava osobních údajů';
 	}
+
+	let test = 8;
 </script>
 
 <SplitLayout>
@@ -384,7 +399,7 @@
 	<div class="form relative">
 		<div class="bottom-3/12 absolute flex w-full flex-col md:h-auto">
 			<!-- TODO: Find different way how to display SchoolBadge -->
-			{#if pageIndex > 0}
+			{#if pageIndex !== 0 && pageIndex !== 7}
 				<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">
 					<SchoolBadge />
 				</div>
@@ -664,9 +679,15 @@
 						/>
 					{/if}
 				</div>
+			{:else if pageIndex === 7}
+				<h1 class="title mt-8">{pageTexts[5]}</h1>
+				<p class="description mt-8 block text-center">
+					Přidejte prosím přepis Vaších známek z posledních dvou let studia
+				</p>
+				<GradesTable />
 			{/if}
 		</div>
-		<div class="controls bottom-1/12 absolute w-full">
+		<div class="bottom-1/12 absolute w-full">
 			<div class="field">
 				<Submit
 					on:click={async (e) => {