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

package/src/app/shared/material/latlong/testing/latlong.test.html

@@ -0,0 +1,341 @@
+<ion-header>
+  <ion-toolbar color="primary">
+
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Lat/Long field test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
+
+    <!-- Empty value -->
+    <form *ngIf="form|formGetGroup:'empty' as formGroup" [formGroup]="formGroup">
+    <ion-grid>
+      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>
+
+      <ion-row >
+
+        <!-- DD Default sign -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Format DD, defaultSign '-'
+                </ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small><pre>{{formGroup.value|json}}</pre></small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-grid class="ion-no-padding">
+                <ion-row>
+                  <ion-col>
+                    <mat-latlong-field formControlName="latitude"
+                                       type="latitude"
+                                       latLongPattern="DD"
+                                       defaultSign="-"
+                                       placeholder="Latitude">
+                      <mat-icon matPrefix>room</mat-icon>
+                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
+                        <mat-icon>gps_fixed</mat-icon>
+                      </button>
+                    </mat-latlong-field>
+                  </ion-col>
+                  <ion-col>
+                    <mat-latlong-field formControlName="longitude"
+                                       type="longitude"
+                                       latLongPattern="DD"
+                                       defaultSign="-"
+                                       placeholder="Longitude">
+                      <mat-icon matPrefix>room</mat-icon>
+                      <button type="button" mat-icon-button matSuffix
+                              (click)="geoPosition($event)">
+                        <mat-icon>gps_fixed</mat-icon>
+                      </button>
+                    </mat-latlong-field>
+                  </ion-col>
+                </ion-row>
+                <ion-row *ngIf="geoPositionMessage">
+                  <ion-col>{{geoPositionMessage}}</ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- DDMM Default sign -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Format DDMM, defaultSign '+'
+                </ion-label>
+              </ion-card-title>
+              <ion-card-subtitle>
+                <ion-text color="medium">
+                  <small><pre>{{stringify(formGroup.value)}}</pre></small>
+                </ion-text>
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-grid class="ion-no-padding">
+                <ion-row>
+                  <ion-col>
+                    <mat-latlong-field formControlName="latitude"
+                                       type="latitude"
+                                       latLongPattern="DDMM"
+                                       defaultSign="+"
+                                       placeholder="Latitude">
+
+                      <mat-icon matPrefix >room</mat-icon>
+                      <button type="button" mat-icon-button matSuffix
+                              (click)="geoPosition($event)">
+                        <mat-icon>gps_fixed</mat-icon>
+                      </button>
+                    </mat-latlong-field>
+                  </ion-col>
+                  <ion-col>
+                    <mat-latlong-field formControlName="longitude"
+                                       type="longitude"
+                                       latLongPattern="DDMM"
+                                       defaultSign="+"
+                                       placeholder="Longitude">
+                      <mat-icon matPrefix>room</mat-icon>
+                      <button type="button" mat-icon-button matSuffix
+                              (click)="geoPosition($event)">
+                        <mat-icon>gps_fixed</mat-icon>
+                      </button>
+                    </mat-latlong-field>
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+      </ion-row>
+    </ion-grid>
+    </form>
+
+    <form *ngIf="form|formGetGroup:'enable' as formGroup" [formGroup]="formGroup">
+      <ion-grid>
+        <!-- With value -->
+        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>
+
+        <ion-row>
+
+          <!-- DD -->
+          <ion-col>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">
+                    Format DD
+                  </ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col>
+                      <mat-latlong-field formControlName="latitude"
+                                         type="latitude"
+                                         latLongPattern="DD"
+                                         placeholder="Latitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                    <ion-col>
+                      <mat-latlong-field formControlName="longitude"
+                                         type="longitude"
+                                         latLongPattern="DD"
+                                         placeholder="Longitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+
+          <!-- DDMMSS -->
+          <ion-col>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">
+                    Format DDMM
+                  </ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col>
+                      <mat-latlong-field formControlName="latitude"
+                                         type="latitude"
+                                         latLongPattern="DDMM"
+                                         placeholder="Latitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                    <ion-col>
+                      <mat-latlong-field formControlName="longitude"
+                                         type="longitude"
+                                         latLongPattern="DDMM"
+                                         placeholder="Longitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+
+
+          <!-- DDMMSS -->
+          <ion-col>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">
+                    Format DDMMSS
+                  </ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col>
+                      <mat-latlong-field formControlName="latitude"
+                                         type="latitude"
+                                         latLongPattern="DDMMSS"
+                                         placeholder="Latitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                    <ion-col>
+                      <mat-latlong-field formControlName="longitude"
+                                         type="longitude"
+                                         latLongPattern="DDMMSS"
+                                         placeholder="Longitude">
+                      </mat-latlong-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
+
+    <!-- Disable  -->
+    <form *ngIf="form|formGetGroup:'disable' as formGroup" [formGroup]="formGroup">
+      <ion-grid>
+        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">
+                    Disabled control
+                  </ion-label>
+                </ion-card-title>
+                <ion-card-subtitle>
+                  <ion-text color="medium">
+                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
+                  </ion-text>
+                </ion-card-subtitle>
+              </ion-card-header>
+              <ion-card-content>
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col>
+                      <mat-latlong-field formControlName="latitude"
+                                         type="latitude"
+                                         latLongPattern="DDMM"
+                                         placeholder="Latitude">
+                        <mat-icon matPrefix>room</mat-icon>
+                        <mat-icon matSuffix>gps_fixed</mat-icon>
+                      </mat-latlong-field>
+                    </ion-col>
+                    <ion-col>
+                      <mat-latlong-field formControlName="longitude"
+                                         type="longitude"
+                                         latLongPattern="DDMM"
+                                         placeholder="Longitude">
+                        <mat-icon matPrefix>room</mat-icon>
+                        <button type="button" mat-icon-button matSuffix
+                                (click)="geoPosition($event)">
+                          <mat-icon>gps_fixed</mat-icon>
+                        </button>
+                      </mat-latlong-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+
+          <ion-col>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  <ion-label color="primary">
+                    Readonly (control is enable)
+                  </ion-label>
+                </ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+
+                <mat-checkbox (change)="readonlyField.readonly=$event.checked" [checked]="readonlyField.readonly">
+                </mat-checkbox>
+
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col>
+                      <mat-latlong-field #readonlyField [formControl]="form|formGetControl: 'enable.latitude'"
+                                         type="latitude"
+                                         latLongPattern="DDMM"
+                                         placeholder="Latitude"
+                                         [readonly]="true">
+                        <mat-icon matPrefix>room</mat-icon>
+                        <mat-icon matSuffix>gps_fixed</mat-icon>
+                      </mat-latlong-field>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
+
+  </form>
+
+</ion-content>

