UI enhancements, application procedure fixed, spinner fixed etc

parent 92124969
dist/* dist/*
source/app.settings.ts
node_modules/* node_modules/*
!drupal/ !drupal/
drupal/* drupal/*
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
li.list-group-item{ li.list-group-item{
color: black; color: black;
background-color: white; // background-color: white;
border: none!important; border: none!important;
padding: 0.3rem 0.3rem!important; padding: 0.3rem 0.3rem!important;
h5{ h5{
......
export const API_ENDPOINT = '';
export class AppSettings {
public static get API_ENDPOINT(): string {
return '';
}
}
...@@ -169,13 +169,13 @@ ...@@ -169,13 +169,13 @@
</form> </form>
<div class="row"> <div class="row" style="margin-top: 20px;">
<div class="col-md-2 col-md-offset-4"> <div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-center" (click)="saveSelected()"> <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
<i class="fa fa-backward"></i> <i class="fa fa-backward"></i>
</button> </button>
</div> </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"> <button type="button" class="btn-primary btn-lg pull-right" (click)="submitSelected()" [disabled]="studentDataGroup.invalid">
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
......
...@@ -92,6 +92,23 @@ import { ...@@ -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() { submitSelected() {
this._sdfa.saveStudentDataFields([this.studentDataGroup.value]); this._sdfa.saveStudentDataFields([this.studentDataGroup.value]);
......
...@@ -24,70 +24,51 @@ import {AppSettings} from '../../app.settings'; ...@@ -24,70 +24,51 @@ import {AppSettings} from '../../app.settings';
template: ` template: `
<div *ngFor="let epalclass$ of epalclasses$ | async;"> <div *ngFor="let epalclass$ of epalclasses$ | async;">
<h4 style="margin-top: 20px; line-height: 2em; ">Οι επιλογές μου</h4> <h4 style="margin-top: 20px; line-height: 2em; ">Οι επιλογές μου</h4>
<div class="row"> <ul class="list-group left-side-view" style="margin-bottom: 20px;">
<div class="btn-group inline pull-center"> <li class="list-group-item active">
<button type="button" class="btn-primary btn-md pull-center" (click)="defineClass()"> Τάξη εισαγωγής
Η τάξη μου<span class="glyphicon glyphicon-menu-right"></span> </li>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<li class="list-group-item"> <li class="list-group-item">
Τάξη εισαγωγής: {{epalclass$.name }} {{epalclass$.name }}
</li> </li>
</ul> </ul>
</div> </div>
<div *ngFor="let sector$ of sectors$ | async;">
<div *ngFor="let sectorField$ of sectorFields$ | async;"> <div *ngFor="let sectorField$ of sectorFields$ | async">
<div class="row"> <ul class="list-group left-side-view">
<div class="btn-group inline pull-center"> <li class="list-group-item active" *ngIf="sectorField$.selected === true" >
<button type="button" class="btn-primary btn-md pull-center" [hidden] = "classSelected === 1" [disabled] = "classSelected === 3"> {{sectorField$.name}}
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> </li>
</ul> </ul>
</div> </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 *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"> <li class="list-group-item" *ngIf="course$.selected === true">
{{course$.course_name }} {{course$.course_name }}
</li> </li>
</ul>
</div> </div>
</ul>
</div> </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> <ul class="list-group left-side-view" style="margin-bottom: 20px;">
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<div *ngFor="let region$ of regions$ | async;"> <div *ngFor="let region$ of regions$ | async;">
<div *ngFor="let epal$ of region$.epals; " > <div *ngFor="let epal$ of region$.epals; " >
<li class="list-group-item" *ngIf="epal$.selected === true && epal$.order_id === 1"> <li class="list-group-item" *ngIf="epal$.selected === true && epal$.order_id === 1">
Προτίμηση {{epal$.order_id}}: {{epal$.epal_name}} Προτίμηση {{epal$.order_id}}: {{epal$.epal_name}}
</li> </li>
...@@ -104,38 +85,36 @@ import {AppSettings} from '../../app.settings'; ...@@ -104,38 +85,36 @@ import {AppSettings} from '../../app.settings';
</li> </li>
</div> </div>
</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()" <button type="button" class="btn-primary btn-sm pull-right" (click)="defineOrder()"
[hidden] = "numSelectedSchools <= 1 ">> Σειρά προτίμησης</button> [hidden] = "numSelectedSchools <= 1 ">> Σειρά προτίμησης</button>
</div> </div> -->
</ul> </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;"> <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"> <li class="list-group-item">
Όνομα μαθητή: {{studentDataField$.name }} {{studentDataField$.name }}
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
Επώνυμο μαθητή: {{studentDataField$.studentsurname }} {{studentDataField$.studentsurname }}
</li> </li>
</ul>
</div> </div>
<!-- <div *ngFor="let selectedAmkaFill$ of selectedAmkaFills$ | async;"> <!-- <div *ngFor="let selectedAmkaFill$ of selectedAmkaFills$ | async;">
<li class="list-group-item"> <li class="list-group-item">
AMKA μαθητή: {{selectedAmkaFill$.name}} AMKA μαθητή: {{selectedAmkaFill$.name}}
</li> </li>
</div> --> </div> -->
</ul>
</div>
` `
}) })
...@@ -160,9 +139,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -160,9 +139,10 @@ import {AppSettings} from '../../app.settings';
this.courseActive = this.getCourseActive(); this.courseActive = this.getCourseActive();
this.sectors$ = this._ngRedux.select(state => { this.sectors$ = this._ngRedux.select(state => {
//let numsel = 0; //let numsel = 0;
state.sectors.reduce((prevSector, sector) =>{ state.sectors.reduce((prevSector, sector) => {
//if (sector.sector_selected) //if (sector.sector_selected)
sector.courses.reduce((prevCourse, course) =>{ console.log("hello" + sector.sector_selected);
sector.courses.reduce((prevCourse, course) => {
//if (course.selected === true) { //if (course.selected === true) {
// numsel++; // numsel++;
//} //}
...@@ -176,8 +156,9 @@ import {AppSettings} from '../../app.settings'; ...@@ -176,8 +156,9 @@ import {AppSettings} from '../../app.settings';
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0, numsel2 = 0; let numsel = 0, numsel2 = 0;
state.regions.reduce((prevRegion, region) =>{ state.regions.reduce((prevRegion, region) => {
region.epals.reduce((prevEpal, epal) =>{ region.epals.reduce((prevEpal, epal) => {
console.log("hello" + epal.selected);
if (epal.selected === true) { if (epal.selected === true) {
numsel++; numsel++;
} }
...@@ -194,28 +175,28 @@ import {AppSettings} from '../../app.settings'; ...@@ -194,28 +175,28 @@ import {AppSettings} from '../../app.settings';
}); });
this.sectorFields$ = this._ngRedux.select(state => { this.sectorFields$ = this._ngRedux.select(state => {
state.sectorFields.reduce(({}, sectorField) =>{ state.sectorFields.reduce(({}, sectorField) => {
return sectorField; return sectorField;
}, {}); }, {});
return state.sectorFields; return state.sectorFields;
}); });
this.studentDataFields$ = this._ngRedux.select(state => { this.studentDataFields$ = this._ngRedux.select(state => {
state.studentDataFields.reduce(({}, studentDataField) =>{ state.studentDataFields.reduce(({}, studentDataField) => {
return studentDataField; return studentDataField;
}, {}); }, {});
return state.studentDataFields; return state.studentDataFields;
}); });
this.selectedAmkaFills$ = this._ngRedux.select(state => { this.selectedAmkaFills$ = this._ngRedux.select(state => {
state.amkafills.reduce(({}, selectedAmkaFill) =>{ state.amkafills.reduce(({}, selectedAmkaFill) => {
return selectedAmkaFill; return selectedAmkaFill;
}, {}); }, {});
return state.amkafills; return state.amkafills;
}); });
this.epalclasses$ = this._ngRedux.select(state => { this.epalclasses$ = this._ngRedux.select(state => {
state.epalclasses.reduce(({}, epalclass) =>{ state.epalclasses.reduce(({}, epalclass) => {
if (epalclass.name === "Α' Λυκείου") if (epalclass.name === "Α' Λυκείου")
this.classSelected = 1; this.classSelected = 1;
else if (epalclass.name === "Β' Λυκείου") else if (epalclass.name === "Β' Λυκείου")
...@@ -247,10 +228,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -247,10 +228,10 @@ import {AppSettings} from '../../app.settings';
getCourseActive() { getCourseActive() {
const { sectors } = this._ngRedux.getState(); const { sectors } = this._ngRedux.getState();
let l,m; let l, m;
for ( l=0; l<sectors.size; l++) for (l = 0; l < sectors.size; l++)
if (sectors["_tail"]["array"][l]["sector_selected"] === true) if (sectors["_tail"]["array"][l]["sector_selected"] === true)
for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++) for (m = 0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true) if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
return sectors["_tail"]["array"][l]["courses"][m]["course_id"]; return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
} }
......
...@@ -8,7 +8,6 @@ import { IRegions } from '../../store/regionschools/regionschools.types'; ...@@ -8,7 +8,6 @@ import { IRegions } from '../../store/regionschools/regionschools.types';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions'; import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types'; import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import { LoaderService } from '../../services/Spinner.service';
import {RemoveSpaces} from '../../pipes/removespaces'; import {RemoveSpaces} from '../../pipes/removespaces';
...@@ -23,19 +22,19 @@ import {AppSettings} from '../../app.settings'; ...@@ -23,19 +22,19 @@ import {AppSettings} from '../../app.settings';
@Component({ @Component({
selector: 'course-fields-select', selector: 'course-fields-select',
template: ` template: `
<div class = "loading" *ngIf="objLoaderStatus"> <div class = "loading" *ngIf="showLoader$ | async">
</div> </div>
<div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> <div class="col-md-12"> -->
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div formArrayName="formArray"> <div formArrayName="formArray">
<ul class="list-group"> <ul class="list-group main-view">
<div *ngFor="let region$ of regions$ | async; let i=index"> <div *ngFor="let region$ of regions$ | async; let i=index; let isOdd=odd; let isEven=even" >
<li class="list-group-item" (click)="setActiveRegion(i)" [style.background-color]="toggleBackgroundColor(i)"> <li class="list-group-item isclickable" (click)="setActiveRegion(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="regionActive === i">
<h5>{{region$.region_name}}</h5> <h5>{{region$.region_name}}</h5>
</li> </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="row">
<div class="col-md-2 col-md-offset-1"> <div class="col-md-2 col-md-offset-1">
...@@ -44,7 +43,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -44,7 +43,7 @@ import {AppSettings} from '../../app.settings';
[hidden] = "numSelected === 3 && cb.checked === false" [hidden] = "numSelected === 3 && cb.checked === false"
> >
</div> </div>
<div class="col-md-8 col-md-offset-1"> <div class="col-md-8 col-md-offset-1 isclickable">
{{epal$.epal_name | removeSpaces}} {{epal$.epal_name | removeSpaces}}
</div> </div>
</div> </div>
...@@ -54,8 +53,13 @@ import {AppSettings} from '../../app.settings'; ...@@ -54,8 +53,13 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</ul> </ul>
</div> </div>
<div class="row"> <div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)">
<div class="col-md-12 col-md-offset-5"> <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" > <button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0" >
<i class="fa fa-forward"></i> <i class="fa fa-forward"></i>
</button> </button>
...@@ -63,14 +67,15 @@ import {AppSettings} from '../../app.settings'; ...@@ -63,14 +67,15 @@ import {AppSettings} from '../../app.settings';
</div> </div>
</form> </form>
</div> <!-- </div>
</div> </div> -->
` `
}) })
@Injectable() export default class RegionSchoolsSelect implements OnInit { @Injectable() export default class RegionSchoolsSelect implements OnInit {
private regions$: Observable<IRegions>; private regions$: Observable<IRegions>;
private sectors$: Observable<ISectors>; private sectors$: Observable<ISectors>;
private showLoader$: Observable<boolean>;
private formGroup: FormGroup; private formGroup: FormGroup;
private rss = new FormArray([]); private rss = new FormArray([]);
private classActive = "-1"; private classActive = "-1";
...@@ -78,7 +83,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -78,7 +83,6 @@ import {AppSettings} from '../../app.settings';
private courseActive = -1; private courseActive = -1;
private numSelected = <number>0; private numSelected = <number>0;
objLoaderStatus: boolean;
//private schoolArray: Array<boolean> = new Array(); //private schoolArray: Array<boolean> = new Array();
...@@ -86,8 +90,7 @@ import {AppSettings} from '../../app.settings'; ...@@ -86,8 +90,7 @@ import {AppSettings} from '../../app.settings';
private _rsa: RegionSchoolsActions, private _rsa: RegionSchoolsActions,
private _rsb: SectorCoursesActions, private _rsb: SectorCoursesActions,
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private router: Router, private router: Router
private loaderService: LoaderService
) { ) {
this.formGroup = this.fb.group({ this.formGroup = this.fb.group({
...@@ -95,21 +98,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -95,21 +98,10 @@ import {AppSettings} from '../../app.settings';
}); });
this.objLoaderStatus=false;
console.log (this.objLoaderStatus);
}; };
ngOnInit() { 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(); this.classActive = this.classActive = this.getClassActive();
let class_id = -1; let class_id = -1;
...@@ -127,7 +119,6 @@ import {AppSettings} from '../../app.settings'; ...@@ -127,7 +119,6 @@ import {AppSettings} from '../../app.settings';
} }
this._rsa.getRegionSchools(class_id,this.courseActive, false); this._rsa.getRegionSchools(class_id,this.courseActive, false);
console.log(this.courseActive,"aaaaaaaaaaaaaa");
this.regions$ = this._ngRedux.select(state => { this.regions$ = this._ngRedux.select(state => {
let numsel = 0; let numsel = 0;
state.regions.reduce((prevRegion, region) =>{ state.regions.reduce((prevRegion, region) =>{
...@@ -143,10 +134,20 @@ import {AppSettings} from '../../app.settings'; ...@@ -143,10 +134,20 @@ import {AppSettings} from '../../app.settings';
this.numSelected = numsel; this.numSelected = numsel;
return state.regions; return state.regions;
}); });
//this.objLoaderStatus = false; this.showLoader$ = this.regions$.map(regions => regions.size === 0);
this.loaderService.displayLoader(false); // enable spinner }
console.log (this.objLoaderStatus,"BBBBBBBBBBBBB");
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) { setActiveRegion(ind) {
...@@ -155,17 +156,8 @@ import {AppSettings} from '../../app.settings'; ...@@ -155,17 +156,8 @@ import {AppSettings} from '../../app.settings';
this.regionActive = ind; this.regionActive = ind;
} }
toggleBackgroundColor(ind) {
return ((this.regionActive === ind) ? "#fd9665" : "white");
}
saveSelected(cb,j) { saveSelected(cb,j) {
this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray); 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() { navigateToApplication() {
......
...@@ -23,10 +23,10 @@ import {AppSettings} from '../../app.settings'; ...@@ -23,10 +23,10 @@ import {AppSettings} from '../../app.settings';
Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων. Καθορίστε εδώ την επιθυμητή σειρά προτίμησης των σχολείων πατώντας τα αντίστοιχα κουμπάκια δίπλα στα ονόματα των σχολείων.
Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p> Αν συμφωνείτε με την υπάρχουσα σειρά προτίμησης, πατήστε <i>Συνέχεια</i>.</p>
<div class="row equal"> <!-- <div class="row equal">
<div class="col-md-12"> <div class="col-md-12"> -->
<form [formGroup]="formGroup">