@elderbyte/ngx-starter 15.2.3 → 15.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/data-transfer/http-data-transfer/http-data-transfer.component.mjs +51 -27
- package/esm2020/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.mjs +1 -8
- package/esm2020/lib/components/url-fragment/url-fragment-switcher/elder-url-fragment-switcher.component.mjs +1 -1
- package/fesm2015/elderbyte-ngx-starter.mjs +47 -32
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +47 -32
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/data-transfer/http-data-transfer/http-data-transfer.component.d.ts +15 -3
- package/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.d.ts +2 -9
- package/package.json +1 -1
|
@@ -21086,7 +21086,10 @@ class HttpDataTransferComponent {
|
|
|
21086
21086
|
* Fields *
|
|
21087
21087
|
* *
|
|
21088
21088
|
**************************************************************************/
|
|
21089
|
-
this.logger = LoggerFactory.getLogger(
|
|
21089
|
+
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
21090
|
+
this._transfer$ = new BehaviorSubject(null);
|
|
21091
|
+
this.$state = this._transfer$.pipe(filter(transfer => !!transfer), switchMap$1(transfer => transfer.state$));
|
|
21092
|
+
this.$detail = this.$state.pipe(map(state => this.renderTransferProgress(state)));
|
|
21090
21093
|
}
|
|
21091
21094
|
/***************************************************************************
|
|
21092
21095
|
* *
|
|
@@ -21094,38 +21097,57 @@ class HttpDataTransferComponent {
|
|
|
21094
21097
|
* *
|
|
21095
21098
|
**************************************************************************/
|
|
21096
21099
|
get transfer() {
|
|
21097
|
-
return this._transfer;
|
|
21100
|
+
return this._transfer$.getValue();
|
|
21098
21101
|
}
|
|
21099
21102
|
set transfer(value) {
|
|
21100
|
-
this._transfer
|
|
21101
|
-
|
|
21102
|
-
|
|
21103
|
-
|
|
21104
|
-
|
|
21105
|
-
|
|
21106
|
-
|
|
21107
|
-
|
|
21108
|
-
|
|
21109
|
-
|
|
21110
|
-
|
|
21111
|
-
|
|
21112
|
-
|
|
21113
|
-
|
|
21114
|
-
|
|
21115
|
-
|
|
21116
|
-
|
|
21117
|
-
|
|
21118
|
-
|
|
21119
|
-
|
|
21103
|
+
this._transfer$.next(value);
|
|
21104
|
+
}
|
|
21105
|
+
/***************************************************************************
|
|
21106
|
+
* *
|
|
21107
|
+
* Public API *
|
|
21108
|
+
* *
|
|
21109
|
+
**************************************************************************/
|
|
21110
|
+
statusIcon(state) {
|
|
21111
|
+
switch (state.status) {
|
|
21112
|
+
case DataTransferStatus.Pending: return 'pending';
|
|
21113
|
+
case DataTransferStatus.Transferring: return 'cloud_sync';
|
|
21114
|
+
case DataTransferStatus.Completed: return 'check';
|
|
21115
|
+
case DataTransferStatus.Aborted: return 'block';
|
|
21116
|
+
case DataTransferStatus.Failed: return 'error';
|
|
21117
|
+
default: return 'help_outline';
|
|
21118
|
+
}
|
|
21119
|
+
}
|
|
21120
|
+
/***************************************************************************
|
|
21121
|
+
* *
|
|
21122
|
+
* Private methods *
|
|
21123
|
+
* *
|
|
21124
|
+
**************************************************************************/
|
|
21125
|
+
renderTransferProgress(state) {
|
|
21126
|
+
if (state.isAborted) {
|
|
21127
|
+
return 'Canceled.';
|
|
21128
|
+
}
|
|
21129
|
+
if (state.hasFailed) {
|
|
21130
|
+
return 'Failed!';
|
|
21131
|
+
}
|
|
21132
|
+
const e = state.progress;
|
|
21133
|
+
// 100Mb of 332Mb (1200Kb/sec)
|
|
21134
|
+
if (e.percentDone === 100) {
|
|
21135
|
+
return BytesFormat.format(e.doneBytes) + '( ' + BytesPerSecondFormat.formatAsBitsPerSecond(e.avgBytesPerSec) + ')';
|
|
21136
|
+
}
|
|
21137
|
+
else {
|
|
21138
|
+
let progress = BytesFormat.format(e.doneBytes) + ' of ' + BytesFormat.format(e.totalBytes);
|
|
21139
|
+
if (e.bytesPerSec) {
|
|
21140
|
+
progress += ' (' + BytesPerSecondFormat.formatAsBitsPerSecond(e.bytesPerSec) + ')';
|
|
21120
21141
|
}
|
|
21121
|
-
|
|
21142
|
+
return progress;
|
|
21143
|
+
}
|
|
21122
21144
|
}
|
|
21123
21145
|
}
|
|
21124
21146
|
HttpDataTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21125
|
-
HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n <div class=\"layout-col place-center-center flex-10\">\n <mat-icon class=\"noselect\">\n {{state
|
|
21147
|
+
HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n <div class=\"layout-col place-center-center flex-10\">\n <mat-icon class=\"noselect\">\n {{statusIcon(state)}}\n </mat-icon>\n\n <!--\n <mat-icon\n *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n class=\"green-icon\"\n >check</mat-icon>\n -->\n\n </div>\n\n\n <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n <mat-progress-bar\n [matTooltip]=\"state.error?.message\"\n [color]=\"(state.error ? 'warn' : '')\"\n mode=\"determinate\"\n [value]=\"state.progress.percentDone\"\n ></mat-progress-bar>\n\n <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n </div>\n\n\n <div class=\"layout-col place-center-center flex-10\">\n <button mat-icon-button type=\"button\"\n (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n <mat-icon>\n close\n </mat-icon>\n </button>\n </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21126
21148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HttpDataTransferComponent, decorators: [{
|
|
21127
21149
|
type: Component,
|
|
21128
|
-
args: [{ selector: 'elder-data-transfer', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div *ngIf=\"($state | async) as state\"\n class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n <div class=\"layout-col place-center-center flex-10\">\n <mat-icon class=\"noselect\">\n {{state
|
|
21150
|
+
args: [{ selector: 'elder-data-transfer', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div *ngIf=\"($state | async) as state\"\n class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n <div class=\"layout-col place-center-center flex-10\">\n <mat-icon class=\"noselect\">\n {{statusIcon(state)}}\n </mat-icon>\n\n <!--\n <mat-icon\n *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n class=\"green-icon\"\n >check</mat-icon>\n -->\n\n </div>\n\n\n <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n <mat-progress-bar\n [matTooltip]=\"state.error?.message\"\n [color]=\"(state.error ? 'warn' : '')\"\n mode=\"determinate\"\n [value]=\"state.progress.percentDone\"\n ></mat-progress-bar>\n\n <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n </div>\n\n\n <div class=\"layout-col place-center-center flex-10\">\n <button mat-icon-button type=\"button\"\n (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n <mat-icon>\n close\n </mat-icon>\n </button>\n </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"] }]
|
|
21129
21151
|
}], ctorParameters: function () { return []; }, propDecorators: { transfer: [{
|
|
21130
21152
|
type: Input
|
|
21131
21153
|
}] } });
|
|
@@ -21251,13 +21273,6 @@ class HttpDataTransferOverviewComponent {
|
|
|
21251
21273
|
**************************************************************************/
|
|
21252
21274
|
constructor(transferService) {
|
|
21253
21275
|
this.transferService = transferService;
|
|
21254
|
-
}
|
|
21255
|
-
/***************************************************************************
|
|
21256
|
-
* *
|
|
21257
|
-
* Life Cycle *
|
|
21258
|
-
* *
|
|
21259
|
-
**************************************************************************/
|
|
21260
|
-
ngOnInit() {
|
|
21261
21276
|
this.transfers$ = this.transferService.transfers;
|
|
21262
21277
|
}
|
|
21263
21278
|
}
|