Ui bug fixes

Backend/src/Trackable.Services/DataClasses/DispatchingResults.cs

@@ -16,6 +16,6 @@ public class DispatchingResults
 
         public IEnumerable<Point> RoutePoints { get; set; }
 
-        public IEnumerable<Point> AlternativeCarRoutePoints { get; set; }
+        public IEnumerable<DispatchingResults> AlternativeCarRoutePoints { get; set; }
     }
 }

Backend/src/Trackable.Services/Services/DispatchingService.cs

@@ -67,7 +67,7 @@ public async Task<IEnumerable<DispatchingResults>> CallRoutingAPI(DispatchingPar
                 content = await response.Content.ReadAsStringAsync();
                 apiResult = JObject.Parse(content);
 
-                var alternativePath = ExtractAlternativeDispatchingResult(apiResult);
+                var alternativePath = ExtractDispatchingResults(apiResult);
 
                 foreach (var dispatchingResult in result)
                 {

Frontend/src/app/app.component.css

@@ -50,6 +50,7 @@ h1 {
 .spinner {
   vertical-align: text-bottom;
   width: 25px;
+  margin-left: 10px;
 }
 
 .mat-raised-button{

Frontend/src/app/assets/asset-info-dialog/asset-info-dialog.component.html

@@ -0,0 +1,25 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved.
+     Licensed under the MIT License. -->
+
+<h2 mat-dialog-title>Assets</h2>
+<mat-dialog-content>
+
+  <p>Create an asset by clicking on the + button. Give your asset a name,
+     choose its type (car, truck, etc.), link it to the corresponding device, and click submit. </p>
+
+
+  <p>In this page, you will see the current location of all assets in real time.
+    You can click on the name of any asset to zoom in and follow that asset around. </p>
+
+  <p>You can click on the points button (Bullseye icon) and view the entire location history of 
+    that asset. Additionally, you can filter to show a specific time period only. </p>
+
+  <p>You can click on the trip button (Rising trend icon) and view the trips this asset has made.
+    Trips are summarized versions of the location history of an asset. They include information 
+    about periods of motion of the asset, the start and ending locations, and any minor stops 
+    along the way. You can click on a single trip and view detailed information about it. When in
+    single trip mode, you can click on the map and it will show you information like instantaneous
+    speed, acceleration and other detailed information. </p>
+
+    <br>  
+</mat-dialog-content>

Frontend/src/app/assets/asset-info-dialog/asset-info-dialog.component.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-asset-info-dialog',
+  templateUrl: './asset-info-dialog.component.html',
+  styleUrls: ['./asset-info-dialog.component.css']
+})
+export class AssetInfoDialogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -7,7 +7,7 @@
   <a [appRoleLimiter]="Roles.Administrator" mat-icon-button mat-tooltip="Add New Asset" [routerLink]="['/assets/new']">
     <mat-icon>add_circle</mat-icon>
   </a>
-  <button mat-icon-button>
+  <button mat-icon-button (click)="openInfoDialog()">
     <mat-icon>info</mat-icon>
   </button>
 </mat-toolbar>

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

@@ -2,7 +2,9 @@
 // Licensed under the MIT License.
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { ToasterService } from 'angular2-toaster';
 
 import { Asset } from '../asset';
@@ -16,8 +18,7 @@ import { Trip } from '../../shared/trip';
 import { Roles } from '../../shared/role';
 
 import { takeWhile, skipWhile } from 'rxjs/operators';
-
-
+import { AssetInfoDialogComponent } from '../asset-info-dialog/asset-info-dialog.component';
 
 
 enum SelectedAssetState {
@@ -52,7 +53,8 @@ export class AssetListComponent implements OnInit, OnDestroy {
     private assetService: AssetService,
     private locationService: LocationService,
     private mapsService: MapsService,
-    private toasterService: ToasterService) {
+    private toasterService: ToasterService,
+    public dialog: MatDialog) {
     this.isAlive = true;
   }
 
@@ -163,6 +165,12 @@ export class AssetListComponent implements OnInit, OnDestroy {
     }
   }
 
+  openInfoDialog(): void {
+    this.dialog.open(AssetInfoDialogComponent, {
+      width: '600px',
+    });
+  }
+
   isAssetListSeleceted() {
     return this.selectedAssetState === SelectedAssetState.ListSelected;
   }

Frontend/src/app/assets/assets.module.ts

@@ -6,15 +6,22 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { AssetsRoutingModule, assetsRoutedComponents } from './assets-routing.module';
 import { AssetService } from './asset.service';
+import { MatDialogModule } from '@angular/material';
+import { AssetInfoDialogComponent } from './asset-info-dialog/asset-info-dialog.component';
 
 
 @NgModule({
   declarations: [
-    assetsRoutedComponents
+    assetsRoutedComponents,
+    AssetInfoDialogComponent
   ],
   imports: [
     AssetsRoutingModule,
-    SharedModule
+    SharedModule,
+    MatDialogModule
+  ],
+  entryComponents: [
+    AssetInfoDialogComponent
   ],
   providers: [
     AssetService

Frontend/src/app/core/data.service.ts

@@ -28,10 +28,12 @@ export class DataService {
         const cache = this.getCache<T>(path);
         const url = this.getUrl(path);
 
-        this.authHttpService.get<T[]>(url).subscribe(data => {
-            cache.set(data);
-            this.spinnerService.stop();
-        },
+        this.authHttpService.get(url).pipe(
+            map(response => response as unknown as T[]))
+            .subscribe(data => {
+                cache.set(data);
+                this.spinnerService.stop();
+            },
             error => this.spinnerService.stop());
 
         return cache.getItems();

Frontend/src/app/devices/device-list/device-list.component.html

@@ -8,7 +8,7 @@
     <mat-icon>add_circle</mat-icon>
   </a>
   <button mat-icon-button>
-    <mat-icon>info</mat-icon>
+    <mat-icon (click)="openDevicesDialog()">info</mat-icon>
   </button>
 </mat-toolbar>
 

Frontend/src/app/devices/device-list/device-list.component.ts

@@ -11,6 +11,8 @@ import { Device } from '../device';
 import { DeviceService } from '../device.service';
 import { MapsService } from '../../maps/maps.service';
 import { Roles } from '../../shared/role';
+import { MatDialog } from '@angular/material/dialog';
+import { DevicesInfoDialogComponent } from '../devices-info-dialog/devices-info-dialog.component';
 
 enum SelectedDeviceState {
   ListSelected,
@@ -36,7 +38,8 @@ export class DeviceListComponent implements OnInit, OnDestroy {
   constructor(
     private deviceService: DeviceService,
     private mapsService: MapsService,
-    private toasterService: ToasterService) { }
+    private toasterService: ToasterService,
+    public dialog: MatDialog) { }
 
   ngOnInit() {
     this.devices = this.deviceService.getDevices();
@@ -95,6 +98,12 @@ export class DeviceListComponent implements OnInit, OnDestroy {
     }
   }
 
+  openDevicesDialog(): void {
+    this.dialog.open(DevicesInfoDialogComponent, {  
+      width: '600px',
+    });
+  }
+
   timeFilterChange(range) {
     this.selectedDateRange = range;
     this.showPoints(this.selectedDevice, true);

Frontend/src/app/devices/devices-info-dialog/devices-info-dialog.component.html

@@ -0,0 +1,15 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved.
+     Licensed under the MIT License. -->
+
+<h2 mat-dialog-title>Devices</h2>
+<mat-dialog-content>
+
+  <p>Create a device by clicking on the + button. Download the Android apk or set up iOS mobile client on your
+    phone. Open the mobile application from your phone and scan the QR code to finish provisioning the device.
+    Alternatively, if you will be using your own background tracking client, dismiss the popup and give your
+    device a unique ID and a unique name. You can find the Linked Asset property and select the asset to 
+    link it with the device. Click submit once you are done. You can still click on the edit (pencil icon) 
+    button on each device to make modification after your submission.  </p>
+
+    <br>
+</mat-dialog-content>

Frontend/src/app/devices/devices-info-dialog/devices-info-dialog.component.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-devices-info-dialog',
+  templateUrl: './devices-info-dialog.component.html',
+  styleUrls: ['./devices-info-dialog.component.css']
+})
+export class DevicesInfoDialogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

Frontend/src/app/devices/devices.module.ts

@@ -7,15 +7,18 @@ import { SharedModule } from '../shared/shared.module';
 import { DevicesRoutingModule, routedComponents } from './devices-routing.module';
 import { DeviceService } from './device.service';
 import { DeviceRegisterComponent } from './device-register/device-register.component';
+import { DevicesInfoDialogComponent } from './devices-info-dialog/devices-info-dialog.component';
 
 
 @NgModule({
   declarations: [
     routedComponents,
-    DeviceRegisterComponent
+    DeviceRegisterComponent,
+    DevicesInfoDialogComponent
   ],
   entryComponents: [
-    DeviceRegisterComponent
+    DeviceRegisterComponent,
+    DevicesInfoDialogComponent
   ],
   imports: [
     DevicesRoutingModule,

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

@@ -46,3 +46,57 @@ h1 {
   height: 28px;
   padding: 10px 16px;
 }
+
+.mat-button {
+      width: 100%;
+      padding: 0;
+}
+
+.pins-list {
+  width: 500px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.pins-list-box {
+  padding: 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.pins-list-box:last-child {
+  border: none;
+}
+
+.pins-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}