View Page Video UI changes

This commit is contained in:
venbainfotech 2022-06-01 17:40:47 +05:30
parent 013a77c3e8
commit a049b4a331
13 changed files with 717 additions and 139 deletions

View File

@ -31,12 +31,12 @@
Future plans for business expansion Required</mat-error> Future plans for business expansion Required</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field style="width:94%;"> <!-- <mat-form-field style="width:94%;">
<input matInput autocomplete="off" placeholder="Impact of GST on the business" <input matInput autocomplete="off" placeholder="Impact of GST on the business"
formControlName="impact_of_gst_on_the_business"> formControlName="impact_of_gst_on_the_business">
<mat-error *ngIf="_futurePlansForm.controls['impact_of_gst_on_the_business'].hasError('required')">Impact <mat-error *ngIf="_futurePlansForm.controls['impact_of_gst_on_the_business'].hasError('required')">Impact
of GST on the business Required</mat-error> of GST on the business Required</mat-error>
</mat-form-field> </mat-form-field> -->
<mat-form-field style="width:94%;"> <mat-form-field style="width:94%;">
<input matInput autocomplete="off" placeholder="Key Competitors" formControlName="key_competitors"> <input matInput autocomplete="off" placeholder="Key Competitors" formControlName="key_competitors">

View File

@ -0,0 +1,158 @@
<!--Start Image Code-->
<div *ngIf="details.flag == 0">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" style="padding: 10px !important;">
Image Capture URL
</div>
<div fxFlex="30" align="end" style="padding: 10px !important;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
</div>
</h2>
<div fxLayout="row" *ngIf="hideDetails == false">
<div fxFlex.xs="70%" fxFlex.sm="70%" fxFlex.md="70%" fxFlex.lg="70%" fxFlex.xl="70%" fxLayoutAlign="start center">
<mat-card class="linkStyle">{{details.Link}}</mat-card>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyToClipBoard(details.Link,'imageURL')" matTooltip="Copy To ClipBoard" matTooltipPosition="below"><mat-icon>file_copy</mat-icon></button>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="smsCheck(1)" matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>textsms</mat-icon></button>
</div>
</div>
<div fxLayout="row" *ngIf="hideDetails == true" fxLayoutAlign="center center">
<mat-card>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center center">
<h3 class="linkStyle">This link will be sent as SMS to (<span>{{details.applicantNo}}</span>). Please proceed if this number is correct, else close this window and edit the applicant mobile number</h3>
</div>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center end">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="onClickSmsLink()" matTooltip="Send Link Via SMS" matTooltipPosition="above" ><mat-icon>textsms</mat-icon> Send SMS</button>
</div>
</mat-card>
</div>
</div>
<!--End Image Code-->
<!--Start Video Code-->
<div *ngIf="details.flag == 1">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="50" style="padding: 10px !important;font-weight: bold;color: #f34436;">
VIDEO CALL
</div>
<div fxFlex="50" align="end" style="padding: 10px !important;">
<span matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above">
<!-- [disabled]="!videoplayback.enableBtn" -->
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="openPlayer()" >
<mat-icon>play_circle_filled</mat-icon>&nbsp;
<strong>Play Recorded Video</strong>
</button>
</span>
<!-- <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()">
<mat-icon>videocam</mat-icon>&nbsp;
<strong>Call</strong>
</button> -->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
</div>
</h2>
<div *ngIf="hideDetails == false">
<div fxLayout="row" fxLayoutAlign="center center">
<!-- <div fxFlex.xs="20%" fxFlex.sm="20%" fxFlex.md="20%" fxFlex.lg="20%" fxFlex.xl="20%" fxLayoutAlign="start center">
<h4 style="color: green !important;padding: 0px;margin: 0px;"> <strong>PDGenie Chat :</strong></h4>
</div> -->
<div fxFlex.xs="30%" fxFlex.sm="30%" fxFlex.md="30%" fxFlex.lg="30%" fxFlex.xl="30%" fxLayoutAlign="center center">
<!-- <mat-card class="linkStyle">{{details.videoChatLink}}</mat-card> -->
<button disabled="{{pdgenie_hide_button}}" mat-button mat-raised-button color="primary" (click)="copyToClipBoard(details.videoChatLink,'videoChat')">
<mat-icon>video_call</mat-icon>&nbsp;
<strong>Join PDGenie Meet</strong>
</button>
</div>
<!-- <div fxFlex.xs="20%" fxFlex.sm="20%" fxFlex.md="20%" fxFlex.lg="20%" fxFlex.xl="20%" fxLayoutAlign="start center">
<h4 style="color: green !important;padding: 0px;margin: 0px;"> <strong>Google Meet :</strong></h4>
</div> -->
<div fxFlex.xs="30%" fxFlex.sm="30%" fxFlex.md="30%" fxFlex.lg="30%" fxFlex.xl="30%" fxLayoutAlign="center center">
<!-- <mat-card class="linkStyle">{{google_Meet_Link}}</mat-card> -->
<button disabled="{{g_meet_hide_button}}" mat-button mat-raised-button color="primary" (click)="copyToClipBoard(google_Meet_Link,'G_Meet')">
<mat-icon>video_call</mat-icon>&nbsp;
<strong>Join Google Meet</strong>
</button>
</div>
<!-- <div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyToClipBoard(details.videoChatLink,'videoChat')" matTooltip="Copy To ClipBoard" matTooltipPosition="below"><mat-icon>file_copy</mat-icon></button>
</div> -->
<!-- <div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="smsCheck(1)" matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>textsms</mat-icon></button>
</div> -->
</div>
<!-- <div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex.xs="20%" fxFlex.sm="20%" fxFlex.md="20%" fxFlex.lg="20%" fxFlex.xl="20%" fxLayoutAlign="start center">
<h4 style="color: green !important;"> <strong>Google Meet :</strong></h4>
</div>
<div fxFlex.xs="70%" fxFlex.sm="70%" fxFlex.md="70%" fxFlex.lg="70%" fxFlex.xl="70%" fxLayoutAlign="start center">
<mat-card class="linkStyle">{{google_Meet_Link}}</mat-card>
<button mat-button mat-raised-button color="primary" (click)="copyToClipBoard(google_Meet_Link,'G_Meet')">
<mat-icon>video_call</mat-icon>&nbsp;
<strong>Join Google Meet</strong>
</button>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyToClipBoard(google_Meet_Link,'G_Meet')" matTooltip="Copy To ClipBoard" matTooltipPosition="below"><mat-icon>file_copy</mat-icon></button>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="smsCheck(1)" matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>textsms</mat-icon></button>
</div>
</div> -->
<div fxLayout="row" fxLayoutAlign="center center" *ngIf="showLinkCard == true" style="margin-top: 20px;">
<div fxFlex.xs="70%" fxFlex.sm="70%" fxFlex.md="70%" fxFlex.lg="70%" fxFlex.xl="70%" fxLayoutAlign="center center">
<mat-card class="linkStyle">{{pdGenie_GMeet_Link}}</mat-card>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="smsCheck(1)" matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>textsms</mat-icon></button>
</div>
</div>
</div>
<div fxLayout="row" *ngIf="hideDetails == true" fxLayoutAlign="center center">
<mat-card>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center center">
<h3 class="linkStyle">This link will be sent as SMS to (<span>{{details.applicantNo}}</span>). Please proceed if this number is correct, else close this window and edit the applicant mobile number</h3>
</div>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center end">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="onClickSmsLink()" matTooltip="Send Link Via SMS" matTooltipPosition="above" ><mat-icon>textsms</mat-icon> Send SMS</button>
</div>
</mat-card>
</div>
</div>
<div *ngIf="details.flag == 2">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" style="padding: 10px !important;font-weight: bold;color: #f34436;">
VIDEO CALL
</div>
<div fxFlex="30" align="end" style="padding: 10px !important;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
</div>
</h2>
<div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 20px;">
<div fxFlex.xs="70%" fxFlex.sm="70%" fxFlex.md="70%" fxFlex.lg="70%" fxFlex.xl="70%" fxLayoutAlign="center center">
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="uploadRecordedVideo()">
<mat-icon>videocam</mat-icon>&nbsp;
<strong>Upload</strong>
</button>
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button matTooltip="Play Recorded Video" matTooltipPosition="above" class="mr-1 mb-1" color="primary" (click)="openPlayer()" [disabled]="!videoplayback.enableBtn">
<mat-icon>play_circle_filled</mat-icon>&nbsp;
<strong>Play Recorded Video</strong>
</button>
</div>
</div>
</div>
<!--Start Video Code-->
<notifier-container></notifier-container>

