UI updates & package/ionic version updates

App/Ionic2/ocm-app/config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.webprofusion.openchargemap" version="6.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.webprofusion.openchargemap" version="6.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Open Charge Map</name>
     <description>EV Charging Locations</description>
     <author email="[email protected]" href="http://webprofusion.com/">Webprofusion</author>
@@ -20,6 +20,9 @@
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />
     </platform>
+    <platform name="windows">
+       <preference name="windows-target-version" value="10.0" />
+    </platform>
     <preference name="webviewbounce" value="false" />
     <preference name="UIWebViewBounce" value="false" />
     <preference name="DisallowOverscroll" value="true" />

App/Ionic2/ocm-app/package.json

@@ -1,44 +1,47 @@
 {
   "private": true,
   "scripts": {
-    "build": "ionic-app-scripts build",
-    "watch": "ionic-app-scripts watch",
-    "serve:before": "watch",
-    "emulate:before": "build",
-    "deploy:before": "build",
-    "build:before": "build",
-    "run:before": "build"
+    "ionic:build": "ionic-app-scripts build",
+    "ionic:serve": "ionic-app-scripts serve"
   },
   "config": {},
   "dependencies": {
-    "@angular/common": "2.1.1",
-    "@angular/compiler": "2.1.1",
-    "@angular/compiler-cli": "2.1.1",
-    "@angular/core": "2.1.1",
-    "@angular/forms": "2.1.1",
-    "@angular/http": "2.1.1",
-    "@angular/platform-browser": "2.1.1",
-    "@angular/platform-browser-dynamic": "2.1.1",
-    "@angular/platform-server": "2.1.1",
-    "@ionic/storage": "1.1.6",
-    "@types/google-maps": "^3.1.28",
-    "@types/googlemaps": "^3.25.35",
-    "@types/leaflet": "^1.0.35",
-    "angular2-jwt": "^0.1.24",
-    "cordova-plugin-camera": "^2.2.0",
-    "cordova-plugin-file": "^4.2.0",
-    "ionic-angular": "2.0.0-rc.2",
-    "ionic-native": "^2.2.3",
-    "ionicons": "^3.0.0",
-    "linq-es5": "^1.8.39",
-    "ng2-translate": "^4.0.0",
-    "rxjs": "5.0.0-beta.12",
+    "@angular/common": "4.0.0",
+    "@angular/compiler": "4.0.0",
+    "@angular/compiler-cli": "4.0.0",
+    "@angular/core": "4.0.0",
+    "@angular/forms": "4.0.0",
+    "@angular/http": "4.0.0",
+    "@angular/platform-browser": "4.0.0",
+    "@angular/platform-browser-dynamic": "4.0.0",
+    "@ionic-native/camera": "3.4.4",
+    "@ionic-native/core": "3.4.2",
+    "@ionic-native/keyboard": "3.4.4",
+    "@ionic-native/splash-screen": "3.4.2",
+    "@ionic-native/status-bar": "3.4.4",
+    "@ionic/storage": "2.0.1",
+    "@ngx-translate/core": "^6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
+    "@types/google-maps": "3.2.0",
+    "@types/googlemaps": "3.26.8",
+    "@types/leaflet": "1.0.60",
+    "angular2-jwt": "^0.1.28",
+    "cordova-plugin-file": "4.3.2",
+    "ionic-angular": "3.0.1",
+    "ionicons": "3.0.0",
+    "linq-es5": "^1.11.8",
+    "ng2-translate": "^5.0.0",
+    "rxjs": "5.1.1",
+    "sw-toolbox": "3.4.0",
     "typescript-collections": "",
-    "zone.js": "0.6.21"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "^0.0.39",
-    "typescript": "^2.0.7"
+    "@ionic/app-scripts": "1.3.1",
+    "@ionic/cli-build-ionic-angular": "0.0.4",
+    "@ionic/cli-plugin-cordova": "0.0.10",
+    "typescript": "~2.2.1",
+    "webpack-bundle-analyzer": "^2.3.1"
   },
   "name": "io.openchargemap.app",
   "description": "The Open Data registry of EV charging locations",

App/Ionic2/ocm-app/src/app/app.component.ts

@@ -1,28 +1,29 @@
+import { Mapping } from './../providers/mapping/Mapping';
 import { Utils } from './../core/Utils';
 import { Logging } from './../providers/Logging';
 import { AppManager } from './../providers/AppManager';
 import { Component, OnInit } from '@angular/core';
 import { Platform, Events } from 'ionic-angular';
-import { StatusBar } from 'ionic-native';
 
 import { TabsPage } from '../pages/tabs/tabs';
-import { TranslateService } from 'ng2-translate';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
-  template: `<ion-nav [root]="rootPage"></ion-nav>`
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
 export class MyApp implements OnInit{
   rootPage = TabsPage;
   debouncedPublishResizeEvent: any;
 
-  constructor(public platform: Platform, public events: Events, public translate: TranslateService, public appManager: AppManager, public logger: Logging) {
+  constructor(public platform: Platform, public events: Events, public translate: TranslateService, public appManager: AppManager,public mapping:Mapping, public logger: Logging) {
 
     this.initTranslation();
 
     platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
+
       // Here you can do any higher level native things you might need.
-      StatusBar.styleDefault();
+      //StatusBar.styleDefault();
     });
   }
 

App/Ionic2/ocm-app/src/app/app.module.ts

@@ -24,17 +24,18 @@ import { Logging } from './../providers/Logging';
 import { AppManager } from './../providers/AppManager';
 import { NgModule } from '@angular/core';
 import { IonicApp, IonicModule, Events } from 'ionic-angular';
+import { BrowserModule } from '@angular/platform-browser';
 import { MyApp } from './app.component';
 
 import { TabsPage } from '../pages/tabs/tabs';
-import { TranslateModule } from 'ng2-translate/ng2-translate';
-import { TranslateService, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { TranslateService, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { NullableTranslatePipe } from '../pipes/NullableTranslatePipe';
+import { Camera } from '@ionic-native/camera';
+import { Keyboard } from '@ionic-native/keyboard';
 
-export function createTranslateLoader(http: Http) {
-  return new TranslateStaticLoader(http, './assets/i18n', '.json');
-}
 
 //export var google:any;
 
@@ -56,20 +57,22 @@ export function createTranslateLoader(http: Http) {
     //components
     PlaceSearch,
     PoiDetails,
-    RoutePlanner
+    RoutePlanner,
     //pipes
-
+    NullableTranslatePipe
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(MyApp),
-
     HttpModule,
     TranslateModule.forRoot({
-      provide: TranslateLoader,
-      useFactory: (createTranslateLoader),
-      deps: [Http]
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: Http) => new TranslateHttpLoader(http, './assets/i18n/', '.json'),
+        deps: [Http]
+      }
     })
-    
+
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -98,8 +101,12 @@ export function createTranslateLoader(http: Http) {
     SubmissionQueue,
     JourneyManager,
     ReferenceDataManager,
-    GoogleMapsDirections]
+    GoogleMapsDirections,
+    Camera,
+    Keyboard
+  ]
 })
