region.schools.select.ts 13.3 KB
Newer Older
1 2 3
import { Component, OnInit, OnDestroy} from "@angular/core";
import { Router } from "@angular/router";
import { BehaviorSubject, Subscription } from "rxjs/Rx";
4
import { Injectable } from "@angular/core";
5 6 7 8 9 10 11 12
import { RegionSchoolsActions } from "../../actions/regionschools.actions";
import { NgRedux, select } from "@angular-redux/store";
import { IRegionRecord, IRegionRecords } from "../../store/regionschools/regionschools.types";
import { REGION_SCHOOLS_INITIAL_STATE } from "../../store/regionschools/regionschools.initial-state";
import { ISectors } from "../../store/sectorcourses/sectorcourses.types";
import { IAppState } from "../../store/store";
import { RemoveSpaces } from "../../pipes/removespaces";
import { IEpalClasses } from "../../store/epalclasses/epalclasses.types";
13
import { ISectorFieldRecords } from "../../store/sectorfields/sectorfields.types";
14

15

16 17 18 19 20
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray
21 22
} from "@angular/forms";
import {AppSettings} from "../../app.settings";
23 24

@Component({
25
    selector: "region-schools-select",
26
    template: `
Open Source Developer's avatar
Open Source Developer committed
27
    <div class="row">
28
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
Open Source Developer committed
29 30
    </div>

31
    <div class = "loading" *ngIf="!(regions$ | async) || (regions$ | async).size===0">
32
    </div>
33
    <!-- <div class="row equal">
34
      <div class="col-md-12"> -->
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

      <div id="choiceSentNotice" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header {{modalHeader | async}}" >
                <h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;{{ modalTitle | async }}</h3>
              <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
                <span aria-hidden="true"><i class="fa fa-times"></i></span>
              </button>
            </div>
            <div class="modal-body">
                <p>{{ modalText | async }}</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
            </div>
          </div>
        </div>
      </div>

55
<div style="min-height: 500px;">
Open Source Developer's avatar
Open Source Developer committed
56
      <h4> Επιλογή Σχολείου</h4>
57
       <form [formGroup]="formGroup">
58
        <div formArrayName="formArray">
Open Source Developer's avatar
Open Source Developer committed
59 60 61
        <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε εως τρία ΕΠΑΛ στα οποία επιθυμεί να φοιτήσει ο μαθητής.
         Επιλέξτε πρώτα την Περιφερειακή Διεύθυνση στην οποία ανήκει το σχολείο της επιλογής σας,στη συνέχεια τα σχολεία και τέλος πατήστε <i>Συνέχεια</i>.
        Μπορείτε να επιλέξετε απο ένα εως τρία σχολεία που δύναται να ανήκουν σε περισσότερες απο μια Περιφερειακές Διευθύνσεις.</p>
62 63 64
            <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">
65
                    <h5>{{region$.get("region_name")}}</h5>
66
                </li>
67

68
                <div *ngFor="let epal$ of region$.get('epals'); let j=index; let isOdd2=odd; let isEven2=even" [class.oddin]="isOdd2" [class.evenin]="isEven2" [hidden]="i !== regionActive">
69

70
                        <div class="row">
71
                            <div class="col-md-2 col-md-offset-1">
72
                                <input #cb type="checkbox" formControlName="{{ epal$.get('globalIndex') }}"
73
                                (change)="saveSelected(cb.checked,i,j)"
74
                                [hidden] = "(numSelected | async) === 3 && cb.checked === false"
75
                                >
76
                             </div>
77
                            <div class="col-md-8  col-md-offset-1 isclickable">
78
                                {{epal$.get("epal_name") | removeSpaces}}
79 80
                            </div>
                        </div>
81

82
                </div>
83

84 85 86
            </div>
            </ul>
        </div>
87
        <div class="row" style="margin-top: 20px; margin-bottom: 20px;" *ngIf="(regions$ | async)">
88
        <div class="col-md-6">
89
            <button type="button" class="btn-primary btn-lg pull-left isclickable" (click)="navigateBack()" >
90 91 92 93
          <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
94 95 96
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="navigateToApplication()" >
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
            </button>
97 98 99
        </div>
        </div>
    </form>
100
<!--     <pre>{{formGroup.value | json}}</pre> -->
101
    </div>
102 103
  `
})
104
@Injectable() export default class RegionSchoolsSelect implements OnInit, OnDestroy {
105
    private regions$: BehaviorSubject<IRegionRecords>;
106 107 108 109 110
    private epalclassesSub: Subscription;
    private regionsSub: Subscription;
    private sectorsSub: Subscription;
    private sectorFieldsSub: Subscription;

111 112
    private formGroup: FormGroup;
    private rss = new FormArray([]);
113
    private classActive = "-1";
114
    private regionActive = <number>-1;
115
    private regionActiveId = <number>-1;
116
    private courseActive = <number>-1;
117 118 119
    private numSelected: BehaviorSubject<number>;
    private selectionLimit: BehaviorSubject<number>;
    private selectionLimitOptional: BehaviorSubject<boolean>;
120
    private regionSizeLimit = <number>3;
121 122
    private classNight: BehaviorSubject<boolean>;

123 124 125 126
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
    private modalHeader: BehaviorSubject<string>;

127

128
    constructor(private fb: FormBuilder,
129 130 131
        private _rsa: RegionSchoolsActions,
        private _ngRedux: NgRedux<IAppState>,
        private router: Router
132

133
    ) {
134
        this.regions$ = new BehaviorSubject(REGION_SCHOOLS_INITIAL_STATE);
135 136
        this.formGroup = this.fb.group({
            formArray: this.rss
137

138
        });
139

140 141 142
        this.numSelected = new BehaviorSubject(0);
        this.selectionLimit = new BehaviorSubject(3);
        this.selectionLimitOptional = new BehaviorSubject(false);
143
        this.classNight = new BehaviorSubject(false);
144

145 146 147
        this.modalTitle = new BehaviorSubject("");
        this.modalText = new BehaviorSubject("");
        this.modalHeader = new BehaviorSubject("");
148

149 150 151
    };

