submited.aplication.preview.ts 12.4 KB
Newer Older
Open Source Developer's avatar
tranfer    
Open Source Developer committed
1
import { Component, OnInit, OnDestroy,ElementRef, ViewChild} from "@angular/core";
Open Source Developer's avatar
Open Source Developer committed
2
3
4
5
6
7
8
9
10
11
12
let jsPDF = require('jspdf');
import { Injectable } from "@angular/core";
import { AppSettings } from '../../app.settings';
import { HelperDataService } from '../../services/helper-data-service';
import {Observable} from "rxjs/Observable";
import {IStudentDataFields, IStudentDataField} from '../../store/studentdatafields';
import {Http, Headers, RequestOptions} from '@angular/http';
import {Removetags} from '../../pipes/removehtmltags';
import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../store/store';
import { ILoginInfo } from '../../store/logininfo/logininfo.types';
Open Source Developer's avatar
Open Source Developer committed
13
14
import {Router, ActivatedRoute, Params} from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
Open Source Developer's avatar
trans    
Open Source Developer committed
15
import * as html2canvas from "html2canvas"
Open Source Developer's avatar
trans    
Open Source Developer committed
16
 
17
@Component({
Open Source Developer's avatar
Open Source Developer committed
18
19
    selector: 'submited-preview',
    template: `
20
    <div class = "loading" *ngIf="(showLoader$ | async) === true"></div>
21
22
         <div class="row">
             <breadcrumbs></breadcrumbs>
Open Source Developer's avatar
commit    
Open Source Developer committed
23
        </div>
24
            Έχει υποβληθεί αίτηση για εγγραφή στην Επαγγελματική Εκπαίδευση των παρακάτω ατόμων:
25

Open Source Developer's avatar
styles    
Open Source Developer committed
26
27
              <ul class="list-group main-view">
               <div *ngFor="let UserData$  of SubmitedApplic$ | async; let i=index; let isOdd=odd; let isEven=even"  >
28

29
                 <li class="list-group-item isclickable" [class.oddout]="isOdd"
Open Source Developer's avatar
styles    
Open Source Developer committed
30
31
                 [class.evenout]="isEven" (click)="setActiveUser(UserData$.id)" [class.selectedout]="userActive === UserData$.id" >
                  <h5> {{UserData$.name}}&nbsp;{{UserData$.studentsurname}} </h5>
Open Source Developer's avatar
trans    
Open Source Developer committed
32
                 </li>
Open Source Developer's avatar
trans    
Open Source Developer committed
33
                  <div #target class = "target "id = "target">
34

Open Source Developer's avatar
trans    
Open Source Developer committed
35
                  <div *ngFor="let StudentDetails$  of SubmitedDetails$ | async" [hidden]="UserData$.id !== userActive" >
Open Source Developer's avatar
trans    
Open Source Developer committed
36
37
38
                      <table>
                        <tr><td>
                          <div class="form-group" *ngIf="StudentDetails$.relationtostudent === 'Μαθητής' ">
39
                            <label for="guardianfirstname">Όνομα κηδεμόνα</label><p class="form-control" id="guardianfirstname" style="border:1px solid #eceeef;">{{StudentDetails$.guardianfirstname}} </p>
Open Source Developer's avatar
trans    
Open Source Developer committed
40
41
42
43
                          </div>
                        </td>
                        <td>
                         <div class="form-group" *ngIf="StudentDetails$.relationtostudent === 'Μαθητής' ">
44
                            <label for="guardiansurname">Επώνυμο κηδεμόνα</label><p class="form-control" id="guardiansurname" style="border:1px solid #eceeef;">{{StudentDetails$.guardiansurname}} </p>
Open Source Developer's avatar
trans    
Open Source Developer committed
45
46
                          </div>
                        </td></tr>
Open Source Developer's avatar
trans    
Open Source Developer committed
47
                      </table>
Open Source Developer's avatar
trans    
Open Source Developer committed
48
49
50
51
52
                      <div class="form-group"><label for="name">Όνομα μαθητή</label> <p class="form-control" id="name" style="border:1px solid #eceeef;">    {{StudentDetails$.name}} </p> </div>
                      <div><label for="studentsurname">Επώνυμο μαθητή</label> <p class="form-control" id = "studentsurname" style="border:1px solid #eceeef;"> {{StudentDetails$.studentsurname}} </p></div>
                      <div><label for="fatherfirstname">Όνομα Πατέρα</label> <p class="form-control" id = "fatherfirstname" style="border:1px solid #eceeef;"> {{StudentDetails$.fatherfirstname}} </p></div>
                      <div><label for="fathersurname">Επώνυμο Πατέρα</label> <p class="form-control" id = "fathersurname" style="border:1px solid #eceeef;"> {{StudentDetails$.fathersurname}} </p></div>
                      <div><label for="motherfirstname">Όνομα Μητέρας</label> <p class="form-control" id = "motherfirstname" style="border:1px solid #eceeef;"> {{StudentDetails$.motherfirstname}} </p></div>
53
54
                      <div><label for="mothersurname">Επώνυμο Μητέρας</label> <p class="form-control" id = "mothersurname" style="border:1px solid #eceeef;"> {{StudentDetails$.mothersurname}} </p></div>
                      <div><label for="birthdate">Ημερομηνία Γέννησης</label> <p class="form-control" id = "birthdate" style="border:1px solid #eceeef;"> {{StudentDetails$.birthdate}} </p></div>
Open Source Developer's avatar
trans    
Open Source Developer committed
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75


                      <table>
                              <tr>
                                  <td>
                                      <div class="form-group">
                                          <label for="regionaddress">Διεύθυνση κατοικίας</label><p class="form-control" id = "regionaddress" style="border:1px solid #eceeef;"> {{StudentDetails$.regionaddress}} </p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="form-group">
                                          <label for="regiontk">TK </label><p class="form-control" id = "regiontk" style="border:1px solid #eceeef;"> {{StudentDetails$.regiontk}} </p>
                                      </div>
                                  </td>
                                  <td>
                                      <div class="form-group">
                                          <label for="regionarea">Πόλη/Περιοχή</label><p class="form-control" id = "regionarea" style="border:1px solid #eceeef;"> {{StudentDetails$.regionarea}} </p>
                                      </div>
                                  </td>
                             </tr>
                      </table>
76
77
78
                      <div><label for="certificatetype">Τύπος απολυτηρίου</label> <p class="form-control" id = "certificatetype" style="border:1px solid #eceeef;"> {{StudentDetails$.certificatetype}} </p></div>
                      <div><label for="telnum">Τηλέφωνο επικοινωνίας</label> <p class="form-control" id = "telnum" style="border:1px solid #eceeef;"> {{StudentDetails$.telnum}} </p></div>
                      <div><label for="relationtostudent">Η αίτηση γίνεται από</label> <p class="form-control" id = "relationtostudent" style="border:1px solid #eceeef;"> {{StudentDetails$.relationtostudent}} </p></div>
Open Source Developer's avatar
styles    
Open Source Developer committed
79

Open Source Developer's avatar
trans    
Open Source Developer committed
80
81
82
83
                    <h5>Κοινωνικά Κριτίρια </h5>
                    <div *ngFor="let critiriaChoices$  of CritirioChosen$ | async" [hidden]="UserData$.id !== userActive">
                         {{critiriaChoices$.critirio}}
                    </div>
Open Source Developer's avatar
styles    
Open Source Developer committed
84

Open Source Developer's avatar
trans    
Open Source Developer committed
85
86
87
88
                    <h5>Εισοδηματικά Κριτίρια </h5>
                    <div *ngFor="let incomeChoices$  of incomeChosen$ | async" [hidden]="UserData$.id !== userActive">
                         {{incomeChoices$.critirio}}
                     </div>
Open Source Developer's avatar
styles    
Open Source Developer committed
89

Open Source Developer's avatar
trans    
Open Source Developer committed
90
                    <h5>Επιλογές ΕΠΑΛ</h5>
Open Source Developer's avatar
trans    
Open Source Developer committed
91
92
93
94
95
96
                    <div *ngFor="let epalChoices$  of EpalChosen$ | async" [hidden]="UserData$.id !== userActive">
                         Σχολείο: {{epalChoices$.epal_id}}
                         Σειρά Προτίμισης:{{epalChoices$.choice_no}}
                    </div>
                   </div>
              </div>
Open Source Developer's avatar
styles    
Open Source Developer committed
97
             </div>
Open Source Developer's avatar
trans    
Open Source Developer committed
98
99
100
            </ul>
            <br>
            <button type="button" (click)="createPdf()">Εξαγωγή σε PDF</button>
101

Open Source Developer's avatar
Open Source Developer committed
102
103
104
   `
})

