dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init grade table

Browse source
This commit is contained in:
EETagent 2023-01-16 22:28:16 +01:00
parent 0edc9d9987
commit da3fe8c5ac
3 changed files with 154 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/src/lib/components/grades/GradesRow.svelte Normal file
View file

@ -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>

85
frontend/src/lib/components/grades/GradesTable.svelte Normal file
View file

@ -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>

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

@ -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> = [values.candidate.street + ' ' + values.candidate.houseNumber, values.candidate.city, values.candidate.zip];
let addressArray: Array<string> = [
// @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) => {