View File

@ -0,0 +1,12 @@
.linkStyle{
width: 100% !important;
padding: 15px !important;
letter-spacing: .00625em !important;
font-family: Roboto,Arial,sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5rem !important;
color: #202124 !important;
box-flex: 1 !important;
background-color: #8080803b !important;
}

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ImageVideoComponent } from './image-video.component';
describe('ImageVideoComponent', () => {
let component: ImageVideoComponent;
let fixture: ComponentFixture<ImageVideoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ImageVideoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ImageVideoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,183 @@
import { Component, OnInit, Inject } from '@angular/core';
import { NotifierService } from 'angular-notifier';
import { FormBuilder } from '@angular/forms';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { ViewPdComponent } from '../view-pd.component';
import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
import { VideoPlayerComponent } from 'app/video-chat/video-player/video-player.component';
import { UploadVideoComponent } from 'app/quality-check/upload-video/upload-video.component';
@Component({
selector: 'app-image-video',
templateUrl: './image-video.component.html',
styleUrls: ['./image-video.component.scss']
})
export class ImageVideoComponent implements OnInit {
private notifier: NotifierService;
hideDetails: boolean = false;
details: any;
master: any;
g_code: Object | any[];
google_Meet_Link: string;
pdGenie_GMeet_Link: any;
showLinkCard: boolean = false;
videoplayback: any = {enableBtn:true,url:null};
g_meet_hide_button: boolean = false;
pdgenie_hide_button: boolean = false;
constructor( notifier: NotifierService,
private _fb: FormBuilder,
private dialogRef: MatDialogRef<ViewPdComponent>,
private _pd: PdTrigerService, private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.details =data
this.notifier = notifier;
console.log(this.details)
if(this.details.flag == 1){
let masterDetailsData = this.details.masterDetails
if(masterDetailsData.gmeet_code == '' || masterDetailsData.gmeet_code == null){
console.log('711 createG_Meet')
this.createG_Meet()
// cus_link = 'http://meet.google.com/'+this.pdMasterData[0].gmeet_code;
} else {
let g_link = this.details.masterDetails.gmeet_code
let cus_link = 'http://meet.google.com/'+g_link;
this.google_Meet_Link = cus_link
}
}
this.master = this.details.masterDetails
}
ngOnInit() {
}
/** For Popup Close Button */
closeComponent(): void {
this.dialogRef.close();
}
copyToClipBoard(linkData,iconDetails){
if(iconDetails == 'imageURL'){
this._pd.copyToClipBoard(linkData);
this.notifier.notify('info','Image Capture Customer link copied');
}else if(iconDetails == 'videoChat'){
this.g_meet_hide_button = true
this.showLinkCard = true
this._pd.copyToClipBoard(linkData);
this.pdGenie_GMeet_Link = this.details.videoChatLink
this.notifier.notify('info','Video Chat Customer link copied');
}else if(iconDetails == 'G_Meet'){
this.pdgenie_hide_button = true
this.showLinkCard = true
this._pd.copyToClipBoard(linkData);
this.pdGenie_GMeet_Link = this.google_Meet_Link
this.notifier.notify('info','Google Meet Customer link copied');
}
}
createG_Meet(){
console.log('727 createG_Meet')
let pdid = this.details.masterDetails.pd_id
console.log(pdid)
this._pd.create_G_Video_Status(pdid).subscribe(data => {
console.log(data)
if (data['status'] == 200) {
console.log('732')
// console.log('create_G_Video_Status',data)
this.g_code = data
console.log(this.g_code)
if(data['dataStatus'] == true){
let cus_link_Gmeet = 'http://meet.google.com/'+this.g_code['data'].gmeet_code
console.log(cus_link_Gmeet)
this.google_Meet_Link = cus_link_Gmeet
}
} else {
console.log('743')
let msg_G_meet = data['msg']
console.log(msg_G_meet)
this.notifier.notify('info',msg_G_meet);
}
}, error => {
console.log('%c Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!', 'font-weight: bold; font-size: 50px;color: red; ');
});
}
smsCheck(event){
if(event == 1){
this.hideDetails = true
}
}
onClickSmsLink(){
let param={
pd_id: this.master.pd_id,
mobile_no: this.details.applicantNo,
random_string: this.master.random_string,
sms_flag:'1'
// pd_type:master.fk_pd_type
}
// sms_flag options
// 1 - Image Capture for Telepd and smart pd
// 2 - Image Recapture for Telepd and smart pd
this._pd.smsLink(param).subscribe(res=>{
if(res['dataStatus']){
this.notifier.notify("info","SMS Sent Successfully")
this.hideDetails = false
}
})
}
openVideoChat(){
// let dialogRef = this.dialog.open(VideoChatComponent,{
// data:{type:'init',random_string:this.pdMasterData[0].random_string,pd_id:this.viewID},
// maxWidth: '100vw',
// maxHeight: '100vh',
// height: '100%',
// width: '100%',
// disableClose: true,
// panelClass:'video-chat'
// })
let url = window.location.origin+'/vchat/#/chat/'+this.master.random_string+';id='+this.master.pd_id+';type=2'
window.open(url,'_blank')
}
openPlayer(){
// if(this.videoplayback.url == null) {
// this.notifier.notify('info',"No Videos Found");
// return;
// }
let params = {"pd_id":this.master.pd_id,"random_string":this.master.random_string}
this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) {
let dialogRef = this.dialog.open(VideoPlayerComponent,{
data:{videoUrl:result['records'],masterData:this.master},
maxWidth: '100vw',
maxHeight: '100vh',
height: '90%',
width: '70%',
disableClose: false,
panelClass:'video-player'
})
}
else {
this.notifier.notify('info',"No Videos Found");
}
})
}
uploadRecordedVideo() {
const dialogRef = this.dialog.open(UploadVideoComponent,{
minWidth:'50vw',
disableClose:true,
data:{pd_id:this.master.pd_id,random_string:this.master.random_string}
// maxWidth:'75vw'
})
}
}

