mirror of
https://github.com/danbulant/Portfolio
synced 2026-06-14 12:01:25 +00:00
feat: high school field of study selection
This commit is contained in:
Sebastian Pravda
parent
1370881eee
commit
ca09a35493
4 changed files with 1390 additions and 16 deletions
1313
frontend/src/lib/assets/list/high_schools.json
Normal file
1313
frontend/src/lib/assets/list/high_schools.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -2,16 +2,20 @@
|
|||
import LL from '$i18n/i18n-svelte';
|
||||
|
||||
import School from './School.svelte';
|
||||
import type { School as SchoolType } from '$lib/stores/candidate';
|
||||
import type { School as SchoolType, SchoolJson } from '$lib/stores/candidate';
|
||||
import SelectField from '../SelectField.svelte';
|
||||
import TextField from '$lib/components/textfield/TextField.svelte';
|
||||
|
||||
export let schoolList: Array<string>;
|
||||
export let schoolNames: Array<string>;
|
||||
export let schoolList: Array<SchoolJson>;
|
||||
|
||||
let fields: Array<string> = [];
|
||||
let filteredSchools: Array<string> = [];
|
||||
|
||||
const filterSchools = () => {
|
||||
let storageArr: Array<string> = [];
|
||||
if (schoolNameInputValue) {
|
||||
schoolList.forEach((school) => {
|
||||
schoolNames.forEach((school) => {
|
||||
if (
|
||||
school
|
||||
.toLowerCase()
|
||||
|
|
@ -36,17 +40,30 @@
|
|||
|
||||
let schoolNameInputValue = '';
|
||||
let schoolFieldInputValue = '';
|
||||
let fieldFocusInputValue = '';
|
||||
|
||||
$: if (!schoolNameInputValue) {
|
||||
filteredSchools = [];
|
||||
hiLiteIndex = -1;
|
||||
}
|
||||
|
||||
const setFields = (schoolName: string) => {
|
||||
let school = schoolList.find((school) => school.n === schoolName);
|
||||
if (school) {
|
||||
fields = school.f;
|
||||
} else {
|
||||
fields = [];
|
||||
}
|
||||
};
|
||||
|
||||
$: setFields(schoolNameInputValue);
|
||||
|
||||
const setInputVal = (schoolName: string) => {
|
||||
schoolNameInputValue = removeBold(schoolName);
|
||||
filteredSchools = [];
|
||||
hiLiteIndex = -1;
|
||||
searchInput.focus();
|
||||
// setFields(schoolNameInputValue);
|
||||
};
|
||||
|
||||
const makeMatchBold = (str: string) => {
|
||||
|
|
@ -86,33 +103,67 @@
|
|||
export let selectedSchool: SchoolType;
|
||||
export let error: string = '';
|
||||
|
||||
schoolFieldInputValue = selectedSchool.field;
|
||||
if (selectedSchool.field.split(';').length > 1) {
|
||||
console.log(selectedSchool.field);
|
||||
schoolFieldInputValue = selectedSchool.field.split(';')[0];
|
||||
fieldFocusInputValue = selectedSchool.field.split(';')[1];
|
||||
} else {
|
||||
schoolFieldInputValue = selectedSchool.field;
|
||||
}
|
||||
schoolNameInputValue = selectedSchool.name;
|
||||
|
||||
$: selectedSchool.field = schoolFieldInputValue;
|
||||
$: selectedSchool.field = schoolFieldInputValue + (fieldFocusInputValue ? `;${fieldFocusInputValue}` : '');
|
||||
$: selectedSchool.name = schoolNameInputValue;
|
||||
|
||||
let isSSPS = false;
|
||||
$: isSSPS = schoolNameInputValue === 'Smíchovská střední průmyslová škola a gymnázium';
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={navigateList} />
|
||||
|
||||
<div class="autocomplete">
|
||||
<div class="flex">
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
class:error
|
||||
class="flex-1"
|
||||
class=""
|
||||
type="text"
|
||||
bind:this={searchInput}
|
||||
bind:value={schoolNameInputValue}
|
||||
on:input={filterSchools}
|
||||
placeholder={$LL.input.schoolName()}
|
||||
/>
|
||||
<input
|
||||
<div class="flex mt-2">
|
||||
<span class="w-1/2" class:w-full={isSSPS}>
|
||||
<SelectField
|
||||
on:focus={() => setFields(schoolNameInputValue)}
|
||||
bind:value={schoolFieldInputValue}
|
||||
options={fields}
|
||||
placeholder={$LL.input.fieldOfStudy()}
|
||||
/>
|
||||
</span>
|
||||
<span class="w-1/2 ml-2" class:hidden={isSSPS}>
|
||||
<TextField
|
||||
bind:value={fieldFocusInputValue}
|
||||
placeholder="Zaměření (nepovinné)"
|
||||
helperText="Např. Kybernetická bezpečnost, protože obor nemá svůj vlastní kód"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <select
|
||||
on:focus={() => setFields(schoolNameInputValue)}
|
||||
>
|
||||
{#each fields as field}
|
||||
<option>{field}</option>
|
||||
{/each}
|
||||
</select> -->
|
||||
<!-- <input
|
||||
on:focus={() => setFields(schoolNameInputValue)}
|
||||
class:error
|
||||
class="ml-2 w-2/5"
|
||||
class="mt-4"
|
||||
type="text"
|
||||
bind:value={schoolFieldInputValue}
|
||||
placeholder={$LL.input.fieldOfStudy()}
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
{#if filteredSchools.length > 0}
|
||||
<ul bind:this={optionsList} class="schoolAutocompleteList">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import type { GradeBackend } from '$lib/components/grades/GradesTable.svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export interface SchoolJson {
|
||||
n: string;
|
||||
f: string[];
|
||||
}
|
||||
export interface School {
|
||||
name: string;
|
||||
field: string;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,13 @@
|
|||
import type { Writable } from 'svelte/store';
|
||||
import { pushErrorText, pushSuccessText } from '$lib/utils/toast';
|
||||
|
||||
import schoolList from '$lib/assets/list/school.json';
|
||||
// import schoolList from '$lib/assets/list/school.json';
|
||||
import schoolList from '$lib/assets/list/high_schools.json';
|
||||
import countriesList from '$lib/assets/list/countries.json';
|
||||
|
||||
// const schoolList = highSchoolList.map((school) => school['n']);
|
||||
const schoolNames = schoolList.map((school) => school['n']);
|
||||
|
||||
let pageIndex = 0;
|
||||
let pagesFilled = [false, false, false, false, false, false, false, false];
|
||||
const editModePageIndex = 3;
|
||||
|
|
@ -158,7 +162,7 @@
|
|||
.required()
|
||||
.test((_val) => {
|
||||
if (!_val) return false;
|
||||
if (schoolList.includes(_val)) {
|
||||
if (schoolNames.includes(_val)) {
|
||||
return true;
|
||||
} else {
|
||||
pushErrorText('Vyberte prosím školu ze seznamu.');
|
||||
|
|
@ -174,7 +178,7 @@
|
|||
.test((_val) => {
|
||||
if (!_val) return false;
|
||||
if (!_val) return false;
|
||||
if (schoolList.includes(_val)) {
|
||||
if (schoolNames.includes(_val)) {
|
||||
return true;
|
||||
} else {
|
||||
pushErrorText('Vyberte prosím školu ze seznamu.');
|
||||
|
|
@ -722,16 +726,17 @@
|
|||
</span>
|
||||
</div>
|
||||
{:else if pageIndex === 7}
|
||||
<h1 class="title mt-8">{pageTexts[5]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
<!-- <h1 class="title mt-8">{pageTexts[5]}</h1> -->
|
||||
<!-- <p class="description mt-8 block text-center">
|
||||
{$LL.candidate.register.seventh.description()}
|
||||
</p>
|
||||
</p> -->
|
||||
<div class="flex h-full flex-col justify-between">
|
||||
<span class="field">
|
||||
<h2 class="text-sspsBlueDark mb-6 text-3xl font-bold">
|
||||
První škola - termín JPZ: <span class="underline">13. 4. 2023</span>
|
||||
</h2>
|
||||
<SchoolSelect
|
||||
{schoolNames}
|
||||
{schoolList}
|
||||
error={$typedErrors['candidate']['firstSchool']['name'] ||
|
||||
$typedErrors['candidate']['firstSchool']['field']}
|
||||
|
|
@ -756,6 +761,7 @@
|
|||
Druhá škola - termín JPZ: <span class="underline">14. 4. 2023</span>
|
||||
</h2>
|
||||
<SchoolSelect
|
||||
{schoolNames}
|
||||
{schoolList}
|
||||
error={$typedErrors['candidate']['secondSchool']['name'] ||
|
||||
$typedErrors['candidate']['secondSchool']['field']}
|
||||
|
|
|
|||
Loading…
Reference in a new issue