Merge pull request #70 from sitcomlab/fix/misc-enhancements

#67: refactored map fabs
sitcomlab · Apr 27, 2021 · f873515 · f873515
2 parents c077e29 + 366508a
commit f873515
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/trajectory/map/map.page.html b/src/app/trajectory/map/map.page.html
@@ -14,6 +14,7 @@
     [leafletOptions]="mapOptions"
     [leafletFitBounds]="mapBounds"
     (leafletMapReady)="onMapReady($event)"
+    (leafletMapMoveEnd)="onMapMoved($event)"
   >
     <div [leafletLayer]="polyline"></div>
     <div [leafletLayer]="inferenceMarkers"></div>
@@ -73,23 +74,34 @@
   </ion-card>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button
-      *ngIf="!showInferenceControls && currentInferences.length !== 0"
-      (click)="onToggleInferenceControls()"
-      size="small"
-    >
-      <ion-icon name="filter"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button (click)="showInferences()">
-      <ion-icon name="analytics-outline"></ion-icon>
+    <ion-fab-button>
+      <ion-icon name="layers-outline"></ion-icon>
     </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button
+        *ngIf="currentInferences.length !== 0"
+        (click)="onToggleInferenceControls()"
+        text="Show inference-controls"
+      >
+        <ion-icon name="filter"></ion-icon>
+      </ion-fab-button>
 
-    <ion-fab-button
-      *ngIf="trajectoryType === TrajectoryTypes.USERTRACK"
-      (click)="onToggleFollowMode()"
-    >
-      <ion-icon *ngIf="followPosition" name="locate-outline"></ion-icon>
-      <ion-icon *ngIf="!followPosition" name="map-outline"></ion-icon>
-    </ion-fab-button>
+      <ion-fab-button
+        *ngIf="!generatedInferences"
+        (click)="showInferences()"
+        text="Create inferences"
+      >
+        <ion-icon name="analytics-outline"></ion-icon>
+      </ion-fab-button>
+
+      <ion-fab-button
+        *ngIf="trajectoryType === TrajectoryTypes.USERTRACK"
+        (click)="onToggleFollowMode()"
+        text="Toggle location"
+      >
+        <ion-icon *ngIf="followPosition" name="location"></ion-icon>
+        <ion-icon *ngIf="!followPosition" name="location-outline"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
   </ion-fab>
 </ion-content>
diff --git a/src/app/trajectory/map/map.page.scss b/src/app/trajectory/map/map.page.scss
@@ -31,3 +31,21 @@
   margin: 0px !important;
   --border-radius: 100% !important;
 }
+
+ion-fab-button[text] {
+  position: relative;
+}
+
+ion-fab-button[text]::after {
+  position: absolute;
+  content: attr(text);
+  z-index: 1;
+  right: 55px;
+  bottom: 4px;
+  background-color: white;
+  padding: 9px;
+  border-radius: 15px;
+  color: black;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+}
diff --git a/src/app/trajectory/map/map.page.ts b/src/app/trajectory/map/map.page.ts
@@ -45,6 +45,7 @@ export class MapPage implements OnInit, OnDestroy {
   inferenceMarkers = new LayerGroup()
   lastLocation: CircleMarker
   followPosition: boolean
+  suppressNextMapMoveEvent: boolean
   trajectoryType: TrajectoryType
 
   // inference controls
@@ -53,6 +54,7 @@ export class MapPage implements OnInit, OnDestroy {
   showWorkInferences = true
   currentConfidenceThreshold = 50
   currentInferences: Inference[]
+  generatedInferences = false
 
   // should only be used for invalidateSize(), content changes via directive bindings!
   private map: Map | undefined
@@ -91,6 +93,7 @@ export class MapPage implements OnInit, OnDestroy {
         }).bindPopup(`Timestamp: ${lastMeasurement.timestamp.toLocaleString()}`)
 
         if (this.followPosition) {
+          this.suppressNextMapMoveEvent = true
           this.mapBounds = this.lastLocation.getLatLng().toBounds(100)
         } else if (this.mapBounds === undefined) {
           this.mapBounds = this.polyline.getBounds()
@@ -116,18 +119,29 @@ export class MapPage implements OnInit, OnDestroy {
 
     // TODO: rework this with optional inference type parameter,
     //   which we subscribe to and use to set zoom & open popup
-    if (history.state.center)
+    if (history.state.center) {
       this.mapBounds = latLng(history.state.center).toBounds(100)
+    }
   }
 
   onMapReady(map: Map) {
     this.map = map
   }
 
+  onMapMoved(map: Map) {
+    if (!this.suppressNextMapMoveEvent) {
+      this.followPosition = false
+    } else {
+      this.suppressNextMapMoveEvent = false
+    }
+  }
+
   onToggleFollowMode() {
+    this.suppressNextMapMoveEvent = true
     this.followPosition = !this.followPosition
-    if (this.followPosition)
+    if (this.followPosition) {
       this.mapBounds = this.lastLocation.getLatLng().toBounds(100)
+    }
   }
 
   onToggleInferenceControls() {
@@ -141,7 +155,7 @@ export class MapPage implements OnInit, OnDestroy {
       .finally(async () => {
         await this.hideLoadingDialog()
       })
-
+    this.generatedInferences = true
     switch (inferenceResult.status) {
       case InferenceResultStatus.successful:
         this.currentInferences = inferenceResult.inferences