From e405a9c1c8e276ca49742037f941b55c55979c72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Basl=C3=A9?= Date: Mon, 30 May 2016 16:14:03 +0200 Subject: [PATCH 01/11] hotel simplistic form --- src/app/+hotels/hotels.component.html | 35 ++++++++++++++++++++++++--- src/app/+hotels/hotels.component.ts | 22 +++++++++++++++-- 2 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/app/+hotels/hotels.component.html b/src/app/+hotels/hotels.component.html index 0c213d3..9b9c1f3 100644 --- a/src/app/+hotels/hotels.component.html +++ b/src/app/+hotels/hotels.component.html @@ -1,3 +1,32 @@ -

- hotels works! -

+
+

Find Hotels

+
+ +
+ + +
+ +
+ + +
+ + +
+
\ No newline at end of file diff --git a/src/app/+hotels/hotels.component.ts b/src/app/+hotels/hotels.component.ts index 85c12d4..f7047f2 100644 --- a/src/app/+hotels/hotels.component.ts +++ b/src/app/+hotels/hotels.component.ts @@ -1,15 +1,33 @@ import { Component, OnInit } from '@angular/core'; +import { + CORE_DIRECTIVES, + FORM_DIRECTIVES, + FormBuilder, + ControlGroup, + Validators +} from '@angular/common'; @Component({ moduleId: module.id, selector: 'app-hotels', + directives: [CORE_DIRECTIVES, FORM_DIRECTIVES], templateUrl: 'hotels.component.html' }) + export class HotelsComponent implements OnInit { + hotelForm: ControlGroup; - constructor() {} + constructor(fb: FormBuilder) { + this.hotelForm = fb.group({ + 'location': ['', Validators.required], + 'description': ['', Validators.required] + }); + } ngOnInit() { } -} + onSubmit(value: any): void { + console.log('you searched for hotel:', value); + } +} \ No newline at end of file From 0ac951c0c00717383f92f5af3fd6a7f273e346eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Basl=C3=A9?= Date: Mon, 30 May 2016 18:52:53 +0200 Subject: [PATCH 02/11] added config property for API url --- config/environment.dev.ts | 3 ++- src/app/environment.ts | 3 ++- src/app/shared/utility.service.ts | 31 +++++++++++++++++++++++++------ 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/config/environment.dev.ts b/config/environment.dev.ts index 5b296ed..7de7de3 100644 --- a/config/environment.dev.ts +++ b/config/environment.dev.ts @@ -1,4 +1,5 @@ export const environment = { production: false, - devHost:"http://localhost:3000" + devHost:"http://localhost:3000", + baseApiUrl: "http://localhost:8080" }; diff --git a/src/app/environment.ts b/src/app/environment.ts index 79ee96f..f5de919 100644 --- a/src/app/environment.ts +++ b/src/app/environment.ts @@ -3,5 +3,6 @@ // The build system defaults to the dev environment export const environment = { - production: false + production: false, + baseApiUrl: "foo" }; diff --git a/src/app/shared/utility.service.ts b/src/app/shared/utility.service.ts index 2da047a..a2e858c 100644 --- a/src/app/shared/utility.service.ts +++ b/src/app/shared/utility.service.ts @@ -1,5 +1,8 @@ import { Injectable, Inject } from "@angular/core"; -import { Http, Request, RequestMethod, Headers, URLSearchParams, HTTP_PROVIDERS } from "@angular/http"; +import { Http, Request, RequestMethod, Headers, URLSearchParams, HTTP_PROVIDERS, Response } from "@angular/http"; +import { Observable } from 'rxjs/Rx'; +import 'rxjs/add/operator/do' +import 'rxjs/add/operator/map' @Injectable() @@ -61,19 +64,35 @@ export class UtilityService { }); } - makeGetRequest(url: string, params: Array) { + makeGetRequestObs(url: string, params: Array) { var fullUrl: string = url; if(params && params.length > 0) { fullUrl = fullUrl + "/" + params.join("/"); } console.log("DEBUG: GET FULL URL:",fullUrl); + return this.http.get(fullUrl) + .do((success) => { + console.log("DEBUG: GET RESPONSE:",fullUrl,":",success.json()); + }, + (error) => { + console.log("DEBUG: GET ERROR:",fullUrl,":",error); + }) + .map(this.extractData) + } + + private extractData(res: Response) { + let body = res.json(); + return body.data || { }; + } + + makeGetRequest(url: string, params: Array) { + let obs = this.makeGetRequestObs(url, params); return new Promise((resolve, reject) => { - this.http.get(fullUrl) + obs .subscribe((success) => { - console.log("DEBUG: GET RESPONSE:",fullUrl,":",success.json()); - resolve(success.json()); + resolve(success); }, (error) => { - reject(error.json()); + reject(error); }); }); } From f4f77a9ba12aeb080a52296a754132a9b1bb9812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Basl=C3=A9?= Date: Mon, 30 May 2016 18:53:28 +0200 Subject: [PATCH 03/11] hotel searches on the configured api's hotel endpoint --- src/app/+hotels/hotels.component.html | 24 ++++++++++---------- src/app/+hotels/hotels.component.ts | 32 +++++++++++++++++++++++---- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/src/app/+hotels/hotels.component.html b/src/app/+hotels/hotels.component.html index 9b9c1f3..7e2679a 100644 --- a/src/app/+hotels/hotels.component.html +++ b/src/app/+hotels/hotels.component.html @@ -5,28 +5,28 @@

