@sumaris-net/ngx-components 2.6.4-alpha3 → 2.6.4-alpha5

package/src/app/core/menu/menu.service.ts

@@ -0,0 +1,62 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {distinctUntilChanged} from 'rxjs/operators';
+
+
+export type SplitPaneShowWhen = boolean|'lg';
+export const DEFAULT_MENU_SHOW_WHEN: SplitPaneShowWhen = 'lg';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuService {
+
+  private readonly _$toggled = new Subject<void>();
+  private readonly _$opened = new Subject<boolean>();
+  private readonly _$splitPaneWhen = new BehaviorSubject<SplitPaneShowWhen>(DEFAULT_MENU_SHOW_WHEN);
+  private readonly _$enabled = new BehaviorSubject<boolean>(true);
+
+  get opened(): Observable<boolean> {
+    return this._$opened.asObservable();
+  }
+
+  get splitPaneWhen(): Observable<SplitPaneShowWhen> {
+    return this._$splitPaneWhen.asObservable();
+  }
+
+  get enabled(): Observable<boolean> {
+    return this._$enabled.asObservable();
+  }
+
+  toggle() {
+    this._$toggled.next();
+  }
+
+  enable(value: boolean) {
+    this._$enabled.next(value);
+  }
+
+  setSplitPaneShowWhen(value: SplitPaneShowWhen) {
+    if (this._$splitPaneWhen.value !== value) {
+      this._$splitPaneWhen.next(value);
+    }
+  }
+
+  toggleSplitPaneWhen() {
+    if (this._$splitPaneWhen.value !== false) {
+      this._$splitPaneWhen.next(false);
+    }
+    else {
+      this._$splitPaneWhen.next(DEFAULT_MENU_SHOW_WHEN);
+    }
+  }
+
+  _markAsOpened() {
+    this._$opened.next(true);
+  }
+
+  _markAsClosed() {
+    this._$opened.next(false);
+  }
+
+}

package/src/app/core/offline/update-offline-mode-card.component.html

@@ -0,0 +1,45 @@
+
+<!-- Update offline feature card-->
+<ion-card color="accent"
+          class="main ion-no-margin"
+          @slideUpDownAnimation>
+  <ion-card-content class="ion-no-padding">
+    <ion-grid>
+      <ion-row *ngIf="!progressionValue; else progression">
+        <ion-col>
+          <ion-text class="ion-text-wrap" >
+            <h4>
+              <b [innerHTML]="'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate"></b>
+            </h4>
+            <h3>
+              <small [innerHTML]="'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate"></small>
+            </h3>
+          </ion-text>
+        </ion-col>
+
+        <!-- Update button -->
+        <ion-col size="auto">
+          <ion-button color="tertiary" class="ion-float-end"
+                      (click)="onUpdateClick.emit($event)">
+            <span translate>NETWORK.BTN_UPDATE</span>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+
+      <ng-template #progression>
+        <ion-row>
+          <ion-col>
+            <ion-text class="ion-text-wrap" [innerHTML]="progressionMessage"></ion-text>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-progress-bar [value]="progressionValue / 100"></ion-progress-bar>
+          </ion-col>
+        </ion-row>
+      </ng-template>
+    </ion-grid>
+
+
+  </ion-card-content>
+</ion-card>

package/src/app/core/offline/update-offline-mode-card.component.scss

@@ -0,0 +1,4 @@
+
+ion-text small {
+  font-size: 85%;
+}

package/src/app/core/offline/update-offline-mode-card.component.ts

@@ -0,0 +1,28 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {slideUpDownAnimation} from '../../shared/material/material.animations';
+
+
+@Component({
+  selector: 'app-update-offline-mode-card',
+  templateUrl: 'update-offline-mode-card.component.html',
+  styleUrls: ['./update-offline-mode-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [slideUpDownAnimation]
+})
+export class AppUpdateOfflineModeCard implements OnDestroy {
+
+  @Input() progressionMessage: string;
+  @Input() progressionValue: number;
+  @Output() onUpdateClick = new EventEmitter<Event>();
+
+  constructor(
+  ) {
+  }
+
+  ngOnDestroy() {
+    this.onUpdateClick.complete();
+  }
+
+  /* -- private method  -- */
+
+}

package/src/app/core/offline/update-offline-mode-card.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../shared/shared.module';
+import {AppUpdateOfflineModeCard} from './update-offline-mode-card.component';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TranslateModule.forChild(),
+  ],
+
+  declarations: [
+    // Network
+    AppUpdateOfflineModeCard
+  ],
+  exports: [
+    TranslateModule,
+
+    // Components
+    AppUpdateOfflineModeCard
+  ]
+})
+export class AppUpdateOfflineModeCardModule {
+}