    ngOnInit() {
152

153
        (<any>$("#choiceSentNotice")).appendTo("body");
154

155 156 157 158 159 160
        this.selectEpalClasses();

        this.selectRegionSchools();
    }

    ngOnDestroy() {
161

162
        (<any>$("#choiceSentNotice")).remove();
163

164 165 166 167 168 169 170 171 172 173 174 175
        if (this.epalclassesSub) {
            this.epalclassesSub.unsubscribe();
        }
        if (this.regionsSub) {
            this.regionsSub.unsubscribe();
        }
        if (this.sectorsSub) {
            this.sectorsSub.unsubscribe();
        }
        if (this.sectorFieldsSub) {
            this.sectorFieldsSub.unsubscribe();
        }
176

177 178
    }

179 180
    public showModal(): void {
        (<any>$("#choiceSentNotice")).modal("show");
181 182
    }

183 184
    public hideModal(): void {
        (<any>$("#choiceSentNotice")).modal("hide");
185 186
    }

187 188
    public onHidden(): void {
        // this.isModalShown.next(false);
189 190
    }

191
    selectEpalClasses() {
192 193
        this.epalclassesSub = this._ngRedux.select("epalclasses")
            .subscribe(epalclasses => {
194
                console.log(epalclasses);
195 196 197 198 199 200 201 202 203 204 205 206
                let ecs = <IEpalClasses>epalclasses;
                if (ecs.size > 0) {
                    ecs.reduce(({}, epalclass, i) => {
                        this.setClassActive(epalclass.name);
                        if (epalclass.name === "4") {
                            this.classNight.next(true);
                        }
                        this.getAppropriateSchools(epalclass.name);
                        return epalclass;
                    }, {});
                }
            }, error => { console.log("error selecting epalclasses"); });
207 208 209 210
    }

