stuff

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
 .idea
 typings
-
 *.js
-*js.map
+*js.map
+app/components

app/LocationComponent/location.component.ts

@@ -1,28 +1,28 @@
 import {Component} from 'angular2/core';
 import {RouteParams, Router} from 'angular2/router';
-import {LocationService} from '../services/location.service'
+import {LocationService} from '../services/location.service';
 
 @Component({
-    template: '<h2>Location</h2>'
+    templateUrl: './app/locationComponent/template.html'
 })
-export class LocationComponent implements OnInit {
 
-    location:Location;
+export class LocationComponent {
 
-    constructor(private _router:Router,
-                private _routeParams:RouteParams,
-                private _locationService:LocationService) {
+    locations:Locations;
 
-        _locationService.locations
-            .subscribe(
-                people => this.people = people,
-                error => console.error('Error: ' + err),
-                () => console.log('Completed!')
-            );
-    }
+    constructor(private _router:Router, private _routeParams:RouteParams, private locationService:LocationService) {
 
-    ngOnInit() {
         let id = this._routeParams.get('id');
+        console.info(id);
+        console.info("jojo");
+
+        locationService.getLocations().subscribe(
+            data => {
+                this.locations = data;
+                console.info(this.locations);
+            },
+            err => console.err(err)
+        );
     }
 
 }

app/LocationComponent/template.html

@@ -0,0 +1,9 @@
+<div class="grid">
+    <h2>Locations</h2>
+    <div *ngFor="#location of locations" class="one-quarter location-thumb">
+        <div class="back-img"
+             style="background-image:url('https://locator-app.com{{location.obj.images.normal}}')"></div>
+        <h3>{{location.obj.title}}</h3>
+
+    </div>
+</div>

app/UserComponent/user.component.ts

@@ -5,18 +5,15 @@ import {RouteParams, Router} from 'angular2/router';
     template: '<h2>Location</h2>'
 })
 
-export class UserComponent implements OnInit {
+export class UserComponent {
 
     location:Location;
 
     constructor(private _router:Router,
                 private _routeParams:RouteParams) {
-    }
 
-    ngOnInit() {
         let id = this._routeParams.get('id');
         console.info(id);
-        //this._service.getHero(id).then(hero => this.hero = hero);
-    }
 
+    }
 }

app/app.component.ts

@@ -1,14 +1,15 @@
 import {Component} from 'angular2/core';
 import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
 
-import {LocationComponent} from './LocationComponent/location.component';
-import {UserComponent} from './UserComponent/user.component';
+import {LocationComponent}  from './LocationComponent/location.component';
+import {UserComponent}      from './UserComponent/user.component';
 
 import {LocationService} from './services/location.service';
 
 @Component({
     selector: 'dash',
     template: '<router-outlet></router-outlet>',
+    providers: [LocationService],
     directives: [ROUTER_DIRECTIVES]
 })
 

app/main.ts

@@ -1,7 +1,9 @@
 import {AppComponent} from './app.component';
 import {bootstrap}    from 'angular2/platform/browser';
 import {ROUTER_PROVIDERS} from 'angular2/router';
+import {HTTP_PROVIDERS} from 'angular2/http';
+
 
 bootstrap(AppComponent, [
-    ROUTER_PROVIDERS
+    ROUTER_PROVIDERS, HTTP_PROVIDERS
 ]);

app/services/location.service.ts

@@ -1,12 +1,16 @@
-import {Injectable} from 'angular2/angular2';
-import {Http} from 'angular2/http';
+import {Injectable} from 'angular2/core';
+import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import 'rxjs/Rx';
 
 @Injectable()
 export class LocationService {
 
     constructor(http:Http) {
-        this.locations = http.get("http://locator.in.htwg-konstanz.de:2020/locations/nearby?long=9.169753789901733&lat=47.66868204997508&maxDistance=100000000000&limit=1000000000")
-            .map(response => response.json());
+        this.http = http;
     }
-}
 
+    getLocations() {
+        return this.http.get('./mock.json')
+            .map(res => res.json())
+    }
+}

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "locator-dash",
+  "description": "dashboard",
+  "main": "",
+  "authors": [
+    "Michael Knoch <[email protected]>"
+  ],
+  "license": "ISC",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "app/components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "gridism": "^0.2.1"
+  }
+}

index.html

@@ -5,6 +5,7 @@
 
     <title>Angular 2 QuickStart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="app/components/gridism/gridism.css">
     <link rel="stylesheet" href="style/main.css">
 
     <!-- 1. Load libraries -->
@@ -18,6 +19,8 @@
     <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>