package/src/app/core/peer/select-peer.modal.html

@@ -0,0 +1,123 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start">
+      <ion-button (click)="cancel()" *ngIf="canCancel"
+                  visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>
+      {{'NETWORK.PEER.SELECT_MODAL.TITLE'|translate}}
+    </ion-title>
+
+    <ion-buttons slot="end">
+      <!-- loader -->
+      <ion-spinner *ngIf="loading; else endButtons"></ion-spinner>
+
+      <ng-template #endButtons>
+        <!-- refresh button -->
+        <ion-button *ngIf="onRefresh.observers | isNotEmptyArray"
+                    [matTooltip]="'COMMON.BTN_REFRESH'|translate"
+                    (click)="refresh($event)">
+          <mat-icon slot="icon-only">refresh</mat-icon>
+        </ion-button>
+      </ng-template>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-list-header>
+      <ion-label class="ion-text-wrap">
+        <p translate>NETWORK.PEER.SELECT_MODAL.HELP</p>
+      </ion-label>
+    </ion-list-header>
+
+    <ion-item *ngFor="let peer of $peers | async"
+              tappable
+              (click)="selectPeer(peer)"
+              detail
+              @fadeInAnimation>
+
+      <!-- icon -->
+      <ion-avatar slot="start" *ngIf="peer.reachable" >
+        <ion-img [src]="peer.favicon || (peer.url + '/api/favicon')"></ion-img>
+      </ion-avatar>
+      <ion-icon slot="start"  *ngIf="!peer.reachable" name="desktop" color="medium" class="ion-text-center"></ion-icon>
+
+      <!-- Peer is UP -->
+      <ion-grid *ngIf="peer.reachable">
+        <ion-row class="ion-no-padding">
+          <ion-col class="ion-no-padding">
+            <ion-label class="ion-text-wrap">
+              <ion-text color="dark">
+                <h3>{{peer.hostAndPort}}{{peer.path}}</h3>
+              </ion-text>
+              <ion-text color="primary">
+                <h4>{{peer.label}}</h4>
+              </ion-text>
+            </ion-label>
+          </ion-col>
+          <ion-col class="ion-no-padding">
+            <ion-label class="ion-text-wrap ion-text-center" color="medium">
+              <h3>{{peer.softwareName}}</h3>
+              <h4 *ngIf="!peerMinVersion || isCompatible(peer); else invalidVersion">
+                <small>v{{peer.softwareVersion}}</small>
+              </h4>
+              <ng-template #invalidVersion>
+                <ion-text color="danger" [matTooltip]="'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP'|translate: {version: peerMinVersion} ">
+                  <h4 class="ion-color-danger">
+                    <small><mat-icon>warning</mat-icon>v{{peer.softwareVersion}}</small>
+                  </h4>
+                </ion-text>
+              </ng-template>
+            </ion-label>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
+      <!-- Peer is DOWN -->
+      <ion-label class="ion-text-wrap" *ngIf="!peer.reachable">
+        <ion-text color="medium">
+          <h3>{{peer.hostAndPort}}{{peer.path}}</h3>
+        </ion-text>
+        <ion-text color="danger">
+          <h4>
+            <small><ion-icon size="small" name="close-circle"></ion-icon></small>
+            <span translate>NETWORK.PEER.OFFLINE</span>
+          </h4>
+        </ion-text>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+</ion-content>
+
+
+<ion-footer *ngIf="canCancel" hidden-xs hidden-sm hidden-mobile>
+
+  <ion-toolbar>
+
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+
+      <!-- buttons -->
+      <ion-col size="auto" *ngIf="showSetManuallyButton">
+        <ion-button fill="clear" color="dark" (click)="clickSetManually($event)">
+          <ion-label translate>NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY</ion-label>
+        </ion-button>
+      </ion-col>
+      <ion-col size="auto">
+        <ion-button fill="clear" color="dark" (click)="cancel()">
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+
+
+  </ion-toolbar>
+</ion-footer>

package/src/app/core/peer/select-peer.modal.scss

