Merge pull request #349 from AuScope/AUS-4035

AUS-4035 Added ROI(region of interest) for user.

src/app/app.module.ts

@@ -83,6 +83,8 @@ import { CreatePermanentLinkModalComponent } from './modalwindow/permanentlink/c
 import { AddRegistryModalComponent } from './modalwindow/registry/add-registry.modal.component';
 import { ConfirmModalComponent } from './modalwindow/confirm/confirm.modal.component';
 
+import { ROIModalComponent } from './modalwindow/roi/roi.modal.component';
+
 // Services
 import { AuscopeApiService } from './services/api/auscope-api.service';
 import { FilterService } from './services/filter/filter.service';
@@ -120,6 +122,7 @@ import { AuthService } from './services/auth/auth.service';
 import { LayerGroupComponent } from './menupanel/custompanel/layergroup.component';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { AuthErrorHandlerInterceptor } from './interceptors/auth-error.interceptor';
+import { ROIModule } from './modalwindow/roi/roi.modal.modules';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -215,7 +218,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
         FormsModule,
         ReactiveFormsModule,
         BrowserModule,
-        DragDropModule
+        DragDropModule,
+        ROIModule
     ],
     bootstrap: [
         AppComponent

src/app/cesium-map/csmap.clipboard.component.html

@@ -24,6 +24,7 @@
 			<input type="file" accept=".kml" class="file-input" (change)="onKmlFileSelected($event)" #KmlFileLoader>
 			<button (click)="KmlFileLoader.click()" type="button" title="Load polygon from KML file" [ngStyle]="{'background-color': isDrawingPolygon ? '#282572' : '#303336'}" class="cesium-button cesium-toolbar-button editor-button"><i class="fa fa-lg fa-file" aria-hidden="true"></i>Load</button>
 			<button (click)="onKmlFileSave()" type="button" title="Save polygon to KML file" [ngStyle]="{'background-color': isDrawingPolygon ? '#282572' : '#303336'}" class="cesium-button cesium-toolbar-button editor-button"><i class="fa fa-lg fa-floppy-o" aria-hidden="true"></i>Save</button>
+			<button (click)="onRoiSave()" type="button" title="Save to ROI" [ngStyle]="{'background-color': isDrawingPolygon ? '#282572' : '#303336'}" class="cesium-button cesium-toolbar-button editor-button" ><img src="extension/svg/polygon.svg" fill="#000000" width="24" height="24" style="color:#edffff;">ROI </button>
 			<button (click)='toggleFilterLayers()' type="button" title="Toggle applicable layers" class="cesium-button cesium-toolbar-button editor-button">
 				<i *ngIf="!isFilterLayerShown" class="fa fa-lg fa-toggle-off" aria-hidden="true"></i>
 				<i *ngIf="isFilterLayerShown" class="fa fa-lg fa-toggle-on" aria-hidden="true"></i>

src/app/cesium-map/csmap.clipboard.component.ts

@@ -1,8 +1,9 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { CsClipboardService, DownloadWfsService, Polygon } from '@auscope/portal-core-ui';
 import { Component, OnInit } from '@angular/core';
-import { isNumber } from '@turf/helpers';
+import { isNumber, polygon } from '@turf/helpers';
 import { saveAs } from 'file-saver';
+import { UserStateService } from 'app/services/user/user-state.service';
 
 @Component({
   selector: 'app-cs-clipboard',
@@ -30,7 +31,7 @@ export class CsMapClipboardComponent implements OnInit {
   kmlFileName = '';
 
 
-  constructor(private csClipboardService: CsClipboardService, private downloadWfsService: DownloadWfsService) {
+  constructor(private csClipboardService: CsClipboardService, private userStateService: UserStateService, private downloadWfsService: DownloadWfsService) {
     this.polygonBBox = null;
     this.isFilterLayerShown = false;
     this.csClipboardService.filterLayersBS.subscribe(filterLayerStatus => {
@@ -52,7 +53,15 @@ export class CsMapClipboardComponent implements OnInit {
         this.polygonBBox = polygonBBox;
     });
   }
-
+  onRoiSave(event) {
+    if (this.polygonBBox === null) return;
+    let roiPolygon= this.polygonBBox;
+    let strToday=new Date(); 
+    let dt= new Date(strToday).toISOString();
+    roiPolygon.name = 'ROI-' + dt.slice(0,dt.lastIndexOf('.'));
+    this.userStateService.roiList.push(roiPolygon);
+    this.userStateService.saveROI();
+  }
   onKmlFileSave(event) {
     if (this.polygonBBox === null) return;
 

src/app/menupanel/login/login-menu.component.html

@@ -7,6 +7,9 @@
             </div>
         </button>
         <mat-menu #loginMenu="matMenu" style="margin-top:12px;">
+            <h5 *ngIf="userHasROI()" mat-menu-item (click)="manageROI()"><img src="extension/svg/polygon.svg" fill="#000000" width="24" height="24" style="color:#7E7CAA">
+              <span style="color:#7ECAA">&nbsp;&nbsp;Manage Region Of Interest</span>
+            </h5>
             <h5 *ngIf="userHasStates()" mat-menu-item (click)="manageStates()">
                 <span style="color:#7E7CAA"><i class="ti-link"></i>&nbsp;&nbsp;Manage Permanent Links</span>
             </h5>

src/app/menupanel/login/login-menu.component.ts

@@ -6,7 +6,8 @@ import { PermanentLink } from 'app/models/permanentlink.model';
 import { User } from 'app/models/user.model';
 import { AuthService } from 'app/services/auth/auth.service';
 import { UserStateService } from '../../services/user/user-state.service';
-
+import { ROIModalComponent } from 'app/modalwindow/roi/roi.modal.component';
+import { CsClipboardService } from '@auscope/portal-core-ui';
 @Component({
     selector: '[app-login-menu]',
     templateUrl: './login-menu.component.html',
@@ -17,7 +18,7 @@ export class LoginMenuComponent {
   user: User;
   states: PermanentLink[];
 
-  constructor(private router: Router, private authService: AuthService, private userStateService: UserStateService, private modalService: NgbModal) {
+  constructor(private router: Router, private authService: AuthService, private userStateService: UserStateService, private csClipboardService: CsClipboardService, private modalService: NgbModal) {
     this.userStateService.user.subscribe(user => {
       this.user = user;
     });
@@ -39,6 +40,23 @@ export class LoginMenuComponent {
   logOut() {
     this.authService.logout();
   }
+  /**
+   * Manage user's ROI list
+   */  
+  manageROI() {
+    this.modalService.open(ROIModalComponent, {
+      size: 'sm',
+      backdrop: false
+    });
+  }
+  /**
+   * Test if user has ROI
+   *
+   * @returns true if user has saved ROI, false otherwise
+   */
+  public userHasROI(): boolean {
+    return this.userStateService.roiList.length > 0;
+  }
 
   /**
    * Test if user has states

src/app/modalwindow/roi/roi.modal.component.html

@@ -0,0 +1,19 @@
+<div class="modal-header">
+    <h4>Region Of Interest</h4><button class="btn btn-sm btn-outline pull-right" aria-label="Close" (click)="activeModal.close()"><i class="fa fa-times"></i></button>
+</div>
+<div class="modal-body">
+    <table>
+        <tbody>
+          <tr *ngFor = "let roi of userStateService.roiList">
+            <td>{{roi.name}}</td>
+            <td  class="btn-col" style="white-space: nowrap">
+              <a class="btn btn-purple btn-xs" title="add to map" (click) = "onAddToPolyFilter(roi)"><i class="ti-map-alt"></i></a>
+              <a class="btn btn-light btn-xs" title="delete" (click)="onDelete(roi)"><i class="ti-trash"></i></a>
+            </td>
+          </tr>
+        </tbody>
+    </table>    
+    <form class="text-left">
+        <button type="button" class="btn btn-primary" (click)="close()">Close</button>
+    </form>
+</div>

src/app/modalwindow/roi/roi.modal.component.ts

@@ -0,0 +1,69 @@
+import { Component, ElementRef, NgModule, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmModalComponent } from '../confirm/confirm.modal.component';
+import { CsClipboardService } from '@auscope/portal-core-ui';
+import { CommonModule } from '@angular/common';
+import { UserStateService } from 'app/services/user/user-state.service';
+import { User } from 'app/models/user.model';
+
+
+
+/**
+ * Modal component used to display a user's ROI lists
+ */
+@Component({
+  selector: 'app-roi-form',
+  templateUrl: './roi.modal.component.html'
+})
+
+
+export class ROIModalComponent {
+  public user: User;
+  roiFormArray: UntypedFormArray;
+  editingROI: number = -1;  // Keep track of ROI being edited (-1 = none)
+  constructor(public csClipboardService: CsClipboardService, public userStateService: UserStateService, private formBuilder: UntypedFormBuilder, private modalService: NgbModal, public activeModal: NgbActiveModal) {
+
+  }
+  /**
+   * Delete a ROI from user's ROI lists
+   * @param roi Polygon
+   */
+  public onDelete(roi:any) {
+    let index = this.userStateService.roiList.indexOf(roi);
+    this.userStateService.roiList.splice(index,1);
+  }
+  /**
+   * Add a ROI to ClipboardService
+   * @param roi Polygon
+   */  
+  public onAddToPolyFilter(roi:any) {
+    this.csClipboardService.loadPolygonFromROI(roi);
+  }
+  /**
+   * Close the ROI component.
+   * Save the ROI to storage.
+   */ 
+  public close() {
+    if (this.editingROI !== -1 && this.roiFormArray.controls[this.editingROI].dirty) {
+      const modalRef = this.modalService.open(ConfirmModalComponent, {
+        size: 'lg',
+        backdrop: false
+      });
+      modalRef.componentInstance.title = 'Unsaved Changes';
+      modalRef.componentInstance.modalContent = 'You have unsaved changes, do you wish to continue without saving?';
+      modalRef.componentInstance.cancelButtonText = 'Cancel';
+      modalRef.componentInstance.confirmButtonText = 'OK';
+      modalRef.result.then(result => {
+        if (result && result === 'OK') {
+         this.activeModal.close();
+        }
+      });
+    } else {
+      // Save the ROI to storage.
+      this.userStateService.saveROI();
+      this.activeModal.close();
+    }
+  }
+
+}

src/app/modalwindow/roi/roi.modal.modules.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ROIModalComponent } from './roi.modal.component';
+
+@NgModule({
+    imports: [
+      CommonModule,
+    ],
+    declarations: [ ROIModalComponent ],
+    exports: [ ROIModalComponent ]
+  })
+
+export class ROIModule { }

src/app/services/api/auscope-api.service.ts

@@ -231,6 +231,50 @@ export class AuscopeApiService {
   }
 
   /**
+   * Get params for the currently logged in user
+   * @param key
+   * @returns string value
+   */
+    public getUserParams(key: string) {
+      const options = {
+        params: {
+            key: key
+        }
+      };
+      return this.apiRequest<string>('secure/getUserParams.do', options);
+    }
+
+  /**
+   * Delete a user params
+   * @param key
+   * @returns true response on success, false otherwise
+   */
+  public deleteUserParams(key: string) {
+    const options = {
+      params: {
+          key: key
+      }
+    };
+    return this.apiRequest<string>('secure/deleteUserParams.do', options);
+  }
+
+  /**
+   * Update user params
+   * @param key
+   * @param value
+   * @returns true response on success, false otherwise
+   */
+  public saveUserParams(key: string, value: string) {
+    const options = {
+      params: {
+        key: key,
+        value: value
+      }
+    };
+    return this.apiRequest<string>('secure/saveUserParams.do', options);
+  }
+
+  /*
    * Search Elasticsearch index for CSW records and KnownLayers
    * @param queryText query string
    * @param searchFields search fields

src/app/services/user/user-state.service.ts

@@ -1,17 +1,16 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Bookmark } from 'app/models/bookmark.model';
 import { PermanentLink } from 'app/models/permanentlink.model';
 import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
 import { User } from '../../models/user.model';
 import { AuscopeApiService } from '../api/auscope-api.service';
-import { CsMapService, ManageStateService } from '@auscope/portal-core-ui';
+import { CsMapService, ManageStateService, Polygon, UtilitiesService } from '@auscope/portal-core-ui';
 import { v4 as uuidv4 } from 'uuid';
 import { HttpResponse } from '@angular/common/http';
 import { environment } from 'environments/environment';
 import { UILayerModelService } from '../ui/uilayer-model.service';
 
-
 @Injectable()
 export class UserStateService {
 
@@ -27,6 +26,10 @@ export class UserStateService {
   private _states: BehaviorSubject<PermanentLink[]> = new BehaviorSubject([]);
   public readonly states: Observable<PermanentLink[]> = this._states.asObservable();
 
+  //ROI for User
+  public roiList:Polygon[] = [];
+  public roiKey = '';
+
   constructor(private apiService: AuscopeApiService, private manageStateService: ManageStateService, private csMapService: CsMapService, private uiLayerModelService: UILayerModelService) {}
 
   /**
@@ -44,6 +47,8 @@ export class UserStateService {
       // Update user's bookmarks and map states
       this.updateBookmarks();
       this.updateUserStates();
+      // Update user's ROI
+      this.updateUserROI(user);
     }, () => {
       // Failure to retrieve User means no User logged in
       this.logoutUser();
@@ -208,5 +213,30 @@ export class UserStateService {
       }),
     );
   }
-
+  /**
+   * Save the user's list of ROI 
+   */
+  public saveROI() {
+    if (UtilitiesService.isEmpty(this.roiKey))
+      return;
+
+    let strROIs = JSON.stringify(this.roiList);
+    this.apiService.saveUserParams(this.roiKey,strROIs).subscribe(response => {
+    });
+  }
+
+  /**
+   * Retrieve a list of ROI associated with the user
+   * @param user
+   */
+  public updateUserROI(user:User){
+    let key = 'roiId.'+ user.email;
+    this.roiKey = key.replace(' ','-');
+    this.apiService.getUserParams(key).subscribe(strROIs => {
+      if (strROIs) {
+        this.roiList = JSON.parse(JSON.parse(JSON.stringify(strROIs)).value);
+      }
+      return undefined;
+    });
+  }
 }