langcourse.fields.select.ts 3.25 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
import { NgRedux } from "@angular-redux/store";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import { BehaviorSubject, Subscription } from "rxjs/Rx";

import { LangCourseFieldsActions } from "../../actions/langcoursesfields.actions";
import { LANGCOURSE_FIELDS_INITIAL_STATE } from "../../store/langcoursesfields/langcoursesfields.initial-state";
import { ILangCourseFieldRecords } from "../../store/langcoursesfields/langcoursesfields.types";
import { IAppState } from "../../store/store";


@Component({
    selector: "langcourse-fields-select",
    template: `

    <div class="row">
             <breadcrumbs></breadcrumbs>
    </div>
    <h4> Επιλογή Ξένης Γλώσσας </h4>
     <div class = "loading" *ngIf="(langcourseFields$ | async).size === 0">
    </div>
       <p style="margin-top: 20px; line-height: 2em;"> Παρακαλώ επιλέξτε την Ξένη Γλώσσα την οποία θα παρακολουθήσει ο μαθητής το νέο σχολικό έτος.
       Μπορείτε να επιλέξετε / απο-επιλέξετε περισσότερες προτιμήσεις, κάνοντας κλικ πάνω στην αντίστοιχη επιλογή.
       Σε περίπτωση περισσοτέρων της μίας επιλογής, βάλτε τις επιλογές σας σε επιθυμητή σειρά προτίμησης στην εμφανιζόμενη λίστα στο κάτω μέρος της οθόνης.
       Έπειτα επιλέξτε <i>Συνέχεια</i>.</p>
        <div class="list-group" *ngFor="let langcourseField$ of langcourseFields$ | async; let i=index;">
            <button *ngIf = "langcourseField$.selected === true" type="button" class="list-group-item list-group-item-action active" (click)="saveSelected(i, 1)" >{{langcourseField$.name}}</button>
            <button *ngIf = "langcourseField$.selected === false" type="button" class="list-group-item list-group-item-action" (click)="saveSelected(i, 0)" >{{langcourseField$.name}}</button>
    </div>

    <!--
    <div>
      <course-order-select></course-order-select>
    </div>
    -->

`

})
@Injectable() export default class LangCourseFieldsSelect implements OnInit, OnDestroy {
    private langcourseFields$: BehaviorSubject<ILangCourseFieldRecords>;
    private langcourseFieldsSub: Subscription;

    constructor(private _cfa: LangCourseFieldsActions,
        private _ngRedux: NgRedux<IAppState>,
        private router: Router) {
        this.langcourseFields$ = new BehaviorSubject(LANGCOURSE_FIELDS_INITIAL_STATE);
    };

    ngOnInit() {

        this._cfa.getLangCourseFields(false);
        this.langcourseFieldsSub = this._ngRedux.select("langcourseFields")
            .map(langcourseFields => <ILangCourseFieldRecords>langcourseFields)
            .subscribe(sfds => {
                this.langcourseFields$.next(sfds);
            }, error => { console.log("error selecting langcourseFields"); });

    }

    ngOnDestroy() {
        if (this.langcourseFieldsSub) this.langcourseFieldsSub.unsubscribe();
    }

    private saveSelected(ind: number, sel: number): void {
        this._cfa.saveLangCourseFieldsSelected(ind, sel, 0);
    }


}