@@ -0,0 +1,20 @@
+
+
+ion-item {
+
+  h4 ion-icon,
+  h4 mat-icon {
+    height: 14px;
+    width: 14px;
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  h4 small ion-icon,
+  h4 small mat-icon {
+    height: 12px;
+    width: 12px;
+    font-size: 12px;
+    line-height: 12px;
+  }
+}

package/src/app/core/peer/select-peer.modal.ts

@@ -0,0 +1,197 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, Optional} from '@angular/core';
+import {ModalController, PopoverController} from '@ionic/angular';
+import {Peer} from '../services/model/peer.model';
+import {Observable, Subject, Subscription} from 'rxjs';
+import {fadeInAnimation} from '../../shared/material/material.animations';
+import {HttpClient} from '@angular/common/http';
+import {NetworkUtils, NodeInfo} from '../services/network.utils';
+import {VersionUtils} from '../../shared/version/versions';
+import {ENVIRONMENT} from '../../../environments/environment.class';
+import {TextPopover, TextPopoverOptions} from '../form/text-popover/text-popover.component';
+import {TranslateService} from '@ngx-translate/core';
+import {isMobile} from '../../shared/platforms';
+import {Validators} from '@angular/forms';
+import {PEER_URL_REGEXP} from '../services/network.service';
+import {APP_LOGGING_SERVICE} from '../../shared/logging/logging-service.class';
+import {ILogger, ILoggingService} from '../../shared/logging/logger.model';
+
+export interface ISelectPeerModalOptions {
+  canCancel: boolean;
+  allowSelectDownPeer: boolean;
+  onRefresh: EventEmitter<Event>;
+  showSetManuallyButton: boolean;
+}
+
+@Component({
+  selector: 'select-peer-modal',
+  templateUrl: 'select-peer.modal.html',
+  styleUrls: [ './select-peer.modal.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInAnimation]
+})
+export class SelectPeerModal implements OnDestroy, ISelectPeerModalOptions {
+
+  private _subscription = new Subscription();
+  private readonly _logger: ILogger;
+
+  loading = true;
+  mobile: boolean;
+  $peers = new Subject<Peer[]>();
+  peerMinVersion = this.environment.peerMinVersion;
+
+  @Input() canCancel = true;
+  @Input() allowSelectDownPeer = true;
+  @Input() onRefresh = new EventEmitter<Event>();
+  @Input() showSetManuallyButton = true;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private popoverController: PopoverController,
+    private translate: TranslateService,
+    private http: HttpClient,
+    private cd: ChangeDetectorRef,
+    @Inject(ENVIRONMENT) protected environment,
+    @Optional() @Inject(APP_LOGGING_SERVICE) protected loggingService?: ILoggingService
+  ) {
+    this.mobile = isMobile(window);
+    this._logger = loggingService?.getLogger('network-modal');
+  }
+
+  set peers(peers: Observable<Peer[]>) {
+    this._subscription.add(
+      peers.subscribe(res => this.refreshPeers(res))
+    );
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss();
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+
+  selectPeer(peer: Peer) {
+    if (this.allowSelectDownPeer || (peer.reachable && this.isCompatible(peer))) {
+      console.debug(`[select-peer-modal] Selected peer: {url: '${peer.url}'}`);
+      this.modalCtrl.dismiss(peer);
+    }
+  }
+
+
+  /**
+   *  Check the min pod version, defined by the app
+   *
+   * @param peer
+   */
+  isCompatible(peer: Peer): boolean {
+    return !this.peerMinVersion || (peer && peer.softwareVersion && VersionUtils.isCompatible(this.peerMinVersion, peer.softwareVersion));
+  }
+
+  refresh(event) {
+    this.loading = true;
+    this.onRefresh.emit(event);
+  }
+
+  async clickSetManually(event?: Event) {
+    const peerUrl = await this.openPeerUrlPopover(event);
+    if (peerUrl) {
+      const peer = Peer.parseUrl(peerUrl);
+      await this.refreshPeer(peer);
+      this.selectPeer(peer);
+    }
+  }
+
+  /* -- protected methods -- */
+
+  async refreshPeers(peers: Peer[]) {
+    peers = peers || [];
+
+    const data: Peer[] = [];
+    const jobs = Promise.all(
+      peers.map(async (peer) => {
+        await this.refreshPeer(peer);
+
+        if (this._subscription.closed) return; // component destroyed
+
+        data.push(peer);
+
+        // Sort (by reachable, then host)
+        data.sort((a, b) => {
+          if (a.reachable && !b.reachable) return -1;
+          if (!a.reachable && b.reachable) return 1;
+          if (a.hostAndPort < b.hostAndPort) return -1;
+          if (a.hostAndPort > b.hostAndPort) return 1;
+          return 0;
+        });
+
+        this.$peers.next(data);
+        return peer;
+      }));
+
+    this._subscription.add(
+      this.$peers
+        .subscribe(() => this.cd.markForCheck())
+    );
+
+    try {
+      await jobs;
+    }
+    catch(err) {
+      if (!this._subscription.closed) console.error(err);
+    }
+    this.loading = false;
+    this.cd.markForCheck();
+  }
+
+  protected async refreshPeer(peer: Peer): Promise<Peer> {
+    try {
+      const summary: NodeInfo = await NetworkUtils.getNodeInfo(this.http, peer.url);
+      peer.status = 'UP';
+      peer.softwareName = summary.softwareName;
+      peer.softwareVersion = summary.softwareVersion;
+      peer.label = summary.nodeLabel;
+      peer.name = summary.nodeName;
+    } catch (err) {
+      // If modal was not closed (e.g. response arrived too late => ignore)
+      if (!this._subscription.closed)  {
+        console.error(`[select-peer] Error while calling '${peer.url}/api/node/info': ${err?.message || err}`, err);
+        this._logger?.error('refreshPeer', `Error while calling '${peer.url}/api/node/info': ${err?.message || JSON.stringify(err)}`);
+      }
+      peer.status = 'DOWN';
+    }
+    return peer;
+  }
+
+  protected async openPeerUrlPopover(event: Event, opts?: Partial<TextPopoverOptions>) {
+    const modal = await this.popoverController.create({
+      component: TextPopover,
+      componentProps: <TextPopoverOptions>{
+        placeholder: this.translate.instant('SETTINGS.PEER_URL'),
+        multiline: false,
+        autofocus: !this.mobile,
+        autocomplete: false,
+        validator: Validators.pattern(PEER_URL_REGEXP),
+        maxLength: null,
+        ...opts
+      },
+      backdropDismiss: false,
+      keyboardClose: false,
+      event,
+      translucent: true,
+      cssClass: 'popover-large',
+    });
+
+    await modal.present();
+    const { data, role } = await modal.onDidDismiss();
+
+    if (data) {
+      console.info('Popover result: ', data);
+      return data;
+    }
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

package/src/app/core/peer/select-peer.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../shared/shared.module';
+import {HttpClientModule} from '@angular/common/http';
+import {SelectPeerModal} from './select-peer.modal';
+import {TranslateModule} from '@ngx-translate/core';
+import {AppTextPopoverModule} from '../form/text-popover/text-popover.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    HttpClientModule,
+    TranslateModule.forChild(),
+    AppTextPopoverModule
+  ],
+
+  declarations: [
+    // Network
+    SelectPeerModal
+  ],
+  exports: [
+    TranslateModule,
+    // Components
+    SelectPeerModal
+  ]
+})
+export class AppSelectPeerModule {
+
+}