    selectRegionSchools() {

211
        this.regionsSub = this._ngRedux.select("regions")
212 213 214
            .subscribe(regions => {
                let rgns = <IRegionRecords>regions;
                let numsel = 0;
215
                let numreg = 0;   // count reduced regions in order to set activeRegion when user comes back to his choices
216 217
                console.log("selectRegionSchools");
                this.selectionLimitOptional.next(false);
218 219 220
                let pushControls = false;
                if (this.rss.length === 0)
                    pushControls = true;
221
                rgns.reduce((prevRegion, region) => {
222
                    numreg++;
223
                    region.get("epals").reduce((prevEpal, epal) => {
224 225
                        if (pushControls)
                            this.rss.push(new FormControl(epal.get("selected"), []));
226
                        if (epal.get("selected") === true) {
227 228 229 230
                            numsel++;
                            if (epal.get("epal_special_case") === "1") {
                                this.selectionLimitOptional.next(true);
                            }
231
                            this.regionActiveId = parseInt(region.region_id);
232
                            this.regionActive = numreg - 1;
233
                        }
234 235
                        if (parseInt(region.region_id) === this.regionActiveId) {
                            if (region.get("epals").size < this.regionSizeLimit)
236
                                this.selectionLimitOptional.next(true);
237 238 239 240 241
                        }
                        return epal;
                    }, {});

                    return region;
242
                }, {});
243

244 245
                this.numSelected.next(numsel);
                this.regions$.next(rgns);
246
            }, error => { console.log("error selecting regions"); });
247

248 249
    }

250 251 252
    setClassActive(className) {
        this.classActive = className;
    }
253

254
    getAppropriateSchools(epalClass) {
255

256
        if (epalClass === "1") {
257
            console.log("getRegionSchools");
258
            this._rsa.getRegionSchools(1, "-1", false);
259
        }
260
        else if (epalClass === "2") {
261
            this.sectorFieldsSub = this._ngRedux.select("sectorFields")
262 263
                .map(sectorFields => <ISectorFieldRecords>sectorFields)
                .subscribe(sfds => {
264
                    console.log("sectorFieldsSub");
265
                    sfds.reduce(({}, sectorField) => {
266 267
                        if (sectorField.selected === true) {
                            this.courseActive = sectorField.id;
268
                            this._rsa.getRegionSchools(2, this.courseActive, false);
269 270 271 272 273 274 275
                        }
                        return sectorField;
                    }, {});
                },
                error => {
                    console.log("Error Selecting Sector Fields");
                });
276
        }
277
        else if (epalClass === "3" || epalClass === "4") {
278

279
            this.sectorsSub = this._ngRedux.select("sectors")
280 281 282
                .map(sectors => <ISectors>sectors)
                .subscribe(sectors => {
                    console.log("sectorsSub");
283 284 285 286 287 288
                    sectors.reduce((prevSector, sector) => {
                        if (sector.sector_selected === true) {
                            sector.courses.reduce((prevCourse, course) => {
                                if (course.selected === true) {
                                    this.courseActive = parseInt(course.course_id);
                                    // this._rsa.getRegionSchools(3,this.courseActive, false);
289
                                    this._rsa.getRegionSchools(parseInt(epalClass), this.courseActive, false);
290 291 292 293
                                }
                                return course;
                            }, {});
                        }
294 295
                        return sector;
                    }, {});
296
                }, error => console.log("error selecting loginInfo"));
297
        }
298
    }
299

300
    navigateBack() {
301 302
        if (this.classActive === "1") {
            this.router.navigate(["/epal-class-select"]);
303
        }
Open Source Developer's avatar
Open Source Developer committed
304
        else if (this.classActive === "2") {
305
            this.router.navigate(["/sector-fields-select"]);
306
        }
307 308
        else if (this.classActive === "3" || this.classActive === "4") {
            this.router.navigate(["/sectorcourses-fields-select"]);
309
        }
310 311 312
    }

    setActiveRegion(ind) {
313 314 315
        if (ind === this.regionActive)
            ind = -1;
        this.regionActive = ind;
316 317
    }

318
    saveSelected(checked, i, j) {
319
        this._rsa.saveRegionSchoolsSelected(checked, i, j);
320 321 322
    }

    navigateToApplication() {
323 324 325 326 327 328 329
        if (this.numSelected.getValue() === 0) {
            this.modalHeader.next("modal-header-danger");
            this.modalTitle.next("Επιλογή αριθμού σχολείων");
            if (this.numSelected.getValue() === 0)
                this.modalText.next("Δεν έχετε επιλέξει κανένα σχολείο!");

            this.showModal();
330 331
        }
        else
332
            this.router.navigate(["/schools-order-select"]);
333

334
    }
335
}