Bunch of UI updates

API/Testing/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "ocm-api-testing",
+  "version": "1.0.0",
+  "description": "Test suite for OCM API calls",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "dependencies": {
+    "chai": "^3.5.0"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "mocha"
+  },
+  "author": "",
+  "license": "ISC"
+}

App/Ionic2/ocm-app/app/components/place-search/place-search.html

@@ -1,17 +1,17 @@
- <div class="place-search" *ngIf="placeSearchActive">
+<div class="place-search" *ngIf="placeSearchActive">
 
-    <div id="place-attribution"></div>
+  <div id="place-attribution"></div>
 
-    <ion-list>
-      <a *ngFor="let item of placeList" (click)="placeSelected(item)" ion-item>
-        <ion-avatar item-left>
-          <ion-icon name="locate"></ion-icon>
-        </ion-avatar>
+  <ion-list>
+    <a *ngFor="let item of placeList" (click)="placeSelected(item)" ion-item>
+      <ion-avatar item-left>
+        <ion-icon name="locate"></ion-icon>
+      </ion-avatar>
 
-        <h2>{{item.Title}}</h2>
-        <h3>{{item.Type}}</h3>
-        <p>{{item.Address}}</p>
-      </a>
-    </ion-list>
+      <h2>{{item.Title}}</h2>
 
-  </div>
+      <p>{{item.Address}}</p>
+    </a>
+  </ion-list>
+
+</div>

App/Ionic2/ocm-app/app/components/poi-details/poi-details.html

@@ -16,7 +16,7 @@ <h2>{{poi.AddressInfo.Title}} <small>OCM-{{poi.ID}}</small></h2>
             </button>
 
     <button small (click)="addFavourite()">
-                <ion-icon name="star"></ion-icon> Favourite
+                <ion-icon name="star"></ion-icon> Save
             </button>
 
   </div>
@@ -152,7 +152,7 @@ <h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quant
 
           <ion-card>
             <ion-card-header>
-              <ion-icon name="info"></ion-icon> {{ 'ocm.details.advancedDetails' | translate }}
+              <ion-icon name="information-circle"></ion-icon> {{ 'ocm.details.advancedDetails' | translate }}
             </ion-card-header>
             <ion-card-content>
 

App/Ionic2/ocm-app/app/components/poi-details/poi-details.ts

@@ -1,11 +1,12 @@
 import { Component, Input, OnInit } from '@angular/core';
 import {DatePipe} from '@angular/common';
-import {NavController, NavParams, ViewController, Modal, ActionSheet} from 'ionic-angular';
+import {NavController, NavParams, ViewController, ModalController, ActionSheetController} from 'ionic-angular';
 import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 import {AppManager} from '../../core/ocm/services/AppManager';
 import {MediaUploadPage} from '../../pages/mediaupload/mediaupload';
 import {CommentPage} from '../../pages/comment/comment';
 import {FavouriteEditorPage} from '../../pages/journeys/favourite-editor';
