Added routing through Angular
This commit is contained in:
parent
8826d77647
commit
e1ae6d2d54
15
client/Nightr/package-lock.json
generated
15
client/Nightr/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -1,12 +1,3 @@
|
|||
<AbsoluteLayout>
|
||||
<ns-side-drawer></ns-side-drawer>
|
||||
|
||||
<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>
|
||||
|
||||
<GridLayout>
|
||||
<page-router-outlet></page-router-outlet>
|
||||
</GridLayout>
|
||||
|
|
|
@ -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 = (<any>res).json.data.username;
|
||||
});
|
||||
}
|
||||
}
|
||||
export class AppComponent {}
|
||||
|
|
|
@ -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: [
|
||||
|
|
5
client/Nightr/src/app/home-page/home-page.component.css
Normal file
5
client/Nightr/src/app/home-page/home-page.component.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
.float-btn-container
|
||||
{
|
||||
margin-top: 35%;
|
||||
margin-left: 20%;
|
||||
}
|
14
client/Nightr/src/app/home-page/home-page.component.html
Normal file
14
client/Nightr/src/app/home-page/home-page.component.html
Normal file
|
@ -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>
|
49
client/Nightr/src/app/home-page/home-page.component.ts
Normal file
49
client/Nightr/src/app/home-page/home-page.component.ts
Normal file
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
/* Add mobile styles for the component here. */
|
|
@ -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>
|
21
client/Nightr/src/app/result-page/result-page.component.ts
Normal file
21
client/Nightr/src/app/result-page/result-page.component.ts
Normal file
|
@ -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();
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in a new issue