region.schools.select.ts 7.22 KB
Newer Older
1 2 3 4 5 6 7
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { Injectable } from "@angular/core";
import { RegionSchoolsActions } from '../../actions/regionschools.actions';
import { NgRedux, select } from 'ng2-redux';
import { IRegions } from '../../store/regionschools/regionschools.types';
8 9
import { SectorCoursesActions } from '../../actions/sectorcourses.actions';
import { ISectors } from '../../store/sectorcourses/sectorcourses.types';
10
import { IAppState } from '../../store/store';
Open Source Developer's avatar
Open Source Developer committed
11 12
import { LoaderService } from '../../services/Spinner.service';
import {RemoveSpaces} from '../../pipes/removespaces';
13

14

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

@Component({
    selector: 'course-fields-select',
    template: `
Open Source Developer's avatar
Open Source Developer committed
26 27
    <div class = "loading" *ngIf="objLoaderStatus">
    </div>
28
     <div class="row equal">
Open Source Developer's avatar
UI  
Open Source Developer committed
29
      <div class="col-md-12">
30
       <form [formGroup]="formGroup">
31 32 33 34 35 36
        <div formArrayName="formArray">
            <ul class="list-group">
            <div *ngFor="let region$ of regions$ | async; let i=index">
                <li class="list-group-item" (click)="setActiveRegion(i)" [style.background-color]="toggleBackgroundColor(i)">
                    <h5>{{region$.region_name}}</h5>
                </li>
37

38
                <div *ngFor="let epal$ of region$.epals; let j=index;" [hidden]="i !== regionActive">
39

40
                        <div class="row">
41
                            <div class="col-md-2 col-md-offset-1">
42
                                <input #cb type="checkbox" formControlName="{{ epal$.globalIndex }}"
43
                                (change)="saveSelected(cb,j)"
44 45
                                [hidden] = "numSelected === 3 && cb.checked === false"
                                >
46
                             </div>
Open Source Developer's avatar
Open Source Developer committed
47 48
                            <div class="col-md-8  col-md-offset-1">
                                {{epal$.epal_name | removeSpaces}}
49 50
                            </div>
                        </div>
51

52
                </div>
53

54 55 56 57
            </div>
            </ul>
        </div>
        <div class="row">
Open Source Developer's avatar
UI  
Open Source Developer committed
58
        <div class="col-md-12 col-md-offset-5">
Open Source Developer's avatar
Open Source Developer committed
59 60
            <button [hidden] = "objLoaderStatus == true" type="button" class="btn-primary btn-lg pull-right" (click)="navigateToApplication()" [disabled] = "numSelected === 0"  >
          <i class="fa fa-forward"></i>
61 62 63 64
            </button>
        </div>
        </div>
    </form>
65

66 67 68
   </div>

  </div>
69 70 71 72
  `
})
@Injectable() export default class RegionSchoolsSelect implements OnInit {
    private regions$: Observable<IRegions>;
73
    private sectors$: Observable<ISectors>;
74 75
    private formGroup: FormGroup;
    private rss = new FormArray([]);
76
    private classActive = "-1";
77
    private regionActive = <number>-1;
78
    private courseActive = -1;
79
    private numSelected = <number>0;
Open Source Developer's avatar
Open Source Developer committed
80 81

    objLoaderStatus: boolean;
82
    //private schoolArray: Array<boolean> = new Array();
83

84 85 86

    constructor(private fb: FormBuilder,
                private _rsa: RegionSchoolsActions,
87
                private _rsb: SectorCoursesActions,
88
                private _ngRedux: NgRedux<IAppState>,
Open Source Developer's avatar
Open Source Developer committed
89 90
                private router: Router,
                private loaderService: LoaderService
91

92 93 94
            ) {
        this.formGroup = this.fb.group({
            formArray: this.rss
95

96
        });
Open Source Developer's avatar
Open Source Developer committed
97 98 99

        this.objLoaderStatus=false;
         console.log (this.objLoaderStatus);
100 101 102
    };