View File

@ -129,12 +129,23 @@
<div fxLayout="row" fxLayoutAlign="flex-end" fxLayoutGap="68px" fxLayoutGap.xs="8px"> <div fxLayout="row" fxLayoutAlign="flex-end" fxLayoutGap="68px" fxLayoutGap.xs="8px">
<!-- ENABLING THE FAB COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD --> <!-- ENABLING THE FAB COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
<div fxLayout="column"> <!-- <div fxLayout="column">
<app-speed-dial-fab fxFlex="30" class="fab-group" *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" [options]="FabOptions" (fabClick)="copyCusURL($event)"></app-speed-dial-fab> <app-speed-dial-fab fxFlex="30" class="fab-group" *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" [options]="FabOptions" (fabClick)="copyCusURL($event)"></app-speed-dial-fab>
</div>
</div> -->
<!-- END OF COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD --> <!-- END OF COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
<div align="right" > <div align="right" >
<span> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickImageCapture(master)"
matTooltip="Image Capture" matTooltipPosition="above" >
<mat-icon>add_a_photo</mat-icon>
</button>&nbsp;&nbsp;</span>
<span> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickVideoChat(master)"
matTooltip="Video Chat" matTooltipPosition="above" >
<mat-icon>videocam</mat-icon>
</button>&nbsp;&nbsp;</span>
<!-- <button mat-raised-button class="mr-1 mb-1" color="primary" style="cursor: not-allowed !important;"> <!-- <button mat-raised-button class="mr-1 mb-1" color="primary" style="cursor: not-allowed !important;">
<strong> {{master.pd_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.pd_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.pd_status | titlecase}}</strong> <strong> {{master.pd_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.pd_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.pd_status | titlecase}}</strong>
</button> --> </button> -->
@ -156,15 +167,14 @@
</button></span> --> </button></span> -->
<!-- END OF COPY LINK VIDEO CALL BUTTON FOR SMART PD --> <!-- END OF COPY LINK VIDEO CALL BUTTON FOR SMART PD -->
<span> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" <!-- <span> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickSmsLink(master)" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickSmsLink(master)"
matTooltip="Send Link Via SMS" matTooltipPosition="above" > matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>description</mat-icon> <mat-icon>textsms</mat-icon>
</button>&nbsp;&nbsp;</span> </button>&nbsp;&nbsp;</span> -->
<!-- <div class="fab-group" *ngIf="master.fk_pd_type == '3'"> --> <!-- <div class="fab-group" *ngIf="master.fk_pd_type == '3'"> -->
<!-- </div> --> <!-- </div> -->
<span matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above"> <!-- <span matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above">
<!-- [disabled]="!videoplayback.enableBtn" -->
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="openPlayer()" > <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="openPlayer()" >
<mat-icon>play_circle_filled</mat-icon>&nbsp; <mat-icon>play_circle_filled</mat-icon>&nbsp;
<strong>Play</strong> <strong>Play</strong>
@ -173,7 +183,7 @@
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()"> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()">
<mat-icon>videocam</mat-icon>&nbsp; <mat-icon>videocam</mat-icon>&nbsp;
<strong>Call</strong> <strong>Call</strong>
</button> </button> -->
<button *ngIf="master.fk_pd_type == '2' && master.vendor_status != null" mat-raised-button class="mr-1 mb-1" color="primary" matTooltip="Vendor Status" matTooltipPosition="above" style="cursor: not-allowed !important;background-color: #2699ce !important;"> <button *ngIf="master.fk_pd_type == '2' && master.vendor_status != null" mat-raised-button class="mr-1 mb-1" color="primary" matTooltip="Vendor Status" matTooltipPosition="above" style="cursor: not-allowed !important;background-color: #2699ce !important;">
<strong> {{master.vendor_status}}</strong> <strong> {{master.vendor_status}}</strong>
</button> </button>

View File

