epal.class.select.ts 4.54 KB
Newer Older
Open Source Developer's avatar
Open Source Developer committed
1
import { Component, OnInit } from '@angular/core';
Open Source Developer's avatar
Open Source Developer committed
2 3 4 5 6 7
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { Injectable } from "@angular/core";
import { EpalClassesActions } from '../../actions/epalclass.actions';
import { NgRedux, select } from 'ng2-redux';
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
Open Source Developer's avatar
Open Source Developer committed
8 9 10
import { SectorFieldsActions } from '../../actions/sectorfields.actions';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
Open Source Developer's avatar
Open Source Developer committed
11 12 13 14 15 16 17 18 19 20 21 22
import { IAppState } from '../../store/store';
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
    selector: 'epal-class-select',
    template: `
Open Source Developer's avatar
trans  
Open Source Developer committed
23
    <div class="row">
24
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
trans  
Open Source Developer committed
25
    </div>
Open Source Developer's avatar
trans  
Open Source Developer committed
26
    <h4> Επιλογή Τάξης </h4>
Open Source Developer's avatar
Open Source Developer committed
27
    <form [formGroup]="formGroup">
Open Source Developer's avatar
trans  
Open Source Developer committed
28
           <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε την τάξη εισαγωγής του μαθητή στην Επαγγελματική Εκπαίδευση και στη συνέχεια επιλέξτε <i>Συνέχεια</i>.</p>
Open Source Developer's avatar
Open Source Developer committed
29
           <div *ngFor="let epalclass$ of epalclasses$ | async;"> </div>
30
            <div class="form-group" style= "margin-top: 50px; margin-bottom: 100px;">
Open Source Developer's avatar
trans  
Open Source Developer committed
31
              <label for="name"></label><br/>
Open Source Developer's avatar
Open Source Developer committed
32
                    <select class="form-control" formControlName="name" (change)="initializestore()">
Open Source Developer's avatar
confli  
Open Source Developer committed
33

Open Source Developer's avatar
trans  
Open Source Developer committed
34 35
                        <option value=1>Α’ Λυκείου</option>
                        <option value=2>Β’ Λυκείου</option>
36 37
                        <option value=3>Γ' Λυκείου</option>
                        <option value=4>Δ' Λυκείου</option>
38

Open Source Developer's avatar
Open Source Developer committed
39 40
                    </select>

41
            </div>
Open Source Developer's avatar
Open Source Developer committed
42
        <div class="row">
43 44 45 46 47 48
        <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-6">
49 50
                <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="saveSelected()">
               <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
Open Source Developer's avatar
Open Source Developer committed
51 52 53
                </button>
            </div>
        </div>
Open Source Developer's avatar
a  
Open Source Developer committed
54 55 56 57 58

        <div *ngIf="emptyselection==true">
             Παρακαλώ επιλέξτε μια τάξη
        </div>

Open Source Developer's avatar
Open Source Developer committed
59 60 61 62 63 64 65 66 67
    </form>
   `
})

@Injectable() export default class EpalClassesSelect implements OnInit {
    private epalclasses$: Observable<IEpalClasses>;

    public formGroup: FormGroup;

Open Source Developer's avatar
a  
Open Source Developer committed
68
       emptyselection = false;
Open Source Developer's avatar
Open Source Developer committed
69 70 71
       constructor(private fb: FormBuilder,
                private _cfa: EpalClassesActions,
                private _ngRedux: NgRedux<IAppState>,
Open Source Developer's avatar
Open Source Developer committed
72 73 74
                private _csa: SectorCoursesActions,
                private _sfa: SectorFieldsActions,
                private _rsa: RegionSchoolsActions,
Open Source Developer's avatar
Open Source Developer committed
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
                private router: Router) {
       this.formGroup = this.fb.group({
            name: []
            });
        };

    ngOnInit() {

          this.epalclasses$ = this._ngRedux.select(state => {
            if (state.epalclasses.size > 0) {
                state.epalclasses.reduce(({}, epalclass) => {
                    this.formGroup.setValue(epalclass);
                    return epalclass;
                }, {});
            }
            return state.epalclasses;
        });

    }

    saveSelected() {
Open Source Developer's avatar
a  
Open Source Developer committed
96

97
        if (this.formGroup.value.name == undefined) {
Open Source Developer's avatar
a  
Open Source Developer committed
98
                   this.emptyselection = true;
99
        }
Open Source Developer's avatar
a  
Open Source Developer committed
100 101
        else
        {
Open Source Developer's avatar
trans  
Open Source Developer committed
102
            console.log(this.formGroup.value);
Open Source Developer's avatar
a  
Open Source Developer committed
103
            this._cfa.saveEpalClassesSelected(this.formGroup.value);
Open Source Developer's avatar
trans  
Open Source Developer committed
104
            if (this.formGroup.value.name === "1")
105
              this.router.navigate(['/region-schools-select']);
Open Source Developer's avatar
trans  
Open Source Developer committed
106
            else if (this.formGroup.value.name === "2")
107
                this.router.navigate(['/sector-fields-select']);
108
            else if (this.formGroup.value.name === "3" || this.formGroup.value.name === "4")
109 110
                this.router.navigate(['/sectorcourses-fields-select']);

Open Source Developer's avatar
a  
Open Source Developer committed
111
        }
112

Open Source Developer's avatar
Open Source Developer committed
113
    }
Open Source Developer's avatar
Open Source Developer committed
114

115 116 117 118
    navigateBack() {
        this.router.navigate(['/intro-statement']);
    }

Open Source Developer's avatar
Open Source Developer committed
119 120 121 122

    initializestore()
    {
       this._cfa.saveEpalClassesSelected(this.formGroup.value);
123 124 125
       this._sfa.initSectorFields();
       this._rsa.initRegionSchools();
       this._csa.initSectorCourses();
Open Source Developer's avatar
Open Source Developer committed
126 127
    }

Open Source Developer's avatar
a  
Open Source Developer committed
128
}