From fdcd6bb21fa85c5d26393166d2d873a7b291488d Mon Sep 17 00:00:00 2001 From: "venbatechnologies@gmail.com" Date: Tue, 10 Nov 2020 18:47:02 +0530 Subject: [PATCH] Photograph section added --- ng6-seed/package-lock.json | 53 ++++ ng6-seed/package.json | 1 + .../capture-btn/capture-btn.component.html | 6 + .../capture-btn/capture-btn.component.scss | 0 .../capture-btn/capture-btn.component.spec.ts | 25 ++ .../capture-btn/capture-btn.component.ts | 36 +++ .../image-capture.component.html | 138 +++++++++ .../image-capture.component.scss | 135 +++++++++ .../image-capture.component.spec.ts | 25 ++ .../image-capture/image-capture.component.ts | 274 ++++++++++++++++++ .../list-pd/start-pd/start-pd.component.ts | 7 +- .../list-pd/start-pd/start-pd.module.ts | 12 +- .../pd-service/camera.service.spec.ts | 12 + .../pd-service/camera.service.ts | 111 +++++++ .../pd-service/pd-triger.service.ts | 10 + ng6-seed/src/assets/images/PD_watermark.png | Bin 0 -> 2357 bytes ng6-seed/src/assets/spinner/spinner.svg | 52 ++++ 17 files changed, 893 insertions(+), 4 deletions(-) create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.html create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.scss create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.spec.ts create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.ts create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.html create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.scss create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.spec.ts create mode 100644 ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.ts create mode 100644 ng6-seed/src/app/personal-discussion/pd-service/camera.service.spec.ts create mode 100644 ng6-seed/src/app/personal-discussion/pd-service/camera.service.ts create mode 100755 ng6-seed/src/assets/images/PD_watermark.png create mode 100755 ng6-seed/src/assets/spinner/spinner.svg diff --git a/ng6-seed/package-lock.json b/ng6-seed/package-lock.json index 9f2e80a..1b9a9fc 100755 --- a/ng6-seed/package-lock.json +++ b/ng6-seed/package-lock.json @@ -4480,6 +4480,11 @@ } } }, + "exifr": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/exifr/-/exifr-4.3.5.tgz", + "integrity": "sha512-ir36aoochREnTekiEOqY0yuUjmj4oPWMDE3NTKJoz9Yuz/m5V9nWu1p4UStOOuhJI4Wz+p0nRpuqZNKeAIkhQw==" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -5888,6 +5893,11 @@ "minimatch": "~3.0.2" } }, + "glur": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz", + "integrity": "sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=" + }, "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", @@ -8166,6 +8176,15 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=", "dev": true }, + "multimath": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/multimath/-/multimath-2.0.0.tgz", + "integrity": "sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==", + "requires": { + "glur": "^1.1.2", + "object-assign": "^4.1.1" + } + }, "mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", @@ -8238,6 +8257,15 @@ "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.2.1.tgz", "integrity": "sha1-VWPF39b0P7++gVwgbjQ0ZKCmoZc=" }, + "ng2-img-max": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/ng2-img-max/-/ng2-img-max-2.2.4.tgz", + "integrity": "sha512-pcbQJT3N6YEv3Zn4gfTwFEkPFLFuznc6IQAyddTjVSiJV0ilxF+QZ5CkyQEhaY7zw4gFALh54R8ZQjv97njlFw==", + "requires": { + "exifr": "^4.3.4", + "ng2-pica": "^1.3.1" + } + }, "ng2-pdf-viewer": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-5.2.4.tgz", @@ -8247,6 +8275,15 @@ "pdfjs-dist": "2.0.943" } }, + "ng2-pica": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/ng2-pica/-/ng2-pica-1.3.1.tgz", + "integrity": "sha512-NkvJJM8QAtgkwGYy+WNl3Pzzc0Gfs573tHLemCKmN8DmVQ7onXvhuxzAkTqs6rDYILOTULBI5m0KbCLJLfNiaQ==", + "requires": { + "exifr": "^4.3.4", + "pica": ">=4.0.1" + } + }, "ng2-toastr": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/ng2-toastr/-/ng2-toastr-4.1.2.tgz", @@ -9463,6 +9500,17 @@ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, + "pica": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/pica/-/pica-6.1.1.tgz", + "integrity": "sha512-dmjQheDGFOl+30rQhN3NM3MyDNjeOZvco6IL3ZVYgyVDmhgvcSCGOAsydRCIaZ36mcXO7ci0XFeD+h6unEcBvA==", + "requires": { + "inherits": "^2.0.3", + "multimath": "^2.0.0", + "object-assign": "^4.1.1", + "webworkify": "^1.5.0" + } + }, "picomatch": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", @@ -12995,6 +13043,11 @@ "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", "dev": true }, + "webworkify": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz", + "integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==" + }, "when": { "version": "3.6.4", "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz", diff --git a/ng6-seed/package.json b/ng6-seed/package.json index a455d9c..b4510aa 100755 --- a/ng6-seed/package.json +++ b/ng6-seed/package.json @@ -58,6 +58,7 @@ "ng2-ckeditor": "^1.2.2", "ng2-dragula": "1.3.1", "ng2-file-upload": "1.2.1", + "ng2-img-max": "^2.2.4", "ng2-pdf-viewer": "^5.2.4", "ng2-toastr": "^4.1.2", "ng2-validation": "4.2.0", diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.html new file mode 100644 index 0000000..d5cd6c0 --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.spec.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.spec.ts new file mode 100644 index 0000000..509a894 --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CaptureBtnComponent } from './capture-btn.component'; + +describe('CaptureBtnComponent', () => { + let component: CaptureBtnComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CaptureBtnComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CaptureBtnComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.ts new file mode 100644 index 0000000..454515d --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/capture-btn/capture-btn.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; +import { Ng2ImgMaxService } from 'ng2-img-max'; + +@Component({ + selector: 'app-capture-btn', + templateUrl: './capture-btn.component.html', + styleUrls: ['./capture-btn.component.scss'] +}) +export class CaptureBtnComponent implements OnInit { + + @Input() addMoreBtn; + @Output() imageDataEmitter = new EventEmitter + constructor(private ng2ImgMax:Ng2ImgMaxService) { } + + ngOnInit(): void { + console.log(this.addMoreBtn) + } + capturedImage(event){ + console.log(event); + let imageData= event.target.files[0] + this.ng2ImgMax.resizeImage(imageData, 450, 650).subscribe( + result => { + this.imageDataEmitter.emit(result) + }, + error => { + console.log('😢 Oh no!', error); + } + ); + + } + capture(event){ + event.preventDefault(); + let element:HTMLElement = document.getElementById('input-file') as HTMLElement + element.click(); + } +} diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.html new file mode 100644 index 0000000..ffe5da6 --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.html @@ -0,0 +1,138 @@ +