package/src/app/core/register/register-confirm.page.html

@@ -0,0 +1,55 @@
+<app-toolbar [title]="'REGISTER.CONFIRMED.TITLE'|translate" color="primary">
+</app-toolbar>
+
+
+<ion-content class="bg-image-cover center ion-padding" [ngStyle]="contentStyle">
+
+  <p class="hidden-xs ion-padding">&nbsp;<br /><br /></p>
+  <p class="hidden-xs">&nbsp;</p>
+
+
+  <ion-card>
+    <ion-card-content>
+
+      <div>
+        <ng-container *ngIf="loading">
+          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>
+          <p><ion-spinner></ion-spinner></p>
+        </ng-container>
+
+        <!-- error -->
+        <ion-item *ngIf="!loading && error">
+          <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+          <ion-label color="danger" class="error ion-text-wrap" [innerHTML]="error|translate"></ion-label>
+        </ion-item>
+      </div>
+
+      <div *ngIf="!loading && !error">
+        <h3>
+          <ion-icon name="checkmark"></ion-icon>
+          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>
+        </h3>
+
+        <ion-text>
+          <p [innerHTML]="'REGISTER.CONFIRMED.SUCCESS'|translate: {email: email}"></p>
+          <p *ngIf="!isLogin" [innerHTML]="'REGISTER.CONFIRMED.LOGIN_HELP'|translate"></p>
+        </ion-text>
+
+      </div>
+
+    </ion-card-content>
+
+    <ion-footer *ngIf="!loading">
+      <ion-button expand="full" color="primary" [routerLink]="['/account']" *ngIf="!isLogin">
+        <ion-icon name="log-in" slot="start"></ion-icon>
+        <span translate>AUTH.BTN_LOGIN</span>
+      </ion-button>
+
+      <ion-button expand="full" color="secondary" [routerLink]="['/account']" *ngIf="isLogin">
+        <ion-icon name="contact" slot="start"></ion-icon>
+        <span translate>HOME.BTN_MY_ACCOUNT</span>
+      </ion-button>
+    </ion-footer>
+  </ion-card>
+
+</ion-content>