Open Source Developer's avatar
tranfer    
Open Source Developer committed
105
@Injectable() export default class SubmitedPreview implements OnInit , OnDestroy{
Open Source Developer's avatar
Open Source Developer committed
106

107

Open Source Developer's avatar
Open Source Developer committed
108
109
    private SubmitedApplic$: BehaviorSubject<any>;
    private SubmitedUsersSub: Subscription;
Open Source Developer's avatar
styles    
Open Source Developer committed
110
111
112
113
114
115
    private SubmitedDetails$: BehaviorSubject<any>;
    private SubmitedDetailsSub: Subscription;

    private EpalChosen$: BehaviorSubject<any>;
    private EpalChosenSub: Subscription;

Open Source Developer's avatar
trans    
Open Source Developer committed
116
117
118
119
    private incomeChosen$: BehaviorSubject<any>;
    private incomeChosenSub: Subscription;
    private CritirioChosen$: BehaviorSubject<any>;
    private CritirioChosenSub: Subscription;
120
    private showLoader$: BehaviorSubject<boolean>;
Open Source Developer's avatar
styles    
Open Source Developer committed
121

122

Open Source Developer's avatar
Open Source Developer committed
123
    public StudentId;
Open Source Developer's avatar
styles    
Open Source Developer committed
124
    private userActive = <number>-1;
125

Open Source Developer's avatar
trans    
Open Source Developer committed
126
127
  @ViewChild('target') element: ElementRef;

128
    constructor(private _hds: HelperDataService,
Open Source Developer's avatar
Open Source Developer committed
129
                private activatedRoute: ActivatedRoute,
Open Source Developer's avatar
trans    
Open Source Developer committed
130
                private router: Router ,
Open Source Developer's avatar
trans    
Open Source Developer committed
131
              )
Open Source Developer's avatar
Open Source Developer committed
132
    {
Open Source Developer's avatar
Open Source Developer committed
133
       this.SubmitedApplic$ = new BehaviorSubject([{}]);
Open Source Developer's avatar
styles    
Open Source Developer committed
134
135
       this.SubmitedDetails$ = new BehaviorSubject([{}]);
       this.EpalChosen$ = new BehaviorSubject([{}]);
Open Source Developer's avatar
trans    
Open Source Developer committed
136
137
       this.CritirioChosen$ = new BehaviorSubject([{}]);
       this.incomeChosen$ = new BehaviorSubject([{}]);
138
       this.showLoader$ = new BehaviorSubject(false);
Open Source Developer's avatar
Open Source Developer committed
139
140
    }

Open Source Developer's avatar
tranfer    
Open Source Developer committed
141
142
    ngOnDestroy()
    {
Open Source Developer's avatar
Open Source Developer committed
143
144
        if (this.SubmitedUsersSub)
            this.SubmitedUsersSub.unsubscribe();
Open Source Developer's avatar
styles    
Open Source Developer committed
145
146
147
148
        if (this.SubmitedDetailsSub)
            this.SubmitedDetailsSub.unsubscribe();
        if (this.EpalChosenSub)
            this.EpalChosenSub.unsubscribe();
Open Source Developer's avatar
trans    
Open Source Developer committed
149
150
151
152
153
        if (this.CritirioChosenSub)
            this.CritirioChosenSub.unsubscribe();
        if (this.incomeChosenSub)
            this.incomeChosenSub.unsubscribe();

Open Source Developer's avatar
styles    
Open Source Developer committed
154
155
        this.SubmitedDetails$.unsubscribe();
        this.EpalChosen$.unsubscribe();
156
        this.SubmitedApplic$.unsubscribe();
Open Source Developer's avatar
Open Source Developer committed
157

Open Source Developer's avatar
tranfer    
Open Source Developer committed
158
    }
159

Open Source Developer's avatar
Open Source Developer committed
160
    ngOnInit() {
161

162
        this.showLoader$.next(true);
Open Source Developer's avatar
Open Source Developer committed
163

164
165
166
167
168
        this.SubmitedUsersSub = this._hds.getSubmittedPreviw().subscribe(
            data => {
                this.SubmitedApplic$.next(data);
                this.showLoader$.next(false);
            },
Open Source Developer's avatar
styles    
Open Source Developer committed
169
170
            error => {
                this.SubmitedApplic$.next([{}]);
171
                this.showLoader$.next(false);
Open Source Developer's avatar
styles    
Open Source Developer committed
172
173
                console.log("Error Getting Schools");
            },
174
175
176
177
            () => {
                console.log("Getting Schools")
                this.showLoader$.next(false);
            });
178

Open Source Developer's avatar
Open Source Developer committed
179
180
    }

Open Source Developer's avatar
styles    
Open Source Developer committed
181
182


183
184