+import {Logging} from '../../core/ocm/services/Logging';
 
 
 @Component({
@@ -20,14 +21,21 @@ export class PoiDetails implements OnInit {
   selectedTab: string;
   json: string;
 
-  constructor(private appManager: AppManager, private nav: NavController, private translate: TranslateService, private view: ViewController) {
+  constructor(
+    private appManager: AppManager, 
+    private nav: NavController, 
+    private translate: TranslateService, 
+    private view: ViewController, 
+    private logging: Logging, 
+    private modalController: ModalController,
+    private actionSheetController: ActionSheetController) {
 
 
   }
 
-  ngOnInit() {
+  ngOnChanges() {
+    this.logging.log("In ngOnChanges of POI Details");
 
-    //this.json = JSON.stringify(this.poi, null, 1);
 
     if (this.poi == null || this.poi.AddressInfo == null) {
       alert("Got null POI");
@@ -51,6 +59,16 @@ export class PoiDetails implements OnInit {
       this.poi._hasComments = false;
     }
   }
+
+  ngOnInit() {
+
+    //this.json = JSON.stringify(this.poi, null, 1);
+    this.logging.log("In ngInit of POI Details");
+
+
+  }
+
+
   get staticMapURL(): string {
 
     //scale=2 for retina
@@ -76,11 +94,11 @@ export class PoiDetails implements OnInit {
   addComment() {
 
     if (this.appManager.isUserAuthenticated()) {
-      let modal = Modal.create(CommentPage, {
+      let modal = this.modalController.create(CommentPage, {
         id: this.poi.ID,
         poi: this.poi
       });
-      this.nav.present(modal);
+      modal.present();
     } else {
       this.appManager.showToastNotification(this.nav, "Please Sign In (see Profile tab)");
     }
@@ -89,11 +107,11 @@ export class PoiDetails implements OnInit {
   addMedia() {
     if (this.appManager.isUserAuthenticated()) {
 
-      let modal = Modal.create(MediaUploadPage, {
+      let modal = this.modalController.create(MediaUploadPage, {
         id: this.poi.ID,
         poi: this.poi
       });
-      this.nav.present(modal);
+      modal.present();
     } else {
       this.appManager.showToastNotification(this.nav, "Please Sign In (see Profile tab)");
     }
@@ -112,19 +130,19 @@ export class PoiDetails implements OnInit {
 
 
     //show action sheet to decide what to do with new favourite
-    let actionSheet = ActionSheet.create({
+    let actionSheet = this.actionSheetController.create({
       title: 'Add Favourite',
       buttons: [
         {
           text: 'Add to Journey',
 
           handler: () => {
             //show add to journey modal
-            let modal = Modal.create(FavouriteEditorPage, {
+            let modal = this.modalController.create(FavouriteEditorPage, {
 
               poi: this.poi
             });
-            this.nav.present(modal);
+            modal.present();
           }
         }, {
           text: 'Add as Favourite',
@@ -140,7 +158,7 @@ export class PoiDetails implements OnInit {
         }
       ]
     });
-    this.nav.present(actionSheet);
+    actionSheet.present();
   }
 
   launchNavigation() {

App/Ionic2/ocm-app/app/components/route-planner/route-planner.html

@@ -47,6 +47,12 @@ <h2>{{placeSearchRouteDestination.selectedPlace?.name}}</h2>
             <ion-icon range-right large name="map"></ion-icon>
           </ion-range>
 
+        </ion-item>
+         <ion-item>
+          <ion-label stacked>Energy Efficiency (kWh Per km)</ion-label>
+          <ion-input type="number" min="0.1" max="1"  [(ngModel)]="kWhPerKM"></ion-input>
+
+
         </ion-item>
       </ion-list>
     </div>

App/Ionic2/ocm-app/app/components/route-planner/route-planner.ts

@@ -25,9 +25,10 @@ export class RoutePlanner {
     private routePolyline: string;
     private routeCalcInProgress: boolean = false;
     private advancedSettingsMode: boolean = false;
+    private kWhPerKM: number;
 
     constructor(private mapping: Mapping, private directions: GoogleMapsDirections, private logging: Logging, private journeyManager: JourneyManager, private changeDetector: ChangeDetectorRef, private numberPipe: DecimalPipe) {
-
+        this.kWhPerKM = 0.212; //Model S = ~0.24, Leaf = ~0.212
     }
 
     get isRouteSet(): boolean {
@@ -83,6 +84,7 @@ export class RoutePlanner {
             return hours + " hours " + (mins > 0 ? mins + " mins" : "");
         }
     }
+
     calculateRoute() {
         if (this.routeStartPlace != null && this.routeDestinationPlace != null) {
             //start a new route discovery
@@ -104,7 +106,7 @@ export class RoutePlanner {
                             neLL, swLL
                         );
 
-                        this.journeyRoutes = this.directions.analyseRoutes(result);
+                        this.journeyRoutes = this.directions.analyseRoutes(result, this.kWhPerKM);
                         if (this.journeyRoutes.length > 0) this.selectedJourneyRoute = this.journeyRoutes[0];
 
                         //Require event emmiter for route changes to notify map 
@@ -123,36 +125,4 @@ export class RoutePlanner {
         }
     }
 
-    public placeSelectedOld(item: PlaceSearchResult) {
-        let placeSearchType = "test";
-        let searchKeyword = item.Title;
-
-        //move map to selected place
-
-        this.logging.log("Looking up place details:" + item.ReferenceID);
-        var attributionDiv = <HTMLDivElement>document.getElementById("place-attribution");
-        var service = new google.maps.places.PlacesService(attributionDiv);
-
-        (<any>service).getDetails({ placeId: item.ReferenceID }, (place, status) => {
-            if (status == google.maps.places.PlacesServiceStatus.OK) {
-                this.logging.log("Got place details:" + place.name);
-
-                if (placeSearchType == 'routeStart') {
-                    this.logging.log("Changed route start:" + place.name);
-                    this.routeStartPlace = place;
-                }
-                if (placeSearchType == 'routeDestination') {
-                    this.logging.log("Changed route destination:" + place.name);
-                    this.routeDestinationPlace = place;
-                }
-
-
-
-            } else {
-                this.logging.log("Failed to fetch place:" + status.toString());
-            }
-        });
-
-    }
-
 }

App/Ionic2/ocm-app/app/core/ocm/services/APIClient.ts

@@ -96,7 +96,7 @@ export class APIClient extends Base {
                 })
                 .catch((error) => {
                     let errMsg = error.message || 'Could not fetch POI list from server.';
-                    this.log("API Client: " + errMsg, LogLevel.ERROR);
+                    this.log("API Client: " + JSON.stringify(error), LogLevel.ERROR);
                     return Observable.throw(errMsg);
                 });
         } else {

App/Ionic2/ocm-app/app/core/ocm/services/AppManager.ts

@@ -5,7 +5,7 @@
 import {APIClient} from './APIClient';
 import {Http} from '@angular/http';
 import {Injectable} from '@angular/core';
-import {Events, NavController, Platform, Toast, Loading} from 'ionic-angular';
+import {Events, NavController, Platform, ToastController, LoadingController, Loading} from 'ionic-angular';
 import {TranslateService} from 'ng2-translate/ng2-translate';
 import {Base, LogLevel} from '../Base';
 import {JwtHelper} from 'angular2-jwt';
@@ -31,7 +31,18 @@ export class AppManager extends Base {
 
     public isRequestInProgress: boolean = false;
 
-    constructor(public http: Http, public events: Events, public api: APIClient, public submissionQueue: SubmissionQueue, private platform: Platform, public referenceDataManager: ReferenceDataManager, public journeyManager: JourneyManager, public translateService: TranslateService) {
+    constructor(
+        public http: Http, 
+        public events: Events, 
+        public api: APIClient, 
+        public submissionQueue: SubmissionQueue, 
+        private platform: Platform, 
+        public referenceDataManager: ReferenceDataManager, 
+        public journeyManager: JourneyManager, 
+        public translateService: TranslateService,
+        private toastController: ToastController,
+        private loadingController: LoadingController
+        ) {
         super();
         this.api.clientName = "ocm.app.ionic.v6_0_0";
         this.isDebugMode = false;
@@ -176,26 +187,26 @@ export class AppManager extends Base {
     }
 
     public showToastNotification(nav: NavController, msg: string) {
-        let toast = Toast.create({
+        let toast = this.toastController.create({
             message: msg,
             duration: 3000,
 
         });
 
-        toast.onDismiss(() => {
+        toast.onDidDismiss(() => {
             this.log('Dismissed toast');
         });
 
-        nav.present(toast);
+        toast.present();
     }
 
     public showLoadingProgress(nav: NavController, msg: string) {
-        this.loading = Loading.create({
+        this.loading = this.loadingController.create({
             content: msg,
             dismissOnPageChange: true
         });
 
-        nav.present(this.loading);
+        this.loading.present();
     }
     public dismissLoadingProgress(): Promise<any> {
         return this.loading.dismiss();

App/Ionic2/ocm-app/app/core/ocm/services/GoogleMapsDirections.ts

@@ -44,7 +44,7 @@ export class GoogleMapsDirections {
         });
     }
 
-    public analyseRoutes(routeResults: google.maps.DirectionsResult): Array<JourneyRoute> {
+    public analyseRoutes(routeResults: google.maps.DirectionsResult,kWhPerKM:number ): Array<JourneyRoute> {
         let journeyRoutes = new Array<JourneyRoute>();
         //analyse power consumption of the routes and summarise the route
         routeResults.routes.forEach(route => {
@@ -58,7 +58,7 @@ export class GoogleMapsDirections {
             route.legs.forEach(leg => {
                 let durationsSeconds = leg.duration.value;
                 let distanceKM = leg.distance.value / 1000;
-                let powerConsumption = this.journeyManager.calculateEnergyConsumptionkWh(distanceKM, 0);
+                let powerConsumption = this.journeyManager.calculateEnergyConsumptionkWh(distanceKM, 0, null, kWhPerKM);
 
                 let journeyLeg = new JourneyRouteLeg();
                 journeyLeg.DistanceKM = distanceKM;

App/Ionic2/ocm-app/app/core/ocm/services/JourneyManager.ts

@@ -250,12 +250,12 @@ export class JourneyManager extends Base {
 
     }
 
-    public calculateEnergyConsumptionkWh(distanceKM: number, speedKPH: number, elevationDelta: number = 0): number {
+    public calculateEnergyConsumptionkWh(distanceKM: number, speedKPH: number, elevationDelta: number = 0, kWhPerKM:number): number {
         //given an input speed in km/h for a given distance, calculate an estimate of required energy consumption in kwh, optionally account for elevation change.
         //let totalkWhCapacity = 21;
 
         //average vehicle energy efficiency in Kilowatt Hours consumed per Kilometer travelled
-        let kWhPerKM = 0.212; //Model S = ~0.24, Leaf = ~0.212
+        //let kWhPerKM = 0.212; //Model S = ~0.24, Leaf = ~0.212
 
         let totalPowerRequiredkWh = distanceKM * kWhPerKM;