Map Controls

ngageoint · Jul 7, 2024 · b88436e · b88436e
1 parent 7c00d97
commit b88436e
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 29 deletions.
diff --git a/web-app/src/app/authentication/authorize.component.ts b/web-app/src/app/authentication/authorize.component.ts
@@ -25,8 +25,6 @@ export class AuthorizeComponent {
     this.deviceId.setErrors(null)
     this.userService.authorize(this.token, this.deviceId.value).subscribe({
       next: (response) => {
-        // TODO set token event"
-        // $rootScope.$broadcast('event:user', {user: service.myself, token: LocalStorageService.getToken(), isAdmin: service.amAdmin});
         this.localStorageService.setToken(response.token)
         this.router.navigate(['map']);
       },

diff --git a/web-app/src/app/mage/mage.component.html b/web-app/src/app/mage/mage.component.html
@@ -1,15 +1,15 @@
 <navigation (onFeedToggle)="feed.toggle()" (onPreferencesToggle)="preferences.toggle()"></navigation>
 
 <mat-sidenav-container class="main-container" hasBackdrop="false">
-  <mat-sidenav #feed mode="slide" position="start" opened>
+  <mat-sidenav #feed mode="side" position="start" opened>
     <feed-panel class="feed" [observationLocation]="newObservation"></feed-panel>
   </mat-sidenav>
 
   <mat-sidenav #preferences mode="slide" position="end" disableClose="true">
     <preferences></preferences>
   </mat-sidenav>
 
-  <map></map>
+  <map (addObservation)="onAddObservation($event)"></map>
 
 </mat-sidenav-container>
 
diff --git a/web-app/src/app/mage/mage.component.ts b/web-app/src/app/mage/mage.component.ts
@@ -42,6 +42,7 @@ export class MageComponent implements OnInit, OnChanges {
   }
 
   onAddObservation($event) {
+    console.log('trying to add a mage component')
     if (this.hideFeed) {
       this.showFeed();
     }

diff --git a/web-app/src/app/map/map.component.html b/web-app/src/app/map/map.component.html
@@ -20,10 +20,10 @@
   <mat-sidenav-content>
     <div id="map" class="leaflet-map">
       <div class="map-controls-left">
-        <!-- <map-control-zoom (on-zoom)="onZoom($event)"></map-control-zoom>
-        <map-control-search (on-search)="onSearch($event)" (on-search-clear)="onSearchClear($event)"></map-control-search>
-        <map-control-location (on-locate)="onLocate($event)" (on-broadcast)="onBroadcast($event)"></map-control-location>
-        <map-control-add-observation (on-add-observation)="onAddObservation({latLng: map.getCenter()})"></map-control-add-observation> -->
+        <map-control-zoom (onZoom)="onZoom($event)"></map-control-zoom>
+        <map-control-search (onSearch)="onSearch($event)" (onSearchClear)="onSearchClear()"></map-control-search>
+        <map-control-location (onLocate)="onLocate($event)" (onBroadcast)="onBroadcast($event)"></map-control-location>
+        <map-control-add-observation (onAddObservation)="onAddObservation()"></map-control-add-observation>
       </div>
     </div>
 

diff --git a/web-app/src/app/map/map.component.scss b/web-app/src/app/map/map.component.scss
@@ -10,6 +10,15 @@
   right: 0;
 }
 
+.map-controls-left {
+  position: absolute;
+  z-index: 1000;
+  display: inline-flex;
+  flex-direction: column;
+  margin-top: 16px;
+  margin-left: 16px;
+}
+
 .map-controls-right {
   position: absolute;
   right: 0;

diff --git a/web-app/src/app/map/map.component.ts b/web-app/src/app/map/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Output } from '@angular/core';
 import { LocationState } from '../../app/map/controls/location.component';
 import { ZoomDirection } from '../../app/map/controls/zoom.component';
 import { LayerService } from '../layer/layer.service';
@@ -24,7 +24,7 @@ require('leaflet.markercluster');
   styleUrls: ['./map.component.scss'],
   providers: [LayerService]
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements AfterViewInit {
 
   public static readonly PANE_Z_INDEX_BUCKET_SIZE = 10000;
   public static readonly BASE_PANE_Z_INDEX_OFFSET = 1 * MapComponent.PANE_Z_INDEX_BUCKET_SIZE;
@@ -33,6 +33,8 @@ export class MapComponent implements OnInit {
   public static readonly FEATURE_PANE_Z_INDEX_OFFSET = 6 * MapComponent.PANE_Z_INDEX_BUCKET_SIZE;
   public static readonly MAGE_PANE_Z_INDEX_OFFSET = 7 * MapComponent.PANE_Z_INDEX_BUCKET_SIZE;
 
+  @Output() addObservation = new EventEmitter<any>();
+
   map: any
   groups: any = {}
   layers: any = {}
@@ -85,7 +87,7 @@ export class MapComponent implements OnInit {
     }
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     let mapPosition = this.localStorageService.getMapPosition();
     if (!mapPosition) {
       this.localStorageService.setMapPosition({
@@ -268,6 +270,13 @@ export class MapComponent implements OnInit {
   onPoll() {
     this.adjustTemporalLayers();
   }
+
+  onAddObservation() {
+    console.log('map add observation')
+    this.addObservation.emit({
+      latLng: this.map.getCenter()
+    })
+  }
 
   onLocate($event) {
     this.locate = $event.state;

diff --git a/web-app/src/app/observation/observation-edit/observation-edit-form-picker.component.html b/web-app/src/app/observation/observation-edit/observation-edit-form-picker.component.html
@@ -1,17 +1,20 @@
-<div class="form-picker-header">
-  <div class="form-picker-header__text">Add a Form To Your Observation</div>
-</div>
+<div class="container">
+  <div class="form-picker-header">
+    <div class="form-picker-header__text">Add a Form To Your Observation</div>
+  </div>
 
-<mat-divider class="form-picker-header__divider"></mat-divider>
+  <mat-divider class="form-picker-header__divider"></mat-divider>
 
-<mat-nav-list class="form-picker-list">
-  <mat-list-item *ngFor="let form of forms" (click)="formPicked(form)">
-    <mat-icon mat-list-icon [style.color]="form.color">description</mat-icon>
-    <div mat-line>{{form.name}}</div>
-    <div mat-line> {{form.description}} </div>
-  </mat-list-item>
-</mat-nav-list>
+  <mat-nav-list class="form-picker-list">
+    <mat-list-item *ngFor="let form of forms" (click)="formPicked(form)">
+      <mat-icon mat-list-icon [style.color]="form.color">description</mat-icon>
+      <div mat-line>{{form.name}}</div>
+      <div mat-line> {{form.description}} </div>
+    </mat-list-item>
+  </mat-nav-list>
 
-<div class="form-picker-actions">
-  <button mat-button color="primary" (click)="cancel()">CANCEL</button>
+  <div class="form-picker-actions">
+    <button mat-button color="primary" (click)="cancel()">CANCEL</button>
+  </div>
 </div>
+
diff --git a/web-app/src/app/observation/observation-edit/observation-edit-form-picker.component.scss b/web-app/src/app/observation/observation-edit/observation-edit-form-picker.component.scss
@@ -1,3 +1,7 @@
+.container {
+  width: 468px;
+}
+
 .form-picker-header {
   display: flex;
   align-items: center;

diff --git a/web-app/src/styles.scss b/web-app/src/styles.scss
@@ -13,12 +13,11 @@ app {
   height: 100%
 }
 
-mat-bottom-sheet-container.feed-panel {
-  position: absolute;
+.feed-panel .mat-bottom-sheet-container {
+  position: absolute !important;
   left: 0;
-  bottom:0;
-  width: 450px;
-  min-width: 450px;
+  bottom: 0;
+  min-width: 468px;
 }
 
 .form-remove-snackbar {