application.preview.ts 13.3 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

Open Source Developer's avatar
Open Source Developer committed
45
        </ul>
46
        </div>
Open Source Developer's avatar
Open Source Developer committed
47

48
49
50
51
52
53
        <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>
54
        </div>
55

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

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

        </div>
68
            </ul>
69
        </div>
70

71
72


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

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

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

Open Source Developer's avatar
Open Source Developer committed
83
        <div *ngIf="currentUrl === '/application-submit'">
84
              <div *ngFor="let studentDataField$ of studentDataFields$ | async;">
85
86
87
88
              <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
89
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
              </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
122
                                  <div *ngIf="currentUrl === '/application-submit'">
Open Source Developer's avatar
preview    
Open Source Developer committed
123
124
125
126
                                         Κοινωνικά/Εισοδηματικά Κριτήρια
                                  </div>
                      </li>
                      </ul>
127
128
              </div>

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

138
139
140
141
  `
})

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

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

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

167
168
        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
169
        this.criteriaFields$ = new BehaviorSubject(CRITERIA_INITIAL_STATE);
170
        this.studentDataFields$ = new BehaviorSubject(STUDENT_DATA_FIELDS_INITIAL_STATE);
171
    };
172
173

    ngOnInit() {
Open Source Developer's avatar
preview    
Open Source Developer committed
174
        this.currentUrl = this.router.url;
Open Source Developer's avatar
Open Source Developer committed
175
        console.log(this.currentUrl,"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
                return epalclass;
Open Source Developer's avatar
Open Source Developer committed
245
246
            }, {});
            return state.epalclasses;
247
        }).subscribe(this.epalclasses$);
Open Source Developer's avatar
Open Source Developer committed
248

249
250
    }

251
252
253
254
255
256
257
258
    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;
    }

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

272
}