Update location buttons

ngageoint · Sep 5, 2024 · 3b8d3fa · 3b8d3fa
1 parent 242adb1
commit 3b8d3fa
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 158 deletions.
diff --git a/web-app/src/app/contact/contact-dialog.component.ts b/web-app/src/app/contact/contact-dialog.component.ts
@@ -1,14 +1,15 @@
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, Inject } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { LinkGenerator } from "./utilities/link-generator";
+import { Api } from "../api/api.entity";
+import { ApiService } from "../api/api.service";
 
 @Component({
     selector: 'contact-dialog',
     templateUrl: 'contact-dialog.component.html',
     styleUrls: ['./contact-dialog.component.scss'],
 })
-export class ContactDialogComponent implements OnInit {
-    api: any;
+export class ContactDialogComponent  {
     statusTitle: string;
     statusMessage: string;
     id: string;
@@ -17,37 +18,44 @@ export class ContactDialogComponent implements OnInit {
     phoneLink: string;
 
     constructor(
-        public dialogRef: MatDialogRef<ContactDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: any) {
+        private apiService: ApiService,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+        public dialogRef: MatDialogRef<ContactDialogComponent>
+    ) {
+			this.statusTitle = data.info.statusTitle
+			this.statusMessage = data.info.statusMessage
+			this.id = data.info.id
+			this.strategy = data.strategy
 
-        this.api = data.api;
-        this.statusTitle = data.info.statusTitle;
-        this.statusMessage = data.info.statusMessage;
-        this.id = data.info.id;
-        this.strategy = data.strategy;
+			apiService.getApi().subscribe((api: Api) => {
+				this.statusMessage = `${this.statusMessage}${this.generateContactMessage(api)}`
+			})
     }
 
-    ngOnInit(): void {
-        const emailLink = LinkGenerator.emailLink(this.api.contactinfo, this.statusMessage, this.id, this.strategy);
-        const phoneLink = LinkGenerator.phoneLink(this.api.contactinfo);
+    private generateContactMessage(api: Api): string {
+        const emailLink = LinkGenerator.emailLink(api.contactInfo, this.statusMessage, this.id, this.strategy)
+        const phoneLink = LinkGenerator.phoneLink(api.contactInfo);
 
+				var message = ""
         if (emailLink || phoneLink) {
-            this.statusMessage += "<br /><br />";
-            this.statusMessage += "You may contact your MAGE administrator via ";
+            message += "<br /><br />"
+					  message += "You may contact your MAGE administrator via "
             if (emailLink) {
-                this.statusMessage += "<a href=" + emailLink + ">Email</a>";
+							message += "<a href=" + emailLink + ">Email</a>"
             }
             if (emailLink && phoneLink) {
-                this.statusMessage += " or ";
+							message += " or "
             }
             if (phoneLink) {
-                this.statusMessage += "<a href=" + phoneLink + ">Phone</a>";
+							message += "<a href=" + phoneLink + ">Phone</a>"
             }
-            this.statusMessage += " for further assistance.";
+						message += " for further assistance."
         }
+
+				return message
     }
 
     close(): void {
-        this.dialogRef.close('cancel');
+			this.dialogRef.close('cancel')
     }
 }
diff --git a/web-app/src/app/contact/contact.component.ts b/web-app/src/app/contact/contact.component.ts
diff --git a/web-app/src/app/feed-panel/feed-panel.component.html b/web-app/src/app/feed-panel/feed-panel.component.html
@@ -13,7 +13,6 @@
 
   <feed-item *ngIf="feedItem" @slide class="component__view" [item]="feedItem.item" [feed]="feedItem.feed"></feed-item>
 
-  <contact *ngIf="contactOpen" [open]="contactOpen" [info]="info" (on-contact-close)="onContactClose()"></contact>
   <observation-list class="feed-container" *ngIf="currentTab.id === 'observations'"></observation-list>
   <user-list class="feed-container" *ngIf="currentTab.id === 'people'"></user-list>
   <feed-list class="feed-container" [feed]="currentTab.feed" *ngIf="currentTab.feed"></feed-list>

diff --git a/web-app/src/app/feed-panel/feed-panel.component.ts b/web-app/src/app/feed-panel/feed-panel.component.ts
@@ -9,6 +9,7 @@ import { MapService } from '../map/map.service';
 import { UserService } from '../user/user.service';
 import { FilterService } from '../filter/filter.service';
 import { EventService } from '../event/event.service';
+import { ContactDialogComponent } from '../contact/contact-dialog.component';
 
 @Component({
   selector: 'feed-panel',
@@ -189,13 +190,17 @@ export class FeedPanelComponent implements OnInit, OnChanges {
   createNewObservation(location: any): void {
     const event = this.filterService.getEvent()
     if (!this.eventService.isUserInEvent(this.userService.myself, event)) {
-      this.info = {
-        statusTitle: this.statusTitle,
-        statusMessage: this.statusMessage,
-        id: this.userService.myself.username
-      };
-      this.contactOpen = { opened: true };
-
+      this.dialog.open(ContactDialogComponent, {
+        width: '500px',
+        data: {
+          info: {
+            statusTitle: this.statusTitle,
+            statusMessage: this.statusMessage,
+            id: this.userService.myself.username
+          }
+        }
+      })
+
       return
     }
 

diff --git a/web-app/src/app/home/home.module.ts b/web-app/src/app/home/home.module.ts
@@ -122,7 +122,6 @@ import { ObservationEditAttachmentComponent } from '../observation/observation-e
 import { ObservationEditPasswordComponent } from '../observation/observation-edit/observation-edit-password/observation-edit-password.component';
 import { ObservationViewPasswordComponent } from '../observation/observation-view/observation-view-password/observation-view-password.component';
 import { PasswordPipe } from '../observation/observation-view/observation-view-password/password.pipe';
-import { ContactComponent } from '../contact/contact.component';
 import { ContactDialogComponent } from '../contact/contact-dialog.component';
 import { ExportDataComponent } from '../export/export-data/export-data.component';
 import { NoExportsComponent } from '../export/empty-state/no-exports.component';
@@ -230,7 +229,6 @@ const routes: Routes = [{
     ObservationEditPasswordComponent,
     ObservationViewPasswordComponent,
     PasswordPipe,
-    ContactComponent,
     ContactDialogComponent
   ],
   imports: [

diff --git a/web-app/src/app/map/controls/location.component.html b/web-app/src/app/map/controls/location.component.html
@@ -1,8 +1,8 @@
 <div class="location">
-  <button mat-mini-fab [color]="locateState === LocationState.ON ? 'primary' : 'basic'" matTooltip="Show Your Location" matTooltipPosition="after" (click)="locate()">
-    <mat-icon color="primary" [ngClass]="{'active': locateState === LocationState.ON}">{{locateState === LocationState.ON ? 'navigation' : 'near_me'}}</mat-icon>
+  <button mat-mini-fab [color]="state === LocationState.Off ? 'basic' : 'primary'" matTooltip="Show Your Location" matTooltipPosition="after" (click)="onLocate()">
+    <mat-icon color="primary" [ngClass]="{'active': state !== LocationState.Off}">{{state === LocationState.Off ? 'near_me' : 'navigation'}}</mat-icon>
   </button>
-  <button mat-mini-fab [color]="broadcastState === LocationState.ON ? 'primary' : 'basic'" matTooltip="Report Your Location" matTooltipPosition="after" (click)="broadcast()">
-    <mat-icon color="primary" [ngClass]="{'active': broadcastState === LocationState.ON}">my_location</mat-icon>
+  <button mat-mini-fab [color]="state === LocationState.Broadcast ? 'primary' : 'basic'" matTooltip="Report Your Location" matTooltipPosition="after" (click)="onBroadcast()">
+    <mat-icon color="primary" [ngClass]="{'active': state === LocationState.Broadcast}">my_location</mat-icon>
   </button>
 </div>
diff --git a/web-app/src/app/map/controls/location.component.ts b/web-app/src/app/map/controls/location.component.ts
@@ -1,10 +1,11 @@
-import { Component, Output, EventEmitter, AfterViewInit, ElementRef, ViewChildren, QueryList } from '@angular/core';
+import { Component, Output, EventEmitter, AfterViewInit, ElementRef, ViewChildren, QueryList, Input } from '@angular/core';
 import { DomEvent } from 'leaflet';
 import { MatButton } from '@angular/material/button';
 
 export enum LocationState {
-  ON,
-  OFF
+  Off,
+  Locate,
+  Broadcast
 }
 
 export interface LocationEvent {
@@ -19,36 +20,22 @@ export interface LocationEvent {
 export class LocationComponent implements AfterViewInit {
   @ViewChildren(MatButton, { read: ElementRef }) buttons: QueryList<ElementRef>;
 
-  @Output() onLocate = new EventEmitter<LocationEvent>();
-  @Output() onBroadcast = new EventEmitter<LocationEvent>();
+  @Input() state: LocationState
+  @Output() stageChange = new EventEmitter<LocationEvent>()
 
-  LocationState = LocationState;
-  locateState = LocationState.OFF;
-  broadcastState = LocationState.OFF;
+  LocationState = LocationState
 
   ngAfterViewInit(): void {
-    DomEvent.disableClickPropagation(this.buttons.first.nativeElement);
-    DomEvent.disableClickPropagation(this.buttons.last.nativeElement);
+    DomEvent.disableClickPropagation(this.buttons.first.nativeElement)
+    DomEvent.disableClickPropagation(this.buttons.last.nativeElement)
   }
 
-  locate(): void {
-    this.locateState = this.locateState === LocationState.ON ? LocationState.OFF : LocationState.ON;
-
-    if (this.locateState === LocationState.OFF && this.broadcastState === LocationState.ON) {
-      this.broadcast();
-    }
-
-    this.onLocate.emit({ state: this.locateState });
+  onLocate(): void {
+    this.stageChange.emit({ state: this.state === LocationState.Off ? LocationState.Locate : LocationState.Off })
   }
 
-  broadcast(): void {
-    this.broadcastState = this.broadcastState === LocationState.ON ? LocationState.OFF : LocationState.ON;
-
-    if (this.broadcastState === LocationState.ON && this.locateState === LocationState.OFF) {
-      this.locate();
-    }
-
-    this.onBroadcast.emit({ state: this.broadcastState });
+  onBroadcast(): void {
+    this.stageChange.emit({ state: this.state === LocationState.Broadcast ? LocationState.Locate : LocationState.Broadcast })
   }
 
 }
diff --git a/web-app/src/app/map/map.component.html b/web-app/src/app/map/map.component.html
@@ -28,7 +28,7 @@
         <map-control-add-observation (onAddObservation)="onAddObservation()"></map-control-add-observation>
       </div>
       <div class="map-controls-right">
-        <map-control-location (onLocate)="onLocate($event)" (onBroadcast)="onBroadcast($event)"></map-control-location>
+        <map-control-location [state]="locationState" (stageChange)="onLocationState($event)"></map-control-location>
         <map-control-zoom (onZoom)="onZoom($event)"></map-control-zoom>
       </div>
     </div>