+
+ {{main_applicant}} {{lender_applicant_id ? '('+lender_applicant_id+')' : ''}}, {{customer_segment_abbr}} - {{subproduct_abbr}}
+ Photograph Section +
+
+ +
+

+ +
+ +
+ +
+ + image +
+

+ + Image is not Captured.
Click to + Capture camera +

+
+
+

{{val.img_name || val.img_key}}

+ + + spinner + + + done + + + cloud_upload
+ + + + + +
+ + + + + +
+ +
+

+
+
{{val.img_name}}
+
+
+ image + +
+

{{val.img_name}} {{i+1}}

+ + spinner + + + done + + + cloud_upload
+ + +
+
+
+
+

+ + Add More Image.
Click to + Capture add_a_photo +

+
+
+

Add More {{val.img_name}}

+
+ + + + +
+
+

+
+
+ + +
+ + +
+ diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.scss new file mode 100644 index 0000000..526f493 --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.scss @@ -0,0 +1,135 @@ +.paragraph_change { + color: #fff !important; + background-color: #e00201 !important; + } + ::ng-deep { .no-padding > mat-dialog-container { + // background: black; + padding: 0; + // overflow-y: scroll !important; + } +} + +// .custom-file-input::-webkit-file-upload-button { +// visibility: hidden; +// } +// .custom-file-input::before { +// content: 'Select some files'; +// display: inline-block; +// background: linear-gradient(top, #f9f9f9, #e3e3e3); +// border: 1px solid #999; +// border-radius: 3px; +// padding: 5px 8px; +// outline: none; +// white-space: nowrap; +// -webkit-user-select: none; +// cursor: pointer; +// text-shadow: 1px 1px #fff; +// font-weight: 700; +// font-size: 10pt; +// color:black; +// // width: 20px; +// } +// .custom-file-input:hover::before { +// border-color: black; +// } +// .custom-file-input:active::before { +// background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); +// } +// input[type='file'] { +// // opacity:0 +// color: transparent; +// width: 130px; +// } +.image-class{ + width: 170px; + height: 200px; + border: 1px solid lavender; + border-radius: 7px; + +} +.image-div { +max-width: 200px; +width: auto; + // height: 200px; + margin-top: 25px; + padding: 1.4%; +} +.image-class:hover { +-webkit-transform: scale(1.1); +-ms-transform: scale(1.1); +transform: scale(1.1); +} +.dummy-img { +width: 170px; +height: 200px; +border: 3px dashed rgba(0, 0, 0, 0.2); +border-radius: 7px; +background: #eeee; +color: gray; +} +.dummy-img-more{ +width: 170px; +height: 200px; +margin-top: 20px; +border: 4px dashed #03a9f470; +border-radius: 7px; +box-shadow : 0px 3px 6px 3px rgba(160, 161, 188, 0.53); +background: #eeee; +color: #b53f3f; +} +.file-btn{ + display: flex; + justify-content: center; +} +@media (max-width: 600px){ +.image-class { +width: 125px; +height: 120px; +} +.image-div { +width:auto; +max-width: 135px; +// height: 120px; +} +.dummy-img { +width: 125px; +height: 120px; +p{ + margin: 0px; +} +} +.dummy-img-more{ +width: 125px; +height: 120px; + +} +.image-label { +min-height: 58px; +p{ +width: auto; +max-width: 67% !important; +} +} +} +.image-label { +min-height: 58px; + width: auto; + // max-width: 67%; + p{ + margin: 7px; + font-weight: bold; + font-size : 14px; + max-width: 70%!important; + overflow: hidden; + text-overflow: ellipsis; + } +} +.object { +/* width: 110px; */ +height: 45px; +} +hr { +background: #d23f2f; +padding: 0.03em; +margin: -2px; +} \ No newline at end of file diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.spec.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.spec.ts new file mode 100644 index 0000000..6acb35b --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageCaptureComponent } from './image-capture.component'; + +describe('ImageCaptureComponent', () => { + let component: ImageCaptureComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ImageCaptureComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ImageCaptureComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.ts new file mode 100644 index 0000000..c854afd --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.ts @@ -0,0 +1,274 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material'; +import { ActivatedRoute, Router } from '@angular/router'; +import { NotifierService } from 'angular-notifier'; +import { AwsService } from 'app/AwsService/aws.service'; +import { CameraService } from 'app/personal-discussion/pd-service/camera.service'; +import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service'; +import { LoaderService } from 'app/shared/loaderService/loader.service'; +import { QuesFormService } from '../dynamic-form/ques-form/ques-form.service'; +import { FormComponent } from '../form/form.component'; + +@Component({ + selector: 'app-image-capture', + templateUrl: './image-capture.component.html', + styleUrls: ['./image-capture.component.scss'] +}) +export class ImageCaptureComponent implements OnInit { + form_id: number; + parent_pdid: any; + pdid: any; + notifier: NotifierService; + main_applicant: any; + lender_applicant_id: any; + subproduct_abbr: any; + customer_segment_abbr: any; + lenderShortName: any; + fk_pd_type: any; + image_doc_params:any = []; + current_index: any; + records: any; + imageData:any=[] + + constructor(notifier: NotifierService, + private dialogRef: MatDialogRef, + private dialog: MatDialog, private quesService:QuesFormService, + @Inject(MAT_DIALOG_DATA) public pd_all_details: any, + private pdTriggerService:PdTrigerService, + private loaderService:LoaderService,private cameraService:CameraService) { + // console.log(this.pd_all_details) + this.form_id = 24; + this.pd_all_details.pdmaster_details=this.pd_all_details.pdmaster_details[0] + this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id; + this.pdid = this.pd_all_details.pdmaster_details.pd_id; + this.notifier = notifier; + this.main_applicant = this.pd_all_details.pdmaster_details.main_applicant; + this.lender_applicant_id = this.pd_all_details.pdmaster_details.lender_applicant_id; + this.subproduct_abbr = this.pd_all_details.pdmaster_details.subproduct_abbr; + this.customer_segment_abbr = this.pd_all_details.pdmaster_details.customer_segment_abbr; + this.lenderShortName = this.pd_all_details.pdmaster_details.lender_short_name; + this.fk_pd_type = this.pd_all_details.pdmaster_details.fk_pd_type; + this.image_doc_params={pdid:this.pdid,form_id:this.form_id,company_id:''} + this.quesService.pd_all_details = this.pd_all_details + console.log('image_doc_params',this.image_doc_params) + } + + ngOnInit() { + // this.records = JSON.parse(this.records) + // console.log(this.records); + // this.records =this.records.records.img_data; + // // this.records = this.dataService.getPDImageData.img_data + // this.imageData = this.records + + this.getPDImageDetails(); + } + getPDImageDetails() { + this.loaderService.showMatSpinnerDialog(''); + let params = {"pd_id":this.pdid,"rand_string":this.pd_all_details.pdmaster_details.random_string} + this.pdTriggerService.getSMCPDImgSectionData(params).subscribe(result=>{ + if(result.dataStatus) { + this.records = result.records + if(this.records.is_cus_link_disabled != '1') { + this.imageData =this.records.img_data; + this.imageData.forEach(val=>{ + val.is_loader = false + val.is_saved = true + }) + } + else{ + let msgObj ={title:'',subtitle:'Link is Disabled',is_homebtn:false,message:'The requested url is Disabled. Please contact info@pdgenie.com'} + // this.goToErrorComponent(msgObj) + } + } + else{ + let msgObj ={title:'',subtitle:result.msg?result.msg : 'Invalid Link',is_homebtn:false,message:'The requested url is Invalid. Please contact info@pdgenie.com'} + // this.goToErrorComponent(msgObj) + } + this.loaderService.closeMatSpinnerDialog(); + },err=>{ + this.loaderService.closeMatSpinnerDialog(); + // let msgObj ={title:'404',subtitle:'Not Found',is_homebtn:false,message:'The requested url returns 404. Please check your internet connection'} + // this.goToErrorComponent(msgObj) + }) + } + // goToErrorComponent(msgObj) { + // this.dataService.setErrorMsg({title:msgObj.title,subtitle:msgObj.subtitle,is_homebtn:false,message:msgObj.message}) + // this.router.navigateByUrl('error'); + // } + addImage(event,index){ + this.loaderService.showMatSpinnerDialog(''); + console.log(event,index); + var reader = new FileReader(); + // let imagePath = event; + reader.readAsDataURL(event); + reader.onload = (_event) => { + // this.imageData = reader.result; + this.cameraService.getPosition().then(geoCords=>{ + let geoCoordinates + if(geoCords != 'error') { + geoCoordinates = geoCords + } + else { + geoCoordinates = null; + } + console.log(geoCords); + this.cameraService.addWatermarks(reader.result,geoCoordinates).then(watermarked_img=>{ + if(this.current_index != 'last') { + if(this.imageData[this.current_index].is_multiple == 1) { + console.log("multi"); + let img_param={img_url:watermarked_img,is_base64:true,link:geoCoordinates} + this.imageData[this.current_index].img_data.push(img_param) + this.sendImage(this.imageData,this.imageData[this.current_index].img_data.length-1) + } + else { + this.imageData[this.current_index].img_url = watermarked_img; + this.imageData[this.current_index].is_base64 = true; + this.imageData[this.current_index].link = geoCoordinates + this.sendImage(this.imageData) + } + } + else{ + this.getImageName().then(result=>{ + console.log(result); + this.imageData.push( { + "img_key": "common_image", + "img_name": result, + "img_url": watermarked_img, + "fk_form_id": "", + "is_base64":true, + "link":geoCoordinates + }) + // let el = document.getElementById('dummy-img-more'); + // el.scrollIntoView(); + setTimeout(()=>{ + // this.dummyImgMoreRef.nativeElement.scrollIntoView({behavior:"smooth",block:"end"}) + },1000) + this.sendImage(this.imageData) + }) + } + console.log(watermarked_img) + this.loaderService.closeMatSpinnerDialog(); + },err=>{ + console.log("dk",err); + this.loaderService.closeMatSpinnerDialog(); + }) + }) + } + } + sendImage(imageData,multi_index?) { + let index = this.current_index + if(this.current_index == 'last') { + index = imageData.length-1 + } + if(imageData[index].is_multiple != 1) { + imageData[index].is_loader = true; + imageData[index].is_saved = false + } + else{ + imageData[index].img_data[multi_index].is_loader = true; + imageData[index].img_data[multi_index].is_saved = false + } + let params = { + "fk_smc_credit_pd_id": this.pdid, + "img":imageData[index].is_multiple != 1 ? imageData[index].img_url : imageData[index].img_data[multi_index].img_url, + "img_name": imageData[index].img_key, + "location":imageData.is_multiple != 1 ? imageData[index].link : imageData[index].img_data[multi_index].link, + "is_multiple":imageData[index].is_multiple + } + // setTimeout(()=>{ + // imageData[index].is_loader =false + // imageData[index].is_saved = true + // },9000) + this.pdTriggerService.saveSMCCreditPDImage(params).subscribe(result=> { + if(result.dataStatus) { + if(this.pd_all_details.is_answered != '1') { + this.saveImageSection() + } + if(imageData[index].is_multiple != 1) { + imageData[index].is_loader = false; + imageData[index].is_saved = true; + } + else { + imageData[index].img_data[multi_index].is_loader = false; + imageData[index].img_data[multi_index].is_saved = true; + } + } + },err=> { + console.log(err); + if(imageData[index].is_multiple != 1) { + imageData[index].is_loader = false; + imageData[index].is_saved = false; + } + else { + imageData[index].img_data[multi_index].is_loader = false; + imageData[index].img_data[multi_index].is_saved = false; + } + }) + } + // DUMMY ENTRY FOR GETTING THE SECTION SAVED + saveImageSection() { + let params = {"fk_pd_id":this.pd_all_details.pdmaster_details.pd_id,"fk_form_id":this.pd_all_details.form_id,"json":{},createdby:''} + this.pdTriggerService.saveSMCCreditPDsection(params).subscribe(result=>{ + if(result.dataStatus) { + this.pd_all_details.is_answered = '1' + } + + }) + } + getImageName() { + return new Promise((resolve,reject)=>{ + let img_name = prompt("Enter the Image Name"); + if (img_name != null) { + console.log(img_name) + // return img_name; + resolve(img_name); + } + else{ + console.log("no name"); + } + }) + } + getIndex(index){ + console.log("curr",index) + this.current_index = index + } + openImage(imgData) { + console.log(imgData) + // var image = new Image(); + // image.src = url; + // var w = window.open(""); + // w.document.write(image.outerHTML); + if(imgData.hasOwnProperty('is_base64') && imgData.is_base64) { + this.openBase64(imgData.img_url) + } + else { + window.open(imgData.img_url,'_blank'); + } + } + openBase64(url) { + const base64ImageData = url; + const contentType = 'image/png'; + + const byteCharacters = atob(base64ImageData.substr(`data:${contentType};base64,`.length)); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += 1024) { + const slice = byteCharacters.slice(offset, offset + 1024); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + + byteArrays.push(byteArray); + } + const blob = new Blob(byteArrays, {type: contentType}); + const blobUrl = URL.createObjectURL(blob); + + window.open(blobUrl, '_blank'); + } + +} diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts index fef8ed8..635c068 100755 --- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts @@ -7,6 +7,7 @@ import {ListPdComponent} from './../list-pd.component'; import {PdTrigerService} from '../../../pd-service/pd-triger.service'; import { PdStatusChangeDialogueComponent } from '../pd-status-change-dialogue/pd-status-change-dialogue.component'; import { FormComponent } from './forms/form/form.component'; +import { ImageCaptureComponent } from './forms/image-capture/image-capture.component'; @Component({ selector: 'app-start-pd', @@ -191,7 +192,11 @@ export class StartPdComponent implements OnInit, OnDestroy { this.pdFullDetails.form_id= this.selectedFormsCategory.fk_form_id this.pdFullDetails.is_answered = this.selectedFormsCategory.is_answered console.log(this.pdFullDetails); - const dialogRef = this.dialog.open(FormComponent, { + let componen_name:any = FormComponent + if(this.pdFullDetails.form_id == '20') { + componen_name = ImageCaptureComponent + } + const dialogRef = this.dialog.open(componen_name, { data: this.pdFullDetails, // position: { right: '0'}, maxWidth: '100vw', diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.module.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.module.ts index bbe3172..6b8b17c 100644 --- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.module.ts +++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.module.ts @@ -13,6 +13,10 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { DynamicQuestionTemplateComponent } from './forms/dynamic-form/dynamic-question-template/dynamic-question-template.component'; import { NgxMatSelectSearchModule } from 'ngx-mat-select-search'; import { MatIconModule } from '@angular/material'; +import { ImageCaptureComponent } from './forms/image-capture/image-capture.component'; +import { CaptureBtnComponent } from './forms/image-capture/capture-btn/capture-btn.component'; +import { Ng2ImgMaxModule } from 'ng2-img-max'; +import { NgxViewerModule } from 'ngx-viewer'; const pdCustomNotifierOptions: NotifierOptions = { position: { @@ -66,9 +70,11 @@ const pdCustomNotifierOptions: NotifierOptions = { FlexLayoutModule, NotifierModule.withConfig(pdCustomNotifierOptions), NgxMatSelectSearchModule, - MatIconModule + MatIconModule, + Ng2ImgMaxModule, + NgxViewerModule ], - declarations: [StartPdComponent, FormComponent,DynamicFormComponent,DynamicQuestionTemplateComponent], - entryComponents:[FormComponent] + declarations: [StartPdComponent, FormComponent,DynamicFormComponent,DynamicQuestionTemplateComponent, ImageCaptureComponent,CaptureBtnComponent], + entryComponents:[FormComponent,ImageCaptureComponent] }) export class StartPdModule { } diff --git a/ng6-seed/src/app/personal-discussion/pd-service/camera.service.spec.ts b/ng6-seed/src/app/personal-discussion/pd-service/camera.service.spec.ts new file mode 100644 index 0000000..0ca160e --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/pd-service/camera.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { CameraService } from './camera.service'; + +describe('CameraService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: CameraService = TestBed.get(CameraService); + expect(service).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/personal-discussion/pd-service/camera.service.ts b/ng6-seed/src/app/personal-discussion/pd-service/camera.service.ts new file mode 100644 index 0000000..9abb317 --- /dev/null +++ b/ng6-seed/src/app/personal-discussion/pd-service/camera.service.ts @@ -0,0 +1,111 @@ +import { DatePipe } from '@angular/common'; +import { Injectable } from '@angular/core'; +import * as watermark from 'watermarkjs'; + +@Injectable({ + providedIn: 'root' +}) +export class CameraService { + pipe = new DatePipe('en-US') + constructor() { + setTimeout(()=>{ + this.getPosition().then(res=>{ + console.log("geolocation",res) + },err=>{ + console.log("Error in geo",err); + }) + },2000) + } + + addWatermarks(base64Img,geoCords?) { + + return new Promise((resolve, reject) => { + + // this.constant.getGeoTag().then(geoCoordinates => { + // this.getPosition().then(geoCords=>{ + // console.log(geoCords); + // this.geoCords = geoCoordinates + // }); + // this.geoCords=localStorage.getItem('current_coordinates') + // console.log("corrds",this.geoCords) + let raw_img = base64Img + var today = new Date(); + // let today_loc = today.toLocaleString('en-US', { timeZone: "Asia/Kolkata" }) + let today_loc=this.pipe.transform(today, 'yyyy-MM-dd, h:mm a') + var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate(); + // var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); + var dateTime = 'Date : ' + today_loc; + + console.log(date) + + // fetch(raw_img) + // .then(res => res.blob()) + // .then(blob => { + watermark([raw_img, 'assets/images/PD_watermark.png']) + .image(watermark.image.upperRight()) + .then(img => { + raw_img = img.src; + + let text = watermark.text + watermark([raw_img]) + .image(text.upperLeft(dateTime, '19px sans-serif', '#ff0000', 1.0)) + // .image(text.upperLeft(dateTime, '20px sans-serif', '#ff0000', 1.0)) + .then(img => { + raw_img = img.src; + console.log("2d", raw_img) + // resolve(img.src) + console.log(geoCords) + // let geoCoordinates = geoCords ? geoCords : '-' + if(geoCords) { + let Location = `Location : ` + geoCords + watermark([raw_img]) + .image(text.upperLeft(Location, '19px sans-serif', '#ff0000', 1.0, 40 )) + .then(img => { + raw_img = img.src + console.log("3rd", raw_img) + resolve(img.src) + // localStorage.removeItem('current_coordinates') + }); + } + else { + resolve(img.src) + } + }); + }); + + + // },err=>{ + // console.log("Error in geo",err); + // switch(err.code) { + // case 1: + // alert("Geolocation permission is denied. Please allow the permission to capture"); + // break; + // case 2: + // alert("Do not get the geolocation of your place"); + // break; + // case 2: + // alert("Something went wrong"); + // break; + // } + // reject(err); + // }) + }) + // }); + } + getPosition(): Promise + { + return new Promise((resolve, reject) => { + + navigator.geolocation.getCurrentPosition(resp => { + console.log("Geo",resp.coords); + let latLong:string = resp.coords.latitude+', '+resp.coords.longitude + // resolve({lng: resp.coords.longitude, lat: resp.coords.latitude}); + resolve(latLong) + }, + err => { + resolve('error'); + }); + }); + + } +} diff --git a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts index 37d4199..16d2ee8 100755 --- a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts +++ b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts @@ -825,6 +825,16 @@ loadTemplate(form_id) { loadDataFromExcel(params) { return this._http.post(this.apiUrl+'loadDataFromExcel',{records:params}) } + getSMCPDImgSectionData(params):Observable { + // {"pd_id":"1234","rand_string":"b6r8o7rqswW7F8Il"} + return this._http.post(this.apiUrl+'getSMCPDImgSectionData',params) + .pipe(catchError(this.handleError("getSMCPDImgSectionData",[]))) + } + saveSMCCreditPDImage(params):Observable { + // {"fk_smc_credit_pd_id":"1234","img":"BLOB2","img_name":"person_met","is_multiple":"0","location":"28.6871753,77.0252074"} + return this._http.post(this.apiUrl+'saveSMCCreditPDImage',{records:params}) + .pipe(catchError(this.handleError("saveSMCCreditPDImage",[]))) + } } diff --git a/ng6-seed/src/assets/images/PD_watermark.png b/ng6-seed/src/assets/images/PD_watermark.png new file mode 100755 index 0000000000000000000000000000000000000000..a3809e8792c63c3ca2478141f5754b9ead186220 GIT binary patch literal 2357 zcmV-53Ci|~P)rkRP8I;ORD)V?$4-1lKF*LRn<#8*7YKg9R$yWjcU^L^+0&bc}{Jtt;xT{I1q zi#m$B=V*WIVhG}c8b>os|B^_3L3loSrX58D8pzRN5DBYn?K2+j=Zlr2COfzjfP zi|RQ$;;Au`BgYo|Y4Nj)grtFohfCMNmF#G^92Wv3A+hi)O{1k?ygqevd!Ho)o1rWL zo2%6g++twMCKfkFarNf(rdt%Pi;;nFG$#(HYs!HX9j@YZ~r7u{B^G&sAyabl1X&F_@J zBp;LnoGV3GH5mJm4rExtoIeDXT$72G+4Zc}FoU-$f>Dako>jjIq1sV15GEPbD{_KF7GLM=eGqo#|To%2pW z(N%P+QqAC;spOCXtF;A;%^+E@l=ChwcX!Os(h7gb*4P5^4OtWhQ8QJ5^~r!$*$7ss z1V-J{tF#9Rpk6?wqh^a7oykrCw3o;hm9#H$G6&wg@Rm1i1gn<>Gngu3+DwOq8IOU@ z7T=6B6^4|}sNj290c-&$Q$SLQWCIjc^9SX?I@v#(1wRNhnA*mZ))!|g-``@6QN*5_ zrlRY!q@Z-VeqaagUs?&4g1RRGcF&1TK{)O1*^m^~Rp0BI^3|w^E6{=WqQ?KmrRX3p zfuk8LTEN!W3>hdoR3DcDqtgg0SSQUCl~8mpJuVe3)QHoTpx3^mqB2_B$5*qonRZ9y z880VC@HNcRH<-F#a*^VrKjBccVBPR4)oh2){JemsBXy_7bK~GjS|ndVpYvM+ zg<)?$#OppmHFBmxu#II&rBgg#m#OG zh`$#4bt~aamGS*oX6d}6Rc%8C@N^YL0(r*F0eL=3fq)*(yPN(sOc(L<^+ zi25{QutU@VrfB^=BLh-ny6pi)S(p0pPX;!a4gu8v|CfzW_t<@;p%~b)^vDjre|Rt_ zk5Bs(Yr{&Yb0{CF@z5bxmg%g4q76Dw7DyPe?8r90!Ryyy_f^}o_*hmN>YrH2&|95D76o-UC%p9Yi>*E z>l@hjbXKIE2(`(YSQaG+s<|ljQ+v!+^?*+UQUvK$R2^G~yVze!479&lb*?1Go0dhj z!+4e+4wRSk4bC)eC-etrG+FEHkHTm#OV)P%kHC&pmh)?j-jnr*WeqyoH=B&65%up0 z?8K{OkQo0ytkUg-c5U(3YS+t;(m2x_#=+6dSU9_}2yzlSAuqZO_QVv?dP{M%e>NEc zRL~w~D9eG8L@wf5Mb_5TETsK(N~?g9kSzg!*FU2fgN+SZ#LVJ z)Qmnl(Kp7`@?b|YmlN1cNBd>7ji%{lU&)BN^RBLxUuUOQW)j$4NBdINBGxS!-#dXK~i + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file