@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/shared/geolocation/geolocation.utils.ts

@@ -0,0 +1,105 @@
+import { Geolocation, Position } from '@capacitor/geolocation';
+import { PlatformService } from '../../core/services/platform.service';
+import { Platform } from '@ionic/angular';
+import { isNil } from '../functions';
+
+export class IPosition {
+  latitude: number;
+  longitude: number;
+}
+
+export abstract class GeolocationUtils {
+  static isNotNilAndValid(position: IPosition, opts?: { debug?: boolean }) {
+    if (!position || isNil(position.latitude) || isNil(position.longitude)) return false;
+
+    // Invalid lat/lon
+    if (position.latitude < -90 || position.latitude > 90 || position.longitude < -180 || position.longitude > 180) {
+      // /!\ Log in console, because should never occur
+      if (opts?.debug) console.warn('Invalid lat/long position:  ', position);
+      return false;
+    }
+
+    // OK: valid
+    return true;
+  }
+
+  static isNilOrInvalid(position: IPosition, opts?: { debug?: boolean }) {
+    return !GeolocationUtils.isNotNilAndValid(position, opts);
+  }
+
+  static computeDistanceInMiles(position1: IPosition, position2: IPosition): number {
+    // Invalid position(s): skip
+    if (GeolocationUtils.isNilOrInvalid(position1, { debug: true }) || GeolocationUtils.isNilOrInvalid(position2, { debug: true })) return;
+
+    const latitude1Rad = (Math.PI * position1.latitude) / 180;
+    const longitude1Rad = (Math.PI * position1.longitude) / 180;
+    const latitude2Rad = (Math.PI * position2.latitude) / 180;
+    const longitude2Rad = (Math.PI * position2.longitude) / 180;
+
+    let distance =
+      2 *
+      6371 *
+      Math.asin(
+        Math.sqrt(
+          Math.pow(Math.sin((latitude1Rad - latitude2Rad) / 2), 2) +
+            Math.cos(latitude1Rad) * Math.cos(latitude2Rad) * Math.pow(Math.sin((longitude2Rad - longitude1Rad) / 2), 2)
+        )
+      );
+    distance = Math.round((distance / 1.852 + Number.EPSILON) * 100) / 100;
+    return distance;
+  }
+
+  /**
+   * Get the position by geo loc sensor
+   */
+  static async getCurrentPosition(platform: PlatformService | Platform, options?: PositionOptions): Promise<IPosition> {
+    // Use Capacitor plugin
+    if (platform.is('capacitor')) {
+      try {
+        console.info(`[geolocation-utils] Get current geo location, using Capacitor...(timeout: ${options?.timeout})`);
+        const pos: Position = await Geolocation.getCurrentPosition(options);
+        return <IPosition>{
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        };
+      } catch (err) {
+        console.error(`[geolocation-utils] Cannot get current geo location, using Capacitor: ${err?.message || ''}`);
+
+        // Detect some error, to add code
+        // FIXME - Capacitor use hardcoded strings! (see https://github.com/ionic-team/capacitor-plugins)
+        const message = ((err?.message || '') as string).toLowerCase();
+
+        // Permission denied
+        if (message.includes('location permission was denied') || message.includes('location disabled')) {
+          throw { ...err, code: GeolocationPositionError.PERMISSION_DENIED };
+        }
+
+        // Timeout
+        if (message.includes('timeout expired')) {
+          throw { ...err, code: GeolocationPositionError.TIMEOUT };
+        }
+        throw err;
+      }
+    }
+
+    // Or fallback to navigator
+    console.info('[geolocation-utils] Get current geo location, using browser...');
+    return new Promise<IPosition>((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(
+        (res) => {
+          resolve(<IPosition>{
+            latitude: res.coords.latitude,
+            longitude: res.coords.longitude,
+          });
+        },
+        (err) => {
+          let message = err?.message || err;
+          message = typeof message === 'string' ? message : JSON.stringify(message);
+          console.error('[geolocation-utils] Cannot get current geo location, using browser:' + message);
+          reject(err);
+        },
+        options
+      );
+    });
+  }
+}

package/src/app/shared/gesture/gesture-config.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { HammerGestureConfig } from '@angular/platform-browser';
+
+export const HAMMER_TAP_TIME = 250;
+export const HAMMER_PRESS_TIME = 400; // Increase need for double tap (default: 251 ms)
+/**
+ * @hidden
+ * This class overrides the default Angular gesture config.
+ *
+ */
+@Injectable({ providedIn: 'root' })
+export class AppGestureConfig extends HammerGestureConfig {
+  // Override HammerJS default settings
+  overrides = <any>{
+    press: {
+      time: HAMMER_PRESS_TIME,
+    },
+    pinch: {
+      enable: false,
+    },
+    rotate: {
+      enable: false,
+    },
+    // see https://hammerjs.github.io/recognizer-swipe/
+    swipe: {
+      threshold: 30, // Minimal distance required before recognizing.
+      velocity: 0.4, //Minimal velocity required before recognizing, unit is in px per ms.
+    },
+  };
+
+  buildHammer(element: HTMLElement) {
+    // DEBUG
+    console.debug('[gesture] Applying HammerJS config to ', element.tagName);
+
+    const mc = new (<any>window).Hammer(element);
+
+    for (const eventName in this.overrides) {
+      if (eventName) mc.get(eventName).set(this.overrides[eventName]);
+    }
+
+    return mc;
+  }
+}

package/src/app/shared/gesture/hammer.utils.ts

@@ -0,0 +1,14 @@
+export declare type HammerSwipeAction = 'swipeleft' | 'swiperight';
+export declare interface HammerSwipeEvent extends Event {
+  type: HammerSwipeAction;
+  pointerType?: 'touch' | any;
+  center?: { x: number; y: number };
+  distance?: number;
+  velocity?: number;
+  srcEvent?: Event;
+}
+
+export declare interface HammerTapEvent extends Event {
+  tapCount?: number;
+  srcEvent?: Event;
+}

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

@@ -0,0 +1,69 @@
+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,270 @@
+import { PredefinedColors } from '@ionic/core';
+import { isNil, isNotNil } from '../functions';
+
+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 an array with the given color
+   **/
+  static fix(length?: number, colorName?: ColorName): string[] {
+    const color = Color.get(colorName || 'primary').rgba(0.5);
+    return new Array<string>(length || 25).fill(color);
+  }
+
+  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,67 @@
+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';
+import { CanLeave } from '../../core/form/form.utils';
+
+@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();
+      }
+
+      // Emit
+      if (typeof component.deactivate === 'function') {
+        if (this.debug) console.debug(`[dirty-guard] calling deactivate()`);
+        component.deactivate();
+      }
+
+      // Allow deactivation
+      return true;
+    }
+
+    // Cancel deactivate
+    return false;
+  }
+}

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

@@ -0,0 +1,11 @@
+<table class="ion-padding">
+  <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,37 @@
+:host {
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    color: #212529;
+  }
+
+  th {
+    font-weight: 500;
+    text-align: left;
+    vertical-align: bottom;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
+    border-bottom: 2px solid #dee2e6;
+  }
+
+  td {
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+    padding: 0.75rem;
+  }
+
+  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,14 @@
+import { Component, 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 {
+  hotkeys: any[];
+
+  constructor(@Inject(MAT_DIALOG_DATA) protected data: any) {
+    this.hotkeys = Array.from(this.data);
+  }
+}