Added routing through Angular

client/Nightr/package-lock.json

@@ -3999,6 +3999,21 @@
       "resolved": "https://registry.npmjs.org/nativescript-permissions/-/nativescript-permissions-1.2.3.tgz",
       "integrity": "sha1-4+ZVRfmP5IjdVXj3/5DrrjCI5wA="
     },
+    "nativescript-powerinfo": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/nativescript-powerinfo/-/nativescript-powerinfo-1.0.7.tgz",
+      "integrity": "sha1-ZXIq2bQwxIR7lRJT5kUmt1zsGXo=",
+      "requires": {
+        "typescript": "^1.8.10"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "1.8.10",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.8.10.tgz",
+          "integrity": "sha1-tHXW4N/wv1DyluXKbvn7tccyDx4="
+        }
+      }
+    },
     "nativescript-theme-core": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/nativescript-theme-core/-/nativescript-theme-core-1.0.4.tgz",

client/Nightr/package.json

@@ -24,6 +24,7 @@
     "nativescript-angular": "~7.2.0",
     "nativescript-camera": "^4.4.0",
     "nativescript-geolocation": "^5.0.0",
+    "nativescript-powerinfo": "^1.0.7",
     "nativescript-theme-core": "~1.0.4",
     "reflect-metadata": "~0.1.12",
     "rxjs": "~6.3.0",

client/Nightr/src/app/app.component.html

@@ -1,12 +1,3 @@
-<AbsoluteLayout>
+<GridLayout>
-<ns-side-drawer></ns-side-drawer>
+    <page-router-outlet></page-router-outlet>
-
+</GridLayout>
-<StackLayout class="float-btn-container">
-<ns-my-button (tap)=onTap($event) text="Nightr"></ns-my-button>
-</StackLayout>
-<StackLayout>
-<ns-locationButton></ns-locationButton>
-<ns-camera-button></ns-camera-button>
-</StackLayout>
-</AbsoluteLayout>
-

client/Nightr/src/app/app.component.ts

@@ -1,41 +1,8 @@
 import { Component } from "@angular/core";
-import * as dialogs from "tns-core-modules/ui/dialogs";
-import { MyHttpPostService } from './services/my-http-post-service'
-import { TouchGestureEventData, GestureEventData } from 'tns-core-modules/ui/gestures'
-import { isEnabled, enableLocationRequest, getCurrentLocation, watchLocation, distance, clearWatch } from "nativescript-geolocation";
 
 @Component({
     selector: "ns-app",
     moduleId: module.id,
     templateUrl: "./app.component.html",
-    styleUrls: ['./app.component.css'],
-    providers: [MyHttpPostService]
 })
-export class AppComponent {
+export class AppComponent {}
-    public user: string = "";
-    public pass: string = "";
-    returnMessage: string = "";
-
-    constructor(private myHttpPostSerivce: MyHttpPostService) { }
-
-    public onTap(args: GestureEventData): any {
-        this.submit();
-        dialogs.confirm("Should be result").then(result => {
-            console.log("Dialog result: " + result);
-        });
-    }
-
-    public submit(): void {
-        this.makePostRequest();
-    }
-
-    private makePostRequest(): void {
-        console.log('Reached makepostRequest');
-        this.myHttpPostSerivce
-            .postData({ username: this.user, password: this.pass })
-            .subscribe(res => {
-                console.log('This is res', res);
-                this.returnMessage = (<any>res).json.data.username;
-            });
-    }
-}

client/Nightr/src/app/app.module.ts

@@ -1,11 +1,14 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
 
 import { AppComponent } from "./app.component";
+import { HomePageComponent } from "./home-page/home-page.component";
 import { MyButtonComponent } from './component/my-button/my-button.component';
 import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
 import { MyLocationButtonComponent } from './component/locationButton/locationButton.component';
 import { CameraButtonComponent } from './component/camera-button/camera-button.component';
+import { ResultPageComponent } from './result-page/result-page.component';
 
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -18,6 +21,12 @@ import { CameraButtonComponent } from './component/camera-button/camera-button.c
         AppComponent
     ],
     imports: [
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forRoot([
+            { path: "", redirectTo: "/home-page", pathMatch: "full" },
+            { path: "home-page", component: HomePageComponent},
+            { path: "result-page", component: ResultPageComponent}
+        ]),
         NativeScriptModule,
         NativeScriptHttpClientModule,
     ],
