Skip to content

GitLab

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

UI enhancements, application procedure fixed, spinner fixed etc

parent 92124969
Hide whitespace changes
Inline Side-by-side
.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> -->
`