@ -25,6 +25,7 @@ import { MastersComponent } from 'app/settings/masters/masters.component';
import { VideoPlayerComponent } from 'app/video-chat/video-player/video-player.component'; import { VideoPlayerComponent } from 'app/video-chat/video-player/video-player.component';
import { VendorPdAllocationComponent } from '../vendor-pd-allocation/VendorPdAllocationComponent'; import { VendorPdAllocationComponent } from '../vendor-pd-allocation/VendorPdAllocationComponent';
import { ImagesAllComponent } from '../start-pd/forms/images-all/images-all.component'; import { ImagesAllComponent } from '../start-pd/forms/images-all/images-all.component';
import { ImageVideoComponent } from './image-video/image-video.component';
@Component({ @Component({
selector: 'app-view-pd', selector: 'app-view-pd',
@ -119,7 +120,7 @@ export class ViewPdComponent implements OnInit, OnDestroy {
btnValue:'G_Meet' btnValue:'G_Meet'
}, },
{ {
icon: 'camera', icon: 'add_a_photo',
placeholder:'Image Capture', placeholder:'Image Capture',
btnValue:'image' btnValue:'image'
}, },
@ -697,120 +698,162 @@ export class ViewPdComponent implements OnInit, OnDestroy {
}) })
} }
copyCusURL(event) { // copyCusURL(event) {
// console.log(window.location); // // console.log(window.location);
console.log(event) // console.log(event)
let cus_link; // let cus_link;
if(event && event.btnValue == 'video') { // if(event && event.btnValue == 'video') {
cus_link = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=1' // cus_link = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=1'
} // }
else if(event && event.btnValue == 'image') { // else if(event && event.btnValue == 'image') {
cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string; // cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string;
} else if(event && event.btnValue == 'G_Meet'){ // } else if(event && event.btnValue == 'G_Meet'){
console.log('G_meet') // console.log('G_meet')
if(this.pdMasterData[0].gmeet_code == '' || this.pdMasterData[0].gmeet_code == null){ // if(this.pdMasterData[0].gmeet_code == '' || this.pdMasterData[0].gmeet_code == null){
console.log('711 createG_Meet') // console.log('711 createG_Meet')
this.createG_Meet(event) // this.createG_Meet(event)
// cus_link = 'http://meet.google.com/'+this.pdMasterData[0].gmeet_code; // // cus_link = 'http://meet.google.com/'+this.pdMasterData[0].gmeet_code;
} else { // } else {
console.log('715 createG_Meet') // console.log('715 createG_Meet')
cus_link = 'http://meet.google.com/'+this.pdMasterData[0].gmeet_code; // cus_link = 'http://meet.google.com/'+this.pdMasterData[0].gmeet_code;
this._pd.copyToClipBoard(cus_link); // // this._pd.copyToClipBoard(cus_link);
this.notifier.notify('info',event.placeholder+' Customer link copied'); // // this.notifier.notify('info',event.placeholder+' Customer link copied');
} // }
} // }
// return; // // return;
// let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr; // // let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr;
// console.log(randomStr) // // console.log(randomStr)
if(event.btnValue == 'video' && event.btnValue == 'image'){ // // if(event.btnValue == 'video' && event.btnValue == 'image'){
this._pd.copyToClipBoard(cus_link); // this._pd.copyToClipBoard(cus_link);
this.notifier.notify('info',event.placeholder+' Customer link copied'); // this.notifier.notify('info',event.placeholder+' Customer link copied');
}
} // // }
createG_Meet(event){ // }
console.log('727 createG_Meet')
this._pd.create_G_Video_Status(this.viewID).subscribe(data => { // createG_Meet(event){
console.log(data) // console.log('727 createG_Meet')
if (data['status'] == 200) { // this._pd.create_G_Video_Status(this.viewID).subscribe(data => {
console.log('732') // console.log(data)
// console.log('create_G_Video_Status',data) // if (data['status'] == 200) {
this.g_code = data // console.log('732')
console.log(this.g_code) // // console.log('create_G_Video_Status',data)
if(data['dataStatus'] == true){ // this.g_code = data
let cus_link_Gmeet = 'http://meet.google.com/'+this.g_code['data'].gmeet_code // console.log(this.g_code)
console.log(cus_link_Gmeet) // if(data['dataStatus'] == true){
this._pd.copyToClipBoard(cus_link_Gmeet); // let cus_link_Gmeet = 'http://meet.google.com/'+this.g_code['data'].gmeet_code
this.notifier.notify('info',event.placeholder+' Customer link copied'); // console.log(cus_link_Gmeet)
} // this._pd.copyToClipBoard(cus_link_Gmeet);
} else { // this.notifier.notify('info',event.placeholder+' Customer link copied');
console.log('743') // }
let msg_G_meet = data['msg'] // } else {
console.log(msg_G_meet) // console.log('743')
this.notifier.notify('info',msg_G_meet); // let msg_G_meet = data['msg']
} // console.log(msg_G_meet)
}, error => { // this.notifier.notify('info',msg_G_meet);
console.log('%c Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!', 'font-weight: bold; font-size: 50px;color: red; '); // }
// }, error => {
// console.log('%c Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!', 'font-weight: bold; font-size: 50px;color: red; ');
// });
// }
onClickImageCapture(master) {
let cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string;
console.log(cus_link)
const dialogApplicant = this.dialog.open(ImageVideoComponent, {
data: {masterDetails:master,Link:cus_link,applicantNo:this.pdApplicantData[0].mobile_no,flag:0},
// position: { right: '0' },
maxWidth: '70vw',
maxHeight: '60vw',
height: '60%',
width: '70%',
disableClose: true
}); });
dialogApplicant.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.viewPdDetails(this.viewID,this.masterRandomString)
});
} }
onClickSmsLink(master){ onClickVideoChat(master) {
console.log('SMS',master); let videoChatLink = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=1'
let param={ console.log(videoChatLink)
pd_id: master.pd_id, const dialogApplicant = this.dialog.open(ImageVideoComponent, {
mobile_no: this.pdApplicantData[0].mobile_no, data: {masterDetails:master,videoChatLink:videoChatLink,applicantNo:this.pdApplicantData[0].mobile_no,flag:1},
random_string: master.random_string, // position: { right: '0' },
sms_flag:'1' maxWidth: '70vw',
// pd_type:master.fk_pd_type maxHeight: '50vw',
} height: '50%',
// sms_flag options width: '70%',
// 1 - Image Capture for Telepd and smart pd disableClose: true
// 2 - Image Recapture for Telepd and smart pd });
this._pd.smsLink(param).subscribe(res=>{ dialogApplicant.afterClosed()
if(res['dataStatus']){ .subscribe(dataresult => {
this.notifier.notify("info","SMS Sent Successfully") // this.notifier.notify('success', 'Successfully allocated.!');
} this.viewPdDetails(this.viewID,this.masterRandomString)
}) });
} }
openVideoChat(){ // onClickSmsLink(master){
// let dialogRef = this.dialog.open(VideoChatComponent,{ // console.log('SMS',master);
// data:{type:'init',random_string:this.pdMasterData[0].random_string,pd_id:this.viewID}, // let param={
// maxWidth: '100vw', // pd_id: master.pd_id,
// maxHeight: '100vh', // mobile_no: this.pdApplicantData[0].mobile_no,
// height: '100%', // random_string: master.random_string,
// width: '100%', // sms_flag:'1'
// disableClose: true, // // pd_type:master.fk_pd_type
// panelClass:'video-chat' // }
// }) // // sms_flag options
let url = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=2' // // 1 - Image Capture for Telepd and smart pd
window.open(url,'_blank') // // 2 - Image Recapture for Telepd and smart pd
} // this._pd.smsLink(param).subscribe(res=>{
openPlayer(){ // if(res['dataStatus']){
// if(this.videoplayback.url == null) { // this.notifier.notify("info","SMS Sent Successfully")
// this.notifier.notify('info',"No Videos Found"); // }
// return; // })
// } // }
let params = {"pd_id":this.viewID,"random_string":this.masterRandomString}
this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{ // openVideoChat(){
if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) { // // let dialogRef = this.dialog.open(VideoChatComponent,{
let dialogRef = this.dialog.open(VideoPlayerComponent,{ // // data:{type:'init',random_string:this.pdMasterData[0].random_string,pd_id:this.viewID},
data:{videoUrl:result['records'],masterData:this.pdMasterData[0]}, // // maxWidth: '100vw',
maxWidth: '100vw', // // maxHeight: '100vh',
maxHeight: '100vh', // // height: '100%',
height: '90%', // // width: '100%',
width: '70%', // // disableClose: true,
disableClose: false, // // panelClass:'video-chat'
panelClass:'video-player' // // })
}) // let url = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=2'
} // window.open(url,'_blank')
else { // }
this.notifier.notify('info',"No Videos Found"); // openPlayer(){
} // console.log(this.pdMasterData[0].random_string)
}) // console.log(this.masterRandomString)
} // // if(this.videoplayback.url == null) {
// // this.notifier.notify('info',"No Videos Found");
// // return;
// // }
// let params = {"pd_id":this.viewID,"random_string":this.masterRandomString}
// this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
// if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) {
// let dialogRef = this.dialog.open(VideoPlayerComponent,{
// data:{videoUrl:result['records'],masterData:this.pdMasterData[0]},
// maxWidth: '100vw',
// maxHeight: '100vh',
// height: '90%',
// width: '70%',
// disableClose: false,
// panelClass:'video-player'
// })
// }
// else {
// this.notifier.notify('info',"No Videos Found");
// }
// })
// }
// getVideoUrl(pd_id,randomStr){ // getVideoUrl(pd_id,randomStr){
// let params = {"pd_id":pd_id,"random_string":randomStr} // let params = {"pd_id":pd_id,"random_string":randomStr}
// this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{ // this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{

