ting oppaa kart
authorRoza Moustafa <roza.92m@hotmail.com>
Thu, 3 Dec 2015 18:14:09 +0000 (19:14 +0100)
committerRoza Moustafa <roza.92m@hotmail.com>
Thu, 3 Dec 2015 18:14:09 +0000 (19:14 +0100)
src/components/app.html
src/components/map/map.html
src/components/map/map.ts
src/components/search/search.html
src/components/search/search.ts
src/components/sidebar/sidebar.html
src/css/map.css
src/index.html

index 23b1d5c..ced4a08 100644 (file)
@@ -1,14 +1,20 @@
-<!--<div class="container">-->
-    <mou-navbar (outevent)="map.update($event)"></mou-navbar>
+<div class="container">
+
+    <div class="row">
 
    <!-- <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>
+            <mou-map (outevent)="map.update($event)" (newactive)="sidebar.update($event)" #map></mou-map>
+        <div class="col-md-3"> <mou-sidebar #sidebar></mou-sidebar></div>
+
+
+        <!-- </div>
+         <div class="col-md-4">
+             <mou-sidebar #sidebar></mou-sidebar>
+         </div>
+     </div>-->
+
         </div>
-    </div>
-</div-->
+</div>
 
 
index ad19e7d..c7a17ca 100644 (file)
@@ -1 +1,8 @@
-<div id="map"></div>
+<div id="map">
+
+</div>
+<div class="col-lg-12">
+    <mou-search (newsearch)="inevent($event)"></mou-search>
+
+</div>
+
index a726498..49803f5 100644 (file)
@@ -1,11 +1,11 @@
 import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
 import {Headers, Http} from 'angular2/http';
-
+import {Search} from "../search/search";
 
 @Component({
     selector: 'mou-map',
-    directives: [CORE_DIRECTIVES],
-    events: ['newactive'],
+    directives: [CORE_DIRECTIVES, Search],
+    events: ['newactive', 'outevent'],
     templateUrl: './components/map/map.html'
 })
 
