pdf download

ng-seed/src/app/end-user/booking-summary/booking-summary.component.html

@@ -42,17 +42,17 @@
 
 <div fxLayout="row wrap" fxLayoutAlign="center center">
     <div class="column" fxFlex.xs="60" fxFlex.sm="60" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" fxLayoutAlign="center center">
-        <mat-card class="p-2 radius ">
+        <mat-card class="p-2 radius">
            
-          
+          <div id="table">
             <h3 class="base-border summaryHeading">Your Booking Summary</h3>  
-                  <mat-card-content>
+                  <mat-card-content >
                     <div fxLayout="row wrap" style="margin-bottom: 20px;">
                         <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
                             <span class="head"># Booking ID</span>
                         </div>
                         <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-                            <span>:{{bookingSummary.bookingId}}</span>
+                            <span>: {{bookingSummary.bookingId}}</span>
                         </div>
                         <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" fxLayoutAlign="end">
                             <div><span class="head">Status:</span><span style="color: green;">Confirmed</span></div>
@@ -102,12 +102,13 @@
                     </div>
                   </mat-card-content>
                   <div style="border-bottom: 2px solid #000;margin-bottom: 15px;"></div>
+                  </div>
                   <div fxLayout="row wrap" style="margin-bottom: 20px;">
                     <!-- <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
                         <button mat-raised-button><mat-icon>add</mat-icon> Add To Calender</button>
                     </div> -->
                     <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-                        <button mat-raised-button><mat-icon>download</mat-icon> Download as PDF</button> 
+                        <button mat-raised-button (click)="download()"><mat-icon>download</mat-icon> Download as PDF</button> 
                     </div>
                     <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" fxLayoutAlign="end">
                         <button mat-raised-button>Add To Google Calander</button>

ng-seed/src/app/end-user/booking-summary/booking-summary.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { EndUserService } from '../end-user.service';
 import { Router } from '@angular/router';
+import * as html2pdf from 'html2pdf.js'
 
 @Component({
   selector: 'app-booking-summary',
@@ -50,4 +51,18 @@ export class BookingSummaryComponent implements OnInit {
   Summaryhide(){
     this.summary = true;
   }
+
+  download(){
+    var element = document.getElementById('table');
+var opt = {
+  margin:       1,
+  filename:     this.bookingSummary.bookingId+'.pdf',
+  image:        { type: 'jpeg', quality: 0.98 },
+  html2canvas:  { scale: 2 },
+  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
+};
+ 
+// New Promise-based usage:
+html2pdf().from(element).set(opt).save();
+  }
 }

ng-seed/src/app/end-user/customer-info/customer-info.component.html

@@ -22,7 +22,7 @@
                         <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
                             Please enter a valid email address
                          </mat-error>
-                         <mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
+                         <!-- <mat-error *ngIf="myError('email', 'required')">email is required</mat-error> -->
                          <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
                             Email is required
                          </mat-error>

ng-seed/src/app/end-user/customer-info/opt-verify/opt-verify.component.ts

@@ -41,13 +41,15 @@ export class OptVerifyComponent implements OnInit {
         clearInterval(this.interval);
       }
     },1000)  
- 
+ if(!this.reCaptchaVerifier){
   this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier(
     'sign-in-button',
     {
       size: 'invisible',
     }
-  );
+  )
+ }
+ 
   console.log(this.reCaptchaVerifier);
   this.phoneNumber = "+91"+this.phoneNumber;
   console.log(this.phoneNumber);

ng-seed/src/app/end-user/payment/payment.component.html

@@ -31,7 +31,7 @@
                            <mat-error *ngIf="myError('expiryDate', 'required')">Name is required</mat-error>
                            <mat-error *ngIf="myError('expiryDate', 'maxlength')">Limit exceed</mat-error>
                         </mat-form-field>
-                        <button class="mat-green" type="submit" mat-raised-button>Submit</button>
+                        <button class="mat-green" [disabled]="onSubmitDisable == true" type="submit" mat-raised-button>Submit</button>
                      </div>
                      </form>
                   </mat-card-content>

ng-seed/src/app/end-user/payment/payment.component.ts

@@ -13,6 +13,7 @@ export class PaymentComponent implements OnInit {
   form: FormGroup;
   bookedAppointment_servicemap: any;
   busName: string;
+  onSubmitDisable: any = false;
   constructor(private router:Router,public enduser:EndUserService,  private route: ActivatedRoute, ) { 
     this.enduser.appointmentBooked_observable$.subscribe((res) => {
       console.log('booked', res);
@@ -48,6 +49,7 @@ export class PaymentComponent implements OnInit {
 
   submit(){
     console.log(this.form.value)
+    this.onSubmitDisable = true
    let slot_array = JSON.parse(localStorage.getItem("slotData"))
 
  

ng-seed/src/environments/environment.ts

@@ -15,7 +15,7 @@ export const environment = {
 //  apiEndpoint:'https://api.venbait.in/api/',
   
   //EndUser URL
-  endUserUrl:'https://venbainfotech.com/appointment/#/customer/',
+  endUserUrl: window.location.origin+'/#/customer/',
 
   firebase: {
     apiKey: "AIzaSyCKbfDJ5Qf0rDP3WKppa94u9xuVaVabaDw",

ng-seed/tsconfig.json

@@ -9,6 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "noImplicitAny": false,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"