View File

@ -164,6 +164,7 @@ import {
} from '@angular/material'; } from '@angular/material';
import { CropToolsComponent } from './list-pd/start-pd/forms/dialogue/crop-tools/crop-tools.component'; import { CropToolsComponent } from './list-pd/start-pd/forms/dialogue/crop-tools/crop-tools.component';
import { FacialRecognitionModalComponent } from './list-pd/start-pd/forms/facial-recognition/facial-recognition-modal/facial-recognition-modal.component'; import { FacialRecognitionModalComponent } from './list-pd/start-pd/forms/facial-recognition/facial-recognition-modal/facial-recognition-modal.component';
import { ImageVideoComponent } from './list-pd/view-pd/image-video/image-video.component';
/** /**
* Custom angular notifier options * Custom angular notifier options
*/ */
@ -210,7 +211,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
@NgModule({ @NgModule({
declarations: [TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent,VendorPdAllocationComponent, DuplicatePdComponent,FacialRecognitionModalComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent,StartPd2Component, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent,PdCollectedDocsComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, RupeeCurrencyFormatPipe, NumberToWordsPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent ,ManageDailyPurchaseComponent, DailyPurchaseDetailsComponent, ManageRentalVerificationComponent, FuturePlansAndBusinessEnvironmentComponent, ImageCropComponent,CropToolsComponent,PurchaseCalculationComponent,QueriesDocsComponent, ImageDocsComponent,CustomTitleCaseDirective, SpeedDialFabComponent,VideoPlayerComponent, declarations: [TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent,VendorPdAllocationComponent, DuplicatePdComponent,FacialRecognitionModalComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent,StartPd2Component, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent,PdCollectedDocsComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, RupeeCurrencyFormatPipe, NumberToWordsPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent ,ManageDailyPurchaseComponent, DailyPurchaseDetailsComponent, ManageRentalVerificationComponent, FuturePlansAndBusinessEnvironmentComponent, ImageCropComponent,CropToolsComponent,PurchaseCalculationComponent,QueriesDocsComponent, ImageDocsComponent,CustomTitleCaseDirective, SpeedDialFabComponent,VideoPlayerComponent,
DynamicFormComponent,DynamicQuestionTemplateComponent, ImagesAllComponent,AnswerOptionCreateDialogComponent,FormComponent,FormGroupComponent], DynamicFormComponent,DynamicQuestionTemplateComponent, ImagesAllComponent,AnswerOptionCreateDialogComponent,FormComponent,FormGroupComponent, ImageVideoComponent],
imports: [ imports: [
CommonModule, CommonModule,
ManagePdRoutingModule, ManagePdRoutingModule,
@ -266,7 +267,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, PdLocatedMapViewDirective,QuesFormService], {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, PdLocatedMapViewDirective,QuesFormService],
entryComponents: [FacialRecognitionModalComponent,DuplicatePdComponent,VendorPdAllocationComponent,PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,BusinessAssetsInfoComponent, entryComponents: [ImageVideoComponent,FacialRecognitionModalComponent,DuplicatePdComponent,VendorPdAllocationComponent,PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,BusinessAssetsInfoComponent,
ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent,PdCollectedDocsComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent,BusinessBankingDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, ManageDailySalesComponent,PdStatusChangeDialogueComponent, ViewLocationComponent, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent, ManageDailyPurchaseComponent,ManageRentalVerificationComponent,FuturePlansAndBusinessEnvironmentComponent,ImageCropComponent,CropToolsComponent,QueriesDocsComponent, ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent,PdCollectedDocsComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent,BusinessBankingDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, ManageDailySalesComponent,PdStatusChangeDialogueComponent, ViewLocationComponent, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent, ManageDailyPurchaseComponent,ManageRentalVerificationComponent,FuturePlansAndBusinessEnvironmentComponent,ImageCropComponent,CropToolsComponent,QueriesDocsComponent,
DynamicFormComponent,DynamicQuestionTemplateComponent,VideoPlayerComponent,ImageDocsComponent,ImagesAllComponent,FormComponent,FormGroupComponent], DynamicFormComponent,DynamicQuestionTemplateComponent,VideoPlayerComponent,ImageDocsComponent,ImagesAllComponent,FormComponent,FormGroupComponent],
}) })

View File

@ -2,7 +2,7 @@
<h2 mat-dialog-title class="paragraph_change"> <h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left" style="padding: 10px !important;"> <div fxFlex="70" align="left" style="padding: 10px !important;">
<span> Customer Images <span ><mat-icon>done_all</mat-icon> </span> </span><br/> <span> Customer Images <span ><mat-icon>done_all</mat-icon> </span> </span><br/>
<span>Images to be ReCapture by customer</span> <span>Images to be Recaptured by customer</span>
</div> </div>
<!-- <div fxFlex="30" align="end" *ngIf="imgReCaptureBucket.length > 0"> <!-- <div fxFlex="30" align="end" *ngIf="imgReCaptureBucket.length > 0">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Clear Selected" <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Clear Selected"
@ -21,6 +21,31 @@
<!-- <mat-dialog-content> --> <!-- <mat-dialog-content> -->
<!-- <input type="file" accept="image/*" capture="environment"> --> <!-- <input type="file" accept="image/*" capture="environment"> -->
<mat-card> <mat-card>
<div fxLayout="row" fxLayoutAlign="center center" *ngIf="show_link == true">
<div *ngIf="hideDetails == false">
<div fxFlex.xs="80%" fxFlex.sm="80%" fxFlex.md="80%" fxFlex.lg="80%" fxFlex.xl="80%" fxLayoutAlign="center center">
<mat-card class="linkStyle">{{link}}</mat-card>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyCusURL()" matTooltip="Copy To ClipBoard" matTooltipPosition="below"><mat-icon>file_copy</mat-icon></button>
</div>
<div fxFlex.xs="8%" fxFlex.sm="8%" fxFlex.md="8%" fxFlex.lg="8%" fxFlex.xl="8%" fxLayoutAlign="start center">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="smsCheck(1)" matTooltip="Send Link Via SMS" matTooltipPosition="above" >
<mat-icon>textsms</mat-icon></button>
</div>
</div>
</div>
<div fxLayout="row" *ngIf="hideDetails == true" fxLayoutAlign="center center">
<mat-card>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center center">
<h3 class="linkStyle">This link will be sent as SMS to (<span>{{pdApplicantData.mobile_no}}</span>). Please proceed if this number is correct, else close this window and edit the applicant mobile number</h3>
</div>
<div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex.md="100%" fxFlex.lg="100%" fxFlex.xl="100%" fxLayoutAlign="center end">
<button mat-raised-button class="mr-1 mb-1" color="primary" type="button" (click)="onClickSmsLink()" matTooltip="Send Link Via SMS" matTooltipPosition="above" ><mat-icon>textsms</mat-icon> Send SMS</button>
</div>
</mat-card>
</div>
<div fxLayout="row"> <div fxLayout="row">
<span fxLayout="column" fxFlex="85" fxFlex.xs = "70" fxLayoutAlign="flex-start" > <span fxLayout="column" fxFlex="85" fxFlex.xs = "70" fxLayoutAlign="flex-start" >
<!-- <mat-card-header > <!-- <mat-card-header >
@ -36,7 +61,7 @@
</div> </div>
<!-- </span> --> <!-- </span> -->
<mat-card-content> <mat-card-content>
<div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch" fxLayoutGap="25px" fxLayoutGap.xs="15px" style="flex-wrap: wrap"> <div *ngIf="show_link == false" fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch" fxLayoutGap="25px" fxLayoutGap.xs="15px" style="flex-wrap: wrap">
<!-- {{records.img_data | json}} --> <!-- {{records.img_data | json}} -->
<div *ngFor="let val of imageData;let i = index" [ngStyle]="{'flex-basis': val.is_multiple == 1 ? '100%' : ''}" > <div *ngFor="let val of imageData;let i = index" [ngStyle]="{'flex-basis': val.is_multiple == 1 ? '100%' : ''}" >
<!-- {{val.is_multiple}} --> <!-- {{val.is_multiple}} -->
@ -169,13 +194,13 @@
<!-- <mat-dialog-actions> <!-- <mat-dialog-actions>
hi hi
</mat-dialog-actions> --> </mat-dialog-actions> -->
<div style="position:sticky;background-color:black;float: right;bottom: 0;border:2px solid red;padding: 14px;color: white;border-radius: 10px" *ngIf="imgReCaptureBucket.length > 0"> <div style="position:sticky;background-color:black;float: right;bottom: 0;border:2px solid red;padding: 14px;color: white;border-radius: 10px" *ngIf="imgReCaptureBucket.length > 0 && show_link == false">
<div fxLayout="row" fxLayoutGap="20px" fxLayoutGap.xs = "5px" style="max-height: 35px"> <div fxLayout="row" fxLayoutGap="20px" fxLayoutGap.xs = "5px" style="max-height: 35px">
<span style="font-weight:bold">Total Re-capturing Images : <span style="font-weight:bold">Total Re-capturing Images :
<span id="num_count">{{imgReCaptureBucket.length}}</span></span> <span id="num_count">{{imgReCaptureBucket.length}}</span></span>
<button mat-raised-button (click)="submitQcImages()"><mat-icon>done_all</mat-icon> Submit</button> <button mat-raised-button (click)="submitQcImages()"><mat-icon>done_all</mat-icon> Submit</button>
</div> </div>
</div> </div>
<notifier-container></notifier-container>
<!-- <input type="file" id="input-file" name="file" accept="image/*" capture="user"> --> <!-- <input type="file" id="input-file" name="file" accept="image/*" capture="user"> -->

View File

@ -3,6 +3,17 @@
overflow-y: scroll !important; overflow-y: scroll !important;
} }
} }
.linkStyle{
padding: 15px !important;
letter-spacing: .00625em !important;
font-family: Roboto,Arial,sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5rem !important;
color: #202124 !important;
box-flex: 1 !important;
background-color: #8080803b !important;
}
.paragraph_change { .paragraph_change {
color: #fff !important; color: #fff !important;
background-color: #e00201 !important; background-color: #e00201 !important;

View File

@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef, Inject } from '@angular/core'
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material'; import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { QcService } from '../qc-service/qc.service'; import { QcService } from '../qc-service/qc.service';
import { NotifierService } from 'angular-notifier'; import { NotifierService } from 'angular-notifier';
import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
@Component({ @Component({
selector: 'app-qc-cus-images', selector: 'app-qc-cus-images',
@ -15,12 +16,24 @@ export class QcCusImagesComponent implements OnInit {
current_index: any; current_index: any;
@ViewChild('dummy_img_more') dummyImgMoreRef:ElementRef @ViewChild('dummy_img_more') dummyImgMoreRef:ElementRef
imgReCaptureBucket: any[] =[]; imgReCaptureBucket: any[] =[];
notifier: NotifierService; private notifier:NotifierService;
pdMasterData: any;
pdApplicantData: any;
link: any;
show_link: boolean = false;
hideDetails: boolean = false;
constructor(private apiService:QcService, constructor(private apiService:QcService,
private dialogRef: MatDialogRef<QcCusImagesComponent>, private dialogRef: MatDialogRef<QcCusImagesComponent>,
private dialog: MatDialog, notifier:NotifierService, private dialog: MatDialog,notifier:NotifierService,private pdService:PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) { @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.notifier = notifier this.notifier=notifier
console.log('data',pd_all_details)
this.pdMasterData = pd_all_details.pdMasterData
console.log('data',this.pdMasterData)
this.pdApplicantData = pd_all_details.pdApplicantData
console.log('data',this.pdApplicantData)
this.link = pd_all_details.Link
console.log('data',this.link)
} }
ngOnInit() { ngOnInit() {
@ -30,14 +43,14 @@ export class QcCusImagesComponent implements OnInit {
// // this.records = this.dataService.getPDImageData.img_data // // this.records = this.dataService.getPDImageData.img_data
// this.imageData = this.records // this.imageData = this.records
console.log(this.pd_all_details) console.log(this.pdMasterData)
console.log(typeof(this.records)) console.log(typeof(this.records))
// console.log(); // console.log();
// console.log(this.actRoute.snapshot.paramMap.getAll('randomStr')) // console.log(this.actRoute.snapshot.paramMap.getAll('randomStr'))
this.getPDImageDetails(); this.getPDImageDetails();
} }
getPDImageDetails() { getPDImageDetails() {
let params = {"pd_id":"","random_string":this.pd_all_details.random_string} let params = {"pd_id":"","random_string":this.pdMasterData.random_string}
this.apiService.getPDImgDetails(params).subscribe(result=>{ this.apiService.getPDImgDetails(params).subscribe(result=>{
if(result.dataStatus) { if(result.dataStatus) {
this.records = result.records this.records = result.records
@ -268,14 +281,23 @@ openBase64(url) {
} }
console.log(this.imgReCaptureBucket) console.log(this.imgReCaptureBucket)
} }
smsCheck(event){
if(event == 1){
this.hideDetails = true
}
}
submitQcImages() { submitQcImages() {
console.log(this.imgReCaptureBucket,JSON.stringify(this.imgReCaptureBucket)) console.log(this.imgReCaptureBucket,JSON.stringify(this.imgReCaptureBucket))
this.apiService.auditSmartPDImages(this.imgReCaptureBucket).subscribe(res=>{ this.apiService.auditSmartPDImages(this.imgReCaptureBucket).subscribe(res=>{
if(res['dataStatus']) { if(res['dataStatus']) {
this.notifier.notify('info','Submitted successfully..'); this.notifier.notify('info','Submitted successfully..');
setTimeout(()=>{ this.show_link = true
this.dialogRef.close() // setTimeout(()=>{
},2000) // this.dialogRef.close()
// },2000)
} }
else { else {
this.notifier.notify('warning',res.hasOwnProperty('msg') && res['msg'] ? res['msg'] : 'Something went wrong try again later!!') this.notifier.notify('warning',res.hasOwnProperty('msg') && res['msg'] ? res['msg'] : 'Something went wrong try again later!!')
@ -294,4 +316,59 @@ openBase64(url) {
this.imgReCaptureBucket = [] this.imgReCaptureBucket = []
} }
copyCusURL() {
// console.log(window.location);
// let cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData.random_string+'/recapture';
// if(event && event.btnValue == 'video') {
// cus_link = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string;
// }
// else if(event && event.btnValue == 'image') {
// cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string;
// }
// return;
// let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr;
console.log(this.link)
this.pdService.copyToClipBoard(this.link);
this.notifier.notify('info','Customer Image Recapture link copied');
}
// fabAction(event,master) {
// console.log(event);
// event = event.btnValue
// if(event == 'open_cus_images') {
// this.openCusImages()
// }
// if(event == 'send_cus_images_link') {
// this.onClickSmsLink(master)
// }
// if(event == 'copy_cus_images_link') {
// this.copyCusURL()
// }
// }
onClickSmsLink(){
console.log('SMS',this.pdMasterData);
let param={
pd_id: this.pdMasterData.pd_id,
mobile_no: this.pdApplicantData.mobile_no,
random_string: this.pdMasterData.random_string,
sms_flag:'2'
// pd_type:master.fk_pd_type
}
console.log(param)
// sms_flag options
// 1 - Image Capture for Telepd and smart pd
// 2 - Image Recapture for Telepd and smart pd
this.pdService.smsLink(param).subscribe(res=>{
if(res['dataStatus']){
console.log('1212')
this.notifier.notify("info","SMS Sent Successfully")
}
else{
let msg = res.hasOwnProperty('msg') ? res.msg : "Something Went wrong";
this.notifier.notify("warning",msg)
}
})
}
} }

View File

@ -132,20 +132,30 @@
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="70" fxFlex.xl="70" class="content-data" *ngFor="let master of pdMasterData"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="70" fxFlex.xl="70" class="content-data" *ngFor="let master of pdMasterData">
<div fxLayout="row" fxLayoutAlign="flex-end" fxLayoutGap="68px" fxLayoutGap.xs="8px"> <div fxLayout="row" fxLayoutAlign="flex-end" fxLayoutGap="68px" fxLayoutGap.xs="8px">
<!-- ENABLING THE FAB COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD --> <!-- ENABLING THE FAB COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
<div fxLayout="column"> <!-- <div fxLayout="column">
<app-speed-dial-fab fxFlex="30" class="fab-group" *ngIf="master.fk_pd_type == '2'" [options]="FabOptions" (fabClick)="fabAction($event,master)"></app-speed-dial-fab> <app-speed-dial-fab fxFlex="30" class="fab-group" *ngIf="master.fk_pd_type == '2'" [options]="FabOptions" (fabClick)="fabAction($event,master)"></app-speed-dial-fab>
</div> </div> -->
<!-- END OF COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD --> <!-- END OF COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
<div align="right"> <div align="right">
<span> <button *ngIf="master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="openCusImages(master)"
matTooltip="Image Capture" matTooltipPosition="above" >
<mat-icon>add_a_photo</mat-icon>
</button>&nbsp;&nbsp;</span>
<span> <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickVideoChat(master)"
matTooltip="Video Chat" matTooltipPosition="above" >
<mat-icon>videocam</mat-icon>
</button>&nbsp;&nbsp;</span>
<button *ngIf="master.fk_pd_type == '2'" <button *ngIf="master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="confirmFieldVisit()" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="confirmFieldVisit()"
matTooltip="Is Field visit done ?" matTooltipPosition="above" > matTooltip="Is Field visit done ?" matTooltipPosition="above" >
<mat-icon>how_to_reg</mat-icon> <mat-icon>how_to_reg</mat-icon>
</button> </button>
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="uploadRecordedVideo()"> <!-- <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button class="mr-1 mb-1" color="primary" (click)="uploadRecordedVideo()">
<mat-icon>videocam</mat-icon>&nbsp; <mat-icon>videocam</mat-icon>&nbsp;
<strong>Upload</strong> <strong>Upload</strong>
</button> </button> -->
<!-- <span> <button *ngIf="master.fk_pd_type == '2'" <!-- <span> <button *ngIf="master.fk_pd_type == '2'"
mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyCusURL()" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyCusURL()"
matTooltip="Copy Customer Image Recapture Link" matTooltipPosition="above" > matTooltip="Copy Customer Image Recapture Link" matTooltipPosition="above" >
@ -161,11 +171,12 @@
<strong>Customer Images</strong> <strong>Customer Images</strong>
</button> --> </button> -->
<!-- <span matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above"> --> <!-- <span matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above"> -->
<button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button matTooltip="Play Recorded Video" matTooltipPosition="above" class="mr-1 mb-1" color="primary" (click)="openPlayer()" [disabled]="!videoplayback.enableBtn"> <!-- <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" mat-stroked-button matTooltip="Play Recorded Video" matTooltipPosition="above" class="mr-1 mb-1" color="primary" (click)="openPlayer()" [disabled]="!videoplayback.enableBtn">
<mat-icon>play_circle_filled</mat-icon>&nbsp; <mat-icon>play_circle_filled</mat-icon>&nbsp;
<strong>Play</strong> <strong>Play</strong>
</button> </button> -->
<!-- </span> --> <!-- </span> -->
<button *ngIf="master.fk_pd_type == '2' && master.vendor_status != null" mat-raised-button class="mr-1 mb-1" color="primary" matTooltip="Vendor Status" matTooltipPosition="above" style="cursor: not-allowed !important;background-color: #2699ce !important;"> <button *ngIf="master.fk_pd_type == '2' && master.vendor_status != null" mat-raised-button class="mr-1 mb-1" color="primary" matTooltip="Vendor Status" matTooltipPosition="above" style="cursor: not-allowed !important;background-color: #2699ce !important;">
<strong> {{master.vendor_status}}</strong> <strong> {{master.vendor_status}}</strong>
</button> </button>

View File

@ -24,6 +24,7 @@ import { VideoPlayerComponent } from 'app/video-chat/video-player/video-player.c
import { PdVisitTimeComponent } from '../pd-visit-time/pd-visit-time.component'; import { PdVisitTimeComponent } from '../pd-visit-time/pd-visit-time.component';
import { UploadVideoComponent } from 'app/quality-check/upload-video/upload-video.component'; import { UploadVideoComponent } from 'app/quality-check/upload-video/upload-video.component';
import { DecisionDialogComponent } from 'app/shared/decision-dialog/decision-dialog.component'; import { DecisionDialogComponent } from 'app/shared/decision-dialog/decision-dialog.component';
import { ImageVideoComponent } from 'app/personal-discussion/manage-pd/list-pd/view-pd/image-video/image-video.component';
@Component({ @Component({
selector: 'app-qc-view', selector: 'app-qc-view',
@ -384,8 +385,10 @@ export class QcViewComponent implements OnInit, OnDestroy {
}) })
} }
openCusImages() { openCusImages() {
let cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string+'/recapture';
const dialogRef = this.dialog.open(QcCusImagesComponent, { const dialogRef = this.dialog.open(QcCusImagesComponent, {
data: this.pdMasterData[0], data: {pdMasterData:this.pdMasterData[0],pdApplicantData:this.pdApplicantData[0],Link:cus_link},
// position: { right: '0'}, // position: { right: '0'},
maxWidth: '100vw', maxWidth: '100vw',
maxHeight: '100vh', maxHeight: '100vh',
@ -533,5 +536,24 @@ updateFieldVisitStatus(field_visit_done) {
} }
onClickVideoChat(master) {
let videoChatLink = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=1'
console.log(videoChatLink)
const dialogApplicant = this.dialog.open(ImageVideoComponent, {
data:{masterDetails:master,pd_id:this.viewID,random_string:this.masterRandomString,flag:2},
// position: { right: '0' },
maxWidth: '70vw',
maxHeight: '50vw',
height: '50%',
width: '70%',
disableClose: true
});
dialogApplicant.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.viewPdDetails(this.viewID,this.masterRandomString)
});
}
} }