  setActiveUser(ind,i)
Open Source Developer's avatar
styles    
Open Source Developer committed
185
  {
Open Source Developer's avatar
trans    
Open Source Developer committed
186
      ind = +ind;
Open Source Developer's avatar
styles    
Open Source Developer committed
187
188
189
190
191
192
      console.log(this.userActive,"RA",ind);
      if (ind === this.userActive){
        ind = -1;
      }
      ind--;
      this.userActive = ind+1 ;
193
      this.showLoader$.next(true);
Open Source Developer's avatar
styles    
Open Source Developer committed
194
      this.SubmitedDetailsSub = this._hds.getStudentDetails(this.userActive+1).subscribe(data => {
195
196
197
          this.SubmitedDetails$.next(data);
          this.showLoader$.next(false);
    },
Open Source Developer's avatar
styles    
Open Source Developer committed
198
199
200
            error => {
                this.SubmitedDetails$.next([{}]);
                console.log("Error Getting Schools");
201
                this.showLoader$.next(false);
Open Source Developer's avatar
styles    
Open Source Developer committed
202
            },
203
204
205
206
             () => {
                 console.log("Getting Schools");
                 this.showLoader$.next(false);
             });
Open Source Developer's avatar
styles    
Open Source Developer committed
207
208
209
210
211
212
213
      this.EpalChosenSub = this._hds.getEpalchosen(this.userActive+1).subscribe(data => {
        this.EpalChosen$.next(data)},
            error => {
                this.EpalChosen$.next([{}]);
                console.log("Error Getting Schools");
            },
             () => console.log("Getting Schools"));
Open Source Developer's avatar
trans    
Open Source Developer committed
214
215
216
217
218
219
220
221
222
223
224
225
226
227
    this.CritirioChosenSub = this._hds.getCritiria(this.userActive+1, 1).subscribe(data => {
        this.CritirioChosen$.next(data)},
            error => {
                this.CritirioChosen$.next([{}]);
                console.log("Error Getting Schools");
            },
             () => console.log("Getting Schools"));
    this.incomeChosenSub = this._hds.getCritiria(this.userActive+1, 2).subscribe(data => {
          this.incomeChosen$.next(data)},
              error => {
                  this.incomeChosen$.next([{}]);
                  console.log("Error Getting Schools");
              },
               () => console.log("Getting Schools"));
Open Source Developer's avatar
styles    
Open Source Developer committed
228
229
230

   }

Open Source Developer's avatar
trans    
Open Source Developer committed
231
 createPdf1()
Open Source Developer's avatar
Open Source Developer committed
232
    {
233

Open Source Developer's avatar
styles    
Open Source Developer committed
234
235
       html2canvas(document.getElementById("target")).then(function(canvas)
        {
236

Open Source Developer's avatar
trans    
Open Source Developer committed
237

Open Source Developer's avatar
trans    
Open Source Developer committed
238
239
240
241
242
243
          var img=new Image();
          img.src=canvas.toDataURL();
          img.onload=function(){
            console.log(img,"img");
            var doc = new jsPDF();
            console.log(img, doc, "ok");
Open Source Developer's avatar
trans    
Open Source Developer committed
244
            doc.addImage(img, 'PNG',0, 0, 210, 297);
Open Source Developer's avatar
trans    
Open Source Developer committed
245
            console.log(img, doc, "ok2");
Open Source Developer's avatar
styles    
Open Source Developer committed
246
            doc.save('applications.pdf');
Open Source Developer's avatar
trans    
Open Source Developer committed
247
 
Open Source Developer's avatar
trans    
Open Source Developer committed
248
          }
Open Source Developer's avatar
trans    
Open Source Developer committed
249
250
251



Open Source Developer's avatar
trans    
Open Source Developer committed
252

Open Source Developer's avatar
conf    
Open Source Developer committed
253

Open Source Developer's avatar
trans    
Open Source Developer committed
254
255
256
257
          },
          function(error){
              console.log("i fail");
            });
Open Source Developer's avatar
trans    
Open Source Developer committed
258
     }
Open Source Developer's avatar
trans    
Open Source Developer committed
259

Open Source Developer's avatar
trans    
Open Source Developer committed
260

Open Source Developer's avatar
trans    
Open Source Developer committed
261

Open Source Developer's avatar
trans    
Open Source Developer committed
262

Open Source Developer's avatar
trans    
Open Source Developer committed
263
createPdf()
Open Source Developer's avatar
trans    
Open Source Developer committed
264
265
266
267
{

html2canvas(document.getElementById("target"), <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
Open Source Developer's avatar
trans    
Open Source Developer committed
268
269
270
271
272
273
274
275
        var img = canvas.toDataURL();
                  var doc = new jsPDF();
                               
                  console.log("mphkaneo");
             setTimeout(function(){
               

                 
Open Source Developer's avatar
trans    
Open Source Developer committed
276
    }, 100000);
Open Source Developer's avatar
trans    
Open Source Developer committed
277
278
279
280
281
282
283
              doc.addImage(img, 'PNG',0, 0, 1000, 1000);
                  console.log("mphkaneoneo");
                  doc.save('applications.pdf');
}
}); }
  
  
Open Source Developer's avatar
trans    
Open Source Developer committed
284

285
}
Open Source Developer's avatar
trans    
Open Source Developer committed
286
287