Find Hotels

class="form-inline" [class.has-error]="!hotelForm.valid"> -
- - -
-
+
+ + +
+ \ No newline at end of file diff --git a/src/app/+hotels/hotels.component.ts b/src/app/+hotels/hotels.component.ts index f7047f2..394d84b 100644 --- a/src/app/+hotels/hotels.component.ts +++ b/src/app/+hotels/hotels.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Injectable, Inject } from '@angular/core'; import { CORE_DIRECTIVES, FORM_DIRECTIVES, @@ -6,6 +6,9 @@ import { ControlGroup, Validators } from '@angular/common'; +import { UtilityService } from "../shared/utility.service"; +import { environment } from "../"; + @Component({ moduleId: module.id, @@ -14,14 +17,19 @@ import { templateUrl: 'hotels.component.html' }) +@Injectable() + export class HotelsComponent implements OnInit { + hotelForm: ControlGroup; + utility: UtilityService; - constructor(fb: FormBuilder) { + constructor(fb: FormBuilder, utility: UtilityService) { this.hotelForm = fb.group({ - 'location': ['', Validators.required], - 'description': ['', Validators.required] + 'description': [''], + 'location': [''] }); + this.utility = utility; } ngOnInit() { @@ -29,5 +37,21 @@ export class HotelsComponent implements OnInit { onSubmit(value: any): void { console.log('you searched for hotel:', value); + var location = value.location; + var description = value.description; + + var url = environment.baseApiUrl + "/api/hotel/"; + if (description != null && description != "") { + url = url + description + "/"; + if (location != null && location != "") { + url = url + location + "/"; + } + } + + this.utility.makeGetRequestObs(url, []) + .subscribe( + (success) => { console.log(success); }, + (error) => { console.log(error.json()); } + ); } } \ No newline at end of file From e2d74185688a01d23e9662dba6f92ca16e320ecf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Basl=C3=A9?= Date: Wed, 1 Jun 2016 11:26:28 +0200 Subject: [PATCH 04/11] contact hotel API and show hotels --- src/app/+hotels/hotels.component.html | 50 ++++++++++++++++++++++++--- src/app/+hotels/hotels.component.ts | 32 ++++++++++++----- src/app/shared/utility.service.ts | 4 +-- 3 files changed, 71 insertions(+), 15 deletions(-) diff --git a/src/app/+hotels/hotels.component.html b/src/app/+hotels/hotels.component.html index 7e2679a..b5f0ce5 100644 --- a/src/app/+hotels/hotels.component.html +++ b/src/app/+hotels/hotels.component.html @@ -1,7 +1,10 @@
-

Find Hotels

+
+

Find Hotels

+
+
@@ -10,7 +13,7 @@

Find Hotels

@@ -21,7 +24,7 @@

Find Hotels

@@ -29,4 +32,43 @@

Find Hotels

+
+
+ +
+
+

Matching POIs

+
+
+
+ No matching POI +
+ + + + + + + + + + + + + + + +
NameAddressDescription
{{line.name}}{{line.address}}{{line.description}}
+
+
+ + {{data.length}} matching point of interests (note that some might not be hotels). +
+
+ +
+
There was an error (click for details) +
+ +
{{error | json}}
\ No newline at end of file diff --git a/src/app/+hotels/hotels.component.ts b/src/app/+hotels/hotels.component.ts index 394d84b..6deb019 100644 --- a/src/app/+hotels/hotels.component.ts +++ b/src/app/+hotels/hotels.component.ts @@ -6,9 +6,11 @@ import { ControlGroup, Validators } from '@angular/common'; +import { Response } from "@angular/http"; + import { UtilityService } from "../shared/utility.service"; import { environment } from "../"; - +import { Observable } from 'rxjs/Rx'; @Component({ moduleId: module.id, @@ -23,6 +25,8 @@ export class HotelsComponent implements OnInit { hotelForm: ControlGroup; utility: UtilityService; + data; + error; constructor(fb: FormBuilder, utility: UtilityService) { this.hotelForm = fb.group({ @@ -35,23 +39,33 @@ export class HotelsComponent implements OnInit { ngOnInit() { } - onSubmit(value: any): void { + findHotels(value: any): void { console.log('you searched for hotel:', value); var location = value.location; var description = value.description; var url = environment.baseApiUrl + "/api/hotel/"; - if (description != null && description != "") { - url = url + description + "/"; - if (location != null && location != "") { - url = url + location + "/"; - } + var hasDescription = (description != null && description != ""); + var hasLocation = (location != null && location != ""); + if (hasDescription && hasLocation) { + url = url + description + "/" + location + "/"; + } else if (hasLocation) { + url = url + "*/" + location + "/"; + } else if (hasDescription) { + url = url + description + "/" } this.utility.makeGetRequestObs(url, []) .subscribe( - (success) => { console.log(success); }, - (error) => { console.log(error.json()); } + (success) => { + console.log("DEBUG: found " + success.length + " matching hotels"); + this.data = success; + this.error = null; + }, + (error: Response) => { + this.data = null; + this.error = error.json(); + } ); } } \ No newline at end of file diff --git a/src/app/shared/utility.service.ts b/src/app/shared/utility.service.ts index a2e858c..379d99b 100644 --- a/src/app/shared/utility.service.ts +++ b/src/app/shared/utility.service.ts @@ -74,7 +74,7 @@ export class UtilityService { .do((success) => { console.log("DEBUG: GET RESPONSE:",fullUrl,":",success.json()); }, - (error) => { + (error) => { console.log("DEBUG: GET ERROR:",fullUrl,":",error); }) .map(this.extractData) @@ -82,7 +82,7 @@ export class UtilityService { private extractData(res: Response) { let body = res.json(); - return body.data || { }; + return body || { }; } makeGetRequest(url: string, params: Array) { From a8cfdb690f7508436192ae9793a641b775681970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Basl=C3=A9?= Date: Thu, 2 Jun 2016 16:46:19 +0200 Subject: [PATCH 05/11] make authentication work with or without JWT add a config property to activate / deactivate JWT. rework authentication so it is compatible with java (no JWT), and create login as well... --- config/environment.dev.ts | 4 +-- src/app/+hotels/hotels.component.ts | 1 + src/app/+login/login.component.html | 2 +- src/app/environment.ts | 3 ++- src/app/shared/auth.service.ts | 40 +++++++++++++++++++---------- src/app/shared/utility.service.ts | 4 +-- 6 files changed, 34 insertions(+), 20 deletions(-) diff --git a/config/environment.dev.ts b/config/environment.dev.ts index 7de7de3..02880a0 100644 --- a/config/environment.dev.ts +++ b/config/environment.dev.ts @@ -1,5 +1,5 @@ export const environment = { production: false, - devHost:"http://localhost:3000", - baseApiUrl: "http://localhost:8080" + baseApiUrl: "http://localhost:8080", + jwtEnabled: true }; diff --git a/src/app/+hotels/hotels.component.ts b/src/app/+hotels/hotels.component.ts index 6deb019..d7e88d1 100644 --- a/src/app/+hotels/hotels.component.ts +++ b/src/app/+hotels/hotels.component.ts @@ -56,6 +56,7 @@ export class HotelsComponent implements OnInit { } this.utility.makeGetRequestObs(url, []) + .map((response: Response) => response.json()) .subscribe( (success) => { console.log("DEBUG: found " + success.length + " matching hotels"); diff --git a/src/app/+login/login.component.html b/src/app/+login/login.component.html index d79ff36..1c0fe69 100644 --- a/src/app/+login/login.component.html +++ b/src/app/+login/login.component.html @@ -7,7 +7,7 @@