package/src/app/shared/material/latlong/testing/latlong.test.ts

@@ -0,0 +1,121 @@
+import {Component, OnInit, Optional} from '@angular/core';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
+import {SharedValidators} from '../../../validator/validators';
+import {GeolocationUtils} from '../../../geolocation/geolocation.utils';
+import {PlatformService} from '../../../../core/services/platform.service';
+
+
+@Component({
+  selector: 'app-latlong-test',
+  templateUrl: './latlong.test.html'
+})
+export class LatLongTestPage implements OnInit {
+
+  form: UntypedFormGroup;
+
+  geoPositionMessage: string;
+
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder,
+    protected platform: PlatformService
+  ) {
+    this.form = formBuilder.group({
+      empty: formBuilder.group({
+        latitude: [null, Validators.compose([Validators.required, SharedValidators.latitude])],
+        longitude: [null, Validators.compose([Validators.required, SharedValidators.longitude])]
+      }),
+      enable: formBuilder.group({
+        latitude: [null, SharedValidators.latitude],
+        longitude: [null, SharedValidators.longitude]
+      }),
+      disable: formBuilder.group({
+        latitude: [null, SharedValidators.latitude],
+        longitude: [null, SharedValidators.longitude]
+      })
+    });
+
+    const disableFormGroup = this.form.get('disable');
+    disableFormGroup.disable();
+
+    // Copy enable value to disable form
+    this.form.get('enable').valueChanges.subscribe(value => disableFormGroup.setValue(value));
+
+  }
+
+  ngOnInit() {
+
+
+    setTimeout(() => this.loadData(), 250);
+  }
+
+  // Load the form with data
+  async loadData() {
+    const data = {
+      empty: {
+        latitude: null,
+        longitude: null
+      },
+      enable: {
+        latitude: 50.1,
+        longitude: -2
+      },
+      disable: {
+        latitude: 50.1,
+        longitude: -2
+      },
+    };
+
+    this.form.setValue(data);
+  }
+
+  doSubmit(event) {
+    console.debug('Validate form: ', this.form.value);
+  }
+
+  async geoPosition(event: Event, controlName?: string) {
+    console.debug('Click on geoLocation button', event);
+    event.preventDefault();
+    event.stopPropagation();
+
+    let logMessage: string;
+    const now = Date.now();
+
+    try {
+      const position = await GeolocationUtils.getCurrentPosition(this.platform, {
+        maximumAge: 80000/*80s*/,
+        timeout: 40000/*40s*/,
+        enableHighAccuracy: false,
+      });
+
+      this.form.get(controlName||'empty').patchValue(position);
+
+      logMessage = `INFO (geolocation): OK in ${Date.now() - now}ms`;
+    }
+    catch(err) {
+      logMessage = err?.message || err;
+      const duration = Date.now() - now;
+      if (typeof logMessage === 'object') {
+        logMessage = JSON.stringify(logMessage);
+      }
+      logMessage = `ERROR (geolocation): ${logMessage} - after ${duration}ms`;
+    }
+
+    this.geoPositionMessage = logMessage;
+
+    // Clean the log message, if same
+    setTimeout(() => {
+      if (this.geoPositionMessage === logMessage) {
+        this.geoPositionMessage = null;
+      }
+    }, 5000);
+
+  }
+
+  stringify = JSON.stringify;
+
+  /* -- protected methods -- */
+
+
+}
+

