application.preview.ts 13.5 KB
Newer Older
1
import { Component, OnInit, OnDestroy } from '@angular/core';
2
import { Router } from '@angular/router';
3
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
4 5 6 7 8 9
import { Injectable } from "@angular/core";
import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store';
import { SectorFieldsActions } from '../../actions/sectorfields.actions';
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
Open Source Developer's avatar
Open Source Developer committed
10
import { EpalClassesActions } from '../../actions/epalclass.actions';
11 12
import { ISectorFields } from '../../store/sectorfields/sectorfields.types';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
13
import { IRegions, IRegionSchool } from '../../store/regionschools/regionschools.types';
Open Source Developer's avatar
Open Source Developer committed
14
import { IEpalClasses } from '../../store/epalclasses/epalclasses.types';
15
import {AppSettings} from '../../app.settings';
16 17 18 19
import { REGION_SCHOOLS_INITIAL_STATE } from '../../store/regionschools/regionschools.initial-state';
import { EPALCLASSES_INITIAL_STATE } from '../../store/epalclasses/epalclasses.initial-state';
import { SECTOR_COURSES_INITIAL_STATE } from '../../store/sectorcourses/sectorcourses.initial-state';
import { SECTOR_FIELDS_INITIAL_STATE } from '../../store/sectorfields/sectorfields.initial-state';
20
import { IStudentDataFields } from '../../store/studentdatafields/studentdatafields.types';
21
import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields/studentdatafields.initial-state';
Open Source Developer's avatar
preview  
Open Source Developer committed
22 23 24
import { ICriteria, ICriter } from '../../store/criteria/criteria.types';
import { CRITERIA_INITIAL_STATE } from '../../store/criteria/criteria.initial-state';

25

