Photograph section added
This commit is contained in:
venbatechnologies@gmail.com
parent
afa0a89aab
commit
fdcd6bb21f
53
ng6-seed/package-lock.json
generated
53
ng6-seed/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
<button (click)="capture($event)" mat-button mat-raised-button>Capture
|
||||
<mat-icon name="camera" *ngIf="!addMoreBtn">camera_alt</mat-icon>
|
||||
<mat-icon name="camera" *ngIf="addMoreBtn">add_a_photo</mat-icon>
|
||||
</button>
|
||||
<input type="file" (change)="capturedImage($event)" id="input-file" name="file" accept="image/*" capture="user" style="display: none">
|
||||
<!-- document.querySelector('#input-file').click() -->
|
||||
@ -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<CaptureBtnComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CaptureBtnComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CaptureBtnComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
<h2 mat-dialog-title class="paragraph_change">
|
||||
<div fxFlex="75" align="left" style="padding: 1% !important" [ngStyle.xs]="{'font-size':'16px','font-weight':'bold'}">
|
||||
<span>{{main_applicant}} {{lender_applicant_id ? '('+lender_applicant_id+')' : ''}}, {{customer_segment_abbr}} - {{subproduct_abbr}} </span><br>
|
||||
Photograph Section
|
||||
</div>
|
||||
<div fxFlex="25" align="end" style="padding: 10px !important;">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
|
||||
matTooltipPosition="right" mat-dialog-close>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</h2>
|
||||
<mat-dialog-content style="border-bottom: 2px solid #e2412f8f;max-height:78vh;">
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch" fxLayoutGap="28px" fxLayoutGap.xs="15px" style="flex-wrap: wrap;margin: 1%;">
|
||||
<!-- {{records.img_data | json}} -->
|
||||
<div *ngFor="let val of imageData;let i = index" [ngStyle]="{'flex-basis': val.is_multiple == 1 ? '100%' : ''}" >
|
||||
<!-- {{val.is_multiple}} -->
|
||||
<div *ngIf="(!val.hasOwnProperty('is_multiple')) || (val.hasOwnProperty('is_multiple') && val.is_multiple == '0')" style="flex-basis: 100%" class ="image-div" >
|
||||
|
||||
<img *ngIf="val.img_url != '' && val.img_url != null"
|
||||
class="image-class" [src]="val.img_url" [alt]="val.img_key" alt="image" ngxViewer>
|
||||
<div class="dummy-img" *ngIf="val.img_url == '' || val.img_url == null">
|
||||
<p
|
||||
style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;">
|
||||
<span>
|
||||
Image is not Captured.<br /> Click to
|
||||
</span>Capture <mat-icon>camera</mat-icon>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-label" fxLayout ="row" >
|
||||
<p fxFlex="60" >{{val.img_name || val.img_key}} </p>
|
||||
<span *ngIf="val.is_loader == true" fxFlex="20">
|
||||
<!-- <object style="height: 35px" type="image/svg+xml" data="../../../assets/spinner/spinner.svg">
|
||||
Your browser does not support SVG
|
||||
</object> -->
|
||||
<img src="../../../assets/spinner/spinner.svg" alt="spinner"/>
|
||||
</span>
|
||||
<span *ngIf="val.is_saved == true && val.img_url != '' && val.img_url != null" fxFlex = "20" fxLayoutAlign="flex-end">
|
||||
<mat-icon style="color:green;font-size: 20px;">done</mat-icon>
|
||||
</span>
|
||||
<span *ngIf="val.is_saved == false && val.is_loader == false" fxFlex = "20" fxLayoutAlign="flex-end">
|
||||
<mat-icon style="color:rgb(255, 196, 0);font-size: 25px;">cloud_upload</mat-icon><br/>
|
||||
<!-- <span><p style="font-size: 6px">Click to ReUpload</p></span> -->
|
||||
</span>
|
||||
|
||||
<!-- <div> -->
|
||||
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
<span (click)="getIndex(i)">
|
||||
<app-capture-btn class="file-btn" (imageDataEmitter)="addImage($event,i)"></app-capture-btn>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="val.is_multiple == 1" style="flex-basis: 100%;">
|
||||
<br/> <br/>
|
||||
<hr />
|
||||
<h5>{{val.img_name}}</h5>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch">
|
||||
<div *ngFor="let multiple_img of val.img_data;let i=index" class ="image-div">
|
||||
<img *ngIf="multiple_img.img_url != '' && multiple_img.img_url != null"
|
||||
class="image-class" [src]="multiple_img.img_url" [alt]="val.img_key" alt="image" ngxViewer/>
|
||||
|
||||
<div class="image-label" fxLayout ="row" >
|
||||
<p fxFlex="60">{{val.img_name}} {{i+1}} </p>
|
||||
<span *ngIf="multiple_img.is_loader == true" fxFlex="20">
|
||||
<img src="../../../assets/spinner/spinner.svg" alt="spinner"/>
|
||||
</span>
|
||||
<span *ngIf="multiple_img.is_saved == true && multiple_img.img_url != '' && multiple_img.img_url != null" fxLayoutAlign="flex-end">
|
||||
<mat-icon style="color:green;font-size: 20px;">done</mat-icon>
|
||||
</span>
|
||||
<span *ngIf="multiple_img.is_saved == false && multiple_img.is_loader == false" fxLayoutAlign="flex-end">
|
||||
<mat-icon style="color:rgb(255, 196, 0);font-size: 25px;">cloud_upload</mat-icon><br/>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: -20px !important;padding:0!important;">
|
||||
<div class="dummy-img" style="margin: 30px 0 0 4px;
|
||||
padding: 1.4%;">
|
||||
<p
|
||||
style="justify-content: center;align-content: center;text-align: center;align-items: center; ">
|
||||
<span>
|
||||
Add More Image.<br /> Click to
|
||||
</span>Capture <mat-icon>add_a_photo</mat-icon>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-label" fxLayout ="column" >
|
||||
<p fxFlex="80">Add More {{val.img_name}} </p>
|
||||
</div>
|
||||
<span (click)="getIndex(i)">
|
||||
<app-capture-btn class="file-btn" addMoreBtn="true" (imageDataEmitter)="addImage($event,i)"></app-capture-btn>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br/> <br/>
|
||||
<hr *ngIf="imageData[i+1] && imageData[i+1].is_multiple != 1"/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- <div style="padding: 1.5%;margin-top: 10px;" fxLayoutAlign.xs="flex-start stretch" >
|
||||
<div style="height: auto">
|
||||
<div class="dummy-img-more" #dummy_img_more>
|
||||
<p
|
||||
style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;">
|
||||
<span>
|
||||
|
||||
Click to
|
||||
</span>Capture More..<mat-icon>add_a_photo</mat-icon>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="image-label" fxLayout ="column" >
|
||||
<p fxFlex="60">Capture More</p>
|
||||
</div>
|
||||
<span (click)="getIndex('last')">
|
||||
<app-capture-btn class="file-btn" addMoreBtn="true" (imageDataEmitter)="addImage($event,'last')"></app-capture-btn>
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div >
|
||||
<img class="image-class" [src]="imageData"
|
||||
alt="image"><br/>
|
||||
<app-capture-btn class="file-btn" (imageDataEmitter)="addImage($event)"></app-capture-btn>
|
||||
</div>
|
||||
<div >
|
||||
<div class="dummy-img">
|
||||
<p style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;"><span>
|
||||
Image is not Captured.<br/>
|
||||
</span>Capture <mat-icon >camera</mat-icon></p>
|
||||
</div>
|
||||
<button style="justify-content:center" mat-button mat-raised-button>Capture <mat-icon name="camera">camera</mat-icon></button>
|
||||
</div> -->
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
@ -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;
|
||||
}
|
||||
@ -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<ImageCaptureComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ImageCaptureComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ImageCaptureComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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<FormComponent>,
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
||||
@ -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',
|
||||
|
||||
@ -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 { }
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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<any>
|
||||
{
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
@ -825,6 +825,16 @@ loadTemplate(form_id) {
|
||||
loadDataFromExcel(params) {
|
||||
return this._http.post(this.apiUrl+'loadDataFromExcel',{records:params})
|
||||
}
|
||||
getSMCPDImgSectionData(params):Observable<any> {
|
||||
// {"pd_id":"1234","rand_string":"b6r8o7rqswW7F8Il"}
|
||||
return this._http.post(this.apiUrl+'getSMCPDImgSectionData',params)
|
||||
.pipe(catchError(this.handleError("getSMCPDImgSectionData",[])))
|
||||
}
|
||||
saveSMCCreditPDImage(params):Observable<any> {
|
||||
// {"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",[])))
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
BIN
ng6-seed/src/assets/images/PD_watermark.png
Executable file
BIN
ng6-seed/src/assets/images/PD_watermark.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
52
ng6-seed/src/assets/spinner/spinner.svg
Executable file
52
ng6-seed/src/assets/spinner/spinner.svg
Executable file
@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g transform="rotate(0 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#f47e60">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#f8b26a">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#abbd81">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#849b87">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#6492ac">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#637cb5">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#6a63b6">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#f47e60">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#f8b26a">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#abbd81">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g>
|
||||
<!-- [ldio] generated by https://loading.io/ --></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue
Block a user