package/src/app/shared/material/material.animations.ts

@@ -0,0 +1,129 @@
+// import the required animation functions from the angular animations module
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+export const fadeInAnimation =
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    trigger('fadeInAnimation', [
+
+        // route 'enter' transition
+        transition(':enter', [
+
+            // css styles at start of transition
+            style({ opacity: 0 }),
+
+            // animation and styles at end of transition
+            animate('.3s', style({ opacity: 1 }))
+        ]),
+    ]);
+
+export const fadeInOutAnimation =
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    trigger('fadeInOutAnimation', [
+
+        // route 'enter' transition
+        transition(':enter', [
+
+            // css styles at start of transition
+            style({ opacity: 0 }),
+
+            // animation and styles at end of transition
+            animate('.3s', style({ opacity: 1 }))
+        ]),
+
+        // route 'leave' transition
+        transition(':leave', [
+            // animation and styles at end of transition
+            animate('.5s ease-in-out', style({
+                opacity: 0
+            }))
+        ]),
+    ]);
+
+export const slideInOutAnimation =
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    trigger('slideInOutAnimation', [
+
+        // end state styles for route container (host)
+        state('*', style({
+            // the view covers the whole screen with a semi tranparent background
+            position: 'relative',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            opacity: 1
+        })),
+
+        // route 'enter' transition
+        transition(':enter', [
+
+            // styles at start of transition
+            style({
+                // start with the content positioned off the right of the screen,
+                // -400% is required instead of -100% because the negative position adds to the width of the element
+                left: '400%',
+
+                // start with background opacity set to 0 (invisible)
+                opacity: 0
+            }),
+
+            // animation and styles at end of transition
+            animate('.3s ease-in-out', style({
+                // transition the right position to 0 which slides the content into view
+                left: 0,
+
+                // transition the background opacity to 0.8 to fade it in
+                opacity: 0.8
+            }))
+        ]),
+
+        // route 'leave' transition
+        transition(':leave', [
+            // animation and styles at end of transition
+            animate('.5s ease-in-out', style({
+                // transition the right position to -400% which slides the content out of view
+                left: '400%',
+
+                // transition the background opacity to 0 to fade it out
+                opacity: 0
+            }))
+        ])
+    ]);
+
+export const slideUpDownAnimation =
+  // trigger name for attaching this animation to an element using the [@triggerName] syntax
+  trigger('slideUpDownAnimation', [
+
+    // end state styles for route container (host)
+    state('*', style({
+      transform: 'translateY(0)',
+      opacity: 1
+    })),
+
+    // route 'enter' transition
+    transition(':enter', [
+
+      // styles at start of transition
+      style({
+        transform: 'translateY(-400%)',
+        opacity: 0
+      }),
+
+      // animation and styles at end of transition
+      animate('.3s ease-in-out', style({
+        transform: 'translateY(0)',
+        opacity: 1
+      }))
+    ]),
+
+    // route 'leave' transition
+    transition(':leave', [
+      // animation and styles at end of transition
+      animate('.5s ease-in-out', style({
+        transform: 'translateY(-100%)',
+        opacity: 0
+      }))
+    ])
+  ]);
+
+

