From 7ee898bc7eb0bfec660fa73044be68c2dcc32fb9 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Erik=20Haider=20Fors=C3=A9n?= <erikhf@ifi.uio.no>
Date: Thu, 19 Nov 2015 20:48:30 +0100
Subject: [PATCH] Fixed events between components

---
 src/components/app.html             | 12 ++++++++++--
 src/components/app.ts               |  3 ++-
 src/components/map/map.ts           |  9 ++++++---
 src/components/navbar/navbar.html   |  2 +-
 src/components/navbar/navbar.ts     | 13 ++++++++-----
 src/components/search/search.ts     |  1 +
 src/components/sidebar/sidebar.html | 19 +++++++++++++++++++
 src/components/sidebar/sidebar.ts   | 27 +++++++++++++++++++++++++++
 8 files changed, 74 insertions(+), 12 deletions(-)
 create mode 100644 src/components/sidebar/sidebar.html
 create mode 100644 src/components/sidebar/sidebar.ts

diff --git a/src/components/app.html b/src/components/app.html
index e524360..1be1056 100644
--- a/src/components/app.html
+++ b/src/components/app.html
@@ -1,6 +1,14 @@
 <div class="container">
-    <mou-navbar></mou-navbar>
-    <mou-map #map></mou-map>
+    <mou-navbar (outevent)="map.update($event)"></mou-navbar>
+
+    <div class="row">
+        <div class="col-md-8">
+            <mou-map (newactive)="sidebar.update($event)" #map></mou-map>
+        </div>
+        <div class="col-md-4">
+            <mou-sidebar #sidebar></mou-sidebar>
+        </div>
+    </div>
 </div>
 
 
diff --git a/src/components/app.ts b/src/components/app.ts
index f8bdea7..f8d69d0 100644
--- a/src/components/app.ts
+++ b/src/components/app.ts
@@ -2,13 +2,14 @@ import {HTTP_PROVIDERS} from 'angular2/http';
 import {Component, View, bootstrap, provide, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2';
 import {Map} from './map/map';
 import {Navbar} from "./navbar/navbar";
+import {Sidebar} from "./sidebar/sidebar";
 
 declare var System:any;
 
 @Component({
     selector: 'mou-app',
     templateUrl: './components/app.html',
-    directives: [Map, Navbar]
+    directives: [Map, Navbar, Sidebar]
 })
 class App {}
 
diff --git a/src/components/map/map.ts b/src/components/map/map.ts
index ebf20ba..91cc714 100644
--- a/src/components/map/map.ts
+++ b/src/components/map/map.ts
@@ -1,10 +1,11 @@
-import {Component, CORE_DIRECTIVES,} from 'angular2/angular2';
+import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
 import {Headers, Http} from 'angular2/http';
 
 
 @Component({
     selector: 'mou-map',
     directives: [CORE_DIRECTIVES],
+    events: ['newactive'],
     templateUrl: './components/map/map.html'
 })
 
@@ -16,7 +17,7 @@ export class Map {
     http: Http;
 
     constructor(http:Http) {
-
+        this.newactive = new EventEmitter();
         this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
         this.init();
         this.http = http;
@@ -174,7 +175,9 @@ export class Map {
         console.log('you just deleted the marker');
     }
 
-
+    update(event){
+        this.newactive.next(event);
+    }
 }
 
 
diff --git a/src/components/navbar/navbar.html b/src/components/navbar/navbar.html
index ab8f70f..620df8e 100644
--- a/src/components/navbar/navbar.html
+++ b/src/components/navbar/navbar.html
@@ -1,6 +1,6 @@
 <div id="navdiv" class="navbar navbar-default navbar-fixed-top">
 
-    <mou-search></mou-search>
+    <mou-search (newsearch)="inevent($event)"></mou-search>
 
 </div>
 
diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts
index b34ea77..6591410 100644
--- a/src/components/navbar/navbar.ts
+++ b/src/components/navbar/navbar.ts
@@ -1,19 +1,22 @@
-import {Component,View, CORE_DIRECTIVES} from 'angular2/angular2';
+import {Component,View,EventEmitter, CORE_DIRECTIVES} from 'angular2/angular2';
 import {Search} from "../search/search";
 
 @Component({
     selector: 'mou-navbar',
     directives: [CORE_DIRECTIVES, Search],
     templateUrl: './components/navbar/navbar.html',
+    events:['outevent'],
     styleUrls: ['./components/navbar/navbar.css']
 })
 
 export class Navbar {
+    constructor(){
+        this.outevent = new EventEmitter();
+    }
 
-
-
-
-
+    inevent(e){
+        this.outevent.next(e);
+    }
 }
 
 
diff --git a/src/components/search/search.ts b/src/components/search/search.ts
index 98e69aa..7039114 100644
--- a/src/components/search/search.ts
+++ b/src/components/search/search.ts
@@ -19,6 +19,7 @@ export class Search {
     }
 
     getMoreInfo(orgunit) {
+        console.log("yolo");
         this.newsearch.next(orgunit.id);
     }
 
diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html
new file mode 100644
index 0000000..875e2c2
--- /dev/null
+++ b/src/components/sidebar/sidebar.html
@@ -0,0 +1,19 @@
+<div>
+    <div *ng-if="activeOrgUnit">
+        <div class="form-group">
+            <label>Name</label>
+            <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name" [disabled]="!editmode">
+        </div>
+        <div class="form-group">
+            <label>Shortname</label>
+            <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName" [disabled]="!editmode">
+        </div>
+        <fieldset class="form-group">
+            <legend>Group(s)</legend>
+            <div *ng-for="#group of activeOrgUnit.organisationUnitGroups">
+                <input class="form-control" type="text" [(ng-model)]="group.name" [disabled]="!editmode">
+            </div>
+        </fieldset>
+        <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/sidebar/sidebar.ts b/src/components/sidebar/sidebar.ts
new file mode 100644
index 0000000..e023261
--- /dev/null
+++ b/src/components/sidebar/sidebar.ts
@@ -0,0 +1,27 @@
+import {Component, NgFor, NgIf, NgModel, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
+import {Http} from 'angular2/http';
+
+
+@Component({
+    selector: 'mou-sidebar',
+    directives: [CORE_DIRECTIVES,FORM_DIRECTIVES,NgFor,NgModel,NgIf],
+    templateUrl: './components/sidebar/sidebar.html'
+})
+export class Sidebar {
+    http: Http;
+    activeOrgUnit: Object;
+    editmode: boolean;
+
+    constructor(http:Http){
+        this.http = http;
+        this.editmode = false;
+    }
+
+    update(orgunitId){
+        console.log(orgunitId);
+        this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
+            .map(res => res.json())
+            .subscribe(res => this.activeOrgUnit = res)
+    }
+}
+
-- 
2.39.3