From d9a42ca75a200e46f1e767f803f85d9c3eea0e71 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Mon, 1 Feb 2021 08:34:17 +0100
Subject: [PATCH] Hide heading and tolerance on desktop

---
 .../aol/gps-location/gps-location.component.html          | 4 ++--
 .../aol/gps-location/gps-location.component.scss          | 8 ++++++++
 .../components/aol/gps-location/gps-location.component.ts | 1 +
 .../src/fm-map/components/map/map.component.html          | 2 +-
 .../common-map/src/fm-map/components/map/map.component.ts | 6 +++++-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html
index d06dab1..e967599 100644
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html
@@ -6,8 +6,8 @@
         <stop offset="100%" class="stop2" />
       </linearGradient>
     </defs>
-    <circle class="tolerance" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
-    <path *ngIf="showHeading" class="heading" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
+    <circle class="tolerance hidden" [class]="{'hidden':!showTolerance}" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
+    <path class="heading hidden" [class]="{'hidden': !showHeading }" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
     <circle class="border" cx="500" cy="500" r="7" stroke="none" />
     <circle class="center" cx="500" cy="500" r="6" stroke="none" />
 
diff --git a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss
index 20916c6..0a0f8f6 100644
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss
@@ -9,11 +9,19 @@
   stroke-width: 0;
 }
 
+.heading.hidden {
+  display: none;
+}
+
 .tolerance {
   fill: $primary;
   fill-opacity:0.4;
 }
 
+.tolerance.hidden {
+  display: none
+}
+
 .border {
   fill: $white;
 }
diff --git a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
index 7d084b9..7e6a981 100644
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
@@ -17,6 +17,7 @@ export class GpsLocation  implements OnInit,OnChanges{
   @Input() location: number[]=[0,0];
   @Input() locationTolerance: number = 0;
   @Input() showHeading: boolean = false;
+  @Input() showTolerance: boolean = false;
   @Input() heading: number = 0;
   @Input() headingTolerance: number = 0;
   public locTolerancePixels: number = 0;
diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html
index adf6701..39db40b 100644
--- a/projects/common-map/src/fm-map/components/map/map.component.html
+++ b/projects/common-map/src/fm-map/components/map/map.component.html
@@ -39,7 +39,7 @@
       <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
     <router-outlet name="map-layers"></router-outlet>
-    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
+    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="isMobile" [showTolerance]="isMobile" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container" >
       <router-outlet name="map-controls"></router-outlet>
       <fm-map-layer-switcher></fm-map-layer-switcher>
diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts
index 5ea9aed..ca578cc 100644
--- a/projects/common-map/src/fm-map/components/map/map.component.ts
+++ b/projects/common-map/src/fm-map/components/map/map.component.ts
@@ -4,6 +4,7 @@ import { Observable, Subject, Subscription, from,of ,EMPTY } from 'rxjs';
 import { withLatestFrom, switchMap,skip  } from 'rxjs/operators';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Store } from '@ngrx/store';
+import { DeviceService } from '@farmmaps/common';
 //import { proj,Map } from 'openlayers';
 
 // Map
@@ -83,6 +84,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   private lastUrl = "";
   private initialized: boolean = false;
   public noContent: boolean = false;
+  public isMobile = true;
 
   @ViewChild('map') map;
   @ViewChild('contentDiv') contentDiv: ElementRef;
@@ -96,7 +98,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private location: Location,
     private geolocationService: GeolocationService,
     private zone: NgZone,
-    private deviceorientationService:DeviceOrientationService) {
+    private deviceorientationService:DeviceOrientationService,
+    private devicesService:DeviceService) {
       this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$)).subscribe(([queryState,mapState]) =>{
         if(queryState) {
           let newQueryState = tassign(mapReducers.initialQueryState);
@@ -171,6 +174,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.store.dispatch(new mapActions.Clear());
     this.selectedFeatures$.next({x:0,y:0,features:[]});
     this.selectedFeatures$.next(null);
+    this.isMobile = this.devicesService.IsMobile();
   }
 
   initCustomStyles() {