package/src/app/shared/material/material.module.ts

@@ -0,0 +1,94 @@
+import {NgModule, Type} from '@angular/core';
+import {CdkTableModule} from '@angular/cdk/table';
+
+import {A11yModule} from '@angular/cdk/a11y';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
+import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCardModule} from '@angular/material/card';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatListModule} from '@angular/material/list';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatDialogModule} from '@angular/material/dialog';
+import {SharedMatAutocompleteModule} from './autocomplete/material.autocomplete.module';
+import {SharedMatLatLongModule} from './latlong/material.latlong.module';
+import {SharedMatDateTimeModule} from './datetime/datetime.module';
+import {SharedMatDurationModule} from './duration/duration.module';
+import {SharedMatBooleanModule} from './boolean/boolean.module';
+import {SharedMatNumpadModule} from './numpad/numpad.module';
+import {SharedMatSwipeModule} from './swipe/swipe.module';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {SharedMatChipsModule} from './chips/chips.module';
+import {SharedBadgeModule} from './badge/badge.module';
+
+const modules: Array<Type<any> | any[]> = [
+  // Angular material components
+  MatCommonModule,
+  MatTableModule,
+  MatSortModule,
+  MatPaginatorModule,
+  MatFormFieldModule,
+  MatInputModule,
+  CdkTableModule,
+  MatCheckboxModule,
+  MatExpansionModule,
+  MatToolbarModule,
+  MatDialogModule,
+  MatIconModule,
+  MatButtonModule,
+  MatMenuModule,
+  MatSelectModule,
+  MatCardModule,
+  MatTabsModule,
+  MatListModule,
+  MatStepperModule,
+  MatButtonToggleModule,
+  MatProgressSpinnerModule,
+  MatProgressBarModule,
+  MatRadioModule,
+  MatBadgeModule,
+  MatSlideToggleModule,
+  A11yModule, // Used for focus trap
+  OverlayModule,
+  ScrollingModule,
+  MatRippleModule,
+  MatDividerModule,
+  MatTooltipModule,
+  // Custom components
+  SharedMatAutocompleteModule,
+  SharedMatLatLongModule,
+  SharedMatDateTimeModule,
+  SharedMatDurationModule,
+  SharedMatBooleanModule,
+  SharedMatNumpadModule,
+  SharedMatSwipeModule,
+  SharedMatChipsModule,
+  SharedBadgeModule
+];
+
+@NgModule({
+  imports: modules,
+  exports: modules
+})
+export class SharedMaterialModule {
+}
+