26 27 28
@Component({
    selector: 'application-preview-select',
    template: `
29
        <div *ngFor="let epalclass$ of epalclasses$ | async;">
30
        <h4 style="margin-top: 20px; line-height: 2em; ">Οι επιλογές μου</h4>
31 32 33 34
        <ul class="list-group left-side-view" style="margin-bottom: 20px;">
                <li class="list-group-item active">
                    Τάξη εισαγωγής
                </li>
Open Source Developer's avatar
trans  
Open Source Developer committed
35
                <li class="list-group-item" *ngIf="epalclass$.name === '1'">
36
                    Α’ Λυκείου
Open Source Developer's avatar
trans  
Open Source Developer committed
37 38
                </li>
                <li class="list-group-item" *ngIf="epalclass$.name === '2'">
39
                    Β’ Λυκείου
Open Source Developer's avatar
trans  
Open Source Developer committed
40 41
                </li>
                <li class="list-group-item" *ngIf="epalclass$.name === '3'">
42
                    Γ’ Λυκείου
Open Source Developer's avatar
Open Source Developer committed
43
                </li>
44 45 46
                <li class="list-group-item" *ngIf="epalclass$.name === '4'">
                    Δ’ Λυκείου
                </li>
47

Open Source Developer's avatar
Open Source Developer committed
48
        </ul>
49
        </div>
Open Source Developer's avatar
Open Source Developer committed
50

51 52 53 54 55 56
        <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>
57
        </div>
58

59 60 61 62 63
    <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>
64
        <div *ngFor="let course$ of sector$.courses;" >
65

66
                <li class="list-group-item" *ngIf="course$.selected === true">
Open Source Developer's avatar
UI  
Open Source Developer committed
67
                    {{course$.course_name   }}
68
                </li>
69 70

        </div>
71
            </ul>
72
        </div>
73

74
        <ul *ngIf="(regions$ | async).size > 0" class="list-group left-side-view" style="margin-bottom: 20px;">
75

76
                <div *ngFor="let epal$ of selectedSchools$ | async; let i=index; let isOdd=odd; let isEven=even" >
77

78
                <li class="list-group-item" [class.oddout]="isOdd" [class.evenout]="isEven">
79
                    <span class="roundedNumber">{{(i+1)}}</span>&nbsp;&nbsp;{{epal$.epal_name}}
80 81
                </li>
              </div>
82
        </ul>
83

Open Source Developer's avatar
Open Source Developer committed
84
        <div *ngIf="currentUrl === '/application-submit'">
85
              <div *ngFor="let studentDataField$ of studentDataFields$ | async;">
86 87 88 89
              <ul class="list-group left-side-view" style="margin-bottom: 20px;">
              <li class="list-group-item active">
                  Στοιχεία μαθητή
              </li>
Open Source Developer's avatar
preview  
Open Source Developer committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
              </ul>
              <div><label for="name">Όνομα μαθητή</label> <p class="form-control" id="name" style="border:1px solid #eceeef;">   {{studentDataField$.name}} </p> </div>
              <div><label for="studentsurname">Επώνυμο μαθητή</label> <p class="form-control" id = "studentsurname" style="border:1px solid #eceeef;"> {{studentDataField$.studentsurname}} </p></div>
              <div><label for="fatherfirstname">Όνομα Πατέρα</label> <p class="form-control" id = "fatherfirstname" style="border:1px solid #eceeef;"> {{studentDataField$.fatherfirstname}} </p></div>
              <div><label for="fathersurname">Επώνυμο Πατέρα</label> <p class="form-control" id = "fathersurname" style="border:1px solid #eceeef;"> {{studentDataField$.fathersurname}} </p></div>
              <div><label for="motherfirstname">Όνομα Μητέρας</label> <p class="form-control" id = "motherfirstname" style="border:1px solid #eceeef;"> {{studentDataField$.motherfirstname}} </p></div>
              <div><label for="mothersurname">Επώνυμο Μητέρας</label> <p class="form-control" id = "mothersurname" style="border:1px solid #eceeef;"> {{studentDataField$.mothersurname}} </p></div>
              <div><label for="birthdate">Ημερομηνία Γέννησης</label> <p class="form-control" id = "birthdate" style="border:1px solid #eceeef;"> {{studentDataField$.studentbirthdate}} </p></div>
                      <table>
                              <tr>
                                  <td>
                                      <div class="form-group">
                                          <label for="regionaddress">Διεύθυνση κατοικίας</label><p class="form-control" id = "regionaddress" style="border:1px solid #eceeef;"> {{studentDataField$.regionaddress}} </p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="form-group">
                                          <label for="regiontk">TK </label><p class="form-control" id = "regiontk" style="border:1px solid #eceeef;"> {{studentDataField$.regiontk}} </p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="form-group">
                                          <label for="regionarea">Πόλη/Περιοχή</label><p class="form-control" id = "regionarea" style="border:1px solid #eceeef;"> {{studentDataField$.regionarea}} </p>
                                      </div>
                                  </td>
                             </tr>
                      </table>
                      <div><label for="certificatetype">Τύπος απολυτηρίου</label> <p class="form-control" id = "certificatetype" style="border:1px solid #eceeef;"> {{studentDataField$.certificatetype}} </p></div>
                      <div><label for="telnum">Τηλέφωνο επικοινωνίας</label> <p class="form-control" id = "telnum" style="border:1px solid #eceeef;"> {{studentDataField$.telnum}} </p></div>
                      <div><label for="relationtostudent">Η αίτηση γίνεται από</label> <p class="form-control" id = "relationtostudent" style="border:1px solid #eceeef;"> {{studentDataField$.relationtostudent}} </p></div>

                      <ul class="list-group left-side-view" style="margin-bottom: 20px;">
                      <li class="list-group-item active">
Open Source Developer's avatar
Open Source Developer committed
123
                                  <div *ngIf="currentUrl === '/application-submit'">
Open Source Developer's avatar
preview  
Open Source Developer committed
124 125 126 127
                                         Κοινωνικά/Εισοδηματικά Κριτήρια
                                  </div>
                      </li>
                      </ul>
128 129
              </div>

130
            </div>
Open Source Developer's avatar
Open Source Developer committed
131
            <div *ngIf="currentUrl === '/application-submit'">
Open Source Developer's avatar
preview  
Open Source Developer committed
132 133
                  <div *ngFor="let criteriaField$ of criteriaFields$ | async;">
                  <div *ngIf="criteriaField$.selected === true">
134
                        {{criteriaField$.name}}
Open Source Developer's avatar
preview  
Open Source Developer committed
135 136 137 138
                  </div>
                  </div>
             </div>

139 140 141 142
  `
})

@Injectable() export default class ApplicationPreview implements OnInit {
143 144
    private sectors$: BehaviorSubject<ISectors>;
    private regions$: BehaviorSubject<IRegions>;
145
    private selectedSchools$: BehaviorSubject<Array<IRegionSchool>> = new BehaviorSubject(Array());
146
    private sectorFields$: BehaviorSubject<ISectorFields>;
Open Source Developer's avatar
preview  
Open Source Developer committed
147
    private criteriaFields$: BehaviorSubject<ICriter>;
148 149 150 151 152
    private studentDataFields$: BehaviorSubject<IStudentDataFields>;
    private epalclasses$: BehaviorSubject<IEpalClasses>;
    private sectorsSub: Subscription;
    private regionsSub: Subscription;
    private sectorFieldsSub: Subscription;
Open Source Developer's avatar
preview  
Open Source Developer committed
153
    private criteriaFieldsSub: Subscription;
154
    private studentDataFieldsSub: Subscription;
155 156
    private courseActive = "-1";
    private numSelectedSchools = <number>0;
157 158
    private numSelectedOrder = <number>0;
    private classSelected = 0;
Open Source Developer's avatar
preview  
Open Source Developer committed
159
    public currentUrl: string;
160 161

