-<!--<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>
-<div id="map"></div>
+<div id="map">
+
+</div>
+<div class="col-lg-12">
+ <mou-search (newsearch)="inevent($event)"></mou-search>
+
+</div>
+
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'
})
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();
this.getData('?paging=false&level=2',this);
}
+ inevent(e){
+ this.outevent.next(e);
+ }
+
init() {
-<!--<div id="search">
+<div id="search">
<label class="sr-only" for="livesearch">Search</label>
placeholder="Search"
value = "" />
- <button class="emptysearch"(click)="hideDiv()">
+ <button class="exitsearch" id="exitsearch" (click)="emptyByClick()">
✗ </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 ? '▽' : '✗' }}
</button>
<option value="Rural">Rural</option>
<option value="Urban">Urban</option>
</select></li>
-
</ul>
+
+
</div>
--->
+
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']
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;
}
}
+ emptyByClick(){
+ return this.emptySearch = document.getElementById("divresult").style.visibility = "hidden";
+ }
+
+
/*getFilterTypes(){
this.http.get(dhis + "/api/organisationUnitGroups/")
-<div>
+<div class="sideBar">
<div *ng-if="activeOrgUnit">
<div class="form-group">
<label>Name</label>
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;
}
.search div{
position: relative;
}*/
-/*
+
.results > li > a{
+ position: relative;
+
margin-top: 10px;
display: block;
padding: 3px 5px;
}
.results > li > a:focus, .results > li > a:hover {
- margin-top: 20px;
+ position: relative;
+ margin-top: 20px;
color: #262626;
text-decoration: none;
background-color: #f5f5f5
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;
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;
display: none;
}
-*/
+.sideBar{
+ height: 300px;
+ width: 300px;
+ background-color: white;
+ position: relative;
+
+}
+
<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'}}