help-desk.ts 10.9 KB
Newer Older
1
2
3
import { NgRedux } from "@angular-redux/store";
import { Location } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
4
import { Injectable } from "@angular/core";
5
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
6
import { BehaviorSubject, Subscription } from "rxjs/Rx";
7
8

import { VALID_EMAIL_PATTERN, VALID_NAMES_PATTERN } from "../../constants";
9
import { HelperDataService } from "../../services/helper-data-service";
Open Source Developer's avatar
others    
Open Source Developer committed
10
import { LOGININFO_INITIAL_STATE } from "../../store/logininfo/logininfo.initial-state";
11
import { ILoginInfoRecords } from "../../store/logininfo/logininfo.types";
Open Source Developer's avatar
others    
Open Source Developer committed
12
import { IAppState } from "../../store/store";
13
14

@Component({
15
    selector: "helpdesk",
16
    template: `
Open Source Developer's avatar
others    
Open Source Developer committed
17
        <div class = "loading" *ngIf="(showLoader | async) === true"></div>
18
19
        <p align="left"><strong>Ηλεκτρονικές δηλώσεις προτίμησης ΕΠΑΛ για το νέο σχολικό έτος</strong></p>
        <p align="left">
20
        Σε περίπτωση που αντιμετωπίζετε οποιοδήποτε πρόβλημα με την καταχώριση της αίτησής σας, παρακαλούμε να
21
22
23
24
25
26
27
         συμπληρώσετε την παρακάτω φόρμα.

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

    <form [formGroup]="formGroup">

    <div class="form-group">
Open Source Developer's avatar
others    
Open Source Developer committed
28
29
30
  <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" >
31
32
33
34
35
36
37
    </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>
38
    </div>
39
40
41

    <div class="form-group">
        <label for="userName">Όνομα(<span style="color: #ff0000;">*</span>)</label>
Open Source Developer's avatar
others    
Open Source Developer committed
42
        <input class="form-control" type="text" formControlName="userName" >
43
44
45
46
47
48
49
50
        <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
others    
Open Source Developer committed
51
52
        <label for="userSurname">Επώνυμο(<span style="color: #ff0000;">*</span>)</label>
        <input class="form-control" type="text" formControlName="userSurname" >
53
54
55
56
57
58
59
60
61
        <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">
62
        <label for="userMessage">Μήνυμα(<span style="color: #ff0000;">*</span>)</label>
63
64
65
66
67
68
69
70
71
        <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>

72
73
74
75
76
77
78
79

    <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
others    
Open Source Developer committed
80
81
            <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>
82
83
84
            </button>
        </div>
    </div>
85
86

        <p style="text-align: left, font-size: 0.9em;">
87
      <strong>Τηλ. Επικοινωνίας:</strong> 2103443014, 2103442231, 2103442034, 2103443309 (ώρες: 8:00 - 16:00)</p>
Open Source Developer's avatar
others    
Open Source Developer committed
88
89
90
91
92
93
94


  <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">
95
            <h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;Επιτυχής αποστολή μηνύματος</h3>
Open Source Developer's avatar
others    
Open Source Developer committed
96
97
98
99
100
            <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">
101
            <p>Το μήνυμά σας αποστάλθηκε. Θα μελετήσουμε το αίτημά σας και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό!</p>
Open Source Developer's avatar
others    
Open Source Developer committed
102
103
          </div>
          <div class="modal-footer">
104
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" (click)="goBack()">Κλείσιμο</button>
Open Source Developer's avatar
others    
Open Source Developer committed
105
106
107
108
109
110
111
112
113
          </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">
114
            <h3 class="modal-title pull-left"><i class="fa fa-ban"></i>&nbsp;&nbsp;Αποτυχία αποστολής μηνύματος</h3>
Open Source Developer's avatar
others    
Open Source Developer committed
115
116
117
118
119
            <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">
120
            <p>Πρόβλημα επικοινωνίας! Παρακαλούμε προσπαθήστε πάλι αργότερα.</p>
Open Source Developer's avatar
others    
Open Source Developer committed
121
122
123
124
125
126
127
128
129
130
131
132
133
          </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">
134
            <h3 class="modal-title pull-left"><i class="fa fa-ban"></i>&nbsp;&nbsp;Αποτυχία αποστολής μηνύματος</h3>
Open Source Developer's avatar
others    
Open Source Developer committed
135
136
137
138
139
            <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">
140
            <p>Παρακαλούμε συμπληρώστε όλα τα υποχρεωτικά πεδία!</p>
Open Source Developer's avatar
others    
Open Source Developer committed
141
142
143
144
145
146
147
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
          </div>
        </div>
      </div>
    </div>
148
</form>
Open Source Developer's avatar
others    
Open Source Developer committed
149

150
151
152
153
154
155

   `
})

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

156
    private formGroup: FormGroup;
157
    private emailSent: BehaviorSubject<boolean>;
158
    private loginInfo$: BehaviorSubject<ILoginInfoRecords>;
159
    private loginInfoSub: Subscription;
160
161
162
163
164
165
166
167
168
    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({
169
170
171
172
173
            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]],
        });
174
175
176
177
        this.emailSent = new BehaviorSubject(false);
    }

    public showModal(popupMsgId): void {
178
        (<any>$(popupMsgId)).modal("show");
Open Source Developer's avatar
others    
Open Source Developer committed
179
    }
180

Open Source Developer's avatar
others    
Open Source Developer committed
181
182
    public hideModal(popupMsgId): void {

183
        (<any>$(popupMsgId)).modal("hide");
Open Source Developer's avatar
others    
Open Source Developer committed
184
185
186
187
188
189
190
    }

    public onHidden(popupMsgId): void {

    }

    ngOnDestroy() {
191
        if (this.loginInfoSub) this.loginInfoSub.unsubscribe();
192
193
194
    }

    ngOnInit() {
195
196
197
198
        (<any>$("#mailsent")).appendTo("body");
        (<any>$("#dangermodal")).appendTo("body");
        (<any>$("#fillfields")).appendTo("body");
        this.loginInfoSub = this._ngRedux.select("loginInfo")
199
200
            .map(loginInfo => <ILoginInfoRecords>loginInfo)
            .subscribe(linfo => {
201
                if (linfo.size > 0) {
202
203
204
205
206
                    linfo.reduce(({}, loginInfoObj) => {
                        this.formGroup.controls["userEmail"].setValue(loginInfoObj.cu_email);
                        this.formGroup.controls["userName"].setValue(loginInfoObj.cu_name);
                        this.formGroup.controls["userSurname"].setValue(loginInfoObj.cu_surname);
                        return loginInfoObj;
207
208
209
                    }, {});
                }
                this.loginInfo$.next(linfo);
210
            }, error => { console.log("error selecting loginInfo"); });
211
212
    }

213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
    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
others    
Open Source Developer committed
230
        }
231
    }
232
233
234
235

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