@elderbyte/ngx-starter 14.12.0-beta4 → 14.12.0-beta6

package/src/lib/components/currency/elder-currency.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {CurrencyUnit} from './model/currency-unit';
+import {CurrencyCode} from './model/currency-code';
+import {CurrencyUnitRegistry} from './model/currency-unit-registry';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderCurrencyService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly registry = new CurrencyUnitRegistry();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    this.buildUnitInfo()
+      .forEach(unitInfo => this.registry.registerUnit(unitInfo));
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public getUnitSymbol(unit: CurrencyCode): string {
+    return this.registry.getUnitSymbol(unit);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private buildUnitInfo(): CurrencyUnit[] {
+    const infos: CurrencyUnit[] = [
+
+     CurrencyUnit.from(CurrencyCode.CHF, 'CHF'),
+     CurrencyUnit.from(CurrencyCode.DKK, 'kr'),
+     CurrencyUnit.from(CurrencyCode.EUR, '€'),
+     CurrencyUnit.from(CurrencyCode.GBP, '£'),
+     CurrencyUnit.from(CurrencyCode.RUB, '₽'),
+     CurrencyUnit.from(CurrencyCode.SEK, 'kr'),
+     CurrencyUnit.from(CurrencyCode.TRY, '₺'),
+     CurrencyUnit.from(CurrencyCode.UAH, '₴'),
+     CurrencyUnit.from(CurrencyCode.ILS, '₪'),
+     CurrencyUnit.from(CurrencyCode.CAD, '$'),
+     CurrencyUnit.from(CurrencyCode.CLP, '$'),
+     CurrencyUnit.from(CurrencyCode.COP, '$'),
+     CurrencyUnit.from(CurrencyCode.MXN, '$'),
+     CurrencyUnit.from(CurrencyCode.PEN, 'S/.'),
+     CurrencyUnit.from(CurrencyCode.USD, '$'),
+     CurrencyUnit.from(CurrencyCode.AUD, '$'),
+     CurrencyUnit.from(CurrencyCode.BDT, '৳'),
+     CurrencyUnit.from(CurrencyCode.CNY, '¥'),
+     CurrencyUnit.from(CurrencyCode.HKD, 'HK$'),
+     CurrencyUnit.from(CurrencyCode.JPY, '¥'),
+     CurrencyUnit.from(CurrencyCode.NZD, '$'),
+     CurrencyUnit.from(CurrencyCode.PHP, '₱'),
+     CurrencyUnit.from(CurrencyCode.THB, '฿'),
+     CurrencyUnit.from(CurrencyCode.VND, '₫'),
+     CurrencyUnit.from(CurrencyCode.BTC, '₿'),
+     CurrencyUnit.from(CurrencyCode.LTC, 'Ł'),
+     CurrencyUnit.from(CurrencyCode.ETH, 'Ξ'),
+
+    ];
+    return infos;
+  }
+}

package/src/lib/components/currency/model/currency-code.ts

@@ -0,0 +1,37 @@
+
+/**
+ * Represents a known Currency Code (ISO 4217)
+ * https://en.wikipedia.org/wiki/ISO_4217
+ *
+ * Enum name: Unit name
+ * Enum value: Unit code
+ */
+export enum CurrencyCode {
+  CHF = 'CHF',
+  DKK = 'DKK',
+  EUR = 'EUR',
+  GBP = 'GBP',
+  RUB = 'RUB',
+  SEK = 'SEK',
+  TRY = 'TRY',
+  UAH = 'UAH',
+  ILS = 'ILS',
+  CAD = 'CAD',
+  CLP = 'CLP',
+  COP = 'COP',
+  MXN = 'MXN',
+  PEN = 'PEN',
+  USD = 'USD',
+  AUD = 'AUD',
+  BDT = 'CAD',
+  CNY = 'CNY',
+  HKD = 'HKD',
+  JPY = 'JPY',
+  NZD = 'NZD',
+  PHP = 'PHP',
+  THB = 'THB',
+  VND = 'VND',
+  BTC = 'BTC',
+  LTC = 'LTC',
+  ETH = 'ETH'
+}

package/src/lib/components/currency/model/currency-unit-registry.ts

