Skip to content

GitLab

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

UI enhancements, application procedure fixed, spinner fixed etc

parent 92124969
Expand all 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/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> -->
`
})
......@@ -119,4 +128,21 @@ import {AppSettings} from '../../app.settings';
this.router.navigate(['/student-application-form-main']);
}
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(['/region-schools-select']);
}
}
source/components/student-application-form/sector.courses.select.ts
View file @ 408b0c15
......@@ -21,24 +21,24 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'sectorcourses-fields-select',
template: `
<div class="row equal">
<div class="col-md-12">
<div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
</div>
<form [formGroup]="formGroup">
<div formArrayName="formArray">
<ul class="list-group">
<div *ngFor="let sector$ of sectors$ | async; let i=index">
<li class="list-group-item" (click)="setActiveSector(i)" [style.background-color]="toggleBackgroundColor(i)">
<div *ngFor="let sector$ of sectors$ | async; let i=index; let isOdd=odd; let isEven=even">
<li class="list-group-item isclickable" (click)="setActiveSector(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
<h5>{{sector$.sector_name}}</h5>
</li>
<div *ngFor="let course$ of sector$.courses; let j=index;" [hidden]="i !== sectorActive">
<div *ngFor="let course$ of sector$.courses; let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== sectorActive">
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="col-md-2 col-md-offset-1">
<input #cb type="checkbox" formControlName="{{ course$.globalIndex }}"
(change)="updateCheckedOptions(course$.globalIndex, cb)"
[checked] = " course$.globalIndex === idx "
>
</div>
<div class="col-md-8 col-md-offset-1">
<div class="col-md-8 col-md-offset-1 isclickable">
{{course$.course_name | removeSpaces}}
</div>
</div>
......@@ -47,22 +47,26 @@ import {AppSettings} from '../../app.settings';
</ul>
</div>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="idx === -1" >
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async) || !(showLoader2$ | async)">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-md-6">
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="idx === -1">
<i class="fa fa-forward"></i>
</button>
</div>
</div>
</form>
</div>
</div>
`
})
@Injectable() export default class SectorCoursesSelect implements OnInit {
private sectors$: Observable<ISectors>;
private regions$: Observable<IRegions>;
private showLoader$: Observable<boolean>;
private showLoader2$: Observable<boolean>;
private formGroup: FormGroup;
private rss = new FormArray([]);
private sectorActive = <number>-1;
......@@ -107,6 +111,7 @@ import {AppSettings} from '../../app.settings';
ids = 0;
return state.sectors;
});
this.showLoader$ = this.sectors$.map(sectors => sectors.size === 0);
}
......@@ -116,10 +121,6 @@ import {AppSettings} from '../../app.settings';
this.sectorActive = ind;
}
toggleBackgroundColor(ind) {
return ((this.sectorActive === ind) ? "#fd9665" : "white");
}
saveSelected() {
this._rsa.saveSectorCoursesSelected(this.formGroup.value.formArray, this.sectorsList);
}
......@@ -157,6 +158,7 @@ getAllSchools() {
}, {});
return state.regions;
});
this.showLoader2$ = this.regions$.map(regions => regions.size === 0);
}
......
source/components/student-application-form/sector.fields.select.ts
View file @ 408b0c15
......@@ -21,17 +21,20 @@ import {AppSettings} from '../../app.settings';
selector: 'sector-fields-select',
template: `
<div class="row equal">
<div class="col-md-12">
<!-- <div class="row equal">
<div class="col-md-12"> -->
<div class = "loading" *ngIf="(showLoader$ | async) && (showLoader2$ | async)">
</div>
<form [formGroup]="formGroup">
<div formArrayName="formArray">
<div *ngFor="let sectorField$ of sectorFields$ | async; let i=index">
<li class="list-group-item" (click)="setActiveSectorAndSave(i)" [style.background-color]="toggleBackgroundColor(i)">
<ul class="list-group main-view">
<div *ngFor="let sectorField$ of sectorFields$ | async; let i=index; let isOdd=odd; let isEven=even">
<li class="list-group-item isclickable" (click)="setActiveSectorAndSave(i)" [class.oddout]="isOdd" [class.evenout]="isEven" [class.selectedout]="sectorActive === i">
<h5>{{sectorField$.name}}</h5>
</li>
</div>
</ul>
<!--CHECK BOXES USING BOTSTRAP
<div *ngFor="let sectorField$ of sectorFields$ | async; let i=index">
......@@ -51,23 +54,31 @@ import {AppSettings} from '../../app.settings';
-->
</div>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<button type="button" class="btn-primary btn-lg pull-right" (click)="navigateToSchools()" [disabled]="sectorActive === -1" >
<i class="fa fa-forward"></i>
<div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async) || !(showLoader2$ | async)">
<div class="col-md-6">
<button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-left" (click)="router.navigate(['/epal-class-select']);" >
<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)="navigateToSchools()" [disabled]="sectorActive === -1" >
<i class="fa fa-forward"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- </div>
</div> -->
`
})
@Injectable() export default class SectorFieldsSelect implements OnInit {
private sectorFields$: Observable<ISectorFields>;
private regions$: Observable<IRegions>;
private showLoader$: Observable<boolean>;
private showLoader2$: Observable<boolean>;
public formGroup: FormGroup;
public cfs = new FormArray([]);
private sectorActive = <number>-1;
......@@ -100,6 +111,7 @@ import {AppSettings} from '../../app.settings';
}, {});
return state.sectorFields;
});
this.showLoader$ = this.sectorFields$.map(sectorFields => sectorFields.size === 0);
}
......@@ -124,10 +136,6 @@ import {AppSettings} from '../../app.settings';
this.saveSelected();
}
toggleBackgroundColor(ind) {
return ((this.sectorActive === ind) ? "#fd9665" : "white");
}
getAllSchools() {
//store in Redux the whole schools
this._rsr.getRegionSchools(3,"-1", true);
......@@ -142,6 +150,7 @@ import {AppSettings} from '../../app.settings';
}, {});
return state.regions;
});
this.showLoader2$ = this.regions$.map(regions => regions.size === 0);
}
......
source/containers/globalstyles.css
View file @ 408b0c15
......@@ -147,3 +147,31 @@
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
display: none;
}
.left-side-view > li.active {
background-color: #fd9665;
border-color: #fd9665;
}
.isclickable {
cursor: pointer;
}
.oddin {
background-color: #f2f9ff;
}
.evenin {
background-color: #eceff3;
}
.oddout {
background-color: #dddddd;
}
.evenout {
background-color: #eeeeee;
}
.selectedout {
background-color: #fd9665;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment