kangaroo-and-rabbit/kar-cw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[DEV] update umload progress

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/component/popin/popin.html
View File

@ -3,7 +3,7 @@
<div class="element {{popSize}}">
<div class="header">
<label class="unselectable">{{popTitle}}</label>
@if(closeTopRight === true) {
@if(closeTopRight) {
<div class="close">
<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
<label class="unselectable"><i class="material-icons">close</i></label>
@ -15,28 +15,28 @@
<ng-content></ng-content>
</div>
<div class="footer">
@if(validateTitle !== null) {
@if(validateTitle) {
<div class="action">
<button class="button color-shadow-black" (click)="onValidate()" type="submit">
<label class="unselectable"><i class="material-icons">done</i> {{validateTitle}}</label>
</button>
</div>
}
@if(saveTitle != null) {
@if(saveTitle) {
<div class="action">
<button class="button color-shadow-black" (click)="onSave()" type="submit">
<label class="unselectable"><i class="material-icons">save_alt</i> {{saveTitle}}</label>
</button>
</div>
}
@if(otherTitle != null) {
@if(otherTitle) {
<div class="action">
<button class="button color-shadow-black" (click)="onOther()" type="submit">
<label class="unselectable"><i class="material-icons">star</i> {{otherTitle}}</label>
</button>
</div>
}
@if(closeTitle != null) {
@if(closeTitle) {
<div class="action">
<button class="button color-shadow-black" (click)="onClose()" type="submit">
<label class="unselectable"><i class="material-icons">close</i> {{closeTitle}}</label>

8
src/component/popin/popin.ts
View File

@ -21,10 +21,10 @@ export class PopInComponent implements OnInit, OnDestroy {
@Input() popSize: string = 'medium';
@Output() callback: EventEmitter<any> = new EventEmitter();
@Input() closeTitle: any = null;
@Input() validateTitle: any = null;
@Input() saveTitle: any = null;
@Input() otherTitle: any = null;
@Input() closeTitle?: string;
@Input() validateTitle?: string;
@Input() saveTitle?: string;
@Input() otherTitle?: string;
public displayPopIn: boolean = false;

36
src/popin/upload-progress/upload-progress.html
View File

@ -10,35 +10,33 @@
<p class="expand">
<label class="unselectable"><b>{{mediaTitle}}</b></label>
</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-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
<div class="progress-bar" style="width:{{progress??0}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
</div>
<div>
<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>
</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>
<label class="unselectable">Upload done ... waiting server answer</label>
</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>
</div>

51
src/popin/upload-progress/upload-progress.ts
View File

@ -4,9 +4,28 @@
* @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 { 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({
selector: 'upload-progress',
@ -19,6 +38,7 @@ export class PopInUploadProgress implements OnInit {
@Input() mediaSize: number = 999999999999;
@Input() result?: string;
@Input() error?: string;
@Output() abort: EventEmitter<void> = new EventEmitter();
public closeButtonTitle?: string = 'Abort';
public otherButtonTitle?: string;
public validateButtonTitle?: string;
@ -29,8 +49,14 @@ export class PopInUploadProgress implements OnInit {
OnDestroy() { }
ngOnInit() { }
eventPopUp(_event: string): void {
console.log(`GET event: ${_event}`);
this.popInService.close('popin-upload-progress');
if (_event == "close") {
if (this.abort) {
this.abort.emit();
}
} else {
console.log(`GET event: ${_event}`);
this.popInService.close('popin-upload-progress');
}
}
updateNeedSend(): void { }
@ -80,11 +106,11 @@ export class PopInUploadProgress implements OnInit {
this.progress = Math.trunc((this.mediaUploaded * 100) / this.mediaSize);
this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
this.sizeDisplay = this.convertInHuman(this.mediaSize);
if (this.error === null && this.result === null) {
if (isNullOrUndefined(this.error) && isNullOrUndefined(this.result)) {
this.closeButtonTitle = 'Abort';
this.otherButtonTitle = undefined;
this.validateButtonTitle = undefined;
} else if (this.result === null) {
} else if (isNullOrUndefined(this.result)) {
this.closeButtonTitle = undefined;
this.otherButtonTitle = 'Close';
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;
}
}