help-desk.ts 10.8 KB
Newer Older
1
import { Component, OnInit, OnDestroy } from "@angular/core";
2
import {Location} from '@angular/common';
3 4 5 6 7
import { Injectable } from "@angular/core";
import { VALID_EMAIL_PATTERN, VALID_NAMES_PATTERN } from '../../constants';
import {Router} from "@angular/router";
import { BehaviorSubject, Subscription, Observable } from 'rxjs/Rx';
import { HelperDataService } from '../../services/helper-data-service';
Open Source Developer's avatar
Open Source Developer committed
8 9 10 11
import { ILoginInfo, ILoginInfoToken } from "../../store/logininfo/logininfo.types";
import { LOGININFO_INITIAL_STATE } from "../../store/logininfo/logininfo.initial-state";
import { NgRedux, select } from "ng2-redux";
import { IAppState } from "../../store/store";
12 13 14 15 16 17 18 19 20 21 22 23 24
import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray,
    Validators,
} from '@angular/forms';



@Component({
    selector: 'helpdesk',
    template: `
Open Source Developer's avatar
Open Source Developer committed
25
        <div class = "loading" *ngIf="(showLoader | async) === true"></div>
26 27
        <p align="left"><strong>Ηλεκτρονικές δηλώσεις προτίμησης ΕΠΑΛ για το νέο σχολικό έτος</strong></p>
        <p align="left">
28
        Σε περίπτωση που αντιμετωπίζετε οποιοδήποτε πρόβλημα με την καταχώριση της αίτησής σας, παρακαλούμε να
29 30 31 32 33 34 35 36
         συμπληρώσετε την παρακάτω φόρμα.


      <p align="left"><strong> Φόρμα Επικοινωνίας </strong></p>

    <form [formGroup]="formGroup">

    <div class="form-group">
Open Source Developer's avatar
Open Source Developer committed
37 38 39
  <div *ngFor="let loginInfoRow$ of loginInfo$ | async; let i=index;" style="margin-bottom: 20px;">
     <label for="userEmail">Email Επικοινωνίας(<span style="color: #ff0000;">*</span>)</label>
        <input #userEmail class="form-control" type="text" formControlName="userEmail" >
40 41 42 43 44 45 46
    </div>
    <div class="alert alert-danger" *ngIf="formGroup.get('userEmail').touched && formGroup.get('userEmail').hasError('required') ">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="formGroup.get('userEmail').hasError('pattern')">
        Πληκτρολογήστε ένα σωστό συντακτικά email!
    </div>
47
    </div>
48 49 50

    <div class="form-group">
        <label for="userName">Όνομα(<span style="color: #ff0000;">*</span>)</label>
Open Source Developer's avatar
Open Source Developer committed
51
        <input class="form-control" type="text" formControlName="userName" >
52 53 54 55 56 57 58 59
        <div class="alert alert-danger" *ngIf="formGroup.get('userName').touched && formGroup.get('userName').hasError('required') ">
            Το πεδίο δεν μπορεί να αφεθεί κενό!
        </div>
        <div class="alert alert-danger" *ngIf="formGroup.get('userName').hasError('pattern')">
            Πληκτρολογήστε το όνομά σας!
        </div>
    </div>
    <div class="form-group">
Open Source Developer's avatar
Open Source Developer committed
60 61
        <label for="userSurname">Επώνυμο(<span style="color: #ff0000;">*</span>)</label>
        <input class="form-control" type="text" formControlName="userSurname" >
62 63 64 65 66 67 68 69 70
        <div class="alert alert-danger" *ngIf="formGroup.get('userSurname').touched && formGroup.get('userSurname').hasError('required') ">
            Το πεδίο δεν μπορεί να αφεθεί κενό!
        </div>
        <div class="alert alert-danger" *ngIf="formGroup.get('userSurname').hasError('pattern')">
            Πληκτρολογήστε το επώνυμό σας!
        </div>
    </div>

       <div class="form-group">
71
        <label for="userMessage">Μήνυμα(<span style="color: #ff0000;">*</span>)</label>
72 73 74 75 76 77 78 79 80
        <textarea style="height: 150px;" class="form-control" type="text" formControlName="userMessage"></textarea>
        <div class="alert alert-danger" *ngIf="formGroup.get('userMessage').touched && formGroup.get('userMessage').hasError('required') ">
            Το πεδίο δεν μπορεί να αφεθεί κενό!
        </div>
        <div class="alert alert-danger" *ngIf="formGroup.get('userMessage').hasError('pattern')">
            Πληκτρολογήστε ενα μήνυμα!
        </div>
    </div>

81 82 83 84 85 86 87 88

    <div class="row" style="margin-top: 30px; margin-bottom: 30px;">
        <div class="col-md-6">
            <button type="button" class="btn-primary btn-lg pull-left isclickable" style="width: 9em;" (click)="goBack()" >
                <span style="font-size: 0.9em; font-weight: bold;">Επιστροφή</span>
            </button>
        </div>
        <div class="col-md-6">
Open Source Developer's avatar
Open Source Developer committed
89 90
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 10em;" (click)="sendmail()" >
                <span style="font-size: 0.9em; font-weight: bold;">Αποστολή email </span>
91 92 93
            </button>
        </div>
    </div>
94 95

        <p style="text-align: left, font-size: 0.9em;">
96
      <strong>Τηλ. Επικοινωνίας:</strong> 2103443014, 2103442231, 2103442034, 2103443309 (ώρες: 8:00 - 16:00)</p>
Open Source Developer's avatar
Open Source Developer committed
97 98 99 100 101 102 103


  <div id="mailsent" (onHidden)="onHidden('#mailsent')"
    class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header modal-header-success">
104
            <h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;Επιτυχής αποστολή μηνύματος</h3>
Open Source Developer's avatar
Open Source Developer committed
105 106 107 108 109
            <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal('#mailsent')">
              <span aria-hidden="true"><i class="fa fa-times"></i></span>
            </button>
          </div>
          <div class="modal-body">
110
            <p>Το μήνυμά σας αποστάλθηκε. Θα μελετήσουμε το αίτημά σας και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό!</p>
Open Source Developer's avatar
Open Source Developer committed
111 112
          </div>
          <div class="modal-footer">
113
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" (click)="goBack()">Κλείσιμο</button>
Open Source Developer's avatar
Open Source Developer committed
114 115 116 117 118 119 120 121 122
          </div>
        </div>
      </div>
    </div>
<div id="dangermodal" (onHidden)="onHidden('#dangermodal')"
    class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header modal-header-danger">
123
            <h3 class="modal-title pull-left"><i class="fa fa-ban"></i>&nbsp;&nbsp;Αποτυχία αποστολής μηνύματος</h3>
Open Source Developer's avatar
Open Source Developer committed
124 125 126 127 128
            <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal('#dangermodal')">
              <span aria-hidden="true"><i class="fa fa-times"></i></span>
            </button>
          </div>
          <div class="modal-body">
129
            <p>Πρόβλημα επικοινωνίας! Παρακαλούμε προσπαθήστε πάλι αργότερα.</p>
Open Source Developer's avatar
Open Source Developer committed
130 131 132 133 134 135 136 137 138 139 140 141 142
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
          </div>
        </div>
      </div>
    </div>

    <div id="fillfields" (onHidden)="onHidden('#fillfields')"
    class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header modal-header-danger">
143
            <h3 class="modal-title pull-left"><i class="fa fa-ban"></i>&nbsp;&nbsp;Αποτυχία αποστολής μηνύματος</h3>
Open Source Developer's avatar
Open Source Developer committed
144 145 146 147 148
            <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal('#fillfields')">
              <span aria-hidden="true"><i class="fa fa-times"></i></span>
            </button>
          </div>
          <div class="modal-body">
149
            <p>Παρακαλούμε συμπληρώστε όλα τα υποχρεωτικά πεδία!</p>
Open Source Developer's avatar
Open Source Developer committed
150 151 152 153 154 155 156
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
          </div>
        </div>
      </div>
    </div>
157
</form>
Open Source Developer's avatar
Open Source Developer committed
158

159 160 161 162 163 164

   `
})

