Fix newly introduced frontend bugs.

Author: MustafaLeithy

Frontend/src/app/assets/asset-list/asset-list.component.ts

@@ -34,14 +34,15 @@ export class AssetListComponent implements OnInit, OnDestroy {
   filter: string;
   Roles = Roles;
 
+  assetsList: Asset[];
   selectedAsset: Asset;
   selectedAssetState: SelectedAssetState;
+
   private selectedDateRange: DateRange;
   private lastCalledFunction: (asset: Asset, filterSelected: Boolean) => void;
   private subscription: Subscription;
   private isDrawing = false;
   private isAlive: boolean;
-  private assetsList: Asset[];
 
   constructor(
     private assetService: AssetService,
@@ -55,7 +56,6 @@ export class AssetListComponent implements OnInit, OnDestroy {
     this.assetService.getAssets()
       .takeWhile(() => this.isAlive)
       .skipWhile(assets => assets.length === 0)
-      .take(1)
       .subscribe(assets => {
         this.assetsList = assets.sort((a, b) => {
           if (a.name < b.name) { return -1; }

Frontend/src/app/dispatching/dispatching-editor/dispatching-editor.component.ts

@@ -117,7 +117,7 @@ export class DispatchingEditorComponent implements OnInit, OnDestroy {
     this.dialogService.showLocationsDialog()
       .subscribe(location => {
         if (location) {
-          location.name = this.locationService.normalizeLocationName(location);
+          location.name = location.name + `(${this.pinsAdded.length + 1})`;
           this.pinsAdded.push(location);
           this.mapsService.resetDispatchingDraw(this.pinsAdded);
         }

Frontend/src/app/dispatching/location-dialog/location-dialog.component.html

@@ -14,7 +14,7 @@
     <mat-list-item *ngFor="let location of locations | filterList:filter" 
                   (click)="onSelected(location)" 
                   [class.active]="location == selectedLocation">
-      <span mat-line> {{getLocationName(location)}}</span>
+      <span mat-line> {{location.name}}</span>
     </mat-list-item>
   </mat-list>
 </div>

Frontend/src/app/dispatching/location-dialog/location-dialog.component.ts

@@ -40,8 +40,4 @@ export class LocationDialogComponent implements OnInit, OnDestroy {
   onButtonClicked() {
     this.dialogRef.close(this.selectedLocation);
   }
-
-  getLocationName(location: Location) {
-    return this.locationService.normalizeLocationName(location);
-  }
 }

Frontend/src/app/geofences/geofence-editor/geofence-editor.component.css

@@ -17,4 +17,8 @@ form {
 .partial-button {
   float:left;
   cursor: pointer;
+}
+
+h3 {
+  margin: 0;
 }

Frontend/src/app/geofences/geofence-editor/geofence-editor.component.html

@@ -10,25 +10,18 @@
     <mat-input-container>
       <input matInput placeholder="Name" [(ngModel)]="geofence.name" name="name" required>
     </mat-input-container>
-    <mat-input-container>
-      <input matInput placeholder="Emails To Notify" [(ngModel)]="joinedEmails" name="email">
-    </mat-input-container>
-    <mat-input-container>
-      <input matInput placeholder="Webhooks To Notify" [(ngModel)]="joinedWebhooks" name="webhook">
-    </mat-input-container>
-    <mat-input-container>
-      <input matInput placeholder="Cooldown in Minutes" [(ngModel)]="geofence.cooldown" name="cooldown" type="number" min="0" required>
-    </mat-input-container>
 
     <mat-input-container>
-      <mat-select placeholder="Geofence Area Type" [(ngModel)]="geofence.areaType" name="areaType" (change)="onAreaTypeChanged($event)" required>
+      <mat-select placeholder="Geofence Area Type" [(ngModel)]="geofence.areaType" name="areaType" (change)="onAreaTypeChanged($event)"
+        required>
         <mat-option [value]="AreaType.Polygon">Polygon</mat-option>
         <mat-option [value]="AreaType.Circular">Circular</mat-option>
       </mat-select>
     </mat-input-container>
 
     <mat-input-container *ngIf="geofence.areaType === AreaType.Circular">
-      <input matInput type="number" placeholder="Radius In Meters" [(ngModel)]="geofence.radiusInMeters" name="radiusInMeters" (change)="onRadiusChanged($event)" (keyup)="onRadiusChanged($event)" required>
+      <input matInput type="number" placeholder="Radius In Meters" [(ngModel)]="geofence.radiusInMeters" name="radiusInMeters"
+        (change)="onRadiusChanged($event)" (keyup)="onRadiusChanged($event)" required>
     </mat-input-container>
 
     <mat-input-container *ngIf="geofence.areaType === AreaType.Polygon">
@@ -37,13 +30,25 @@
       <a class="partial-button" (click)="clearPoints()">Clear Points</a>
     </mat-input-container>
 
+    <mat-input-container>
+      <input matInput placeholder="Cooldown in Minutes" [(ngModel)]="geofence.cooldown" name="cooldown" type="number" min="0" required>
+    </mat-input-container>
+
     <mat-input-container>
       <mat-select placeholder="Fence Type" [(ngModel)]="geofence.fenceType" name="fenceType" required>
         <mat-option [value]="FenceType.Inbound">Inbound</mat-option>
         <mat-option [value]="FenceType.Outbound">Outbound</mat-option>
       </mat-select>
     </mat-input-container>
 
+    <mat-input-container>
+      <input matInput placeholder="Emails To Notify" [(ngModel)]="joinedEmails" name="email">
+    </mat-input-container>
+
+    <mat-input-container>
+      <input matInput placeholder="Webhooks To Notify" [(ngModel)]="joinedWebhooks" name="webhook">
+    </mat-input-container>
+
     <h3>Available Assets:</h3>
     <mat-list>
       <mat-list-item *ngFor="let asset of assets">
@@ -56,4 +61,4 @@ <h3>Available Assets:</h3>
       <button mat-raised-button class="dispatch-button " type="submit">Submit</button>
     </div>
   </form>
-</section>
+</section>

Frontend/src/app/locations/location-editor/location-editor.component.ts

@@ -23,20 +23,19 @@ export class LocationEditorComponent implements OnInit, OnDestroy {
   locationString: string;
   locationTypeString: string;
   private isAlive: boolean;
-  private readonly undeterminedMessage = 'Undetermined';
 
   constructor(
     private locationService: LocationService,
     private mapService: MapsService,
     private route: ActivatedRoute,
     private router: Router,
     private toasterService: ToasterService) {
-    this.location = new Location();
   }
 
   ngOnInit() {
     this.isAlive = true;
-    this.mapService.startLocationPinDraw();
+    this.location = new Location();
+
     this.route.params
       .takeWhile(() => this.isAlive)
       .subscribe(params => {
@@ -52,9 +51,9 @@ export class LocationEditorComponent implements OnInit, OnDestroy {
                 this.mapService.showLocationsPositions([this.location]);
               }
             });
-        } else {
-          this.locationString = this.undeterminedMessage;
         }
+
+        this.mapService.startLocationPinDraw(this.location);
       });
 
     this.mapService.getLocationPinResult()
@@ -90,7 +89,7 @@ export class LocationEditorComponent implements OnInit, OnDestroy {
   }
 
   submit() {
-    if (this.locationString === this.undeterminedMessage) {
+    if (!this.location.latitude || !this.location.longitude) {
       this.toasterService.pop('error', 'Invalid Input', 'Please add the location pin on the map');
       return;
     }

Frontend/src/app/locations/location-list/location-list.component.html

@@ -20,7 +20,7 @@
   <div *ngFor="let location of locations | filterList:filter | paginate: {itemsPerPage: singlePageSize, currentPage: index}"
     [class.active]="location === selectedLocation">
     <mat-list-item>
-      <h3 mat-line (click)="showLocation(location)"> {{getLocationName(location)}}</h3>
+      <h3 mat-line (click)="showLocation(location)"> {{location.name}}</h3>
       <span mat-line class="subtle" (click)="showLocation(location)">address: {{location.address}}</span>
       <a [appRoleLimiter]="Roles.Administrator" mat-icon-button mat-tooltip="Edit" [routerLink]="['/locations', location.id]">
         <mat-icon>mode_edit</mat-icon>

Frontend/src/app/locations/location-list/location-list.component.ts

@@ -62,10 +62,6 @@ export class LocationListComponent implements OnInit, OnDestroy {
     this.mapsService.showLocationsPositions(locationRange);
   }
 
-  getLocationName(location: Location) {
-    return this.locationService.normalizeLocationName(location);
-  }
-
   showLocation(location: Location) {
     if (location === this.selectedLocation) {
       this.selectedLocation = null;

Frontend/src/app/locations/location.service.ts

@@ -31,12 +31,4 @@ export class LocationService {
   getLocationAssetsCount(location: Location): Observable<Map<string, number>> {
     return this.dataSevrice.getSingleNoCache<Map<string, number>>(`locations/${location.id}/assetsCount`);
   }
-
-  normalizeLocationName(location: Location) {
-    if (location.name === 'Auto-Generated Location') {
-      return 'Location ' + location.id;
-    } else {
-      return location.name;
-    }
-  }
 }