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

package/src/app/shared/graph/colors.utils.ts

@@ -0,0 +1,74 @@
+export function rgbToHex(r: number, g: number, b: number): string {
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+export function rgbArrayToHex(rgb: number[]): string {
+  return '#' + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
+}
+
+export function hexToRgbArray(hex: string): number[] {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ] : null;
+}
+
+export function hexToRgb(hex: string): {r: number; g: number; b: number} {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function componentToHex(c: number): string {
+  const hex = c.toString(16);
+  return hex.length === 1 ? ('0' + hex) : hex;
+}
+
+// See mix in file ionic.functions.color.scss
+export function mixHex(color1: string, color2: string, weight?: number) {
+
+  weight = weight ? (weight / 100) : 0.5;
+
+  const rgb1 = hexToRgbArray(color1);
+  if (!rgb1) throw Error('Invalid hex color:' + color1);
+
+  const rgb2 = hexToRgbArray(color2);
+  if (!rgb2) throw Error('Invalid hex color:' + color2);
+
+  const rgbAverage = rgb1.map((v, index) => Math.round((v * weight + rgb2[index] * (1 - weight))) );
+  return rgbArrayToHex(rgbAverage);
+}
+
+// 12% darker version of the base color (mix with black)
+export function getColorShade(color: string) {
+  return mixHex('#000000', color, 12);
+}
+
+// 10% lighter version of the base color (mix with white)
+export function getColorTint(color: string) {
+  return mixHex('#ffffff', color, 10);
+}
+
+/**
+ *
+ * @param color
+ * @param bw if true, will use black or white color, instead of the exact inverse
+ */
+export function getColorContrast(color: string, bw?: boolean) {
+  const rgb = hexToRgbArray(color);
+  if (!rgb) throw Error('Invalid hex color:' + color);
+
+  if (bw === true) {
+    // http://stackoverflow.com/a/3943023/112731
+    return (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 186
+      ? '#000000'
+      : '#FFFFFF';
+  }
+
+  return rgbArrayToHex(rgb.map(v => 255 - v));
+}

package/src/app/shared/graph/graph-colors.ts

@@ -0,0 +1,295 @@
+import {PredefinedColors} from '@ionic/core';
+import {isNil, isNotNil} from '../functions';
+import {hexToRgb, hexToRgbArray, rgbArrayToHex} from './colors.utils';
+
+export declare type ColorName = PredefinedColors |
+  'white'
+  | 'red'
+  | 'green'
+  | 'blue';
+
+
+/**
+ * Define here theme colors
+ */
+const rgbArrayMap = {
+  white: [255, 255, 255],
+  primary: [20, 67, 145], // ok
+  secondary: [117, 196, 253], // ok
+  tertiary: [91, 94, 244], // ok
+  danger: [245, 61, 61], // ok
+  light: [244, 245, 248], // ok
+  medium: [152, 154, 162], // ok
+  dark: [34, 36, 40], // ok
+  red: [255, 0, 0],
+  green: [0, 255, 0],
+  blue: [0, 0, 255]
+};
+
+// Fill a map of Color objects
+const colorsMap: { [key: string]: Color } = {};
+
+
+/**
+ * Useful class for color conversion
+ */
+// @dynamic
+export class Color {
+
+  // Helper method, to retrieve a color
+  static get(name: ColorName): Color {
+    return colorsMap[name] as Color;
+  }
+
+  static parseRgba(rgba: string): Color|null{
+      if (!rgba || (!rgba.startsWith('rgb(') && !rgba.startsWith('rgba('))) return null;
+
+      // Parse parts
+      const parts = rgba
+        .replace('rgb(', '')
+        .replace('rgba(', '')
+        .replace(')', '')
+        .split(',');
+
+      if (parts.length !== 3 && parts.length !== 4) return null;
+
+      return new Color([+parts[0], +parts[1], +parts[2]],
+        parts.length === 4 && +parts[3] || 1,
+        'custom');
+  }
+
+  static transparent = function() {
+    return new Color([0,0,0], 0, 'translucent');
+  };
+
+  constructor(
+    private _rgbArray: number[],
+    private _opacity?: number,
+    private _name: string = 'custom'
+  ) {
+  }
+  get name(): string {
+    return this._name;
+  }
+  get opacity(): number{
+    return isNotNil(this._opacity) ? this._opacity : 1;
+  }
+  get rgb(): number[] {
+    return this._rgbArray;
+  }
+
+  get r(): number {
+    return this._rgbArray[0];
+  }
+
+  get g(): number {
+    return this._rgbArray[1];
+  }
+
+  get b(): number {
+    return this._rgbArray[2];
+  }
+
+  rgba(opacity?: number): string {
+    opacity = isNotNil(opacity) ? opacity : this._opacity;
+    if (isNil(opacity) || opacity < 0 || opacity > 1) {
+      return 'rgb(' + this._rgbArray.join(',') + ')';
+    }
+    return 'rgba(' + this._rgbArray.join(',') + ',' + opacity + ')';
+  }
+
+}
+
+export declare interface ColorGradientOptions {
+  startColor?: number[];
+  mainColor?: number[];
+  mainColorIndex?: number;
+  endColor?: number[];
+}
+
+export declare interface ColorScaleOptions extends ColorGradientOptions {
+  opacity?: number;
+  min?: number;
+  max?: number;
+  upperMax?: boolean;
+}
+
+export declare interface ColorScaleLegendItem {
+  label: string|number[];
+  color: Color;
+}
+
+export declare interface ColorScaleLegend {
+  items: ColorScaleLegendItem[];
+}
+
+/**
+ * Helper class for colors scale
+ */
+// @dynamic
+export class ColorScale {
+
+  static custom = (count: number, options?: ColorScaleOptions) => {
+    options = options || {};
+    return new ColorScale(
+      linearColorGradientWithIntermediate(count, {
+        startColor: options.startColor || undefined,
+        mainColor: options.mainColor || undefined,
+        mainColorIndex: isNotNil(options.mainColorIndex) ? options.mainColorIndex : undefined,
+        endColor: options.endColor || undefined
+      }),
+      options
+    );
+  };
+
+  static default() {
+    return ColorScale.custom(25);
+  }
+
+  /**
+   * Create a array with the given color
+   **/
+  static fix(length?: number, colorName?: ColorName): any[] {
+    return Array.apply(null, Array(length || 25))
+      .map(String.prototype.valueOf, Color.get(colorName || 'primary').rgba(0.5));
+  }
+
+  private _min: number;
+  private _max: number;
+  private _rangeSize: number;
+  private _legendItems: ColorScaleLegendItem[];
+
+  get min(): number {
+    return this._min;
+  }
+  get max(): number {
+    return this._max;
+  }
+
+  constructor(colorArray: number[][], options?: ColorScaleOptions) {
+    options = options || {};
+    // reserved last colors for value > max
+    const nbIntervalBeforeUpper = !options.upperMax ? colorArray.length : (colorArray.length - 1);
+    this._min = options.min || 0;
+    this._max = options.max || nbIntervalBeforeUpper;
+    this._rangeSize = Math.round((this._max - this._min) / nbIntervalBeforeUpper);
+    this._legendItems = this.computeLegendItems(colorArray);
+  }
+
+  get legend(): ColorScaleLegend {
+    return {
+      items: this._legendItems
+    };
+  }
+
+  getValueColor(value: number): Color {
+    return this.getLegendForValue(value).color;
+  }
+
+  getLegendForValue(value: number): ColorScaleLegendItem {
+    if (value <= this._min) return this._legendItems[0];
+    if (value >= this._max) return this._legendItems[this._legendItems.length - 1];
+    const index = Math.floor(value * (this._legendItems.length - 1) / this._max);
+    return this._legendItems[index];
+  }
+
+  getLegendAtIndex(index: number): ColorScaleLegendItem {
+    return this._legendItems[index];
+  }
+
+  protected computeLegendItems(colorArray: number[][]): ColorScaleLegendItem[] {
+    return colorArray.map((color, index) => {
+      const start = index * this._rangeSize;
+      const end = start + this._rangeSize;
+      return {
+        color: new Color(color),
+        label: (end < this._max) ? `${start.toLocaleString()} - ${end.toLocaleString()}` : ` >= ${start}`
+      };
+    });
+  }
+}
+
+
+// Fill colorsMap
+Object.getOwnPropertyNames(rgbArrayMap)
+  .forEach((key) => {
+    colorsMap[key] = new Color(rgbArrayMap[key], 1, key);
+  });
+
+
+/**
+ * Internal function, that create a colors scale, using iteration
+ *
+ * @param count
+ * @param opacity
+ * @param startColor
+ * @param startState
+ * @returns
+ */
+function linearColorGradientWithIntermediate(count: number,
+                                             options?: ColorGradientOptions): number[][] {
+  options = options || {};
+
+  // From [0,1]
+  options.startColor = options.startColor || [255, 255, 190]; // default start = creme
+  options.mainColorIndex = options.mainColorIndex && options.mainColorIndex < count - 1 ? options.mainColorIndex : count - 1;
+  options.endColor = options.endColor || [255, 0, 0]; // default main = red
+
+  if (!options.mainColor) {
+    return linearColorGradient(count, {
+      startColor: options.startColor,
+      endColor: options.endColor
+    });
+  }
+
+  else {
+    // Step 1: startColor -> mainColor
+    const result = linearColorGradient(options.mainColorIndex + 1, {
+      startColor: options.startColor,
+      endColor: options.mainColor
+    });
+
+    // Step 2: mainColor -> endColor
+    if (options.mainColorIndex < count - 1) {
+      return result.concat(
+        linearColorGradient(count - options.mainColorIndex, {
+          startColor: options.mainColor,
+          endColor: options.endColor
+        }));
+    }
+    else {
+      return result;
+    }
+  }
+}
+
+function linearColorGradient(count: number,
+                             options?: ColorGradientOptions): any[] {
+
+  options = options || {};
+
+  // From [0,1]
+  options.startColor = options.startColor || [255, 255, 255]; // default start = white
+  options.endColor = options.endColor || [255, 0, 0]; // default end = red
+
+  const result: number[][] = [];
+  const color = options.startColor.slice(); // copy the start color
+  const delta = [
+    Math.round((options.endColor[0] - options.startColor[0]) / count),
+    Math.round((options.endColor[1] - options.startColor[1]) / count),
+    Math.round((options.endColor[2] - options.startColor[2]) / count)
+  ];
+
+  for (let i = 0; i < count - 1; i++) {
+    for (let j = 0; j < 3; j++) {
+      color[j] += delta[j];
+    }
+    result.push(color.slice());
+  }
+
+  // Force last color = end color
+  result.push(options.endColor.slice());
+
+  // Output as array
+  return result;
+}

package/src/app/shared/guard/component-dirty.guard.ts

@@ -0,0 +1,70 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {TranslateService} from '@ngx-translate/core';
+import {AlertController} from '@ionic/angular';
+import {Alerts} from '../alerts';
+
+export interface CanLeave {
+  dirty: boolean;
+  valid: boolean;
+  save(event?: Event, options?: any): Promise<boolean>;
+  cancel(event?: Event): Promise<void>;
+}
+
+@Injectable()
+export class ComponentDirtyGuard implements CanDeactivate<CanLeave> {
+
+  private debug = false;
+
+  constructor(
+    protected translate: TranslateService,
+    protected alertCtrl: AlertController,
+  ) {
+  }
+
+  async canDeactivate(component: CanLeave, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot):
+    Promise<boolean | UrlTree> {
+
+    const dirty = component?.dirty;
+    const valid = component?.valid;
+    let can = {
+      confirmed: !dirty,
+      save: false,
+    };
+
+    if (this.debug) {
+      console.debug(`[dirty-guard] canDeactivate component dirty: ${dirty}, valid: ${valid}`);
+    }
+
+    if (dirty) {
+      // Ask confirmation
+      can = await Alerts.askSaveBeforeAction(this.alertCtrl, this.translate, {valid});
+    }
+
+    if (this.debug) console.debug(`[dirty-guard] confirm: ${can.confirmed}`);
+
+    if (can.confirmed) {
+      if (can.save) {
+        if (this.debug) console.debug(`[dirty-guard] do save`);
+        const saved = await component.save();
+        if (!saved) {
+          if (this.debug) console.debug(`[dirty-guard] save failed, cancel deactivate`);
+          return false;
+        }
+      } else {
+        if (this.debug) console.debug(`[dirty-guard] do cancel`);
+        if (dirty)
+          component.cancel();
+      }
+
+      // Allow deactivate
+      return true;
+    }
+
+    // Cancel deactivate
+    return false;
+
+  }
+
+
+}

package/src/app/shared/help/help.modal.html

@@ -0,0 +1,42 @@
+<app-modal-toolbar color="light"
+                   [title]="title|translate"
+                   (cancel)="close($event)"
+                   [showSpinner]="loading">
+</app-modal-toolbar>
+
+<ion-content class="ion-padding">
+
+  <!-- error -->
+  <ion-item *ngIf="error && showError" lines="none">
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error|translate"></ion-label>
+  </ion-item>
+
+  <markdown *ngIf="markdownContent; else useDocUrl"
+            [data]="markdownContent"
+            (ready)="markAsLoaded()"
+            emoji>
+  </markdown>
+
+  <ng-template #useDocUrl>
+    <markdown *ngIf="markdownUrl"
+              [src]="markdownUrl"
+              (load)="markAsLoaded()"
+              (error)="onLoadError($event)"
+              emoji></markdown>
+  </ng-template>
+
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+      <ion-col size="auto">
+        <ion-button fill="solid" color="tertiary" (click)="close()">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>
+
+

package/src/app/shared/help/help.modal.ts

@@ -0,0 +1,61 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnInit} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+import {PlatformService} from '../../core/services/platform.service';
+import {LocalSettingsService} from '../../core/services/local-settings.service';
+import {TranslateService} from '@ngx-translate/core';
+
+export interface AppHelpModalOptions {
+  title?: string,
+  markdownContent?: string,
+  markdownUrl?: string
+  showError?: boolean;
+}
+
+@Component({
+  selector: 'app-help-modal',
+  templateUrl: './help.modal.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppHelpModal implements AppHelpModalOptions {
+
+  readonly debug: boolean;
+  loading = true;
+  error: string = undefined;
+
+  @Input() title: string;
+  @Input() showError = true;
+  @Input() markdownContent: string;
+  @Input() markdownUrl: string;
+
+  constructor(
+      protected injector: Injector,
+      protected viewCtrl: ModalController,
+      protected platform: PlatformService,
+      protected settings: LocalSettingsService,
+      protected translate: TranslateService,
+      protected cd: ChangeDetectorRef
+  ) {
+    // TODO: for DEV only
+    //this.debug = !environment.production;
+  }
+
+  close(event?: Event) {
+      return this.viewCtrl.dismiss();
+  }
+
+  markAsLoaded() {
+    this.loading = false;
+    this.error = null;
+    this.cd.markForCheck();
+  }
+
+  onLoadError(error?: string) {
+    console.error(error);
+
+    this.error = error;
+    this.loading = false;
+    this.cd.markForCheck();
+  }
+
+
+}

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.html

@@ -0,0 +1,11 @@
+<table>
+  <tbody>
+  <tr *ngFor="let keys of hotkeys">
+    <td>{{ keys[1] | translate }}</td>
+
+    <td class="text-right">
+      <kbd>{{ keys[0] }}</kbd>
+    </td>
+  </tr>
+  </tbody>
+</table>

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.scss

@@ -0,0 +1,39 @@
+:host {
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529;
+  }
+
+  th {
+    font-weight: 500;
+    text-align: left;
+    vertical-align: bottom;
+    padding: .75rem;
+    border-top: 1px solid #dee2e6;
+    border-bottom: 2px solid #dee2e6;
+  }
+
+  td {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+    padding-left: 0;
+  }
+
+  kbd {
+    margin-right: 6px;
+    background-color: #fafbfc;
+    border: 1px solid #d1d5da;
+    border-bottom-color: #c6cbd1;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #c6cbd1;
+    color: #444d56;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 10px;
+    padding: 3px 5px;
+    vertical-align: middle;
+  }
+}

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+@Component({
+  templateUrl: './hotkeys-dialog.component.html',
+  styleUrls: ['./hotkeys-dialog.component.scss']
+})
+export class HotkeysDialogComponent implements OnInit {
+  hotkeys = Array.from(this.data);
+
+  constructor(@Inject(MAT_DIALOG_DATA) protected data) { }
+
+  ngOnInit() {
+  }
+
+}

package/src/app/shared/hotkeys/hotkeys.service.ts

@@ -0,0 +1,89 @@
+import { Inject, Injectable } from '@angular/core';
+import { EventManager } from '@angular/platform-browser';
+import { Observable } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { MatDialog } from '@angular/material/dialog';
+import { HotkeysDialogComponent } from './dialog/hotkeys-dialog.component';
+import { isNotNilOrBlank } from '../functions';
+import { ModalController, PopoverController } from '@ionic/angular';
+
+interface Options {
+  element: any;
+  elementName: string;
+  description: string | undefined;
+  keys: string;
+  preventDefault: boolean;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class Hotkeys {
+
+  private _debug = false;
+  private _hotkeys = new Map();
+
+  private _defaults: Partial<Options> = {
+    element: this.document,
+    preventDefault: true
+  };
+
+  constructor(private eventManager: EventManager,
+              private dialog: MatDialog,
+              @Inject(DOCUMENT) private document: any,
+              private modalController: ModalController,
+              private popoverController: PopoverController) {
+    if (this._debug) console.debug('[hotkeys] Starting hotkeys service... Press Shift+? to get help modal.');
+
+    this.addShortcut({keys: 'shift.?'})
+      .subscribe(() => this.openHelpModal());
+
+    // For DEV only
+    //this._debug = !environment.production;
+  }
+
+  addShortcut(options: Partial<Options>): Observable<Event> {
+
+    const merged = {...this._defaults, ...options};
+    const event = `keydown.${merged.keys}`;
+
+    if (isNotNilOrBlank(merged.description)) {
+      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}: ${merged.description}`);
+      this._hotkeys.set(merged.keys, merged.description);
+    } else {
+      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}`);
+    }
+
+    return new Observable(observer => {
+      const handler = async (e: Event) => {
+
+        // Get top component from ModalController
+        const top = await this.modalController.getTop() || await this.popoverController.getTop();
+        // If modal present, check its component name against hotkey element name (fix #181)
+        if (top && top.component['name'] !== merged.elementName) {
+          e.preventDefault();
+          return;
+        }
+        if (e instanceof KeyboardEvent && e.repeat) return; // skip when repeated
+        if (merged.preventDefault) e.preventDefault();
+        if (this._debug) console.debug(`[hotkeys] Shortcut {${options.keys}} detected...`);
+        observer.next(e);
+      };
+
+      const dispose = this.eventManager.addEventListener(merged.element, event, handler);
+
+      return () => {
+        dispose();
+        this._hotkeys.delete(merged.keys);
+      };
+    });
+  }
+
+  openHelpModal() {
+    this.dialog.open(HotkeysDialogComponent, {
+      width: '500px',
+      data: this._hotkeys
+    });
+  }
+
+}