submited.aplication.preview.ts 11.5 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 16
import * as html2canvas from "html2canvas"

Open Source Developer's avatar
Open Source Developer committed
17 18


Open Source Developer's avatar
styles  
Open Source Developer committed
19
@Component({ 
Open Source Developer's avatar
Open Source Developer committed
20
    selector: 'submited-preview',
Open Source Developer's avatar
trans  
Open Source Developer committed
21
    template: ` 
Open Source Developer's avatar
trans  
Open Source Developer committed
22
        <div class="row"> 
Open Source Developer's avatar
commit  
Open Source Developer committed
23 24
             <breadcrubs></breadcrubs>
        </div>
25
            Έχει υποβληθεί αίτηση για εγγραφή στην Επαγγελματική Εκπαίδευση των παρακάτω ατόμων:
Open Source Developer's avatar
styles  
Open Source Developer committed
26 27 28
           
              <ul class="list-group main-view">
               <div *ngFor="let UserData$  of SubmitedApplic$ | async; let i=index; let isOdd=odd; let isEven=even"  >
Open Source Developer's avatar
trans  
Open Source Developer committed
29
                 <li class="list-group-item isclickable" [class.oddout]="isOdd" [class.evenout]="isEven" (click)="setActiveUser(UserData$.id)" [class.selectedout]="userActive === UserData$.id" >
Open Source Developer's avatar
styles  
Open Source Developer committed
30
                  <h5> {{UserData$.name}}&nbsp;{{UserData$.studentsurname}} </h5>
Open Source Developer's avatar
trans  
Open Source Developer committed
31
                 </li>
Open Source Developer's avatar
styles  
Open Source Developer committed
32 33
                  <div id = "target">

Open Source Developer's avatar
trans  
Open Source Developer committed
34
                  <div *ngFor="let StudentDetails$  of SubmitedDetails$ | async" [hidden]="UserData$.id !== userActive" >
Open Source Developer's avatar
trans  
Open Source Developer committed
35 36 37 38 39 40 41 42 43 44 45
                      <table>
                        <tr><td>
                          <div class="form-group" *ngIf="StudentDetails$.relationtostudent === 'Μαθητής' ">
                            <label for="guardianfirstname">Όνομα κηδεμόνα</label><p class="form-control" id="guardianfirstname" style="border:1px solid #eceeef;">{{StudentDetails$.guardianfirstname}} </p> 
                          </div>
                        </td>
                        <td>
                         <div class="form-group" *ngIf="StudentDetails$.relationtostudent === 'Μαθητής' ">
                            <label for="guardiansurname">Επώνυμο κηδεμόνα</label><p class="form-control" id="guardiansurname" style="border:1px solid #eceeef;">{{StudentDetails$.guardiansurname}} </p> 
                          </div>
                        </td></tr>
Open Source Developer's avatar
trans  
Open Source Developer committed
46
                      </table>
Open Source Developer's avatar
trans  
Open Source Developer committed
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 72 73 74 75 76 77
                      <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>
                      <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>                


                      <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>
                      <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
78

Open Source Developer's avatar
trans  
Open Source Developer committed
79 80 81 82
                    <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
83

Open Source Developer's avatar
trans  
Open Source Developer committed
84 85 86 87
                    <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
88

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

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

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

106

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

    private EpalChosen$: BehaviorSubject<any>;
    private EpalChosenSub: Subscription;
Open Source Developer's avatar
trans  
Open Source Developer committed
114
 
Open Source Developer's avatar
trans  
Open Source Developer committed
115 116 117 118
    private incomeChosen$: BehaviorSubject<any>;
    private incomeChosenSub: Subscription;
    private CritirioChosen$: BehaviorSubject<any>;
    private CritirioChosenSub: Subscription;
Open Source Developer's avatar
styles  
Open Source Developer committed
119

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

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

Open Source Developer's avatar
tranfer  
Open Source Developer committed
136 137
    ngOnDestroy()
    {
Open Source Developer's avatar
Open Source Developer committed
138 139
        if (this.SubmitedUsersSub)
            this.SubmitedUsersSub.unsubscribe();
Open Source Developer's avatar
styles  
Open Source Developer committed
140 141 142 143
        if (this.SubmitedDetailsSub)
            this.SubmitedDetailsSub.unsubscribe();
        if (this.EpalChosenSub)
            this.EpalChosenSub.unsubscribe();
Open Source Developer's avatar
trans  
Open Source Developer committed
144 145 146 147 148
        if (this.CritirioChosenSub)
            this.CritirioChosenSub.unsubscribe();
        if (this.incomeChosenSub)
            this.incomeChosenSub.unsubscribe();

Open Source Developer's avatar
styles  
Open Source Developer committed
149 150
        this.SubmitedDetails$.unsubscribe();
        this.EpalChosen$.unsubscribe();
151
        this.SubmitedApplic$.unsubscribe();
Open Source Developer's avatar
Open Source Developer committed
152

Open Source Developer's avatar
tranfer  
Open Source Developer committed
153
    }
Open Source Developer's avatar
Open Source Developer committed
154
 
Open Source Developer's avatar
Open Source Developer committed
155
    ngOnInit() {
156

Open Source Developer's avatar
Open Source Developer committed
157

Open Source Developer's avatar
styles  
Open Source Developer committed
158 159 160 161 162 163 164
        this.SubmitedUsersSub = this._hds.getSubmittedPreviw().subscribe(data => {
          this.SubmitedApplic$.next(data)},
            error => {
                this.SubmitedApplic$.next([{}]);
                console.log("Error Getting Schools");
            },
            () => console.log("Getting Schools"));
Open Source Developer's avatar
Open Source Developer committed
165
        console.log(this.SubmitedApplic$);
Open Source Developer's avatar
Open Source Developer committed
166 167
    }

Open Source Developer's avatar
styles  
Open Source Developer committed
168 169 170 171 172
   


  setActiveUser(ind,i) 
  {
Open Source Developer's avatar
trans  
Open Source Developer committed
173
      ind = +ind;
Open Source Developer's avatar
styles  
Open Source Developer committed
174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
      console.log(this.userActive,"RA",ind);
      if (ind === this.userActive){
        ind = -1;
      }
      ind--;
      this.userActive = ind+1 ;
      this.SubmitedDetailsSub = this._hds.getStudentDetails(this.userActive+1).subscribe(data => {
        this.SubmitedDetails$.next(data)},
            error => {
                this.SubmitedDetails$.next([{}]);
                console.log("Error Getting Schools");
            },
             () => console.log("Getting Schools"));
      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
194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
    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
209 210 211
   }

 createPdf()
Open Source Developer's avatar
Open Source Developer committed
212
    {
Open Source Developer's avatar
trans  
Open Source Developer committed
213

Open Source Developer's avatar
styles  
Open Source Developer committed
214 215 216 217 218 219 220
       html2canvas(document.getElementById("target")).then(function(canvas)
        {
            var img = canvas.toDataURL();
            var doc = new jsPDF('p', 'mm');
            doc.addImage(img, 'PNG', 10, 10);
            doc.save('applications.pdf');
        });
Open Source Developer's avatar
Open Source Developer committed
221
    }
Open Source Developer's avatar
trans  
Open Source Developer committed
222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246



createPdf1()
    {

      var srcpath;
      var imgageData = new Image();
      imgageData.id = "pic";
      var doc = new jsPDF({
              unit:'px', 
              format:'a4'
            });
       console.log("lalalalalala"); 
html2canvas(document.getElementById("target")), {
    onrendered: function (canvas) {
        srcpath = canvas.toDataURL("image/png");
        imgageData.src=srcpath;
        doc.addImage(imgageData , 'PNG',  20, 20,400,150);
    }
    }

   }   


247
}