@@ -16,6 +16,8 @@ export class Map {
     http: Http;
 
     constructor(http:Http) {
+        this.outevent = new EventEmitter();
+
         this.newactive = new EventEmitter();
         this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
         this.init();
@@ -24,6 +26,10 @@ export class Map {
         this.getData('?paging=false&level=2',this);
     }
 
+    inevent(e){
+        this.outevent.next(e);
+    }
+
 
     init() {
 
index 56b6e1c..1f2ff84 100644 (file)
@@ -1,4 +1,4 @@
-<!--<div id="search">
+<div id="search">
 
     <label class="sr-only" for="livesearch">Search</label>
 
@@ -14,7 +14,7 @@
                placeholder="Search"
                 value = "" />
 
- <button class="emptysearch"(click)="hideDiv()">
+ <button class="exitsearch" id="exitsearch" (click)="emptyByClick()">
         &cross; </button></form>
 
 <span [hidden]="hideDiv()">
     <div class="divresult" id="divresult" [hidden]="!orgunits.length">
         <ul id="d" class="dropdown-menu result"  >
             <li  id="c" *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
-                <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
+                <a id="left-menu" href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
             </li>
         </ul>
     </div>
 
 </span>
 
-
     <button type="button" class="knapp" (click)="toggle()" onclick="$('#ownershipSelector, #typeSelector, #locationSelector').prop('selectedIndex',0);" data-toggle="collapse" data-target="#dropdown-menu">
         {{ visible ? '&xdtri;' : '&cross;' }}
     </button>
             <option value="Rural">Rural</option>
             <option value="Urban">Urban</option>
         </select></li>
-
     </ul>
 
+
+
 </div>
--->
+
 
 
 
index b33c8b2..0b8d47e 100644 (file)
@@ -1,10 +1,11 @@
 import {Component,EventEmitter, View, CORE_DIRECTIVES} from 'angular2/angular2';
 import {Http} from 'angular2/http';
 import {LiveSearch} from "./livesearch";
+import {Sidebar} from "../sidebar/sidebar";
 
 @Component({
     selector: 'mou-search',
-    directives: [CORE_DIRECTIVES, LiveSearch],
+    directives: [CORE_DIRECTIVES, LiveSearch, Sidebar],
     events: ['newsearch'],
     templateUrl: './components/search/search.html',
     styleUrls: ['./components/search/search.css']
@@ -15,20 +16,28 @@ export class Search {
     facilityType: Array<any> = [];
     facilityOwnership: Array<any> = [];
     facilityLocation: Array<any> = [];
-
+    emptySearch: any;
+    slide: any;
 
     constructor(public http:Http) {
         this.newsearch = new EventEmitter();
         this.visible = true;
+        this.emptySearch = document.getElementById("divresult");
 
     }
 
+
+
+
     getMoreInfo(orgunit) {
         this.orgunits = [];
         console.log("yolo");
         this.newsearch.next(orgunit.id);
     }
 
+
+
+
     toggle() {
         this.visible = !this.visible;
     }
@@ -41,6 +50,11 @@ export class Search {
     }
 
 
+    emptyByClick(){
+        return this.emptySearch = document.getElementById("divresult").style.visibility = "hidden";
+    }
+
+
 
     /*getFilterTypes(){
         this.http.get(dhis + "/api/organisationUnitGroups/")
index 875e2c2..788efa4 100644 (file)
@@ -1,4 +1,4 @@
-<div>
+<div class="sideBar">
     <div *ng-if="activeOrgUnit">
         <div class="form-group">
             <label>Name</label>
index e0e5a48..6412e2b 100644 (file)
@@ -4,14 +4,15 @@
 
 html, body {
     height: 100%;
-
 }
 
 #map {
-    min-height: 100% !important;
-    height: auto !important;
     height: 100%;
-    margin: 0 auto -20px;
+    width: 100%;
+    position:absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
 }
 
 
@@ -19,8 +20,10 @@ html, body {
 .search div{
     position: relative;
 }*/
-/*
+
 .results > li > a{
+    position: relative;
+
     margin-top: 10px;
     display: block;
     padding: 3px 5px;
@@ -32,8 +35,9 @@ html, body {
 }
 
 .results > li > a:focus, .results > li > a:hover {
-    margin-top: 20px;
+    position: relative;
 
+    margin-top: 20px;
     color: #262626;
     text-decoration: none;
     background-color: #f5f5f5
@@ -44,27 +48,26 @@ html, body {
     margin-left: 649px;
     background-color: white;
     border-radius: 0px;
-
-
 }
 
 .dropdown-menu li{
     background-color: white;
     padding-left: 20px;
     padding-right: 20px;
-
-
 }
 
 #search {
-    width: 500px;
-    height: 120px;
-    margin: 15px;
-    margin-left: 150px;
-    background-color: red;
     position: relative;
-}
+    z-index: 1;
+    margin-top: 20px;
+    margin-left: 700px;
+    padding-left: 20px;
+    padding: 10px;
+    background: black;
+    color: white;
+    display:inline-block;
 
+}
 
 #livesearch{
     box-shadow: 0 0 1px darkgrey;
@@ -187,20 +190,20 @@ html, body {
     display:none;
 }
 
-.emptysearch {
+.exitsearch {
     border-radius: 60px;
     background-color: lightgrey;
     border: black;
     position: relative;
 }
 
-.emptysearch:hover{
+.exitsearch:hover{
     background-color: white;
     position: relative;
 
 }
 
-.emptysearch:after {
+.exitsearch:after {
     display: block;
     margin: auto;
     padding: 2px;
@@ -210,4 +213,11 @@ html, body {
      display: none;
  }
 
-*/
+.sideBar{
+    height: 300px;
+    width: 300px;
+    background-color: white;
+    position: relative;
+
+}
+
index a09ca1d..8b21207 100644 (file)
@@ -23,6 +23,7 @@
     <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/map.css">
 
+
     <script>
         System.config({
             packages: {'components': {defaultExtension: 'js'}}