From e1ae6d2d54cd91a5ff5a3eb17a48db7ab7dd6ecb Mon Sep 17 00:00:00 2001 From: Christian Date: Sat, 6 Apr 2019 23:11:23 +0200 Subject: [PATCH] Added routing through Angular --- client/Nightr/package-lock.json | 15 ++++++ client/Nightr/package.json | 1 + client/Nightr/src/app/app.component.html | 15 ++---- client/Nightr/src/app/app.component.ts | 35 +------------ client/Nightr/src/app/app.module.ts | 11 +++++ .../src/app/home-page/home-page.component.css | 5 ++ .../app/home-page/home-page.component.html | 14 ++++++ .../src/app/home-page/home-page.component.ts | 49 +++++++++++++++++++ .../app/result-page/result-page.component.css | 1 + .../result-page/result-page.component.html | 7 +++ .../app/result-page/result-page.component.ts | 21 ++++++++ 11 files changed, 128 insertions(+), 46 deletions(-) create mode 100644 client/Nightr/src/app/home-page/home-page.component.css create mode 100644 client/Nightr/src/app/home-page/home-page.component.html create mode 100644 client/Nightr/src/app/home-page/home-page.component.ts create mode 100644 client/Nightr/src/app/result-page/result-page.component.css create mode 100644 client/Nightr/src/app/result-page/result-page.component.html create mode 100644 client/Nightr/src/app/result-page/result-page.component.ts diff --git a/client/Nightr/package-lock.json b/client/Nightr/package-lock.json index 1469775..ec0d477 100644 --- a/client/Nightr/package-lock.json +++ b/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", diff --git a/client/Nightr/package.json b/client/Nightr/package.json index 36bf9c5..a534fa3 100644 --- a/client/Nightr/package.json +++ b/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", diff --git a/client/Nightr/src/app/app.component.html b/client/Nightr/src/app/app.component.html index 8de10bd..6a6bd89 100644 --- a/client/Nightr/src/app/app.component.html +++ b/client/Nightr/src/app/app.component.html @@ -1,12 +1,3 @@ - - - - - - - - - - - - + + + diff --git a/client/Nightr/src/app/app.component.ts b/client/Nightr/src/app/app.component.ts index 0758a86..8dead37 100644 --- a/client/Nightr/src/app/app.component.ts +++ b/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 { - 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 = (res).json.data.username; - }); - } -} +export class AppComponent {} diff --git a/client/Nightr/src/app/app.module.ts b/client/Nightr/src/app/app.module.ts index 04ef01a..46046e5 100644 --- a/client/Nightr/src/app/app.module.ts +++ b/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: [ diff --git a/client/Nightr/src/app/home-page/home-page.component.css b/client/Nightr/src/app/home-page/home-page.component.css new file mode 100644 index 0000000..18496f5 --- /dev/null +++ b/client/Nightr/src/app/home-page/home-page.component.css @@ -0,0 +1,5 @@ +.float-btn-container + { + margin-top: 35%; + margin-left: 20%; + } diff --git a/client/Nightr/src/app/home-page/home-page.component.html b/client/Nightr/src/app/home-page/home-page.component.html new file mode 100644 index 0000000..34a9045 --- /dev/null +++ b/client/Nightr/src/app/home-page/home-page.component.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/Nightr/src/app/home-page/home-page.component.ts b/client/Nightr/src/app/home-page/home-page.component.ts new file mode 100644 index 0000000..56b788d --- /dev/null +++ b/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 = (res).json.data.username; + }); + } + + ngOnInit(): void { + } + goBack(): void { + this.routerExtensions.back(); + } +} diff --git a/client/Nightr/src/app/result-page/result-page.component.css b/client/Nightr/src/app/result-page/result-page.component.css new file mode 100644 index 0000000..bcd4764 --- /dev/null +++ b/client/Nightr/src/app/result-page/result-page.component.css @@ -0,0 +1 @@ +/* Add mobile styles for the component here. */ diff --git a/client/Nightr/src/app/result-page/result-page.component.html b/client/Nightr/src/app/result-page/result-page.component.html new file mode 100644 index 0000000..5a89837 --- /dev/null +++ b/client/Nightr/src/app/result-page/result-page.component.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/client/Nightr/src/app/result-page/result-page.component.ts b/client/Nightr/src/app/result-page/result-page.component.ts new file mode 100644 index 0000000..a764430 --- /dev/null +++ b/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(); + } + +}