Skip to content

GitLab

Commit 408b0c15 authored by Χάρης Παπαδόπουλος's avatar Χάρης Παπαδόπουλος
Browse files
Options

UI enhancements, application procedure fixed, spinner fixed etc

parent 92124969
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 190 deletions
.gitignore
View file @ 408b0c15
dist/*
source/app.settings.ts
node_modules/*
!drupal/
drupal/*
......
myschool/main.scss
View file @ 408b0c15
.main-wrapper {
background: #FFF none repeat-y 0 0;
background: #FFF none repeat-y 0 0;
min-height: calc(100vh - 220px);
#content {
zoom: 1;
......@@ -39,7 +39,7 @@
}
.left-choices {
h4{
h4{
font-weight: bold;
font-size: 1rem;
......@@ -51,9 +51,9 @@
border: none!important;
width: 200px;
padding:5px 10px;
}
}
......@@ -75,13 +75,13 @@
li.list-group-item{
color: black;
background-color: white;
// background-color: white;
border: none!important;
padding: 0.3rem 0.3rem!important;
h5{
font-size: 1rem;
}
}
......@@ -92,11 +92,11 @@
@include media-breakpoint-up(md) {
@include media-breakpoint-up(md) {
.main-wrapper {
#content {
padding: 0 10px 10px;
box-shadow: 0 0 20px #888888;
}
}
}
\ No newline at end of file
}
source/app.settings.deployment.ts 0 → 100644
View file @ 408b0c15
export const API_ENDPOINT = '';
export class AppSettings {
public static get API_ENDPOINT(): string {
return '';
}
}
source/components/student-application-form/application.form.main.html
View file @ 408b0c15
......@@ -169,13 +169,13 @@
</form>
<div class="row">
<div class="col-md-2 col-md-offset-4">
<button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()">
<div class="row" style="margin-top: 20px;">
<div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-8">
<div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-right" (click)="submitSelected()" [disabled]="studentDataGroup.invalid">
<i class="fa fa-forward"></i>
</button>
......
source/components/student-application-form/application.form.main.ts
View file @ 408b0c15
......@@ -92,6 +92,23 @@ import {
}
navigateBack() {
/* this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{
if (epalclass.name === "Α' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Β' Λυκείου")
this.router.navigate(['/region-schools-select']);
else if (epalclass.name === "Γ' Λυκείου")
this.router.navigate(['/region-schools-select']);
return epalclass;
}, {});
return state.epalclasses;
}); */
this.router.navigate(['/schools-order-select']);
}
submitSelected() {
this._sdfa.saveStudentDataFields([this.studentDataGroup.value]);
......
source/components/student-application-form/application.preview.ts
View file @ 408b0c15
......@@ -24,70 +24,51 @@ import {AppSettings} from '../../app.settings';
template: `
<div *ngFor="let epalclass$ of epalclasses$ | async;">
<h4 style="margin-top: 20px; line-height: 2em; ">Οι επιλογές μου</h4>
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" (click)="defineClass()">
Η τάξη μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<ul class="list-group left-side-view" style="margin-bottom: 20px;">
<li class="list-group-item active">
Τάξη εισαγωγής
</li>
<li class="list-group-item">
Τάξη εισαγωγής: {{epalclass$.name }}
{{epalclass$.name }}
</li>
</ul>
</div>
<div *ngFor="let sector$ of sectors$ | async;">
<div *ngFor="let sectorField$ of sectorFields$ | async;">
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" [hidden] = "classSelected === 1" [disabled] = "classSelected === 3">
O τομέας μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<li class="list-group-item" *ngIf="sectorField$.selected === true" >
{{sectorField$.name }}
</li>
<li class="list-group-item" *ngIf="sector$.sector_selected === true" >
{{sector$.sector_name }}
</li>
</ul>
<div *ngFor="let sectorField$ of sectorFields$ | async">
<ul class="list-group left-side-view">
<li class="list-group-item active" *ngIf="sectorField$.selected === true" >
{{sectorField$.name}}
</li>
</ul>
</div>
<div *ngFor="let sector$ of sectors$ | async;">
<ul class="list-group left-side-view" style="margin-bottom: 20px;" *ngIf="sector$.sector_selected === true">
<li class="list-group-item active" *ngIf="sector$.sector_selected === true" >
{{sector$.sector_name }}
</li>
<div *ngFor="let course$ of sector$.courses;" >
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" [hidden] = "classSelected !== 3">
Η ειδικότητά μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<li class="list-group-item" *ngIf="course$.selected === true">
{{course$.course_name }}
</li>
</ul>
</div>
</ul>
</div>
<div *ngIf="regions$.size > 0 | async">
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" id = "butsch" class="btn-primary btn-md pull-center" [disabled] = "numSelectedSchools === 0 ">
Τα σχολεία μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<ul class="list-group left-side-view" style="margin-bottom: 20px;">
<div *ngFor="let region$ of regions$ | async;">
<div *ngFor="let epal$ of region$.epals; " >
<li class="list-group-item" *ngIf="epal$.selected === true && epal$.order_id === 1">
Προτίμηση {{epal$.order_id}}: {{epal$.epal_name}}
</li>
......@@ -104,38 +85,36 @@ import {AppSettings} from '../../app.settings';
</li>
</div>
</div>
<div class="btn-group inline pull-right">
<!-- <div class="btn-group inline pull-right">
<button type="button" class="btn-primary btn-sm pull-right" (click)="defineOrder()"
[hidden] = "numSelectedSchools <= 1 ">> Σειρά προτίμησης</button>
</div>
</div> -->
</ul>
</div>
<div *ngIf="studentDataFields$.size > 0 | async">
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center"
[disabled] = "numSelectedOrder === 0">
Τα στοιχεία μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<div *ngFor="let studentDataField$ of studentDataFields$ | async;">
<ul class="list-group left-side-view" style="margin-bottom: 20px;">
<li class="list-group-item active">
Στοιχεία μαθητή
</li>
<li class="list-group-item">
Όνομα μαθητή: {{studentDataField$.name }}
{{studentDataField$.name }}
</li>
<li class="list-group-item">
Επώνυμο μαθητή: {{studentDataField$.studentsurname }}
{{studentDataField$.studentsurname }}
</li>
</ul>
</div>
<!-- <div *ngFor="let selectedAmkaFill$ of selectedAmkaFills$ | async;">
<li class="list-group-item">
AMKA μαθητή: {{selectedAmkaFill$.name}}
</li>
</div> -->
</ul>
</div>
`
})
......@@ -152,20 +131,21 @@ import {AppSettings} from '../../app.settings';
private classSelected = 0;
constructor(private _ngRedux: NgRedux<IAppState>,
private router: Router
) {
private router: Router
) {
};
ngOnInit() {
this.courseActive = this.getCourseActive();
this.sectors$ = this._ngRedux.select(state => {
//let numsel = 0;
state.sectors.reduce((prevSector, sector) =>{
state.sectors.reduce((prevSector, sector) => {
//if (sector.sector_selected)
sector.courses.reduce((prevCourse, course) =>{
//if (course.selected === true) {
// numsel++;
//}
console.log("hello" + sector.sector_selected);
sector.courses.reduce((prevCourse, course) => {
//if (course.selected === true) {
// numsel++;
//}
return course;
}, {});
return sector;
......@@ -175,9 +155,10 @@ import {AppSettings} from '../../app.settings';
});
this.regions$ = this._ngRedux.select(state => {
let numsel = 0, numsel2 = 0;
state.regions.reduce((prevRegion, region) =>{
region.epals.reduce((prevEpal, epal) =>{
let numsel = 0, numsel2 = 0;
state.regions.reduce((prevRegion, region) => {
region.epals.reduce((prevEpal, epal) => {
console.log("hello" + epal.selected);
if (epal.selected === true) {
numsel++;
}
......@@ -185,44 +166,44 @@ import {AppSettings} from '../../app.settings';
numsel2++;
}
return epal;
}, {});
return region;
}, {});
this.numSelectedSchools = numsel;
this.numSelectedOrder = numsel2;
return state.regions;
});
}, {});
return region;
}, {});
this.numSelectedSchools = numsel;
this.numSelectedOrder = numsel2;
return state.regions;
});
this.sectorFields$ = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) =>{
state.sectorFields.reduce(({}, sectorField) => {
return sectorField;
}, {});
return state.sectorFields;
});
this.studentDataFields$ = this._ngRedux.select(state => {
state.studentDataFields.reduce(({}, studentDataField) =>{
state.studentDataFields.reduce(({}, studentDataField) => {
return studentDataField;
}, {});
return state.studentDataFields;
});
this.selectedAmkaFills$ = this._ngRedux.select(state => {
state.amkafills.reduce(({}, selectedAmkaFill) =>{
state.amkafills.reduce(({}, selectedAmkaFill) => {
return selectedAmkaFill;
}, {});
return state.amkafills;
});
this.epalclasses$ = this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{
if (epalclass.name === "Α' Λυκείου")
this.classSelected = 1;
else if (epalclass.name === "Β' Λυκείου")
this.classSelected = 2;
else if (epalclass.name === "Γ' Λυκείου")
this.epalclasses$ = this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) => {
if (epalclass.name === "Α' Λυκείου")
this.classSelected = 1;
else if (epalclass.name === "Β' Λυκείου")
this.classSelected = 2;
else if (epalclass.name === "Γ' Λυκείου")
this.classSelected = 3;
return epalclass;
return epalclass;
}, {});
return state.epalclasses;
});
......@@ -247,12 +228,12 @@ import {AppSettings} from '../../app.settings';
getCourseActive() {
const { sectors } = this._ngRedux.getState();
let l,m;
for ( l=0; l<sectors.size; l++)
if (sectors["_tail"]["array"][l]["sector_selected"] === true)
for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
let l, m;
for (l = 0; l < sectors.size; l++)
if (sectors["_tail"]["array"][l]["sector_selected"] === true)
for (m = 0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
}
defineCourse() {
......@@ -260,7 +241,7 @@ import {AppSettings} from '../../app.settings';
}
defineOrder() {
this.router.navigate(['/schools-order-select']);
this.router.navigate(['/schools-order-select']);
}
}
source/components/student-application-form/region.schools.select.ts
View file @ 408b0c15
......@@ -8,7 +8,6 @@ import { IRegions } from '../../store/regionschools/regionschools.types';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IAppState } from '../../store/store';
import { LoaderService } from '../../services/Spinner.service';
import {RemoveSpaces} from '../../pipes/removespaces';
......@@ -23,19 +22,19 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'course-fields-select',
template: `
<div class = "loading" *ngIf="objLoaderStatus">
<div class = "loading" *ngIf="showLoader$ | async">
</div>
<div class="row equal">
<div class="col-md-12">
<!-- <div class="row equal">
<div class="col-md-12"> -->
<form [formGroup]="formGroup">
<div formArrayName="formArray">
<ul class="list-group">
<div *ngFor="let region$ of regions$ | async; let i=index">
<li class="list-group-item" (click)="setActiveRegion(i)" [style.background-color]="toggleBackgroundColor(i)">
<ul class="list-group main-view">
<div *ngFor="let region$ of regions$ | async; let i=index; let isOdd=odd; let isEven=even" >
<li class="list-group-item isclickable" (click)="setActiveRegion(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="regionActive === i">
<h5>{{region$.region_name}}</h5>
</li>
<div *ngFor="let epal$ of region$.epals; let j=index;" [hidden]="i !== regionActive">
<div *ngFor="let epal$ of region$.epals; let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== regionActive">
<div class="row">
<div class="col-md-2 col-md-offset-1">
......@@ -44,7 +43,7 @@ import {AppSettings} from '../../app.settings';
[hidden] = "numSelected === 3 && cb.checked === false"
>
</div>
<div class="col-md-8 col-md-offset-1">
<div class="col-md-8 col-md-offset-1 isclickable">
{{epal$.epal_name | removeSpaces}}
</div>
</div>
......@@ -54,8 +53,13 @@ import {AppSettings} from '../../app.settings';
</div>
</ul>
</div>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i>
</button>
......@@ -63,14 +67,15 @@ import {AppSettings} from '../../app.settings';
</div>
</form>
</div>
<!-- </div>
</div>
</div> -->
`
})
@Injectable() export default class RegionSchoolsSelect implements OnInit {
private regions$: Observable<IRegions>;
private sectors$: Observable<ISectors>;
private showLoader$: Observable<boolean>;
private formGroup: FormGroup;
private rss = new FormArray([]);
private classActive = "-1";
......@@ -78,7 +83,6 @@ import {AppSettings} from '../../app.settings';
private courseActive = -1;
private numSelected = <number>0;
objLoaderStatus: boolean;
//private schoolArray: Array<boolean> = new Array();
......@@ -86,8 +90,7 @@ import {AppSettings} from '../../app.settings';
private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions,
private _ngRedux: NgRedux<IAppState>,
private router: Router,
private loaderService: LoaderService
private router: Router
) {
this.formGroup = this.fb.group({
......@@ -95,21 +98,10 @@ import {AppSettings} from '../../app.settings';
});
this.objLoaderStatus=false;
console.log (this.objLoaderStatus);
};
ngOnInit() {
this.loaderService.loaderStatus.subscribe((val: boolean) => {
this.objLoaderStatus = val;
});
this.loaderService.displayLoader(true); // enable spinner
// this.objLoaderStatus = true;
console.log (this.objLoaderStatus,"AAAAAAAAAAAAA");
this.classActive = this.classActive = this.getClassActive();
let class_id = -1;
......@@ -127,7 +119,6 @@ import {AppSettings} from '../../app.settings';
}
this._rsa.getRegionSchools(class_id,this.courseActive, false);
console.log(this.courseActive,"aaaaaaaaaaaaaa");
this.regions$ = this._ngRedux.select(state => {
let numsel = 0;
state.regions.reduce((prevRegion, region) =>{
......@@ -143,10 +134,20 @@ import {AppSettings} from '../../app.settings';
this.numSelected = numsel;
return state.regions;
});
//this.objLoaderStatus = false;
this.loaderService.displayLoader(false); // enable spinner
console.log (this.objLoaderStatus,"BBBBBBBBBBBBB");
this.showLoader$ = this.regions$.map(regions => regions.size === 0);
}
navigateBack() {
// this.router.navigate(['/epal-class-select']);
if (this.classActive === "Α' Λυκείου") {
this.router.navigate(['/epal-class-select']);
}
else if (this.classActive === "Β' Λυκείου") {
this.router.navigate(['/sector-fields-select']);
}
else if (this.classActive === "Γ' Λυκείου") {
this.router.navigate(['/sectorcourses-fields-select']);
}
}
setActiveRegion(ind) {
......@@ -155,17 +156,8 @@ import {AppSettings} from '../../app.settings';
this.regionActive = ind;
}
toggleBackgroundColor(ind) {
return ((this.regionActive === ind) ? "#fd9665" : "white");
}
saveSelected(cb,j) {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
//σε κάθε νέο check, αρχικοποίησε τη σειρά προτιμήσεων (σειρά προτίμησης:0)
/* let schoolArrayOrders: Array<number> = new Array();
for (let i=0; i < this.formGroup.value.formArray.length; i++)
schoolArrayOrders.push(0);
this._rsa.saveRegionSchoolsOrder(schoolArrayOrders); */
}
navigateToApplication() {
......
source/components/student-application-form/schools-order-select.ts
View file @ 408b0c15
......@@ -23,10 +23,10 @@ import {AppSettings} from '../../app.settings';
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων.
Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>
<div class="row equal">
<div class="col-md-12">
<!-- <div class="row equal">
<div class="col-md-12"> -->
<form [formGroup]="formGroup">
<div *ngFor="let schoolField$ of schoolNames; let i=index">
<div *ngFor="let schoolField$ of schoolNames; let i=index; let isOdd=odd; let isEven=even" [class.odd]="isOdd" [class.even]="isEven">
<button type="button" class="btn btn-info btn-sm pull-right" style="width:120px;margin-bottom:4px;white-space: normal;word-wrap:break-word;"
(click)="changeOrder(i,'up')" *ngIf = "i !== 0">Ανέβασέ με</button>
<!--
......@@ -40,13 +40,22 @@ import {AppSettings} from '../../app.settings';
Προτίμηση {{i+1}}: {{schoolField$}}
</li>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" ><i class="fa fa-forward"></i></button>
<div class="row" style="margin-top: 20px;">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack();" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToStudentForm()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i>
</button>
</div>
</div>
</form>
</div>
<!-- </div>
</div>
</div> -->
`