+
 export class AppModule {
 
 }

App/Ionic2/ocm-app/src/app/app.scss

@@ -17,5 +17,9 @@
 
 /*transparency required for native maps, which appear behind the html content*/
 ion-app,ion-app.md, ion-app.ios,ion-app.wp,.content-md, .content-ios, .content-wp{
-    background-color: transparent;
-}
+    background-color: rgba(255, 255, 255, 0.9);
+}
+ion-app._gmaps_cdv_ .nav-decor{
+  background-color: transparent !important;
+}
+

App/Ionic2/ocm-app/src/app/main.dev.ts → App/Ionic2/ocm-app/src/app/main.ts

@@ -2,4 +2,4 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule);

App/Ionic2/ocm-app/src/assets/i18n/en.json

@@ -16,6 +16,9 @@
       "signIn": "Sign In",
       "signOut": "Sign Out"
     },
+    "journeys":{
+      "sectionTitle":"Journeys"
+    },
     "details": {
       "sectionTitle": "Charging Location",
       "location": {

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

@@ -128,7 +128,7 @@ <h2>{{poi.AddressInfo.Title}} <small>OCM-{{poi.ID}}</small></h2>
 			</ion-card-header>
 			<ion-card-content>
 
-
+<p *ngIf="poi.NumberOfPoints!=null">{{ 'ocm.details.numberOfPoints' | translate }}: {{poi.NumberOfPoints}}</p>
 				<ion-list>
 					<ion-item *ngFor="let item of poi.Connections">
 						<ion-avatar item-left>
@@ -157,7 +157,7 @@ <h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quant
 			<ion-card-content>
 
 
-				<p *ngIf="poi.NumberOfPoints!=null">{{ 'ocm.details.numberOfPoints' | translate }}: {{poi.NumberOfPoints}}</p>
+
 				<div *ngIf="poi.DataProvider">
 					<ion-card-title>
 						{{ 'ocm.details.dataProvider.sectionTitle' | translate }}

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

@@ -5,7 +5,7 @@ import { Logging } from './../../providers/Logging';
 import { AppManager } from './../../providers/AppManager';
 import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 import { NavController, ViewController, ModalController, ActionSheetController } from 'ionic-angular';
-import { TranslateService } from 'ng2-translate/ng2-translate';
+import { TranslateService } from '@ngx-translate/core';
 
 
 @Component({

App/Ionic2/ocm-app/src/core/AppMissingTranslationHandler.ts

@@ -1,5 +1,5 @@
-import { MissingTranslationHandlerParams } from 'ng2-translate/ng2-translate';
-import {MissingTranslationHandler} from 'ng2-translate/ng2-translate';
+
+import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core';
 
 export class AppMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {

App/Ionic2/ocm-app/src/declarations.d.ts

@@ -16,5 +16,4 @@
 /// <reference path="../node_modules/typescript-collections/dist/lib/index.d.ts" />
 /// <reference path="../node_modules/@types/leaflet/index.d.ts" />
 
-declare module '*';
-
+declare module '*';

App/Ionic2/ocm-app/src/pages/mediaupload/mediaupload.ts

@@ -1,7 +1,7 @@
 import { AppManager } from './../../providers/AppManager';
 import { Component } from '@angular/core';
 import { NavController, NavParams, ViewController } from 'ionic-angular';
-import { Camera } from 'ionic-native';
+import { Camera } from '@ionic-native/Camera';
 
 @Component({
     templateUrl: 'mediaupload.html'
@@ -22,7 +22,8 @@ export class MediaUploadPage {
         public navParams: NavParams,
         public appManager: AppManager,
         public nav: NavController,
-        public view: ViewController
+        public view: ViewController,
+        private camera: Camera
     ) {
 
         this.processingQuality = 0.8;
@@ -40,7 +41,7 @@ export class MediaUploadPage {
 
 
         if (!this.isBrowserMode()) {
-            Camera.getPicture({ targetWidth: this.targetWidth }).then((imageData) => {
+            this.camera.getPicture({ targetWidth: this.targetWidth }).then((imageData) => {
                 // imageData is either a base64 encoded string or a file URI
                 // If it's base64:
                 //let base64Image = "data:image/jpeg;base64," + imageData;

App/Ionic2/ocm-app/src/pages/poi-details/poi-details.scss

@@ -51,9 +51,5 @@
          overflow: inherit;
         /*  white-space: pre-line;*/
      }
-     ion-item {
-         p{
-
-         }
-     }
+
 }

App/Ionic2/ocm-app/src/pages/profile/profile.ts

@@ -1,5 +1,5 @@
 import { SignInPage } from './../signin/signin';
-import { TranslateService } from 'ng2-translate/ng2-translate';
+import { TranslateService } from '@ngx-translate/core';
 import { AppManager } from './../../providers/AppManager';
 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';

App/Ionic2/ocm-app/src/pages/search/search.html

@@ -1,25 +1,25 @@
 <ion-header>
-	<ion-navbar>
+	<ion-navbar color="primary">
 		<ion-toolbar>
 			<ion-buttons start>
 
 				<button (click)="locateUser()" ion-button icon-left>
 				<ion-icon name="locate"></ion-icon>
 				</button>
 
-				</ion-buttons>
-				<ion-searchbar [(ngModel)]="searchKeyword" (ionInput)="placeSearchMapPOI.getPlacesAutoComplete($event,'poiSearch')" [placeholder]="'ocm.search.performSearch' | translate"
-					[debounce]="500">
-				</ion-searchbar>
-				<ion-buttons end>
-					<button (click)="openRoutePlannerModal()" *ngIf="sideViewAvailable==false" ion-button icon-left>
+			</ion-buttons>
+			<ion-searchbar [(ngModel)]="searchKeyword" (ionInput)="placeSearchMapPOI.getPlacesAutoComplete($event,'poiSearch')" [placeholder]="'ocm.search.performSearch' | translate"
+			 [debounce]="500">
+			</ion-searchbar>
+			<ion-buttons end>
+				<button (click)="openRoutePlannerModal()" *ngIf="sideViewAvailable==false" ion-button icon-left>
 								<ion-icon name="map"></ion-icon>
 								</button>
-					<button (click)="openSearchOptions()" ion-button icon-left>
+				<button (click)="openSearchOptions()" ion-button icon-left>
 								<ion-icon name="options"></ion-icon>
 								</button>
 
-						<button (click)="openSideView()" *ngIf="sideViewAvailable==true && poiViewMode=='modal'" ion-button icon-left>
+				<button (click)="openSideView()" *ngIf="sideViewAvailable==true && poiViewMode=='modal'" ion-button icon-left>
 				<ion-icon name="arrow-dropleft-circle"></ion-icon>
 				</button>
 			</ion-buttons>
@@ -37,11 +37,11 @@
 				<div id="map-canvas"></div>
 			</ion-col>
 
-			<ion-col width-33 *ngIf="poiViewMode=='side'" class="sideview">
+			<ion-col col-3 *ngIf="poiViewMode=='side'" class="sideview">
 				<ion-scroll scrollY="true" style="height:100%">
 
 
-					<ion-toolbar primary>
+					<ion-toolbar color="primary">
 						<ion-buttons start>
 
 							<button (click)="closePOIDetails()" *ngIf="selectedPOI!=null" ion-button icon-left>