Merge branch 'front_end_optimizations' into 'develop'

Front end optimizations

See merge request !27
parents fd7da3f8 408b0c15
dist/*
source/app.settings.ts
node_modules/*
!drupal/
drupal/*
......
.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
}
import { LOGININFO_SAVE } from '../constants';
import { LOGININFO_SAVE, LOGININFO_INIT } from '../constants';
import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store';
......@@ -19,4 +19,12 @@ export class LoginInfoActions {
});
};
initLoginInfo = () => {
return this._ngRedux.dispatch({
type: LOGININFO_INIT,
payload: {
}
});
};
}
import { REGIONSCHOOLS_RECEIVED, REGIONSCHOOLS_SELECTED_SAVE, REGIONSCHOOLS_ORDER_SAVE } from '../constants';
import { REGIONSCHOOLS_RECEIVED, REGIONSCHOOLS_SELECTED_SAVE, REGIONSCHOOLS_ORDER_SAVE, REGIONSCHOOLS_INIT } from '../constants';
import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store';
......@@ -25,6 +25,14 @@ export class RegionSchoolsActions {
}
};
initRegionSchools = () => {
return this._ngRedux.dispatch({
type: REGIONSCHOOLS_INIT,
payload: {
}
});
};
/*
getRegionSchools_Reload = (courseActive) => {
const { regions } = this._ngRedux.getState();
......
import { SECTORCOURSES_RECEIVED, SECTORCOURSES_SELECTED_SAVE } from '../constants';
import { SECTORCOURSES_RECEIVED, SECTORCOURSES_SELECTED_SAVE, SECTORCOURSES_INIT } from '../constants';
import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store';
......@@ -25,6 +25,14 @@ export class SectorCoursesActions {
}
};
initSectorCourses = () => {
return this._ngRedux.dispatch({
type: SECTORCOURSES_INIT,
payload: {
}
});
};
/*
getSectorCourses_Reload = () => {
const { sectors } = this._ngRedux.getState();
......
import { SECTORFIELDS_RECEIVED, SECTORFIELDS_SELECTED_SAVE } from '../constants';
import { SECTORFIELDS_RECEIVED, SECTORFIELDS_SELECTED_SAVE, SECTORFIELDS_INIT } from '../constants';
import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store';
......@@ -6,32 +6,41 @@ import { HelperDataService } from '../services/helper-data-service';
@Injectable()
export class SectorFieldsActions {
constructor(
private _ngRedux: NgRedux<IAppState>,
private _hds: HelperDataService) {}
constructor(
private _ngRedux: NgRedux<IAppState>,
private _hds: HelperDataService) { }
getSectorFields = (reload) => {
const { sectorFields } = this._ngRedux.getState();
//if (sectorFields.size === 0) {
if (reload === true || (reload === false && sectorFields.size === 0)) {
return this._hds.getSectorFields().then(sectorFields => {
return this._ngRedux.dispatch({
type: SECTORFIELDS_RECEIVED,
payload: {
sectorFields
}
getSectorFields = (reload) => {
const { sectorFields } = this._ngRedux.getState();
//if (sectorFields.size === 0) {
if (reload === true || (reload === false && sectorFields.size === 0)) {
return this._hds.getSectorFields().then(sectorFields => {
return this._ngRedux.dispatch({
type: SECTORFIELDS_RECEIVED,
payload: {
sectorFields
}
});
});
}
};
initSectorFields = () => {
return this._ngRedux.dispatch({
type: SECTORFIELDS_INIT,
payload: {
}
});
}
};
};
saveSectorFieldsSelected = (sectorFieldsSelected) => {
return this._ngRedux.dispatch({
type: SECTORFIELDS_SELECTED_SAVE,
payload: {
sectorFieldsSelected
}
});
};
saveSectorFieldsSelected = (sectorFieldsSelected) => {
return this._ngRedux.dispatch({
type: SECTORFIELDS_SELECTED_SAVE,
payload: {
sectorFieldsSelected
}
});
};
}
export const API_ENDPOINT = '';
export class AppSettings {
public static get API_ENDPOINT(): string {
return '';
}
}
export const API_ENDPOINT = 'http://eepal.dev/drupal';
export class AppSettings {
public static get API_ENDPOINT(): string {
// return 'http://localhost/drupal-8.2.5';
// return 'http://localhost/angular/eepal-front/drupal';
......
......@@ -11,15 +11,17 @@ import {
FormControl,
FormArray
} from '@angular/forms';
import { AppSettings } from '../app.settings';
import { API_ENDPOINT } from '../app.settings';
@Component({
selector: 'home',
template: `
<div>
<form [formGroup]="formGroup" method = "POST" action="http://eepal.dev/drupal/oauth/login" #form>
<form [formGroup]="formGroup" method = "POST" action="{{apiEndPoint}}/oauth/login" #form>
<!-- <input type="hidden" name="X-oauth-enabled" value="true"> -->
<div *ngFor="let loginInfoToken$ of loginInfo$ | async; let i=index">
<div class="row">
<div *ngFor="let loginInfoToken$ of loginInfo$ | async; let i=index"></div>
<!-- <div class="row">
<div class="col-md-6">
{{loginInfoToken$.auth_token}}
</div>
......@@ -27,15 +29,16 @@ import { AppSettings } from '../app.settings';
{{loginInfoToken$.auth_role}}
</div>
</div>
</div>
<div class="row">
</div> -->
<div class="row" style="min-height: 300px; margin-top: 100px;">
<div *ngIf="!authToken" class="col-md-7 col-md-offset-5">
<button type="submit" class="btn-primary btn-lg pull-center" (click)="form.submit()">
<div *ngIf="!authToken" class="col-md-8 offset-md-4">
<button type="submit" class="btn-primary btn-lg" (click)="form.submit()">
Είσοδος μέσω TaxisNet<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<!--
<div class="row">
<div *ngIf="authToken" class="col-md-7 col-md-offset-5">
<h3>Καλώς ήρθατε</h3>
......@@ -49,6 +52,7 @@ import { AppSettings } from '../app.settings';
</button>
</div>
</div>
-->
</form>
</div>
`
......@@ -58,16 +62,19 @@ export default class Home implements OnInit {
private authToken: string;
private authRole: string;
private loginInfo$: Observable<ILoginInfo>;
private apiEndPoint = API_ENDPOINT;
constructor(private fb: FormBuilder,
private _ata: LoginInfoActions,
private _ngRedux: NgRedux<IAppState>,
private activatedRoute: ActivatedRoute
private activatedRoute: ActivatedRoute,
private router: Router
) {
this.authToken = '';
this.authRole = '';
this.formGroup = this.fb.group({
Username: [],
Paswd: []
// Username: [],
// Paswd: []
});
};
......@@ -77,16 +84,21 @@ export default class Home implements OnInit {
state.loginInfo.reduce(({}, loginInfoToken) => {
this.authToken = loginInfoToken.auth_token;
this.authRole = loginInfoToken.auth_role;
if (this.authToken && this.authToken.length > 0)
this.router.navigate(['/epal-class-select']);
return loginInfoToken;
}, {});
}
return state.loginInfo;
});
// subscribe to router event
this.activatedRoute.queryParams.subscribe((params: Params) => {
this.authToken = params['auth_token'];
this.authRole = params['auth_role'];
if (params) {
this.authToken = params['auth_token'];
this.authRole = params['auth_role'];
}
if (this.authToken && this.authRole)
this._ata.saveLoginInfo({ auth_token: this.authToken, auth_role: this.authRole });
// console.log(this.authToken);
......
......@@ -8,8 +8,15 @@
<img src="../myschool/assets/images/myschool_logo.png" alt="Αρχική" />
</a>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNav">
<div *ngFor="let loginInfoToken$ of loginInfo$ | async; let i=index"></div>
<ul class="navbar-nav">
<b>Όνομα Χρήστη:</b> {{this.cuser}}
&nbsp;&nbsp;
<div *ngIf="authToken">
<button type="button" class="btn-primary btn-sm pull-right" (click)="oauthSignOut()">
<i class="fa fa-sign-out"></i>
</button>
</div>
<!--
<li class="nav-item" [ngClass]="{active: path=='application-preview'}">
......
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import { Injectable } from "@angular/core";
import { HelperDataService } from '../../services/helper-data-service';
import { Observable } from 'rxjs/Rx';
import { LoginInfoActions } from '../../actions/logininfo.actions';
import { ILoginInfo } from '../../store/logininfo/logininfo.types';
import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store';
@Component({
selector: 'reg-navbar',
......@@ -8,22 +14,46 @@ import { HelperDataService } from '../../services/helper-data-service';
})
@Injectable() export default class NavbarComponent implements OnInit{
private authToken: string;
private authRole: string;
private loginInfo$: Observable<ILoginInfo>;
public cuser :any;
public cuser :any;
constructor( private _ata: LoginInfoActions,
private _hds: HelperDataService,
private _ngRedux: NgRedux<IAppState>,
private router: Router
) {
this.authToken = '';
this.authRole = '';
constructor( private _hds: HelperDataService) {
};
ngOnInit() {
this.loginInfo$ = this._ngRedux.select(state => {
if (state.loginInfo.size > 0) {
state.loginInfo.reduce(({}, loginInfoToken) => {
this.authToken = loginInfoToken.auth_token;
this.authRole = loginInfoToken.auth_role;
return loginInfoToken;
}, {});
}
return state.loginInfo;
});
this._hds.getCurrentUser().then( cuser => this.cuser= cuser );
}
oauthSignOut() {
this._hds.signOut().then(data => {
this._ata.initLoginInfo();
this.authToken = '';
this.authRole = '';
this.router.navigate(['/']);
});
}
......
......@@ -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>
......
......@@ -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]);
......
......@@ -22,123 +22,99 @@ import {AppSettings} from '../../app.settings';
@Component({
selector: 'application-preview-select',
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;">
<div *ngFor="let epalclass$ of epalclasses$ | async;">
<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>
</div>
</ul>
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" (click)="defineSector()" [hidden] = "classSelected === 1" [disabled] = "classSelected === 3">
O τομέας μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</ul>
</div>
<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>
<ul class="list-group" style="margin-bottom: 20px;">
<div *ngFor="let sectorField$ of sectorFields$ | async;">
<li class="list-group-item" *ngIf="sectorField$.selected === true" >
{{sectorField$.name }}
</li>
</div>
<div *ngFor="let sector$ of sectors$ | async;">
<li class="list-group-item" *ngIf="sector$.sector_selected === true" >
<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>
</ul>
<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" (click)="defineCourse()" [hidden] = "classSelected !== 3">
Η ειδικότητά μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</div>
<ul class="list-group" style="margin-bottom: 20px;">
<div *ngFor="let sector$ of sectors$ | async;">
<div *ngFor="let course$ of sector$.courses;" >
<li class="list-group-item" *ngIf="course$.selected === true">
{{course$.course_name }}
</li>
</div>
</div>
</ul>
<div class="row">
<div class="btn-group inline pull-center">
<button type="button" id = "butsch" class="btn-primary btn-md pull-center" (click)="defineSchools()" [disabled] = "numSelectedSchools === 0 ">
Τα σχολεία μου<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</ul>
</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>
<li class="list-group-item" *ngIf="epal$.selected === true && epal$.order_id === 0">
{{epal$.epal_name }}
</li>
</div>
</div>
<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 === 2">
Προτίμηση {{epal$.order_id}}: {{epal$.epal_name }}
</li>
</div>
</div>
<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 === 3">
Προτίμηση {{epal$.order_id}}: {{epal$.epal_name }}
</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 class="row">
<div class="btn-group inline pull-center">
<button type="button" class="btn-primary btn-md pull-center" (click)="definePersonalData()"
[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;">
<!-- <div *ngFor="let selectedAmkaFill$ of selectedAmkaFills$ | async;">
<li class="list-group-item">
AMKA μαθητή: {{selectedAmkaFill$.name}}
</li>
</div>
</ul>
</div> -->
`
})
......@@ -155,20 +131,21 @@ import {AppSettings} from '../../app.settings';
private classSelected = 0;