@Injectable() export default class HelpDesk implements OnInit, OnDestroy {

165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187

    public formGroup: FormGroup;
    private emailSent: BehaviorSubject<boolean>;
    private loginInfo$: BehaviorSubject<ILoginInfo>;
    private showLoader: BehaviorSubject<boolean>;

    constructor(private fb: FormBuilder,
        private hds: HelperDataService,
        private _ngRedux: NgRedux<IAppState>,
        private loc: Location) {
        this.loginInfo$ = new BehaviorSubject(LOGININFO_INITIAL_STATE);
        this.showLoader = new BehaviorSubject(false);
        this.formGroup = fb.group({
            userEmail: ['', [Validators.pattern(VALID_EMAIL_PATTERN), Validators.required]],
            userName: ['', [Validators.pattern(VALID_NAMES_PATTERN), Validators.required]],
            userSurname: ['', [Validators.pattern(VALID_NAMES_PATTERN), Validators.required]],
            userMessage: ['', [Validators.required]],

        })
        this.emailSent = new BehaviorSubject(false);
    }

    public showModal(popupMsgId): void {
Open Source Developer's avatar
Open Source Developer committed
188 189
        (<any>$(popupMsgId)).modal('show');
    }
190

Open Source Developer's avatar
Open Source Developer committed
191 192 193 194 195 196 197 198 199 200
    public hideModal(popupMsgId): void {

        (<any>$(popupMsgId)).modal('hide');
    }

    public onHidden(popupMsgId): void {

    }

    ngOnDestroy() {
201
        if (this.loginInfo$) this.loginInfo$.unsubscribe();
202 203 204
    }

    ngOnInit() {
Open Source Developer's avatar
Open Source Developer committed
205 206 207
        (<any>$('#mailsent')).appendTo("body");
        (<any>$('#dangermodal')).appendTo("body");
        (<any>$('#fillfields')).appendTo("body");
208
        this._ngRedux.select(state => {
Open Source Developer's avatar
Open Source Developer committed
209 210
            if (state.loginInfo.size > 0) {
                state.loginInfo.reduce(({}, loginInfoToken) => {
211

Open Source Developer's avatar
Open Source Developer committed
212 213 214 215 216 217 218 219 220
                    this.formGroup.controls['userEmail'].setValue(loginInfoToken.cu_email);
                    this.formGroup.controls['userName'].setValue(loginInfoToken.cu_name);
                    this.formGroup.controls['userSurname'].setValue(loginInfoToken.cu_surname);
                    return loginInfoToken;

                }, {});
            }
            return state.loginInfo;
        }).subscribe(this.loginInfo$);
221 222
    }

223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239
    sendmail() {
        if (this.formGroup.invalid) {
            this.showModal("#fillfields");
        }
        else {
            this.showLoader.next(true);
            this.hds.sendmail(this.formGroup.value.userEmail, this.formGroup.value.userName, this.formGroup.value.userSurname, this.formGroup.value.userMessage)
                .then(res => {
                    this.emailSent.next(true);
                    this.showLoader.next(false);
                    this.showModal("#mailsent");
                })
                .catch(err => {
                    console.log(err);
                    this.showLoader.next(false);
                    this.showModal("#dangermodal");
                });
Open Source Developer's avatar
Open Source Developer committed
240
        }
241
    }
242 243 244 245

    goBack(): void {
        this.loc.back();
    }
246
}