@@ -0,0 +1,39 @@
+import {CurrencyCode} from './currency-code';
+import {CurrencyUnit} from './currency-unit';
+
+
+export class CurrencyUnitRegistry {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly UNIT_INFO: Map<CurrencyCode, CurrencyUnit> = new Map<CurrencyCode, CurrencyUnit>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public getUnitSymbol(unit: CurrencyCode): string {
+    return this.getUnitInfo(unit)?.symbol ?? unit as string;
+  }
+
+  public registerUnit(unitInfo: CurrencyUnit): void {
+    this.UNIT_INFO.set(unitInfo.code, unitInfo);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Static Initializer                                                      *
+   *                                                                         *
+   **************************************************************************/
+
+  private getUnitInfo(unit: CurrencyCode): CurrencyUnit {
+    return this.UNIT_INFO.get(unit);
+  }
+
+}

package/src/lib/components/currency/model/currency-unit.ts

@@ -0,0 +1,18 @@
+import {CurrencyCode} from './currency-code';
+
+
+export class CurrencyUnit {
+
+  public static from(
+    code: CurrencyCode,
+    symbol: string,
+  ): CurrencyUnit {
+    return new CurrencyUnit(code, symbol);
+  }
+
+  constructor(
+    public readonly code: CurrencyCode,
+    public readonly symbol: string,
+  ) { }
+
+}

package/src/lib/components/currency/model/currency.ts

@@ -0,0 +1,22 @@
+import {CurrencyCode} from './currency-code';
+
+/**
+ * Represents an amount of currency.
+ */
+export class Currency {
+
+  public value: number;
+  public code: CurrencyCode;
+
+  public static zero(code: CurrencyCode): Currency {
+    return Currency.from(code);
+  }
+
+  public static from(code: CurrencyCode, value: number = 0) {
+    const quantity = new Currency();
+    quantity.value = value;
+    quantity.code = code;
+    return quantity;
+  }
+}
+

package/src/lib/components/currency/public_api.ts

@@ -0,0 +1,7 @@
+
+export * from './model/currency-code';
+export * from './model/currency-unit';
+export * from './model/currency-unit-registry';
+export * from './model/currency';
+export * from './elder-currency.pipe';
+export * from './elder-currency.module';

package/src/lib/components/data-transfer/elder-data-transfer.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {TranslateModule} from '@ngx-translate/core';
+import {HttpDataTransferComponent} from './http-data-transfer/http-data-transfer.component';
+import {HttpDataTransferAggregateComponent} from './http-data-transfer-aggregate/http-data-transfer-aggregate.component';
+import {HttpDataTransferOverviewComponent} from './http-data-transfer-overview/http-data-transfer-overview.component';
+import {HttpDataTransferIndicatorComponent} from './http-data-transfer-indicator/http-data-transfer-indicator.component';
+import {ElderPipesModule} from '../../pipes/elder-pipes.module';
+import {ElderOverlayModule} from '../overlays/elder-overlay.module';
+
+export {ElderDataTransferService} from './elder-data-transfer.service';
+export {HttpDataTransferComponent} from './http-data-transfer/http-data-transfer.component';
+export {HttpDataTransferAggregateComponent} from './http-data-transfer-aggregate/http-data-transfer-aggregate.component';
+export {HttpDataTransferOverviewComponent} from './http-data-transfer-overview/http-data-transfer-overview.component';
+export {HttpDataTransferIndicatorComponent} from './http-data-transfer-indicator/http-data-transfer-indicator.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    MatIconModule, MatProgressBarModule,
+    MatTooltipModule, MatToolbarModule,
+    MatButtonModule, MatBadgeModule,
+    MatProgressSpinnerModule,
+
+    TranslateModule,
+
+    ElderPipesModule,
+    ElderOverlayModule
+  ],
+  declarations: [
+    HttpDataTransferComponent,
+    HttpDataTransferAggregateComponent,
+    HttpDataTransferOverviewComponent,
+    HttpDataTransferIndicatorComponent,
+  ],
+  exports: [
+    HttpDataTransferComponent,
+    HttpDataTransferAggregateComponent,
+    HttpDataTransferOverviewComponent,
+    HttpDataTransferIndicatorComponent
+  ]
+})
+export class ElderDataTransferModule { }

package/src/lib/components/data-transfer/elder-data-transfer.service.ts