    ngOnInit() {
103

Open Source Developer's avatar
Open Source Developer committed
104 105 106 107 108 109 110 111 112
        this.loaderService.loaderStatus.subscribe((val: boolean) => {
            this.objLoaderStatus = val;
        });

        this.loaderService.displayLoader(true); // enable spinner

//        this.objLoaderStatus = true;
        console.log (this.objLoaderStatus,"AAAAAAAAAAAAA");

113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
        this.classActive = this.classActive = this.getClassActive();

        let class_id = -1;
        if (this.classActive === "Α' Λυκείου")  {
          //είναι Α' Λυκείου, οπότε courseActive = "-1" (είναι ήδη ορισμένο με αυτή την τιμή από την αρχικοποίηση)
          class_id = 1;
        }
        else if (this.classActive === "Β' Λυκείου") {
          class_id = 2;
          this.courseActive = this.getSectorActive();
        }
        else if (this.classActive === "Γ' Λυκείου")  {
          class_id = 3;
          this.courseActive = this.getCourseActive();
        }

        this._rsa.getRegionSchools(class_id,this.courseActive, false);
Open Source Developer's avatar
Open Source Developer committed
130
         console.log(this.courseActive,"aaaaaaaaaaaaaa");
131
        this.regions$ = this._ngRedux.select(state => {
132
            let numsel = 0;
133 134 135
            state.regions.reduce((prevRegion, region) =>{
                region.epals.reduce((prevEpal, epal) =>{
                    this.rss.push( new FormControl(epal.selected, []));
136
                    if (epal.selected === true) {
137
                      numsel++;
138
                    }
139 140 141 142
                    return epal;
                }, {});
                return region;
            }, {});
143
            this.numSelected = numsel;
144 145
            return state.regions;
        });
Open Source Developer's avatar
Open Source Developer committed
146 147 148
        //this.objLoaderStatus = false;
        this.loaderService.displayLoader(false); // enable spinner
        console.log (this.objLoaderStatus,"BBBBBBBBBBBBB");
149 150 151 152

    }

    setActiveRegion(ind) {
153 154 155
      if (ind === this.regionActive)
        ind = -1;
      this.regionActive = ind;
156 157 158
    }

    toggleBackgroundColor(ind) {
Open Source Developer's avatar
UI  
Open Source Developer committed
159
        return ((this.regionActive === ind) ? "#fd9665" : "white");
160 161
    }

162
    saveSelected(cb,j) {
163
        this._rsa.saveRegionSchoolsSelected(this.formGroup.value.formArray);
164
        //σε κάθε νέο check, αρχικοποίησε τη σειρά προτιμήσεων (σειρά προτίμησης:0)
165
/*        let schoolArrayOrders: Array<number> = new Array();
166 167
        for (let i=0; i < this.formGroup.value.formArray.length; i++)
          schoolArrayOrders.push(0);
168
        this._rsa.saveRegionSchoolsOrder(schoolArrayOrders); */
169 170 171
    }

    navigateToApplication() {
172 173 174 175
      //if (this.numSelected > 1)
        this.router.navigate(['/schools-order-select']);
      //else
      //  this.router.navigate(['/student-application-form-main']);
176
    }
177 178 179 180 181 182 183 184 185

    getCourseActive() {
        const { sectors } = this._ngRedux.getState();
        let l,m;
        for ( l=0; l<sectors.size; l++)
          if (sectors["_tail"]["array"][l]["sector_selected"] === true)
            for ( m=0; m < sectors["_tail"]["array"][l]["courses"].length; m++)
              if (sectors["_tail"]["array"][l]["courses"][m]["selected"] === true)
                 return sectors["_tail"]["array"][l]["courses"][m]["course_id"];
186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205
        return "-1";
    }

    getClassActive()  {
      const { epalclasses } = this._ngRedux.getState();
      let l,m;
      if (epalclasses.size !== 0 && epalclasses["_tail"]["array"][0]["name"].length !==0 )
         return epalclasses["_tail"]["array"][0]["name"];
      return "-1";
    }

    getSectorActive() {
      const { sectorFields } = this._ngRedux.getState();
      let l,m;
      for ( l=0; l<sectorFields.size; l++)  {
        if (sectorFields["_tail"]["array"][l]["selected"] === true) {
            return sectorFields["_tail"]["array"][l]["id"];
          }
      }
      return "-1";
206 207
    }

208
}