diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c4f9a44..70c5a83 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -93,6 +93,7 @@ import { UploadCardsComponent } from './upload-cards/upload-cards.component'; import {UploadInterceptor} from './lender-uploads/upload-status.interceptor'; import { UploadDetailComponent } from './upload-detail/upload-detail.component'; import {SafeUrlPipe} from './pipe/safe.url.pipe'; +import { ImagePopupDialogComponent } from './image-popup-dialog/image-popup-dialog.component'; @@ -155,7 +156,8 @@ import {SafeUrlPipe} from './pipe/safe.url.pipe'; ListIncomeComponent, UploadCardsComponent, UploadDetailComponent, - SafeUrlPipe + SafeUrlPipe, + ImagePopupDialogComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 4343ee4..53c8f57 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,7 +1,7 @@ .container.outer{ width:100%; max-width:100vw; - background: url('/assets/img/body_bg.jpg') no-repeat center center fixed; + background: url('./assets/img/body_bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; diff --git a/src/app/image-popup-dialog/image-popup-dialog.component.html b/src/app/image-popup-dialog/image-popup-dialog.component.html new file mode 100644 index 0000000..080670a --- /dev/null +++ b/src/app/image-popup-dialog/image-popup-dialog.component.html @@ -0,0 +1,18 @@ + +
+ +
+ + + + + + + + + + + diff --git a/src/app/image-popup-dialog/image-popup-dialog.component.scss b/src/app/image-popup-dialog/image-popup-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/image-popup-dialog/image-popup-dialog.component.spec.ts b/src/app/image-popup-dialog/image-popup-dialog.component.spec.ts new file mode 100644 index 0000000..e40f3ad --- /dev/null +++ b/src/app/image-popup-dialog/image-popup-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImagePopupDialogComponent } from './image-popup-dialog.component'; + +describe('ImagePopupDialogComponent', () => { + let component: ImagePopupDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ImagePopupDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ImagePopupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/image-popup-dialog/image-popup-dialog.component.ts b/src/app/image-popup-dialog/image-popup-dialog.component.ts new file mode 100644 index 0000000..c5bac76 --- /dev/null +++ b/src/app/image-popup-dialog/image-popup-dialog.component.ts @@ -0,0 +1,100 @@ +import {AfterViewInit, Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core'; + +@Component({ + selector: 'app-image-popup-dialog', + templateUrl: './image-popup-dialog.component.html', + styleUrls: ['./image-popup-dialog.component.scss'] +}) +export class ImagePopupDialogComponent implements OnInit{ + @Input() url = ''; + @Input() title = 'Image'; + @ViewChild('content', { read: ElementRef }) img: ElementRef; + public opened = false; + public imgWidthPercent = 1; + public iWidth = 100; + public imgOriginalWidth = 0; + public imgOriginalHeight = 0; + public imageLoaded = false; + public scrHeight = 0; + public scrWidth = 0; + public dialogWidth = 0 ; + public margin = 32; // dialog margin; + constructor() { } + + ngOnInit(): void { + this.getScreenSize(); + this.initDialogWidth(); + } + + + @HostListener('window:resize', ['$event']) + getScreenSize(event?): void { + this.scrHeight = window.innerHeight; + this.scrWidth = window.innerWidth; + this.dialogWidth = 200; // this.scrWidth; + // console.log(this.scrHeight, this.scrWidth); + // console.log(this.scrHeight, this.scrWidth); + } + + public showImg(url: string, title?: string): void { + this.initDialogWidth(); + this.title = title || 'Image'; + const ts = Date.now(); + this.url = url + '?date=' + ts; + this.opened = true; + } + + private initDialogWidth(): void { + this.imageLoaded = false; + this.dialogWidth = 200; + this.iWidth = this.dialogWidth - this.margin; + } + + public close(status: string): void { + this.opened = false; + } + + public zoom(diff: number): void { + this.imgWidthPercent += diff; + if (this.imgWidthPercent < 0.05) { + this.imgWidthPercent = 0.05; + } + if (this.imgWidthPercent > 3){ + this.imgWidthPercent = 3; + } + this.resizeWindow(); + } + + public originalSize(): void { + this.imgWidthPercent = 1; + this.resizeWindow(); + } + + private resizeWindow(): void { + this.iWidth = this.imgOriginalWidth * this.imgWidthPercent; + const margin = this.margin; // the default dialog padding + if (this.iWidth + margin <= this.scrWidth) { + this.dialogWidth = this.iWidth + margin; + }else{ + this.dialogWidth = this.scrWidth; + } + + console.log(this.img.nativeElement.naturalWidth, this.img.nativeElement.naturalHeight, + this.img.nativeElement.width, this.img.nativeElement.height, this.iWidth, this.imgWidthPercent); + + } + + public onLoad(): void { + this.imageLoaded = true; + this.imgOriginalWidth = this.img.nativeElement.naturalWidth; + this.imgOriginalHeight = this.img.nativeElement.naturalHeight; + if ( this.imgOriginalWidth > this.scrWidth) { + this.iWidth = this.scrWidth - this.margin; + }else{ + this.iWidth = this.imgOriginalWidth; + } + this.imgWidthPercent = this.iWidth / this.imgOriginalWidth; + this.resizeWindow(); + } + +} diff --git a/src/app/lender-uploads/lender-uploads.component.html b/src/app/lender-uploads/lender-uploads.component.html index 1b53e97..9b59579 100644 --- a/src/app/lender-uploads/lender-uploads.component.html +++ b/src/app/lender-uploads/lender-uploads.component.html @@ -8,7 +8,7 @@ (uploadProgress)="uploadProgress($event)" [showFileList]="false" [saveUrl]="uploadSaveUrl"> - +
Name: {{ files[0].name }}
Cannot upload this file {{files[0]}}
@@ -24,11 +24,16 @@
-
-
+
+
+
+
+ +
+
@@ -41,6 +46,4 @@ (pageChange)="onPageChange($event)"> - -
diff --git a/src/app/lender-uploads/lender-uploads.component.scss b/src/app/lender-uploads/lender-uploads.component.scss index 91f2ddf..afa4c33 100644 --- a/src/app/lender-uploads/lender-uploads.component.scss +++ b/src/app/lender-uploads/lender-uploads.component.scss @@ -3,6 +3,11 @@ div.workarea{ position:relative; background-color: #46495b; overflow: scroll; + + div.row div.loader{ + top: 45%; + position:absolute; + } } div.file-manager-bar{ diff --git a/src/app/lender-uploads/lender-uploads.component.ts b/src/app/lender-uploads/lender-uploads.component.ts index 25c53a3..3cd73de 100644 --- a/src/app/lender-uploads/lender-uploads.component.ts +++ b/src/app/lender-uploads/lender-uploads.component.ts @@ -4,6 +4,8 @@ import {AuthService} from '../service/auth.service'; import {range} from '@progress/kendo-angular-dateinputs/dist/es2015/util'; import {Router} from '@angular/router'; import {PageChangeEvent} from '@progress/kendo-angular-pager'; +import {ImagePopupDialogComponent} from '../image-popup-dialog/image-popup-dialog.component'; +import {UploadAttachService} from '../service/upload.attach.service'; @Component({ selector: 'app-lender-uploads', @@ -20,6 +22,7 @@ export class LenderUploadsComponent implements OnInit { private uploads: SuccessEvent[] = []; public value = 0 ; public map: Map = new Map(); + public loading = false; uploadSaveUrl = 'https://svr2021.lawipac.com:8080/api/v1/lender-upload/'; // should represent an actual API endpoint uploadRemoveUrl = 'https://svr2021.lawipac.com:8080/api/v1/lender-upload-remove/'; // should represent an actual API endpoint @@ -37,7 +40,7 @@ export class LenderUploadsComponent implements OnInit { allowedExtensions: ['.pdf', '.xls', '.xlsx'] }; - constructor(private auth: AuthService, private router: Router) { + constructor(private auth: AuthService, private router: Router, private uas: UploadAttachService) { } @@ -45,6 +48,7 @@ export class LenderUploadsComponent implements OnInit { this.uploadSaveUrl = this.auth.getUrl('lender-upload/'); this.uploadRemoveUrl = this.auth.getUrl('lender-upload-remove/'); this.loadDisplayedUploads(); + } @@ -97,9 +101,22 @@ export class LenderUploadsComponent implements OnInit { this.filteredUploads = this.allUploads ; this.displayedUploads = this.filteredUploads.slice(this.skip, this.skip + this.pageSize); this.total = this.displayedUploads.length; + + } + + private loadAllUploads(): void{ + this.loading = true; + // this.uas.getUploadMetaList(this.skip, this.skip + this.pageSize).subscribe( + // resp => { + // this.loading = false; + // } + // ); + } public onFilterUploads(hint: string): void { this.loadDisplayedUploads(); } + + } diff --git a/src/app/models/analysis.aaa.model.ts b/src/app/models/analysis.aaa.model.ts new file mode 100644 index 0000000..c427a95 --- /dev/null +++ b/src/app/models/analysis.aaa.model.ts @@ -0,0 +1,19 @@ + +export class AnalysisAaaModel { + Year: number; + Month: number; + LoanNumber: string; + Settlement: Date; + LoanAmount: number; + Balance: number; + InTrail: number; + constructor(payload: Partial) { + this.Year = payload.Year || 0; + this.Month = payload.Month || 0; + this.LoanNumber = payload.LoanNumber || ''; + this.Settlement = new Date(payload.Settlement); + this.LoanAmount = payload.LoanAmount || 0; + this.Balance = payload.Balance || 0; + this.InTrail = payload.Year || 0; + } +} diff --git a/src/app/models/upload.analysis.model.ts b/src/app/models/upload.analysis.model.ts index dcce060..d692dbd 100644 --- a/src/app/models/upload.analysis.model.ts +++ b/src/app/models/upload.analysis.model.ts @@ -1,7 +1,7 @@ -import {UploadModel} from './upload.model'; +import {UploadMetaModel} from './uploadMetaModel'; import {PayInModel} from './pay-in.model'; import {FunderAaaTrailModel} from './funder.aaa.trail.model'; -import {PayInAAARowModel} from './Pay.In.AAA.Row.model'; + export class UploadAnalysisModel { public Id: number; @@ -13,7 +13,7 @@ export class UploadAnalysisModel { public IsDuplicate: boolean; public Uid?: string; // client side unique id when upload - public Input?: UploadModel; + public Input?: UploadMetaModel; constructor(payload: Partial){ this.Id = payload.Id || 0 ; @@ -44,7 +44,7 @@ export class UploadAnalysisModel { this.IsDuplicate = payload.IsDuplicate || false; this.Uid = payload.Uid || '' ; - this.Input = new UploadModel(payload.Input || {}); + this.Input = new UploadMetaModel(payload.Input || {}); } } diff --git a/src/app/models/upload.model.ts b/src/app/models/uploadMetaModel.ts similarity index 62% rename from src/app/models/upload.model.ts rename to src/app/models/uploadMetaModel.ts index 0cb33f1..4dbe464 100644 --- a/src/app/models/upload.model.ts +++ b/src/app/models/uploadMetaModel.ts @@ -1,7 +1,7 @@ -export class UploadModel { +export class UploadMetaModel { public Id: number; - public Mime: string; + public Format: string; public FileName: string; public Ts: Date; public By: string; @@ -9,9 +9,9 @@ export class UploadModel { public Size: number; public Sha256: string; - constructor(payload: Partial) { + constructor(payload: Partial) { this.Id = payload.Id || 0; - this.Mime = payload.Mime || ''; + this.Format = payload.Format || ''; this.FileName = payload.FileName || ''; this.Ts = new Date (payload.Ts || new Date()); this.By = payload.By || ''; @@ -19,4 +19,9 @@ export class UploadModel { this.Size = payload.Size || 0; this.Sha256 = payload.Sha256 || ''; } + + get iconUrl(): string { + const t = this.Format.replace( '/', '-'); + return location.origin +'/assets/img/mime/' + t + '.png'; + } } diff --git a/src/app/service/upload.attach.service.ts b/src/app/service/upload.attach.service.ts index a5c58f0..691a014 100644 --- a/src/app/service/upload.attach.service.ts +++ b/src/app/service/upload.attach.service.ts @@ -2,7 +2,7 @@ import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {AuthService} from './auth.service'; import {Observable} from 'rxjs'; -import {UploadModel} from '../models/upload.model'; +import {UploadMetaModel} from '../models/uploadMetaModel'; import {UploadAnalysisModel} from '../models/upload.analysis.model'; @@ -11,8 +11,8 @@ export class UploadAttachService { constructor(private http: HttpClient, private auth: AuthService) { } - public getUploadMeta(id: number): Observable { - return this.http.get(this.auth.getUrl('upload-meta/' + id)); + public getUploadMeta(id: number): Observable { + return this.http.get(this.auth.getUrl('upload-meta/' + id)); } public getUploadAnalysis(id: number): Observable { @@ -20,13 +20,23 @@ export class UploadAttachService { } public getUploadAsJpgUrl(id: number): string { - return this.auth.getUrl('upload-as-image/' + id); + const ts = Date.now(); + return this.auth.getUrl('upload-as-image/' + id + '?date=' + ts); + } + + public getUploadAsJpgUrlDefault(): string { + return this.auth.getUrl('upload-as-image/default'); } public getUploadAsPdfUrl(id: number): string { const ts = Date.now(); return this.auth.getUrl('upload-as-pdf/' + id + '?date=' + ts); } + public getUploadAsPdfUrlDefault(): string { + const ts = Date.now(); + return this.auth.getUrl('upload-as-pdf/default' + '?date=' + ts); + } + public getUploadAsPdfUrlForDownload(id: number): string { return this.auth.getUrl('upload-as-pdf/' + id + '?download=force'); } diff --git a/src/app/upload-cards/upload-cards.component.html b/src/app/upload-cards/upload-cards.component.html index 33ab9bc..622d45a 100644 --- a/src/app/upload-cards/upload-cards.component.html +++ b/src/app/upload-cards/upload-cards.component.html @@ -1,6 +1,6 @@
-
- +
+

some title

@@ -17,6 +17,6 @@ - -
+ + diff --git a/src/app/upload-cards/upload-cards.component.scss b/src/app/upload-cards/upload-cards.component.scss index 6e1770f..2be2a11 100644 --- a/src/app/upload-cards/upload-cards.component.scss +++ b/src/app/upload-cards/upload-cards.component.scss @@ -32,18 +32,17 @@ div.card-wrapper{ } .file-type-image{ width: 32px; - border-radius:100%; + // border-radius:100%; background-repeat: no-repeat; background-size: cover; - border:1px white solid; - box-shadow: inset 1px 1px 0 #b7b7b7; + // border:1px white solid; + // box-shadow: inset 1px 1px 0 #b7b7b7; z-index: 2; - width: 32px; height: 32px; position: absolute; margin-right: 10px; - right : 30px; + left : 160px; top: 20px; } diff --git a/src/app/upload-cards/upload-cards.component.ts b/src/app/upload-cards/upload-cards.component.ts index 5ea6fd2..b8799d6 100644 --- a/src/app/upload-cards/upload-cards.component.ts +++ b/src/app/upload-cards/upload-cards.component.ts @@ -1,5 +1,11 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; import {Router} from '@angular/router'; +import {ImagePopupDialogComponent} from '../image-popup-dialog/image-popup-dialog.component'; +import {AuthService} from '../service/auth.service'; +import {UploadMetaModel} from '../models/uploadMetaModel'; +import {UploadAttachService} from '../service/upload.attach.service'; + + @Component({ selector: 'app-upload-cards', @@ -8,13 +14,25 @@ import {Router} from '@angular/router'; }) export class UploadCardsComponent implements OnInit { @Input() uploadId: number; + @Input() icon = '../../assets/img/pdf.jpg'; + @ViewChild('imgBox', {static: true}) imgBox: ImagePopupDialogComponent; + public uploadMeta: UploadMetaModel = new UploadMetaModel({}); - public thumbImage = 'url(https://svr2021.lawipac.com:8080/api/v1/upload-as-thumbnail/31)'; + public thumbImage = 'https://svr2021.lawipac.com:8080/api/v1/upload-as-thumbnail/31'; + public fullImage = ''; - constructor(private router: Router) { } + constructor(private router: Router, private auth: AuthService, private uas: UploadAttachService) { } ngOnInit(): void { - this.thumbImage = 'url(https://svr2021.lawipac.com:8080/api/v1/upload-as-thumbnail/' + this.uploadId + ')'; + let url = this.auth.getUrl('upload-as-thumbnail/' + this.uploadId); + this.thumbImage = url ; + url = this.auth.getUrl('upload-as-image/' + this.uploadId); + this.fullImage = url; + + this.uas.getUploadMeta(this.uploadId).subscribe( resp => { + this.uploadMeta = new UploadMetaModel(resp); + this.icon = this.uploadMeta.iconUrl; + }); } public onNavigateTo(id: number ): void{ @@ -24,6 +42,12 @@ export class UploadCardsComponent implements OnInit { this.router.navigate(['/upload-details/' + id]); } public onSearch(id: number ): void{ - this.router.navigate(['/upload-details/' + id]); + this.popupImage(this.fullImage); + // this.popupImage(this.thumbImage); } + + public popupImage(url: string): void { + this.imgBox.showImg(url, this.uploadId + ' - ' + this.uploadMeta.FileName); + } + } diff --git a/src/app/upload-detail/upload-detail.component.html b/src/app/upload-detail/upload-detail.component.html index b51a79d..04876ca 100644 --- a/src/app/upload-detail/upload-detail.component.html +++ b/src/app/upload-detail/upload-detail.component.html @@ -1,57 +1,100 @@
- - - -
-
- -
-
- - - - - -
-
- - -
-
- - - - - -
-
-
- - -
-
-

{{ ua.Input.FileName }}

-

{{ ua.Input.Id }}

- - - - - - - - + + +
+ + + +
+
+ +
+
+ +
+
+ + + + + +
+
+ + +
+
+ + + + + +
+
+ +
+
+
+
+
+ +
+
+
+ + + {{ua.Funder }} + +   Show Uploads   + + + + + + + + + +
+ +
+
+ + + + + +
+ + + +
+

Outer splitter / Bottom pane

+

Non-resizable and non-collapsible.

+
+ + + + + +
+ + + diff --git a/src/app/upload-detail/upload-detail.component.scss b/src/app/upload-detail/upload-detail.component.scss index f3d957b..b4a61b3 100644 --- a/src/app/upload-detail/upload-detail.component.scss +++ b/src/app/upload-detail/upload-detail.component.scss @@ -5,6 +5,13 @@ div.workspace { height: calc(100vh - 48px); overflow: hidden; + kendo-splitter { + height:100%; + .pane-content{ + height:100%; + } + } + } .fullheight-tab{ @@ -21,6 +28,11 @@ div.workspace { overflow: hidden; position:relative; + &.preview{ + height: unset; + min-height: 100%; + } + .main-content, .main-image-content{ position:relative; @@ -34,7 +46,7 @@ div.workspace { .main-image-content{ display:block; text-align: center; - overflow: scroll; + margin-bottom: 30px; img { width:100%; } @@ -72,11 +84,14 @@ div.workspace { transition: all 0.1s ease-in-out; } +} +kendo-floatingactionbutton { + width: 52px; } .init-fab{ - top : -10px !important; + top : 50vh !important; transition: all 1s ease-in-out; } @@ -86,24 +101,87 @@ div.workspace { } div.overlay { - height: 10%; - background-color: black; + height: 100px; + background-color: #19c7ef; opacity: 0.5; z-index: 10; - position: absolute; width: 100%; + background-image: url('../../assets/img/scanbar.gif'); + background-size: cover; + background-repeat: no-repeat; + position: absolute; + top:20px; + background-blend-mode: color; // for background image + mix-blend-mode: hard-light; // for background } + .scanning{ - animation: scanning 1s infinite; + animation: scanning 3s infinite; +} + +.image-not-loaded{ + top: 100vh; +} +.image-loaded{ + top: 0; } @keyframes scanning { 50% { - transform: translateY(80vh); + transform: translateY(100vh); } } +@keyframes shrinking { + 50% { + height: 10px; + background-color: yellow; + } +} + + .fade-out { opacity: 0; transition: all 0.5s ease-out; } + +.blink_me { + animation: blinker 1s linear infinite; +} + +.red-scan-line{ + color: red; + width: 100%; + border-top: 3px solid red; + box-shadow: 1px 1px 10px red; + animation: blinker 0.1s linear infinite; + position: absolute; + top: 80%; +} +@keyframes blinker { + 50% { + opacity: 0.1; + } +} + +.scanning > .red-scan-line { + animation: top-down 3s infinite; +} + +@keyframes top-down { + 0% { top:80%;} + 49% { top:80%; } + 50% { top: 0; } + 99% { top: 0; } + 100%{ top: 80%;} +} + + +div.analysis-result{ + height: 100%; + width: 100%; + background-color: lightgoldenrodyellow; + kendo-grid{ + height: 100%; + } +} diff --git a/src/app/upload-detail/upload-detail.component.ts b/src/app/upload-detail/upload-detail.component.ts index 101a018..70087f6 100644 --- a/src/app/upload-detail/upload-detail.component.ts +++ b/src/app/upload-detail/upload-detail.component.ts @@ -1,10 +1,11 @@ -import {Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'; +import {AfterViewChecked, AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {UploadAttachService} from '../service/upload.attach.service'; import {UploadAnalysisModel} from '../models/upload.analysis.model'; -import {UploadModel} from '../models/upload.model'; +import {UploadMetaModel} from '../models/uploadMetaModel'; import {FloatingActionButtonComponent} from '@progress/kendo-angular-buttons'; -import {DrawerSelectEvent} from '@progress/kendo-angular-layout'; +import {DrawerSelectEvent, TabStripComponent} from '@progress/kendo-angular-layout'; +import {AnalysisAaaModel} from '../models/analysis.aaa.model'; @@ -13,18 +14,34 @@ import {DrawerSelectEvent} from '@progress/kendo-angular-layout'; templateUrl: './upload-detail.component.html', styleUrls: ['./upload-detail.component.scss'] }) -export class UploadDetailComponent implements OnInit { +export class UploadDetailComponent implements OnInit, AfterViewInit { @Input() uploadId: number; @Input() ua: UploadAnalysisModel = new UploadAnalysisModel({}); @ViewChild('fab', {static: true}) fab: FloatingActionButtonComponent; @ViewChild('pdf', {static: false}) pdf: ElementRef; + @ViewChild('tabs', {static: true}) tab: TabStripComponent; // 'http://africau.edu/images/default/sample.pdf'; public uploadAsPicUrl = 'https://svr2021.lawipac.com:8080/api/v1/upload-as-pdf/default'; public uploadAsPdfUrl = ''; public initAnimation = false; public iframeLoaded = false; public scanning = false; - public scandone = false; + public scanDone = false; + public analysisIsDone = false; + + public ScanImgLoaded = false; + public PreviewImgLoaded = false; + + public resizeSplitter = false; + public PayInSize = '300px'; + public fabOffset = { x: '10px', y: this.PayInSize }; + + @Input() public currentTab = 0; + public tabText: string[] = ['Preview', 'Content', 'Analysis']; + public tabTitle: string[] = this.tabText; + + public analysisAAA: AnalysisAaaModel[] = []; + constructor(private us: UploadAttachService, private actRoute: ActivatedRoute, private router: Router) { } ngOnInit(): void { @@ -40,29 +57,60 @@ export class UploadDetailComponent implements OnInit { } this.loadUploadMeta(); - // this.loadUploadAnalysis(); - // this.fabOffset = { y : '-1px' }; this.fabSlideIn(); + // this.changeTabTitle(); + + // this.currentTab=2; + + setTimeout(() => { + this.resizeSplitter = true; + }, 2000); + } + + ngAfterViewInit(): void { + setTimeout(() => { // if I don't use this, it complains value has been changed after being checked. + this.tab.selectTab(this.currentTab); + }, 100); } private loadUploadAnalysis(): void { + this.analysisIsDone = false; this.us.getUploadAnalysis(this.uploadId).subscribe( resp => { - this.scandone = true; - this.scanning = false; - this.ua = new UploadAnalysisModel(resp); - this.uploadId = this.ua.Id; + this.ua = new UploadAnalysisModel(resp); + // this.TranslateForDisplay() // TODO: use database for this structure + this.uploadId = this.ua.Id; + this.analysisIsDone = true; + }, err => { + this.analysisIsDone = true; + }, () => { + this.analysisIsDone = true; } ); } private loadUploadMeta(): void { this.us.getUploadMeta(this.uploadId).subscribe( resp => { - this.ua.Input = new UploadModel(resp); + this.ua.Input = new UploadMetaModel(resp); } ); } + private startScanningUI(): void { + this.resizeSplitter = false; + this.scanning = true; + let count = 0; + const t = setInterval(() => { + count ++; + if (count > 30 && this.analysisIsDone) { // 30 should be in sync with scss 3s + this.scanDone = true; + this.scanning = false; + this.resizeSplitter = true; + clearInterval(t); + } + }, 100); + } + private fabSlideIn(): void { setTimeout(() => {this.initAnimation = true; }, 1000); } @@ -72,24 +120,53 @@ export class UploadDetailComponent implements OnInit { } public finishedLoading(status: string ): void{ - if ( this.pdf === undefined ) { + if (this.pdf === undefined) { return; } - const el = this.pdf.nativeElement; - if ( el !== undefined && el.src === this.uploadAsPdfUrl) { - console.log('yes true',this); - this.iframeLoaded = true; - } + const el = this.pdf.nativeElement; + if (el !== undefined && el.src === this.uploadAsPdfUrl) { + console.log('yes true', this); + this.iframeLoaded = true; + } } public onTabSelect( select: DrawerSelectEvent): void { - if ( select.index === 2 && ! this.iframeLoaded ) { - select.preventDefault(); - return; - } - if ( ! this.scandone ) { - this.scanning = true; + this.currentTab = select.index; + this.changeTabTitle(); + if ( select.index === 2 && ! this.scanDone ) { this.loadUploadAnalysis(); } + } + + private changeTabTitle(): void { + this.tabTitle = []; + for ( let i = 0; i < this.tabText.length; i++ ) { + if ( i === this.currentTab ){ + this.tabTitle[i] = '☒ ' + this.tabText[i]; + }else{ + this.tabTitle[i] = '☐ ' + this.tabText[i]; + } + } + } + + public onImgPreviewLoaded(): void { + this.PreviewImgLoaded = true; + } + + public onImgScanLoaded(): void { + this.ScanImgLoaded = true; + this.startScanningUI(); + } + + + + public onPayInCollapsed( closed: boolean): void { + console.log(this); + this.resizeSplitter = !closed; + return ; + } + public onPayInSizeChange(s: string): void { + this.resizeSplitter = true; + this.fabOffset = {x: '10px', y: s}; } } diff --git a/src/assets/img/bg-admin-card.jpg b/src/assets/img/bg/bg-admin-card.jpg similarity index 100% rename from src/assets/img/bg-admin-card.jpg rename to src/assets/img/bg/bg-admin-card.jpg diff --git a/src/assets/img/bg-broker-card.jpg b/src/assets/img/bg/bg-broker-card.jpg similarity index 100% rename from src/assets/img/bg-broker-card.jpg rename to src/assets/img/bg/bg-broker-card.jpg diff --git a/src/assets/img/bg-client-card.jpg b/src/assets/img/bg/bg-client-card.jpg similarity index 100% rename from src/assets/img/bg-client-card.jpg rename to src/assets/img/bg/bg-client-card.jpg diff --git a/src/assets/img/bg-disabled-card.jpg b/src/assets/img/bg/bg-disabled-card.jpg similarity index 100% rename from src/assets/img/bg-disabled-card.jpg rename to src/assets/img/bg/bg-disabled-card.jpg diff --git a/src/assets/img/bg-settings.jpg b/src/assets/img/bg/bg-settings.jpg similarity index 100% rename from src/assets/img/bg-settings.jpg rename to src/assets/img/bg/bg-settings.jpg diff --git a/src/assets/img/bg-user-card.jpg b/src/assets/img/bg/bg-user-card.jpg similarity index 100% rename from src/assets/img/bg-user-card.jpg rename to src/assets/img/bg/bg-user-card.jpg diff --git a/src/assets/img/emoji/shy.png b/src/assets/img/emoji/shy.png new file mode 100644 index 0000000..33fb352 Binary files /dev/null and b/src/assets/img/emoji/shy.png differ diff --git a/src/assets/img/mime/application-pdf.png b/src/assets/img/mime/application-pdf.png new file mode 100644 index 0000000..e9fbafd Binary files /dev/null and b/src/assets/img/mime/application-pdf.png differ diff --git a/src/assets/img/mime/application-vnd.ms-excel.png b/src/assets/img/mime/application-vnd.ms-excel.png new file mode 100644 index 0000000..ebf0d74 Binary files /dev/null and b/src/assets/img/mime/application-vnd.ms-excel.png differ diff --git a/src/assets/img/mime/application-vnd.openxmlformats-officedocument.spreadsheetml.sheet.png b/src/assets/img/mime/application-vnd.openxmlformats-officedocument.spreadsheetml.sheet.png new file mode 100644 index 0000000..cdca7ad Binary files /dev/null and b/src/assets/img/mime/application-vnd.openxmlformats-officedocument.spreadsheetml.sheet.png differ diff --git a/src/assets/img/scanbar.gif b/src/assets/img/scanbar.gif new file mode 100644 index 0000000..4e0ecf3 Binary files /dev/null and b/src/assets/img/scanbar.gif differ