Fairoj : Back button is disabled when image is uploading and image size reduced

package-lock.json

@@ -4969,6 +4969,21 @@
         "pdfjs-dist": "2.0.943"
       }
     },
+    "ngx-image-compress": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/ngx-image-compress/-/ngx-image-compress-8.0.4.tgz",
+      "integrity": "sha512-unHO5BxoHdX/bwgzYvo0frGUab9qsMP2bcfSep6OM1ewZ66J6BwPwhWs2isvcEeud5i0BG+UgEe6hHTVg49Nrg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.11.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
+          "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA=="
+        }
+      }
+    },
     "ngx-mat-select-search": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-1.8.0.tgz",

package.json

@@ -60,6 +60,7 @@
     "ionic-img-viewer": "^2.9.0",
     "ionicons": "3.0.0",
     "ng2-pdf-viewer": "5.2.3",
+    "ngx-image-compress": "^8.0.4",
     "ngx-mat-select-search": "^1.8.0",
     "rxjs": "^6.3.1",
     "rxjs-compat": "^6.3.1",

src/pages/pd-list/pd-list.ts

@@ -45,12 +45,18 @@ export class PdListPage {
   // public category:string="inpro"
   // public categories:Array<string>=['inpro','past']
   constructor(public navCtrl: NavController,private modalCtrl:ModalController, public navParams: NavParams,public aws:AwsServiceProvider,public pdofficer:PdtriggerProvider,public shared:CognitoServiceProvider,private events:Events) {
-    this.common = JSON.parse(localStorage.getItem('commonSettings')).default_pd_list_count;
+   
-    this.common = this.common.count+' '+this.common.factor
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad PdListPage');
+    setTimeout(()=>{
+    this.common = JSON.parse(localStorage.getItem('commonSettings'))
+    if(this.common){
+      this.common = this.common.default_pd_list_count;
+    this.common = this.common.count+' '+this.common.factor
+    }
+  },300)
   }
   ionViewDidEnter()
   {

src/pages/sales_pd/components/ques-template/ques-template.html

@@ -80,7 +80,8 @@
                           <!-- IMAGE STATUS ICON FOR INPROGRESS, COMPLETED AND FAILED -->
                           <ion-col col-4 *ngIf="parent_ques.get('is_image_status').value == true">
                             <ion-spinner name="crescent" style="width: 20px;
-                            height: 20px;" *ngIf="parent_ques.get('is_loader').value == true"></ion-spinner>
+                            height: 20px;"  (click)="cancelLoader(parent_ques)"
+                            *ngIf="parent_ques.get('is_loader').value == true"></ion-spinner>
                              <ion-icon style="color: #008828;float: right;
                              margin-right: 30%;" *ngIf="parent_ques.get('is_saved').value == true" name="checkmark-circle-outline"></ion-icon>
                              <span style="margin:0px;" *ngIf="(parent_ques.get('is_saved').value == false &&
@@ -319,7 +320,8 @@
                           <!-- IMAGE STATUS ICON FOR INPROGRESS, COMPLETED AND FAILED -->
                           <ion-col col-4 *ngIf="single_ques.get('is_image_status').value == true">
                             <ion-spinner name="crescent" style="width: 20px;
-                            height: 20px;" *ngIf="single_ques.get('is_loader').value == true"></ion-spinner>
+                            height: 20px;"  (click)="cancelLoader(single_ques)"
+                             *ngIf="single_ques.get('is_loader').value == true"></ion-spinner>
                              <ion-icon style="color: #008828;float: right;
                              margin-right: 30%;" *ngIf="single_ques.get('is_saved').value == true" name="checkmark-circle-outline"></ion-icon>
                              <span style="margin:0px;" *ngIf="(single_ques.get('is_saved').value == false &&

src/pages/sales_pd/components/ques-template/ques-template.ts

@@ -41,6 +41,7 @@ export class QuesTemplateComponent {
   local_city: any;
   local_pincode: any;
   @Output() emitter=new EventEmitter()
+  @Output() imageUploadCheck = new EventEmitter()
   local_ques_JSON: any;
   geoCoordinates: string;
   fileredSearchValue: any=[];
@@ -51,6 +52,7 @@ export class QuesTemplateComponent {
   raw_data_Section: any={status:''};
   @ViewChild('accordion') Accordion: MatAccordion
   @ViewChild('mapanel') matExpansionPanel:MatExpansionPanel
+  emittedFormGroup: any = null;
   constructor(private _fb:FormBuilder,private questionService:QuesServiceProvider,private salesPDProvider:SalesPdProvider,private camera:Camera,private cameraProvider:CameraProvider,private constantProvider:ConstantsProvider,private toastProvider:ToastProvider,private loadingProvider:LoadingProvider,private navCtrl:NavController) {
     console.log('Hello QuesTemplateComponent Component');
     this.text = 'Hello World';
@@ -259,14 +261,15 @@ this.proceedonChangeProperty(modified)
       this.cameraProvider.getpicture().then(res => {
 
         if (res != 'error') {
-          single_ques.controls.is_image_status.setValue(true)
-          single_ques.controls.is_loader.setValue(true);
-          single_ques.controls.is_saved.setValue(false);
           this.geoCoordinates = localStorage.getItem('current_coordinates')
           this.cameraProvider.addWatermarks(res).then(watermarkedImage => {
             single_ques.controls.answer_value.setValue(watermarkedImage)
 
-          
+            single_ques.controls.is_image_status.setValue(true)
+            single_ques.controls.is_loader.setValue(true);
+            single_ques.controls.is_saved.setValue(false);
+            this.emittedFormGroup = this.quesAnsForm.getRawValue()
+            this.imageUploadCheck.emit(this.emittedFormGroup);
 
             //SENDING SINGLE IMAGE TO API WITH PRIMARY KEY
         let params={"fk_sales_pd_id":"","img":watermarkedImage,"img_name":single_ques.value.question_key}
@@ -289,20 +292,25 @@ this.proceedonChangeProperty(modified)
             this.salesPDProvider.clear_local_key('sec'+storage_param.section_id)
             this.toastProvider.lenderappmessage("Something went wrong");
           }
+          this.emittedFormGroup = this.quesAnsForm.getRawValue()
+          this.imageUploadCheck.emit(this.emittedFormGroup);
         },err=>{
           single_ques.controls.is_loader.setValue(false);
           single_ques.controls.is_saved.setValue(false);
           this.salesPDProvider.clear_local_key('sec'+storage_param.section_id)
           console.log("error",err);
           this.toastProvider.lenderappmessage('Network Error')
+          this.emittedFormGroup = this.quesAnsForm.getRawValue()
+          this.imageUploadCheck.emit(this.emittedFormGroup);
         })
           })
           let control: any = parent_index['controls'].questions_group as FormArray
           control.push(this._fb.group({ 'questions': this._fb.array([]) }))
           let sub_childControl: any = control.controls[group_index + 1].get('questions') as FormArray
-          data.forEach(group_indi => {
+          data.forEach((group_indi,arr_index )=> {
             delete group_indi.answer_value
             sub_childControl.push(this.questionService.createValue(group_indi))
+            this.questionService.addAdditionalControl(group_indi, sub_childControl, arr_index)
           })
         }
       }, error => {
@@ -377,16 +385,17 @@ this.proceedonChangeProperty(modified)
     }
   }
   captureImg(parent_index,parent_control){
-
+    // parent_control.controls.is_image_status.setValue('l')
     this.cameraProvider.getpicture().then(res => {
       if (res != 'error') {
-        parent_control.controls.is_image_status.setValue(true)
-      parent_control.controls.is_loader.setValue(true);
-      parent_control.controls.is_saved.setValue(false);
        this.geoCoordinates=localStorage.getItem('current_coordinates')
           this.cameraProvider.addWatermarks(res).then(watermarkedImage=>{
         parent_control.controls.answer_value.setValue(watermarkedImage)
-
+        parent_control.controls.is_image_status.setValue(true)
+        parent_control.controls.is_loader.setValue(true);
+        parent_control.controls.is_saved.setValue(false);
+        this.emittedFormGroup = this.quesAnsForm.getRawValue()
+        this.imageUploadCheck.emit(this.emittedFormGroup);
         
         //SENDING SINGLE IMAGE TO API WITH PRIMARY KEY
         let params={"fk_sales_pd_id":"","img":watermarkedImage,"img_name":parent_control.value.question_key}
@@ -409,12 +418,16 @@ this.proceedonChangeProperty(modified)
             this.salesPDProvider.clear_local_key('sec'+storage_param.section_id)
             this.toastProvider.lenderappmessage("Something went wrong");
           }
+          this.emittedFormGroup = this.quesAnsForm.getRawValue()
+        this.imageUploadCheck.emit(this.emittedFormGroup);
         },err=>{
           parent_control.controls.is_loader.setValue(false);
           parent_control.controls.is_saved.setValue(false);
           this.salesPDProvider.clear_local_key('sec'+storage_param.section_id)
           console.log("error",err);
           this.toastProvider.lenderappmessage('Network Error')
+          this.emittedFormGroup = this.quesAnsForm.getRawValue()
+        this.imageUploadCheck.emit(this.emittedFormGroup);
         })
         
       })
@@ -965,14 +978,16 @@ this.proceedonChangeProperty(modified)
       return
     }
     // CHECKING THE SAVE IMAGE REQUEST IS STILL PENDING
-    if(this.submit_btn == true){
+    if(this.submit_btn == true && this.emittedFormGroup != null){
+      console.clear();
+      console.log(this.quesAnsForm.dirty);
       let form_structure=this.quesAnsForm.getRawValue().questions
       // form_structure.forEach(parent_ques=>{
         for(let i=0; i<form_structure.length;i++){
           let parent_ques = form_structure[i]
         if(parent_ques.hasOwnProperty('is_repeatable') && parent_ques.is_repeatable != '1'){
           if(parent_ques.is_loader == true){  
-            this.toastProvider.lenderappmessage("Some images is still uploading. Please wait...")
+            this.toastProvider.lenderappmessage("Some images are still uploading. Please wait...")
             return;
           }
         }
@@ -984,7 +999,7 @@ this.proceedonChangeProperty(modified)
         //  parent_ques.questions_group.forEach(group_ques=>{
           //  group_ques.questions.forEach(single_ques=>{
             if(single_ques.is_loader == true){  
-              this.toastProvider.lenderappmessage("Some images is still uploading. Please wait...")
+              this.toastProvider.lenderappmessage("Some images are still uploading. Please wait...")
               return;
              }
           //  })
@@ -1286,4 +1301,8 @@ this.proceedonChangeProperty(modified)
       this.toastProvider.lenderappmessage('Network Error')
     })
   }
+  cancelLoader(control){
+    control.controls.is_loader.setValue(false);
+    control.controls.is_image_status.setValue(false);
+  }
 }

src/pages/sales_pd/pages/home/home.html

@@ -23,7 +23,7 @@
 <mat-card>
   <mat-card-content *ngIf="question_data.questions.length > 0">
 
-<ques-template (emitter)="navigate($event)" [questions_JSON]="question_data"></ques-template>
+<ques-template (emitter)="navigate($event)" [questions_JSON]="question_data" (imageUploadCheck)="setGroupControl($event)"></ques-template>
 <!-- <button ion-button (click)="onChange()"></button> -->
 </mat-card-content>
 <mat-card-content *ngIf="question_data.questions.length == 0">

src/pages/sales_pd/pages/home/home.module.ts

@@ -9,6 +9,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { IonicStorageModule } from '@ionic/storage';
 import { SectionListPage } from '../section-list/section-list';
 import { SectionListPageModule } from '../section-list/section-list.module';
+import {NgxImageCompressService} from 'ngx-image-compress'
 
 
 @NgModule({
@@ -63,6 +64,6 @@ import { SectionListPageModule } from '../section-list/section-list.module';
     ReactiveFormsModule,
     IonicStorageModule.forRoot()
   ],
-  providers:[SalesPdProvider]
+  providers:[SalesPdProvider,NgxImageCompressService]
 })
 export class HomePageModule {}

src/pages/sales_pd/pages/home/home.ts

@@ -500,6 +500,7 @@ export class Section9 {
   raw_data:any;
   section_local:number=9
   all_sections:any;
+  formGroupValue: any=null;
 
   constructor(public navCtrl: NavController, public navParams: NavParams,private SalesPDService:SalesPdProvider,private loadingProvider:LoadingProvider,private toastProvider:ToastProvider) {
     if(this.navParams.get('section_id')){
@@ -529,6 +530,74 @@ export class Section9 {
     console.log('ionViewDidLoad HomePage');
    
 
+  }
+  ionViewCanLeave(){
+    if (this.question_data.section_id == 9) {
+      // this.SalesPDService.getData_fromLocal("sales_pd_id_PRIMARYKEY").then(curr_sales_pd_id => {
+      //   this.SalesPDService.getData_fromLocal("sec9").then(sec_value => {
+        console.log("section 9 First")
+          if(this.formGroupValue) {
+            console.log("FormGroup",this.formGroupValue.questions.length);
+          if (this.formGroupValue != null) {
+           return this.checkImageUploadingStatus(this.formGroupValue).then(res=>{
+
+           })
+          }
+        }
+      //   })
+      // })
+
+    }
+    console.log("Leaving on ionViewCanLeave");
+  }
+  setGroupControl(event){
+    this.formGroupValue=event
+  }
+  checkImageUploadingStatus(sec_value) { 
+  console.log("Section 9",sec_value);
+  return new Promise((resolve,reject)=>{
+    let progress = this.checkTheUploadingProgress(sec_value);
+
+    if(progress == 1){
+      console.log("Section 9 Confirmed");
+      this.toastProvider.lenderappmessage("Some images are still uploading. Please wait...")
+      reject()
+    }
+    else{
+      resolve()
+    }
+  })
+}
+checkTheUploadingProgress(sec_value){
+  let form_structure=sec_value.questions
+  // form_structure.forEach(parent_ques=>{
+    for(let i=0; i<form_structure.length;i++){
+      let parent_ques = form_structure[i]
+    if(parent_ques.hasOwnProperty('is_repeatable') && parent_ques.is_repeatable != '1'){
+      if(parent_ques.is_loader == true){  
+        return 1;
+      }
+    }
+    else{
+      for(let p_i=0;p_i<parent_ques.questions_group.length;p_i++){
+        let group_ques = parent_ques.questions_group[p_i]
+        for(let g_i=0;g_i<group_ques.questions.length;g_i++){
+          let single_ques = group_ques.questions[g_i]
+    //  parent_ques.questions_group.forEach(group_ques=>{
+      //  group_ques.questions.forEach(single_ques=>{
+        if(single_ques.is_loader == true){  
+          return 1;
+         }
+      //  })
+    //  })
+        }
+      }
+    }
+  }
+  return 0
+  }
+  stopDestroying(event){
+    console.log("stopDestroying",event)
   }
   onChange(){
     this.navCtrl.push(HomePage)

src/pages/sales_pd/pages/sales-p-dlist/sales-p-dlist.ts

@@ -30,13 +30,18 @@ export class SalesPDlistPage {
   common: any;
 
   constructor(public actionSheetCtrl: ActionSheetController,public navCtrl: NavController, public navParams: NavParams,private salesPDService:SalesPdProvider,private toastProvider:ToastProvider,private loaderProvider:LoadingProvider,private modalCtrl:ModalController) {
-    this.common = JSON.parse(localStorage.getItem('commonSettings')).default_pd_list_count;
+    
-    this.common = this.common.count+' '+this.common.factor
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad SalesPDlistPage');
-    
+    setTimeout(()=>{
+    this.common = JSON.parse(localStorage.getItem('commonSettings'))
+    if(this.common){
+      this.common = this.common.default_pd_list_count;
+    this.common = this.common.count+' '+this.common.factor
+    }
+  },300)
     // this.salesPDService.clearLocalData();
   }
   ionViewDidEnter(){

src/pages/sales_pd/pages/section-list/section-list.ts

@@ -120,6 +120,6 @@ export class SectionListPage {
     }
     setTimeout(()=>{
       this.navCtrl.push(Section9,{section_id:section_id})
-    },50)
+    },10)
   }
 }

src/pages/sales_pd/providers/camera/camera.ts

@@ -7,6 +7,7 @@ import { DatePipe } from '@angular/common';
 import * as watermark from 'watermarkjs'
 import { LocationAccuracy } from '@ionic-native/location-accuracy';
 import { AndroidPermissions } from '@ionic-native/android-permissions';
+import { NgxImageCompressService } from 'ngx-image-compress';
 
 /*
   Generated class for the CameraProvider provider.
@@ -19,7 +20,8 @@ export class CameraProvider {
   geoCords: any;
   pipe: DatePipe;
 
-  constructor(public http: HttpClient,private camera:Camera,private geo:Geolocation,private locationAccuracy:LocationAccuracy,private androidPermissions:AndroidPermissions) {
+  constructor(public http: HttpClient,private camera:Camera,private geo:Geolocation,private locationAccuracy:LocationAccuracy,private androidPermissions:AndroidPermissions
+    ,private imageCompress:NgxImageCompressService) {
     console.log('Hello CameraProvider Provider');
     this.pipe=new DatePipe('en-US')
   }
@@ -54,7 +56,7 @@ export class CameraProvider {
     localStorage.removeItem('current_coordinates')
     
     const options = {
-      quality: 50,
+      quality: 75,
       destinationType: this.camera.DestinationType.DATA_URL,
       targetWidth: 600,
       targetHeight: 600,
@@ -73,11 +75,16 @@ export class CameraProvider {
         this.geoCords = geoCoordinates
         localStorage.setItem('current_coordinates',this.geoCords)
       
-       console.log('From Camera.ts - getPicture fn image are',imageData)
+      //  console.log('From Camera.ts - getPicture fn image are',imageData)
-      const base64Image = 'data:image/png;base64,' + imageData;
+      const base64Image = 'data:image/jpeg;base64,' + imageData;
       // this.myObject=base64Image
       //  console.log("base 64",base64Image);
+      this.imageInfo(base64Image,'Captured :')
         return base64Image;
+      // return this.compressTheImage(base64Image).then(compressed_img=>{
+      //   this.imageInfo(compressed_img,'First Compressed :')
+      //   return compressed_img;
+      // })
     });
     }, error => {
       localStorage.removeItem('current_coordinates')
@@ -122,16 +129,27 @@ export class CameraProvider {
               .image(text.upperLeft(dateTime, '18px sans-serif', '#ff0000', 1.0, 40))
               .then(img => {
                 raw_img = img.src;
-                console.log("2d", raw_img)
+                // console.log("2d", raw_img)
 
                 let Location = `Location : ` + this.geoCords
                 watermark([raw_img])
                   .image(text.upperLeft(Location, '18px sans-serif', '#ff0000', 1.0))
                   .then(img => {
                     raw_img = img.src
-                    console.log("3rd", raw_img)
+                    raw_img =raw_img.replace('png;','jpeg;')
-                    resolve(img.src)
+                    let last_water_marked=raw_img
+                    // console.log("3rd", raw_img)
+                    this.imageInfo(last_water_marked,'Watermarked :')
                     localStorage.removeItem('current_coordinates')
+                    return this.compressTheImage(last_water_marked).then(compressed_img=>{
+                      this.imageInfo(compressed_img,'Compressed :')
+                      resolve(compressed_img);
+                    },err=>{
+                      console.log(err);
+                      reject();
+                    })
+                    // resolve(img.src)
+                     
                   });
               });
           });
@@ -140,6 +158,45 @@ export class CameraProvider {
     })
     // });
   }
+  imageInfo(img,label){
+    let img_dummy= new Image()
+    img_dummy.src = img
+    img_dummy.onload = e => {
+    fetch(img_dummy.src).then(resp => resp.blob())
+    .then(blob => {
+     console.warn(label+" size in bytes",blob.size/1000)
+      console.warn(label+" Image Resolution",img_dummy.width + ' x ' +img_dummy.height)
+      });
+    };
+  }
+  compressTheImage(img){
+    return this.imageCompress.compressFile(img, -1, 100, 75).then(
+      result => {
+        console.warn('Size in bytes is now:', (this.imageCompress.byteCount(result))/1000);
+        return result
+        // this.imgResultAfterCompress.src = result;
+        // this.imgResultAfterCompress.size = (this.imageCompress.byteCount(result)/1000)
+        // let img= new Image()
+        // img.src = this.imgResultAfterCompress.src
+        // img.onload = e => {
+        //   fetch(img.src).then(resp=>{
+        //     this.imgResultAfterCompress.resolution =  img.width + ' x ' +img.height
+        //   })
+        // }
+        // img.onload = e => {
+        //   fetch(img.src).then(resp => resp.blob())
+        //   .then(blob => {
+        //     console.log(blob.size);
+        //     this.imgResultAfterCompress.size = blob.size/1000
+        //     this.imgResultAfterCompress.resolution =  img.width + ' x ' +img.height
+        //     });
+        //   };
+      },err=>{
+        console.log(err);
+        return err
+      }
+    );
+  }
   getGeoTag(){
     // this.enableAccuracy()
     return this.geo.getCurrentPosition().then(res=>{

src/pages/sales_pd/providers/ques-service/ques-service.ts

@@ -174,9 +174,6 @@ export class QuesServiceProvider {
       "onchange_properties":[data.onchange_properties],
       "answers":[answers_from_client.length != 0 ? answers_from_client: data.answers],
       "is_repeatable":[data.is_repeatable || null],
-      "is_loader":[''],
-      "is_saved":[''],
-      "is_image_status":[false],
       "group_title":[data.group_title || null]
     })
   }
@@ -276,6 +273,13 @@ export class QuesServiceProvider {
           curr_control.controls[curr_index].addControl('additional_field',new FormControl(1))
         }
         
+      // FOR IMAGE STATUS
+      if(data.type == '6'){
+        curr_control.controls[curr_index].addControl('is_loader',new FormControl(''))
+        curr_control.controls[curr_index].addControl('is_saved',new FormControl(''))
+        curr_control.controls[curr_index].addControl('is_image_status',new FormControl(false))
+      }
+
         //FOR SETTING THE VALIDATORS
         this.settingArrayofValidators(data,curr_control.controls[curr_index],curr_index)
     }

src/providers/common-provider/loading.ts

@@ -20,7 +20,7 @@ export class LoadingProvider {
     this.loading = this.loadingCtrl.create({
       content: content,
       enableBackdropDismiss:false,
-      duration:10000
+      duration:40000
   });
 
   this.loading.present();