Record gpx feature

packages/auth/src/lib/shared/auth-storage.service.ts

@@ -3,8 +3,8 @@ import { Injectable } from '@angular/core';
 
 import { BaseStorage, ConfigService, StorageScope } from '@igo2/core';
 
-import { AuthService } from './auth.service';
 import { AuthStorageOptions } from './auth-storage.interface';
+import { AuthService } from './auth.service';
 import { TokenService } from './token.service';
 
 @Injectable({

packages/core/src/lib/monitoring/sentry/sentry.interface.ts

@@ -1,4 +1,5 @@
 import { BrowserOptions, ErrorHandlerOptions } from '@sentry/angular-ivy';
+
 import { MonitoringOptions } from '../shared/monitoring.interface';
 
 export type SentryMonitoringOptions = BrowserOptions &

packages/core/src/lib/monitoring/sentry/sentry.utils.spec.ts

@@ -1,6 +1,6 @@
-import { isTracingEnabled } from './sentry.utils';
-import { SentryMonitoringOptions } from './sentry.interface';
 import { MOCK_SENTRY_OPTIONS } from '../__mocks__/monitoring-mock';
+import { SentryMonitoringOptions } from './sentry.interface';
+import { isTracingEnabled } from './sentry.utils';
 
 const getOptions = (
   options?: Partial<SentryMonitoringOptions>

packages/core/src/lib/monitoring/sentry/sentry.utils.ts

@@ -1,9 +1,12 @@
 import { setUser } from '@sentry/angular-ivy';
-import { SentryMonitoringOptions } from './sentry.interface';
+
 import { BaseUser } from '../../user';
+import { SentryMonitoringOptions } from './sentry.interface';
 
 export const isTracingEnabled = (options: SentryMonitoringOptions): boolean =>
-  options.enableTracing || !!options.tracesSampleRate || !!options.tracesSampler;
+  options.enableTracing ||
+  !!options.tracesSampleRate ||
+  !!options.tracesSampler;
 
 export const identifySentryUser = (user: BaseUser | null): void => {
   setUser(

packages/core/src/lib/monitoring/shared/any-monitoring.interface.ts

@@ -1,3 +1,3 @@
-import { SentryMonitoringOptions } from "../sentry/sentry.interface";
+import { SentryMonitoringOptions } from '../sentry/sentry.interface';
 
 export type AnyMonitoringOptions = SentryMonitoringOptions;

packages/geo/src/lib/map/index.ts

@@ -2,6 +2,9 @@ export * from './shared';
 
 export * from './map-browser';
 export * from './zoom-button';
+export * from './record-button';
+export * from './record-button/record-parameters';
+export * from './record-button/gpx-selection';
 export * from './menu-button';
 export * from './geolocate-button';
 export * from './home-extent-button';

packages/geo/src/lib/map/map.module.ts

@@ -1,7 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoConfirmDialogModule } from '@igo2/common';
@@ -16,6 +22,15 @@ import { MapBrowserComponent } from './map-browser/map-browser.component';
 import { MapCenterComponent } from './map-center/map-center.component';
 import { MenuButtonComponent } from './menu-button/menu-button.component';
 import { OfflineButtonComponent } from './offline-button/offline-button.component';
+import { GpxSelectionComponent } from './record-button/gpx-selection/gpx-selection.component';
+import {
+  PauseStopComponent,
+  RecordButtonComponent
+} from './record-button/record-button.component';
+import {
+  RecordParametersComponent,
+  WarningDialogComponent
+} from './record-button/record-parameters/record-parameters.component';
 import { RotationButtonComponent } from './rotation-button/rotation-button.component';
 import { HoverFeatureDirective } from './shared/hover-feature.directive';
 import { PointerPositionDirective } from './shared/map-pointer-position.directive';
@@ -27,6 +42,14 @@ import { ZoomButtonComponent } from './zoom-button/zoom-button.component';
 @NgModule({
   imports: [
     CommonModule,
+
+    MatRadioModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatDialogModule,
+    MatTableModule,
+
     IgoLanguageModule,
     IgoConfirmDialogModule,
     MatIconModule,
@@ -36,6 +59,13 @@ import { ZoomButtonComponent } from './zoom-button/zoom-button.component';
   exports: [
     MapBrowserComponent,
     ZoomButtonComponent,
+
+    RecordParametersComponent,
+    RecordButtonComponent,
+    GpxSelectionComponent,
+    PauseStopComponent,
+    WarningDialogComponent,
+
     GeolocateButtonComponent,
     HomeExtentButtonComponent,
     RotationButtonComponent,
@@ -54,6 +84,13 @@ import { ZoomButtonComponent } from './zoom-button/zoom-button.component';
   declarations: [
     MapBrowserComponent,
     ZoomButtonComponent,
+
+    RecordParametersComponent,
+    RecordButtonComponent,
+    GpxSelectionComponent,
+    PauseStopComponent,
+    WarningDialogComponent,
+
     GeolocateButtonComponent,
     HomeExtentButtonComponent,
     RotationButtonComponent,

packages/geo/src/lib/map/record-button/gpx-selection/gpx-selection.component.html

@@ -0,0 +1,40 @@
+<h1 mat-dialog-title>
+  {{ 'igo.geo.record-prompts.filesToDownload' | translate }}
+</h1>
+<div mat-dialog-content>
+  <mat-radio-group class="radio-group element" [(ngModel)]="gpxType">
+    <mat-radio-button value="track">{{
+      'igo.geo.record-prompts.track' | translate
+    }}</mat-radio-button>
+    <mat-radio-button value="points">Points</mat-radio-button>
+    <mat-radio-button value="both">{{
+      'igo.geo.record-prompts.both' | translate
+    }}</mat-radio-button>
+  </mat-radio-group>
+</div>
+<div mat-dialog-actions style="padding: 0 0 8px 0">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="onNoClick()"
+    style="margin-top: 8px"
+  >
+    {{ 'igo.geo.record-prompts.delete' | translate }}
+  </button>
+  <button
+    mat-raised-button
+    [mat-dialog-close]="gpxType"
+    cdkFocusInitial
+    style="margin-right: 8px; margin-top: 8px"
+  >
+    {{ 'igo.geo.record-prompts.save' | translate }}
+  </button>
+  <button
+    mat-raised-button
+    [mat-dialog-close]="undefined"
+    cdkFocusInitial
+    style="margin-left: 0; margin-top: 8px"
+  >
+    {{ 'igo.geo.record-prompts.continueRecording' | translate }}
+  </button>
+</div>

packages/geo/src/lib/map/record-button/gpx-selection/gpx-selection.component.scss

@@ -0,0 +1,13 @@
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+
+.element > * {
+  margin: 5px;
+}
+
+.element {
+  margin: 5px;
+}

packages/geo/src/lib/map/record-button/gpx-selection/gpx-selection.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+import { ConfirmDialogService } from '@igo2/common';
+import { LanguageService } from '@igo2/core';
+
+@Component({
+  selector: 'igo-gpx-selection',
+  templateUrl: './gpx-selection.component.html',
+  styleUrls: ['./gpx-selection.component.scss']
+})
+export class GpxSelectionComponent {
+  gpxType: string = 'track';
+
+  constructor(
+    private dialogRef: MatDialogRef<GpxSelectionComponent>,
+    private languageService: LanguageService,
+    private confirmDialogService: ConfirmDialogService
+  ) {}
+
+  onNoClick(): void {
+    this.confirmDialogService
+      .open(
+        this.languageService.translate.instant(
+          'igo.geo.record-prompts.confirmNotDownloadGpx'
+        )
+      )
+      .subscribe((res) => {
+        if (res === true) {
+          this.dialogRef.close('noDownload');
+        }
+      });
+  }
+}

packages/geo/src/lib/map/record-button/gpx-selection/index.ts

@@ -0,0 +1 @@
+export * from './gpx-selection.component';

packages/geo/src/lib/map/record-button/index.ts

@@ -0,0 +1 @@
+export * from './record-button.component';

packages/geo/src/lib/map/record-button/record-button.component.html

@@ -0,0 +1,47 @@
+<button
+  style="
+    position: absolute;
+    top: 95px;
+    right: 5px;
+    opacity: 75%;
+    background-color: #fafafa;
+    border: none;
+    color: black;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    padding: 7px 7px 7px 5px;
+    border-radius: 6px;
+  "
+  (click)="record()"
+>
+  <span></span>
+  <div *ngIf="!recordParameters">
+    <span style="font-size: 1.25em"
+      ><mat-icon
+        svgIcon="disc"
+        [color]="isRecording ? 'warn' : ''"
+        style="vertical-align: middle"
+      ></mat-icon>
+    </span>
+    <span style="vertical-align: middle">{{
+      recordParameters
+        ? getTimeRecording()
+        : ('igo.geo.mapButtons.record' | translate)
+    }}</span>
+  </div>
+  <div *ngIf="recordParameters">
+    <span style="font-size: 1.25em"
+      ><mat-icon
+        [svgIcon]="isRecording ? 'disc' : 'play'"
+        [color]="isRecording ? 'warn' : ''"
+        style="vertical-align: middle"
+      ></mat-icon>
+    </span>
+    <span style="vertical-align: middle">{{
+      recordParameters
+        ? getTimeRecording()
+        : ('igo.geo.mapButtons.record' | translate)
+    }}</span>
+  </div>
+</button>