[DEV] update umload progress

This commit is contained in:
Edouard DUPIN 2024-04-17 23:20:20 +02:00
parent 3aa7efac53
commit c6860586df
4 changed files with 57 additions and 48 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div> <div class="progress-bar" style="width:{{progress??0}}%">&nbsp;&nbsp;&nbsp;{{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>

View File

@ -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;
}
}