landing screen

css/style.css

@@ -0,0 +1,4 @@
+.h1
+{
+	text-align: center;
+}

index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 1. Load libraries -->
   <!-- IE required polyfills, in this exact order -->
+  <base href="/">
   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
   <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
   <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
@@ -15,7 +16,8 @@
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/rxjs/bundles/Rx.js"></script>
   <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-
+  <script src="node_modules/angular2/bundles/router.dev.js"></script>
+  <script src="node_modules/angular2/bundles/http.dev.js"></script>
   <!-- 2. Configure SystemJS -->
   <script>
     System.config({

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'start' ]
+2 info using npm@3.8.6
+3 info using node@v6.0.0
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle a2-countries-and-capitals@1.0.0~prestart: a2-countries-and-capitals@1.0.0
+6 silly lifecycle a2-countries-and-capitals@1.0.0~prestart: no script for prestart, continuing
+7 info lifecycle a2-countries-and-capitals@1.0.0~start: a2-countries-and-capitals@1.0.0
+8 verbose lifecycle a2-countries-and-capitals@1.0.0~start: unsafe-perm in lifecycle true
+9 verbose lifecycle a2-countries-and-capitals@1.0.0~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Library/WebServer/Documents/ng-conf-2016-hackathon-app/node_modules/.bin:/usr/local/bin:/Users/jasonbourne/.rvm/gems/ruby-2.2.1/bin:/Users/jasonbourne/.rvm/gems/ruby-2.2.1@global/bin:/Users/jasonbourne/.rvm/rubies/ruby-2.2.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/jasonbourne/.rvm/gems/ruby-2.2.1/bin:/Users/jasonbourne/.rvm/gems/ruby-2.2.1@global/bin:/Users/jasonbourne/.rvm/rubies/ruby-2.2.1/bin:/Users/jasonbourne/.rvm/bin:/Users/jasonbourne/.rvm/bin
+10 verbose lifecycle a2-countries-and-capitals@1.0.0~start: CWD: /Library/WebServer/Documents/ng-conf-2016-hackathon-app
+11 silly lifecycle a2-countries-and-capitals@1.0.0~start: Args: [ '-c', 'tsc && concurrently "npm run tsc:w" "npm run lite" ' ]
+12 silly lifecycle a2-countries-and-capitals@1.0.0~start: Returned: code: 2  signal: null
+13 info lifecycle a2-countries-and-capitals@1.0.0~start: Failed to exec start script
+14 verbose stack Error: a2-countries-and-capitals@1.0.0 start: `tsc && concurrently "npm run tsc:w" "npm run lite" `
+14 verbose stack Exit status 2
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:850:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
+15 verbose pkgid a2-countries-and-capitals@1.0.0
+16 verbose cwd /Library/WebServer/Documents/ng-conf-2016-hackathon-app
+17 error Darwin 15.4.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
+19 error node v6.0.0
+20 error npm  v3.8.6
+21 error code ELIFECYCLE
+22 error a2-countries-and-capitals@1.0.0 start: `tsc && concurrently "npm run tsc:w" "npm run lite" `
+22 error Exit status 2
+23 error Failed at the a2-countries-and-capitals@1.0.0 start script 'tsc && concurrently "npm run tsc:w" "npm run lite" '.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the a2-countries-and-capitals package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     tsc && concurrently "npm run tsc:w" "npm run lite"
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs a2-countries-and-capitals
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls a2-countries-and-capitals
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

src/bootstrap.ts

@@ -1,12 +1,46 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
+import { CountriesComponent } from './countries.component';
+import { CountryComponent } from './country.component';
+import { LandingComponent } from './landing.component';
+
+
+@RouteConfig([
+  {
+    path: '/countries',
+    name: 'Countries',
+    component: CountriesComponent
+  },
+  {
+    path: '/',
+    name: 'Landing',
+    component: LandingComponent
+  },
+  {
+    path: '/countries/:id',
+    name: 'Country',
+    component: CountryComponent
+  }
+])
 
 
 @Component({
   selector: 'app',
   template: `
-  	<h1>Countries and Capitals</h1>
+  	<h1 class="aligncenter">Countries and Capitals</h1>
+      <router-outlet></router-outlet>
   `,
+  directives: [ROUTER_DIRECTIVES],
+  providers: [ROUTER_PROVIDERS],
+	styles: [`
+			.aligncenter {
+				text-align:center;
+			}
+			.inner-div {
+			padding:100px;
+			}
+			`]
 })
 export class App {}
 

src/countries.component.ts

@@ -0,0 +1,63 @@
+import {Component} from 'angular2/core';
+import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import 'rxjs/add/operator/map';
+import {CountriesService} from './countries.service'
+import {ROUTER_DIRECTIVES, RouterLink} from 'angular2/router';
+
+// import { CountryService } from './countries.service';
+
+@Component({
+  selector: 'countries',
+  template: `<div class="aligncenter"><ul>
+  	<table border=2>
+  		<thead>
+  			<tr>
+  				<th>Name</th>
+  				<th>Country Code</th>
+  			</tr>
+		    <tr  [routerLink]="['/Country', { id: country.countryCode }]" *ngFor="let country of countries" >
+  				<th>  {{country.countryName}}</th>
+  				<th>{{country.countryCode}}</th>
+		    </tr>
+  		</thead>
+  	</table>
+
+  </ul>
+  </div>
+  `,
+ providers: [RouterLink, HTTP_PROVIDERS, CountriesService],
+ directives: [ROUTER_DIRECTIVES],
+	styles: [`
+			.aligncenter {
+				margin-left:35%;
+			}
+			table {
+			}
+			`]
+})
+
+export class CountriesComponent {
+
+public countries_error:Boolean = false;
+public countries:Object = []; 
+
+
+  constructor(private _countryService: CountriesService) { }
+
+	ngOnInit() {
+		this.getCountries();
+	}
+
+
+  getCountries() {
+    this._countryService.getCountries().subscribe(
+      data => { 
+      	this.countries = data.geonames;
+      },
+      err => { this.countries_error = true }
+    );
+  }
+
+
+}
+

src/countries.json

@@ -0,0 +1,5 @@
+[
+  { "name": "Donuts" },
+  { "name": "Pizza" },
+  { "name": "Sushi" }
+]

src/countries.service.ts

@@ -0,0 +1,46 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
+
+@Injectable()
+export class CountriesService {
+
+  constructor(private http:Http) { }
+
+  // Uses http.get() to load a single JSON file
+  //http://api.geonames.org/searchJSON?continentCode=as&username=jasonbourne
+  // local file : ./src/countries.json
+  //http://api.geonames.org/countryInfoJSON?formatted=true&lang=it&country=DE&username=jasonbourne&style=full
+
+
+  getCountries() {
+    return this.http.get('http://api.geonames.org/searchJSON?continentCode=as&username=jasonbourne').map((res:Response) => res.json());
+  }
+
+
+}
+
+
+// @Injectable()
+// export class CountryService {
+//   constructor (private http: Http) {}
+//   private countriesUrl = 'http://api.geonames.org/searchJSON?continentCode=as&username=jasonbourne';  // URL to web api
+//   getCountries (): Observable<Country[]> {
+//     return this.http.get(this.countriesUrl)
+//                     .map(this.extractData)
+//                     .catch(this.handleError);
+//   }
+//   private extractData(res: Response) {
+//     if (res.status < 200 || res.status >= 300) {
+//       throw new Error('Bad response status: ' + res.status);
+//     }
+//     let body = res.json();
+//     return body.data || { };
+//   }
+//   private handleError (error: any) {
+//     // In a real world app, we might send the error to remote logging infrastructure
+//     let errMsg = error.message || 'Server error';
+//     console.error(errMsg); // log to console instead
+//     return Observable.throw(errMsg);
+//   }
+// }

src/country.component.ts

@@ -0,0 +1,104 @@
+import {Component} from 'angular2/core';
+import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import 'rxjs/add/operator/map';
+import {CountryService} from './country.service'
+import {ROUTER_DIRECTIVES, RouterLink, ROUTER_PROVIDERS, RouteConfig, RouteParams} from 'angular2/router';
+
+@Component({
+  selector: 'country',
+  template: `<div *ngFor="let country of countries" >
+            <h1>{{country.countryName}}</h1>
+            <table>
+              <tr><td>Goname ID</td><td>{{country.geonameId}}</td></tr>
+              <tr><td>Population of country</td><td>{{country.population}}</td></tr>
+              <tr><td>Area</td><td>{{country.areaInSqKm}}</td></tr>
+              <tr><td>Country Code</td><td>{{country.countryCode}}</td></tr>
+              <tr><td>Capital</td><td>{{country.capital}}</td></tr>
+              <tr><td>Population of capital</td><td></td></tr>
+              <tr><td>3 neighbours</td><td><span *ngFor="let neighbour of neighbours" > {{neighbour.countryName}} </span></td></tr>
+              <tr><td>Image 1</td><td><img id='myImage' src="http://www.geonames.org/flags/x/{{country.countryCode}}.gif" /></td></tr>
+            </table>
+        </div>
+  `,
+ providers: [RouterLink, HTTP_PROVIDERS, CountryService],
+ directives: [ROUTER_DIRECTIVES],
+  styles: [`
+      .aligncenter {
+        margin-left:35%;
+      }
+      table {
+      }
+      img
+      {
+        width:50%;
+        height:50%;
+      }
+      `]
+})
+
+export class CountryComponent {
+
+  public country_error:Boolean = false;
+  public geoNameId:String = '';
+  public countries:Object = [];
+  public neighbours:Object = [];
+
+  constructor(private _countryService: CountryService, params: RouteParams ) {
+    _countryService.country = params.get('id');
+  }
+
+  ngOnInit() {
+    this.getCountry();
+  }
+
+
+  getCountry() 
+  {
+
+    this._countryService.getCountry().subscribe(
+      data => { 
+        this.countries = data.geonames;
+        this.countries[0].countryCode = this.countries[0].countryCode.toLowerCase();
+        // this.geoNameId = this.countries[0].geonameId;
+
+
+
+
+
+        this._countryService.getNeighbours(this.countries[0].geonameId).subscribe(
+          data => {
+            this.neighbours = data.geonames;
+            // this.neighbours[0].countryCode = this.countries[0].countryCode.toLowerCase();
+
+          },
+          err => { this.country_error = true }
+        );
+
+
+
+
+
+
+      },
+      err => { this.country_error = true }
+    );
+
+  }
+
+  // getNeighbours() 
+  // {console.log(this.geoNameId)
+  //   this._countryService.getNeighbours(this.geoNameId).subscribe(
+  //     data => {
+  //       this.neighbours = data.geonames;
+  //       // this.neighbours[0].countryCode = this.countries[0].countryCode.toLowerCase();
+
+  //     },
+  //     err => { this.country_error = true }
+  //   );
+
+  // }
+
+
+
+}
+

src/country.service.ts

@@ -0,0 +1,26 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
+
+@Injectable()
+export class CountryService {
+
+  public country:String = '';
+
+  constructor(private http:Http) { }
+
+  // Uses http.get() to load a single JSON file
+  //http://api.geonames.org/searchJSON?continentCode=as&username=jasonbourne
+  // local file : ./src/countries.json
+
+  getCountry() 
+  {
+    return this.http.get('http://api.geonames.org/countryInfoJSON?formatted=true&lang=it&country='+this.country+'&username=jasonbourne&style=full').map((res:Response) => res.json());
+  }
+
+  getNeighbours(geoNameId:String) 
+  {
+    return this.http.get('http://api.geonames.org/neighboursJSON?geonameId='+geoNameId+'&username=jasonbourne').map((res:Response) => res.json());
+  } 
+
+}

src/landing.component.ts

@@ -0,0 +1,28 @@
+import {Component} from 'angular2/core';
+import {ROUTER_DIRECTIVES, RouterLink} from 'angular2/router';
+
+
+@Component({
+  selector: 'landing',
+  template: `<div class="inner-div">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum 
+  Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum 
+  Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum </div>
+  <a [routerLink]="['/Countries']">Browse Countries</a>
+  `,
+  directives: [ROUTER_DIRECTIVES],
+  providers: [RouterLink],
+	styles: [`
+			.aligncenter {
+				text-align:center;
+			}
+			.inner-div {
+			padding:100px;
+			}
+			a {
+				margin-left:600px;
+			}
+			`]
+})
+
+export class LandingComponent {}
+