@@ -0,0 +1,120 @@
+import { Injectable } from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject, combineLatest, Observable, of, Subject} from 'rxjs';
+import {catchError, flatMap, map, mergeMap, startWith, tap} from 'rxjs/operators';
+import {HttpDataTransfer} from '../../common/http/transfer/http-data-transfer';
+import {DataTransferProgressAggregate} from '../../common/http/transfer/data-transfer-progress-aggregate';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderDataTransferService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private logger = LoggerFactory.getLogger('ElderDataTransferService');
+
+  private readonly _transfers = new BehaviorSubject<HttpDataTransfer[]>([]);
+  private readonly _uploadQueue = new Subject<HttpDataTransfer>();
+  private _parallelUploads = 1;
+
+  private readonly _completed = new Subject<HttpDataTransfer>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+  ) {
+    this._uploadQueue.pipe(
+      mergeMap(transfer => transfer.start().pipe(
+        catchError(err => of(err)), // Avoid killing queue
+        tap(null, null, () => this._completed.next(transfer))
+      ), this._parallelUploads)
+    ).subscribe(
+      completedJob => {},
+        err => this.logger.error('Data transfer failed', err)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get transfers(): Observable<HttpDataTransfer[]> {
+    return this._transfers.asObservable();
+  }
+
+  public get transfersSnapshot(): HttpDataTransfer[] {
+    return [...this._transfers.value];
+  }
+
+  public get transferCompleted(): Observable<HttpDataTransfer> {
+    return this._completed.asObservable();
+  }
+
+  public get transferAggregate(): Observable<DataTransferProgressAggregate> {
+    return this.transfers.pipe(
+      flatMap(transfers => this.aggregateProgress(transfers)),
+      startWith(DataTransferProgressAggregate.Empty),
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Enqueue and schedule a single data transfer
+   * @param transfer
+   */
+  public enqueue(transfer: HttpDataTransfer): HttpDataTransfer {
+    return this.enqueueAll([transfer])[0];
+  }
+
+  /**
+   * Enqueue and schedule all given data transfers
+   * @param transfers
+   */
+  public enqueueAll(transfers: HttpDataTransfer[]): HttpDataTransfer[] {
+    this.addToQueue(transfers);
+    const allTransfers = [...this._transfers.value, ...transfers];
+    this._transfers.next(allTransfers);
+    return transfers;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private addToQueue(newTransfers: HttpDataTransfer[]): void {
+    newTransfers.forEach(
+      t => this._uploadQueue.next(t)
+    );
+  }
+
+  private aggregateProgress(transfers: HttpDataTransfer[]): Observable<DataTransferProgressAggregate> {
+
+    const transfersInProgress = transfers
+      .filter(t => !t.stateSnapshot.isDone)
+      .map(t => t.state$);
+
+    return combineLatest(transfersInProgress).pipe(
+      map(latestTransferStates => DataTransferProgressAggregate.aggregate(latestTransferStates))
+    );
+  }
+
+}

package/src/lib/components/data-transfer/http-data-transfer/http-data-transfer.component.html

@@ -0,0 +1,47 @@
+
+
+<div *ngIf="($state | async) as state"
+  class="layout-row place-start-center gap-lg flex p-md transfer"
+>
+
+  <div class="layout-col place-center-center flex-10">
+    <mat-icon class="noselect">
+      {{state.isCompleted ? 'check' : 'attachment'}}
+    </mat-icon>
+
+    <!--
+    <mat-icon
+      *ngIf="!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100"
+      class="green-icon"
+    >check</mat-icon>
+    -->
+
+  </div>
+
+
+  <div class="layout-col flex-80" style="overflow: hidden">
+
+    <span class="mat-body-2 noselect title">{{transfer.name}}</span>
+
+    <mat-progress-bar
+      [matTooltip]="state.error?.message"
+      [color]="(state.error ? 'warn' : '')"
+      mode="determinate"
+      [value]="state.progress.percentDone"
+    ></mat-progress-bar>
+
+    <span class="mat-caption noselect">{{($detail | async)}}</span>
+
+  </div>
+
+
+  <div class="layout-col place-center-center flex-10">
+    <button mat-icon-button type="button"
+            (click)="transfer.abort()" [disabled]="state.isDone">
+      <mat-icon>
+        close
+      </mat-icon>
+    </button>
+  </div>
+
+</div>

package/src/lib/components/data-transfer/http-data-transfer/http-data-transfer.component.ts

@@ -0,0 +1,82 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {HttpDataTransfer} from '../../../common/http/transfer/http-data-transfer';
+import {DataTransferState} from '../../../common/http/transfer/data-transfer-state';
+import {BytesPerSecondFormat} from '../../../common/format/bytes-per-second-format';
+import {BytesFormat} from '../../../common/format/bytes-format';
+
+@Component({
+  selector: 'elder-data-transfer',
+  templateUrl: './http-data-transfer.component.html',
+  styleUrls: ['./http-data-transfer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HttpDataTransferComponent {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private logger = LoggerFactory.getLogger('HttpDataTransferComponent');
+  private _transfer: HttpDataTransfer;
+
+  public $state: Observable<DataTransferState>;
+  public $detail: Observable<string>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get transfer(): HttpDataTransfer {
+    return this._transfer;
+  }
+
+  @Input()
+  public set transfer(value: HttpDataTransfer) {
+    this._transfer = value;
+
+    this.$state = value.state$;
+
+    this.$detail = value.state$.pipe(
+      map(state => {
+
+        if (state.isAborted) { return 'Canceled.'; }
+        if (state.hasFailed) { return 'Failed!'; }
+
+        const e = state.progress;
+
+        // 100Mb of 332Mb (1200Kb/sec)
+        if (e.percentDone === 100) {
+          return BytesFormat.format(e.doneBytes) + '( ' + BytesPerSecondFormat.formatAsBitsPerSecond(e.avgBytesPerSec) + ')';
+        } else {
+          let progress = BytesFormat.format(e.doneBytes) + ' of ' + BytesFormat.format(e.totalBytes);
+
+          if (e.bytesPerSec) {
+            progress += ' (' + BytesPerSecondFormat.formatAsBitsPerSecond(e.bytesPerSec) + ')';
+          }
+          return progress;
+        }
+      }),
+      // tap(message => this.logger.info(message))
+    );
+
+  }
+
+
+
+}

package/src/lib/components/data-transfer/http-data-transfer-aggregate/http-data-transfer-aggregate.component.html

@@ -0,0 +1,26 @@
+<ng-container *ngIf="(aggregate$ | async) as aggregate">
+
+  <div *ngIf="!hiddenWhenInactive || aggregate.inTransfer > 0" class="layout-col flex">
+    <div class="layout-row place-center-center">
+      <span>{{aggregate.bps}}</span>
+    </div>
+
+    <mat-progress-bar
+      [color]="'accent'"
+      mode="determinate"
+      [value]="aggregate.percentDone"
+
+    ></mat-progress-bar>
+
+    <div class="layout-row">
+      <!--
+      <span class="mat-caption">{{aggregate.doneBytesAgg | bytes:1}}</span>
+      -->
+      <span class="mat-caption">{{aggregate.percentDone}}%</span>
+
+      <span class="flex"></span>
+      <span class="mat-caption">TOTAL {{aggregate.totalBytesAgg | bytes:1}}</span>
+    </div>
+  </div>
+</ng-container>
+

package/src/lib/components/data-transfer/http-data-transfer-aggregate/http-data-transfer-aggregate.component.ts

@@ -0,0 +1,46 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ElderDataTransferService} from '../elder-data-transfer.service';
+import {DataTransferProgressAggregate} from '../../../common/http/transfer/data-transfer-progress-aggregate';
+
+
+@Component({
+  selector: 'elder-data-transfer-aggregate',
+  templateUrl: './http-data-transfer-aggregate.component.html',
+  styleUrls: ['./http-data-transfer-aggregate.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HttpDataTransferAggregateComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public aggregate$: Observable<DataTransferProgressAggregate>;
+
+  @Input()
+  public hiddenWhenInactive = true;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private transferService: ElderDataTransferService
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.aggregate$ = this.transferService.transferAggregate;
+  }
+
+}

package/src/lib/components/data-transfer/http-data-transfer-indicator/http-data-transfer-indicator.component.html

@@ -0,0 +1,31 @@
+
+<ng-container *ngIf="aggregate$ | async as aggregate">
+
+  <button mat-icon-button type="button"
+          class="layout-row place-center-center"
+          [elderOverlayTrigger]="overlay">
+
+    <mat-icon *ngIf="aggregate.inTransfer == 0" [color]="inactiveColor">cloud_upload</mat-icon>
+
+    <mat-progress-spinner
+      *ngIf="aggregate.inTransfer > 0"
+      [matBadge]="aggregate.inTransfer"
+      matBadgePosition="above after"
+      matBadgeSize="small"
+      [matBadgeColor]="activeColor"
+      [color]="activeColor"
+      [strokeWidth]="3"
+      [diameter]="38"
+      [value]="aggregate.percentDone"
+      mode="determinate"
+    >
+    </mat-progress-spinner>
+
+  </button>
+</ng-container>
+
+<elder-overlay #overlay="elderOverlay" originX="center" overlayX="center">
+  <elder-data-transfer-overview class="panel">
+  </elder-data-transfer-overview>
+</elder-overlay>
+