    constructor(private _ngRedux: NgRedux<IAppState>,
162 163
        private router: Router
    ) {
164 165 166

        this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
        this.epalclasses$ = new BehaviorSubject(EPALCLASSES_INITIAL_STATE);
167

168 169
        this.sectors$ = new BehaviorSubject(SECTOR_COURSES_INITIAL_STATE);
        this.sectorFields$ = new BehaviorSubject(SECTOR_FIELDS_INITIAL_STATE);
Open Source Developer's avatar
preview  
Open Source Developer committed
170
        this.criteriaFields$ = new BehaviorSubject(CRITERIA_INITIAL_STATE);
171
        this.studentDataFields$ = new BehaviorSubject(STUDENT_DATA_FIELDS_INITIAL_STATE);
172
    };
173 174

    ngOnInit() {
Open Source Developer's avatar
preview  
Open Source Developer committed
175
        this.currentUrl = this.router.url;
176
        this.sectorsSub = this._ngRedux.select(state => {
177 178
            state.sectors.reduce((prevSector, sector) => {
                sector.courses.reduce((prevCourse, course) => {
179 180 181 182
                    if (course.selected === true) {
                        this.courseActive = course.course_id;
                    }

183 184 185 186
                    return course;
                }, {});
                return sector;
            }, {});
187
            //this.numSelectedCourses = numsel;
188
            return state.sectors;
189
        }).subscribe(this.sectors$);
190

191
        this.regionsSub = this._ngRedux.select(state => {
192
            let numsel = 0, numsel2 = 0;
193
            let selectedSchools = Array<IRegionSchool>();
194 195
            state.regions.reduce((prevRegion, region) => {
                region.epals.reduce((prevEpal, epal) => {
196
                    if (epal.selected === true) {
197
                        numsel++;
198
                        selectedSchools.push(epal);
199 200 201 202
                    }
                    if (epal.order_id !== 0) {
                        numsel2++;
                    }
203
                    return epal;
204 205 206 207 208
                }, {});
                return region;
            }, {});
            this.numSelectedSchools = numsel;
            this.numSelectedOrder = numsel2;
209
            this.selectedSchools$.next(selectedSchools.sort(this.compareSchools));
210
//            this.selectedSchools$.next(selectedSchools);
211
            return state.regions;
212
        }).subscribe(this.regions$);
213

214
        this.sectorFieldsSub = this._ngRedux.select(state => {
215
            state.sectorFields.reduce(({}, sectorField) => {
216 217 218
                return sectorField;
            }, {});
            return state.sectorFields;
219
        }).subscribe(this.sectorFields$);
220

221
        this.studentDataFieldsSub = this._ngRedux.select(state => {
222
            state.studentDataFields.reduce(({}, studentDataField) => {
223 224 225
                return studentDataField;
            }, {});
            return state.studentDataFields;
226
        }).subscribe(this.studentDataFields$);
227

Open Source Developer's avatar
preview  
Open Source Developer committed
228 229 230 231 232 233 234 235

        this.criteriaFieldsSub = this._ngRedux.select(state => {
            state.criter.reduce(({}, criteriaField) => {
                return criteriaField;
            }, {});
            return state.criter;
        }).subscribe(this.criteriaFields$);

236
        this._ngRedux.select(state => {
237 238 239 240 241 242
            state.epalclasses.reduce(({}, epalclass) => {
                if (epalclass.name === "Α' Λυκείου")
                    this.classSelected = 1;
                else if (epalclass.name === "Β' Λυκείου")
                    this.classSelected = 2;
                else if (epalclass.name === "Γ' Λυκείου")
243
                    this.classSelected = 3;
244 245
                else if (epalclass.name === "Δ' Λυκείου")
                    this.classSelected = 4;
246
                return epalclass;
Open Source Developer's avatar
Open Source Developer committed
247 248
            }, {});
            return state.epalclasses;
249
        }).subscribe(this.epalclasses$);
Open Source Developer's avatar
Open Source Developer committed
250

251 252
    }

253 254 255 256 257 258 259 260
    compareSchools(a: IRegionSchool,b: IRegionSchool) {
        if (a.order_id < b.order_id)
            return -1;
        if (a.order_id > b.order_id)
            return 1;
        return 0;
    }

261
    ngOnDestroy() {
262 263 264 265 266 267
        if (this.regionsSub)
            this.regionsSub.unsubscribe();
        if (this.sectorsSub)
            this.sectorsSub.unsubscribe();
        if (this.sectorFieldsSub)
            this.sectorFieldsSub.unsubscribe();
268 269 270 271
        this.regions$.unsubscribe();
        this.epalclasses$.unsubscribe();
        this.sectors$.unsubscribe();
        this.sectorFields$.unsubscribe();
272
    }
273

274
}