[DEV] update umload progress
This commit is contained in:
parent
3aa7efac53
commit
c6860586df
@ -3,7 +3,7 @@
|
|||||||
<div class="element {{popSize}}">
|
<div class="element {{popSize}}">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<label class="unselectable">{{popTitle}}</label>
|
<label class="unselectable">{{popTitle}}</label>
|
||||||
@if(closeTopRight === true) {
|
@if(closeTopRight) {
|
||||||
<div class="close">
|
<div class="close">
|
||||||
<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
|
<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
|
||||||
<label class="unselectable"><i class="material-icons">close</i></label>
|
<label class="unselectable"><i class="material-icons">close</i></label>
|
||||||
@ -15,28 +15,28 @@
|
|||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
@if(validateTitle !== null) {
|
@if(validateTitle) {
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button class="button color-shadow-black" (click)="onValidate()" type="submit">
|
<button class="button color-shadow-black" (click)="onValidate()" type="submit">
|
||||||
<label class="unselectable"><i class="material-icons">done</i> {{validateTitle}}</label>
|
<label class="unselectable"><i class="material-icons">done</i> {{validateTitle}}</label>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@if(saveTitle != null) {
|
@if(saveTitle) {
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button class="button color-shadow-black" (click)="onSave()" type="submit">
|
<button class="button color-shadow-black" (click)="onSave()" type="submit">
|
||||||
<label class="unselectable"><i class="material-icons">save_alt</i> {{saveTitle}}</label>
|
<label class="unselectable"><i class="material-icons">save_alt</i> {{saveTitle}}</label>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@if(otherTitle != null) {
|
@if(otherTitle) {
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button class="button color-shadow-black" (click)="onOther()" type="submit">
|
<button class="button color-shadow-black" (click)="onOther()" type="submit">
|
||||||
<label class="unselectable"><i class="material-icons">star</i> {{otherTitle}}</label>
|
<label class="unselectable"><i class="material-icons">star</i> {{otherTitle}}</label>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@if(closeTitle != null) {
|
@if(closeTitle) {
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button class="button color-shadow-black" (click)="onClose()" type="submit">
|
<button class="button color-shadow-black" (click)="onClose()" type="submit">
|
||||||
<label class="unselectable"><i class="material-icons">close</i> {{closeTitle}}</label>
|
<label class="unselectable"><i class="material-icons">close</i> {{closeTitle}}</label>
|
||||||
|
@ -21,10 +21,10 @@ export class PopInComponent implements OnInit, OnDestroy {
|
|||||||
@Input() popSize: string = 'medium';
|
@Input() popSize: string = 'medium';
|
||||||
|
|
||||||
@Output() callback: EventEmitter<any> = new EventEmitter();
|
@Output() callback: EventEmitter<any> = new EventEmitter();
|
||||||
@Input() closeTitle: any = null;
|
@Input() closeTitle?: string;
|
||||||
@Input() validateTitle: any = null;
|
@Input() validateTitle?: string;
|
||||||
@Input() saveTitle: any = null;
|
@Input() saveTitle?: string;
|
||||||
@Input() otherTitle: any = null;
|
@Input() otherTitle?: string;
|
||||||
|
|
||||||
public displayPopIn: boolean = false;
|
public displayPopIn: boolean = false;
|
||||||
|
|
||||||
|
@ -10,35 +10,33 @@
|
|||||||
<p class="expand">
|
<p class="expand">
|
||||||
<label class="unselectable"><b>{{mediaTitle}}</b></label>
|
<label class="unselectable"><b>{{mediaTitle}}</b></label>
|
||||||
</p>
|
</p>
|
||||||
@if(progress != 100) {
|
@if(error) {
|
||||||
|
<div>
|
||||||
|
<label class="unselectable"><b>Get an error From the server:</b></label
|
||||||
|
><br />
|
||||||
|
<label class="unselectable">{{error}}</label>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
@else if(progress != 100) {
|
||||||
<div class="progress-back">
|
<div class="progress-back">
|
||||||
<div class="progress-bar" style="width:{{progress}}%"> {{progress}}%</div>
|
<div class="progress-bar" style="width:{{progress??0}}%"> {{progress}}%</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="unselectable">Upload:</label><label style="text-align: right">{{uploadDisplay}}</label><br />
|
<label class="unselectable">Upload:</label><label style="text-align: right">{{uploadDisplay}}</label><br />
|
||||||
<label class="unselectable">Size:</label><label style="text-align: right">{{sizeDisplay}}</label>
|
<label class="unselectable">Size:</label><label style="text-align: right">{{sizeDisplay}}</label>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@else if (error == null && result == null) {
|
@else if(result) {
|
||||||
|
<div>
|
||||||
|
<label class="unselectable"><b>Upload finished:</b></label
|
||||||
|
><br />
|
||||||
|
<label class="unselectable">{{result}}</label>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
@else {
|
||||||
<div>
|
<div>
|
||||||
<label class="unselectable">Upload done ... waiting server answer</label>
|
<label class="unselectable">Upload done ... waiting server answer</label>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@else {
|
|
||||||
@if(error != null) {
|
|
||||||
<div>
|
|
||||||
<label class="unselectable"><b>Get an error From the server:</b></label
|
|
||||||
><br />
|
|
||||||
<label class="unselectable">{{error}}</label>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@if(result != null) {
|
|
||||||
<div>
|
|
||||||
<label class="unselectable"><b>Upload finished:</b></label
|
|
||||||
><br />
|
|
||||||
<label class="unselectable">{{result}}</label>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</app-popin>
|
</app-popin>
|
||||||
</div>
|
</div>
|
||||||
|
@ -4,9 +4,28 @@
|
|||||||
* @license PROPRIETARY (see license file)
|
* @license PROPRIETARY (see license file)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
|
import { Component, OnInit, Input, SimpleChanges, EventEmitter, Output } from '@angular/core';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
import { PopInService } from '../../service';
|
import { PopInService } from '../../service';
|
||||||
|
import { isNullOrUndefined } from '../../utils';
|
||||||
|
|
||||||
|
|
||||||
|
export class UploadProgress {
|
||||||
|
labelMediaTitle: string = '';
|
||||||
|
mediaSendSize: number = 0;
|
||||||
|
mediaSize: number = 99999999999999;
|
||||||
|
result?: string;
|
||||||
|
error?: string;
|
||||||
|
clear() {
|
||||||
|
this.labelMediaTitle = '';
|
||||||
|
this.mediaSendSize = 0;
|
||||||
|
this.mediaSize = 99999999999999;
|
||||||
|
this.result = undefined;
|
||||||
|
this.error = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'upload-progress',
|
selector: 'upload-progress',
|
||||||
@ -19,6 +38,7 @@ export class PopInUploadProgress implements OnInit {
|
|||||||
@Input() mediaSize: number = 999999999999;
|
@Input() mediaSize: number = 999999999999;
|
||||||
@Input() result?: string;
|
@Input() result?: string;
|
||||||
@Input() error?: string;
|
@Input() error?: string;
|
||||||
|
@Output() abort: EventEmitter<void> = new EventEmitter();
|
||||||
public closeButtonTitle?: string = 'Abort';
|
public closeButtonTitle?: string = 'Abort';
|
||||||
public otherButtonTitle?: string;
|
public otherButtonTitle?: string;
|
||||||
public validateButtonTitle?: string;
|
public validateButtonTitle?: string;
|
||||||
@ -29,8 +49,14 @@ export class PopInUploadProgress implements OnInit {
|
|||||||
OnDestroy() { }
|
OnDestroy() { }
|
||||||
ngOnInit() { }
|
ngOnInit() { }
|
||||||
eventPopUp(_event: string): void {
|
eventPopUp(_event: string): void {
|
||||||
console.log(`GET event: ${_event}`);
|
if (_event == "close") {
|
||||||
this.popInService.close('popin-upload-progress');
|
if (this.abort) {
|
||||||
|
this.abort.emit();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(`GET event: ${_event}`);
|
||||||
|
this.popInService.close('popin-upload-progress');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
updateNeedSend(): void { }
|
updateNeedSend(): void { }
|
||||||
|
|
||||||
@ -80,11 +106,11 @@ export class PopInUploadProgress implements OnInit {
|
|||||||
this.progress = Math.trunc((this.mediaUploaded * 100) / this.mediaSize);
|
this.progress = Math.trunc((this.mediaUploaded * 100) / this.mediaSize);
|
||||||
this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
|
this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
|
||||||
this.sizeDisplay = this.convertInHuman(this.mediaSize);
|
this.sizeDisplay = this.convertInHuman(this.mediaSize);
|
||||||
if (this.error === null && this.result === null) {
|
if (isNullOrUndefined(this.error) && isNullOrUndefined(this.result)) {
|
||||||
this.closeButtonTitle = 'Abort';
|
this.closeButtonTitle = 'Abort';
|
||||||
this.otherButtonTitle = undefined;
|
this.otherButtonTitle = undefined;
|
||||||
this.validateButtonTitle = undefined;
|
this.validateButtonTitle = undefined;
|
||||||
} else if (this.result === null) {
|
} else if (isNullOrUndefined(this.result)) {
|
||||||
this.closeButtonTitle = undefined;
|
this.closeButtonTitle = undefined;
|
||||||
this.otherButtonTitle = 'Close';
|
this.otherButtonTitle = 'Close';
|
||||||
this.validateButtonTitle = undefined;
|
this.validateButtonTitle = undefined;
|
||||||
@ -95,18 +121,3 @@ export class PopInUploadProgress implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class UploadProgress {
|
|
||||||
labelMediaTitle: string = '';
|
|
||||||
mediaSendSize: number = 0;
|
|
||||||
mediaSize: number = 99999999999999;
|
|
||||||
result?: string;
|
|
||||||
error?: string;
|
|
||||||
clear() {
|
|
||||||
this.labelMediaTitle = '';
|
|
||||||
this.mediaSendSize = 0;
|
|
||||||
this.mediaSize = 99999999999999;
|
|
||||||
this.result = undefined;
|
|
||||||
this.error = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user