@@ -26,6 +35,8 @@ import { CameraButtonComponent } from './component/camera-button/camera-button.c
         MyLocationButtonComponent,
         MyButtonComponent,
         CameraButtonComponent,
+        ResultPageComponent,
+        HomePageComponent,
     ],
     providers: [],
     schemas: [

client/Nightr/src/app/home-page/home-page.component.css

@@ -0,0 +1,5 @@
+.float-btn-container
+ {
+    margin-top: 35%;
+    margin-left: 20%;
+ }

client/Nightr/src/app/home-page/home-page.component.html

@@ -0,0 +1,14 @@
+<ActionBar title="Home" class="action-bar"></ActionBar>
+
+<ScrollView class="page">
+    <AbsoluteLayout>
+            <StackLayout class="float-btn-container">
+             <ns-my-button (tap)=onTap($event) text="Nightr"></ns-my-button>
+            </StackLayout>
+            <StackLayout>
+            <ns-locationButton></ns-locationButton>
+            <ns-camera-button></ns-camera-button>
+        <Button class="btn btn-primary" text="Result page" [nsRouterLink]="['/result-page']"></Button>
+        </StackLayout>
+    </AbsoluteLayout>
+</ScrollView>

client/Nightr/src/app/home-page/home-page.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from "@angular/core";
+import * as dialogs from "tns-core-modules/ui/dialogs";
+import { MyHttpPostService } from '../services/my-http-post-service'
+import { RouterExtensions } from "nativescript-angular/router";
+import { TouchGestureEventData, GestureEventData } from 'tns-core-modules/ui/gestures'
+import { isEnabled, enableLocationRequest, getCurrentLocation, watchLocation, distance, clearWatch } from "nativescript-geolocation";
+
+@Component({
+    selector: "home-page",
+    moduleId: module.id,
+    templateUrl: './home-page.component.html',
+    styleUrls: ['./home-page.component.css'],
+    providers: [MyHttpPostService]
+})
+export class HomePageComponent implements OnInit {
+    public user: string = "";
+    public pass: string = "";
+    returnMessage: string = "";
+
+    constructor(private myHttpPostSerivce: MyHttpPostService, private routerExtensions: RouterExtensions) { }
+
+    public onTap(args: GestureEventData): any {
+        this.routerExtensions.navigateByUrl("/result-page");
+        this.submit();
+        dialogs.confirm("Should be result").then(result => {
+            console.log("Dialog result: " + result);
+        });
+    }
+
+    public submit(): void {
+        this.makePostRequest();
+    }
+
+    private makePostRequest(): void {
+        console.log('Reached makepostRequest');
+        this.myHttpPostSerivce
+            .postData({ username: this.user, password: this.pass })
+            .subscribe(res => {
+                console.log('This is res', res);
+                this.returnMessage = (<any>res).json.data.username;
+            });
+    }
+
+    ngOnInit(): void {
+    }
+    goBack(): void {
+        this.routerExtensions.back();
+    }
+}

client/Nightr/src/app/result-page/result-page.component.css

@@ -0,0 +1 @@
+/* Add mobile styles for the component here.  */

client/Nightr/src/app/result-page/result-page.component.html

@@ -0,0 +1,7 @@
+<ActionBar title="Result" class="action-bar"></ActionBar>
+
+<ScrollView class="page">
+        <AbsoluteLayout>
+            <Button class="btn btn-primary" text="Home" [nsRouterLink]="['/home-page']"></Button>
+        </AbsoluteLayout>
+</ScrollView>

client/Nightr/src/app/result-page/result-page.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterExtensions } from 'nativescript-angular/router';
+
+@Component({
+  selector: 'result-page',
+  templateUrl: './result-page.component.html',
+  styleUrls: ['./result-page.component.css'],
+  moduleId: module.id,
+})
+export class ResultPageComponent implements OnInit {
+
+  constructor(private routerExtensions: RouterExtensions) { }
+
+  ngOnInit(): void {
+  }
+
+  goBack(): void {
+      this.routerExtensions.back();
+  }
+
+}