merge filter og sookefelt funksjoner + litt redesign
authorRoza Moustafa <roza.92m@hotmail.com>
Thu, 3 Dec 2015 19:47:35 +0000 (20:47 +0100)
committerRoza Moustafa <roza.92m@hotmail.com>
Thu, 3 Dec 2015 19:47:35 +0000 (20:47 +0100)
1  2 
src/components/map/map.ts
src/components/search/search.html
src/components/search/search.ts
src/components/sidebar/sidebar.html

@@@ -14,11 -14,14 +14,16 @@@ export class Map 
  
      map:Object;
      http: Http;
+     LEVEL: number;
+     runned: boolean;
+     parent: Object;
+     currentPos : Object;
+     uprunned: boolean;
      constructor(http:Http) {
 +        this.outevent = new EventEmitter();
 +
          this.newactive = new EventEmitter();
+         this.newOrg = new EventEmitter();
          this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
          this.init();
          this.http = http;
  
      }
  
+     setRunned(value){
+         this.runned = value;
+     }
  
-     initMap(location,map){
+     setupRunned(value){
+         this.uprunned = value;
+     }
  
-         map.setCenter(location,12);
+     setLevel(value){
+         this.LEVEL = value;
+     }
+     addLevel(){
+         this.LEVEL++;
+     }
+     upLevel(){
+         this.LEVEL--;
+     }
++    inevent(e){
++        this.outevent.next(e);
++    }
 +
  
+     init() {
  
-         map.addListener('click', function (event) {
-                 console.log("jule husker");
-             }
-         );
+         let map = this.map;
+         let pos = {lat: 9.1, lng: -10.6};
  
+         map.setCenter(pos,12);
      }
  
      logError(error) {
          console.error(error);
  
                 name="livesearch"
                 id="livesearch"
                 placeholder="Search"
 -                />
 -    <img class="loadingpic" [hidden]="!loading"
 -         src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
 +                value = "" />
  
 + <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)">
+     <div class="divresult" id="divresult" [hidden]="checkOrgunits()" >
 -        <ul class="dropdown-menu result">
 -            <li *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)" >
 -                <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
++        <ul id="d" class="dropdown-menu result">
++            <li id="c" *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)" >
 +                <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>
  
 -<!--
 -<a var-unit id="testunit" (click)="getMoreInfo(unit.id)" href="#"></a>
 -*ng-for="#orgunit of filteredOrgunits"
 -<a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
 -(click)="getMoreInfo(orgunit)"
 --->
 -
 -</div>
 -
 -<button type="button" class="knapp" data-toggle="collapse" data-target="#dropdown-menu">
 -
 -
 -    <!--pil opp og ned-->
 -
 -    <div class="zippy">
 -        <div (click)="toggle()" class="zippy__title">
 -            {{ visible ? '&xdtri;' : '&xutri;' }} {{title}}
 -        </div>
 -        <div [hidden]="!visible" class="zippy__content">
 -            <content></content>
 -        </div>
 -    </div>
  
 -</button>
  
-     <ul id="dropdown-menu" class="dropdown-menu">
-         <li>Facility</li>
-         <li class="dropdown-header">Ownerships</li>
-         <li><select class="form-control filtervalg" id="ownershipSelector" (click)="setFilter()">
-             <option value=""> All </option>
-             <option [value]="Mission">Mission</option>
-             <option value="NGO">NGO</option>
-             <option value="Private Clinic">Private Clinic</option>
-             <option value="Public facilities">Public facilities</option>
-         </select></li>
-         <li class="dropdown-header">Types</li>
-         <li><select class="form-control filtervalg" id="typeSelector" (click)="setFilter()">
-             <option value=""> All </option>
-             <option value="CHC">CHC</option>
-             <option value="CHP">CHP</option>
-             <option value="Clinic">Clinic</option>
-             <option value="Hospital">Hospital</option>
-             <option value="MCHP">MCHP</option>
-         </select></li>
-         <li role="separator" class="divider"></li>
-         <li class="dropdown-header">Locations </li>
-         <li><select class="form-control filtervalg" id="locationSelector" (click)="setFilter()">
-             <option value=""> All </option>
-             <option value="Rural">Rural</option>
-             <option value="Urban">Urban</option>
-         </select></li>
-     </ul>
 -<div>
+ <ul id="dropdown-menu" class="dropdown-menu">
+     <li><select class="form-control filtervalg" id="ownershipSelector" (click)="setFilter()">
+     </select></li>
+     <li><select class="form-control filtervalg" id="typeSelector" (click)="setFilter()">
+     </select></li>
+     <li><select class="form-control filtervalg" id="locationSelector" (click)="setFilter()">
+     </select></li>
+ </ul>
  
 +
 +
  </div>
  
 +
 +
 +
 +
@@@ -1,7 -1,9 +1,10 @@@
  import {Component,EventEmitter, View, CORE_DIRECTIVES} from 'angular2/angular2';
  import {Http} from 'angular2/http';
  import {LiveSearch} from "./livesearch";
 +import {Sidebar} from "../sidebar/sidebar";
+ import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
+ declare var zone: Zone;
  
  @Component({
      selector: 'mou-search',
  })
  export class Search {
      orgunits: Array<any> = [];
+     filteredOrgunits: Array<any> = [];
      loading: boolean = false;
-     facilityType: Array<any> = [];
-     facilityOwnership: Array<any> = [];
-     facilityLocation: Array<any> = [];
+     groups: Array<any> = [];
+     groupSet: Array<any> = [];
+     ownershipSelector: any;
+     typeSelector: any;
+     locationSelector: any;
+     option: any;
+     searchBar: any;
+     filterset: boolean = false;
 -
 +    emptySearch: any;
 +    slide: any;
  
      constructor(public http:Http) {
          this.newsearch = new EventEmitter();
          this.visible = true;
 +        this.emptySearch = document.getElementById("divresult");
+         this.getUnitGroupSets();
+         this.ownershipSelector = document.getElementById("ownershipSelector");
+         this.typeSelector = document.getElementById("typeSelector");
+         this.locationSelector = document.getElementById("locationSelector");
+         this.searchBar = document.getElementById("livesearch");
+         this.orglist = document.getElementById("orglist");
+         this.a = document.getElementById("testunit");
      }
  
      getMoreInfo(orgunit) {
 +        this.orgunits = [];
-         console.log("yolo");
+         console.log();
          this.newsearch.next(orgunit.id);
      }
  
  
      toggle() {
          this.visible = !this.visible;
+         //this.getUnitGroupSets();
      }
  
 +    hideDiv(){
 +        if(livesearch.value == "")
 +            return true;
 +
 +    }
 +
 +
 +    emptyByClick(){
 +        return this.emptySearch = document.getElementById("divresult").style.visibility = "hidden";
 +    }
 +
  
-     /*getFilterTypes(){
-         this.http.get(dhis + "/api/organisationUnitGroups/")
-             .map(res => res.json())
-             .map(res => res.organisationUnitGroups)
-             .subscribe(
-                 zone.bind(res => {
-                    for(var i = 0; i < res.length; i++){
-                        this.http.get(res[i].href)
-                         .map(result => result.json())
-                         .map(result => result.organisationUnitGroupSet)
-                         .subscribe(
-                             zone.bind(result => {
-                                 if(result.name == "Location Rural/Urban"){
-                                     this.facilityLocation.push(res[i].name);
+     getUnitGroupSets(){
+         this.http.get(dhisAPI + "/api/organisationUnitGroupSets")
+         .map(res => res.json())
+         .map(res => res.organisationUnitGroupSets)
+         .subscribe(
+             zone.bind( res =>{
+                 this.setOptionHeader(this.ownershipSelector, res[0].name);
+                 this.setOptionHeader(this.typeSelector, res[1].name);
+                 this.setOptionHeader(this.locationSelector, res[2].name);
+                 for(var i = 0; i < res.length; i++) {
+                     this.http.get(res[i].href)
+                     .map(result => result.json())
+                     .subscribe(
+                         zone.bind(result => {
+                             if(result.displayName == "Facility Ownership"){
+                                 for(var j = 0; j < result.organisationUnitGroups.length; j++) {
+                                     this.setOption(this.ownershipSelector, result.organisationUnitGroups[j].name);
+                                 }
+                             }
+                             else if(result.displayName == "Facility Type"){
+                                 for(var j = 0; j < result.organisationUnitGroups.length; j++) {
+                                     this.setOption(this.typeSelector, result.organisationUnitGroups[j].name);
                                  }
-                                 else if(result.name == "Facility Type"){
-                                     this.facilityType.push(res[i].name);
+                             }
+                             else if(result.displayName == "Location Rural/Urban"){
+                                 for(var j = 0; j < result.organisationUnitGroups.length; j++) {
+                                     this.setOption(this.locationSelector, result.organisationUnitGroups[j].name);
                                  }
-                                 else if(result.name == "")
-                             })
-                         )
-                    }
+                             }
+                     }));
+                 }
+             })
+         )
+     }
  
-                 })
-             )
+     setOptionHeader(selector, value){
+         this.option = document.createElement("option");
+         this.option.text = "-- " + value + " --";
+         this.option.value = "";
+         selector.appendChild(this.option);
      }
  
-     setFilterTypes(){
+     setOption(selector, value){
+         this.option = document.createElement("option");
+         this.option.text = value;
+         this.option.value = value;
+         selector.appendChild(this.option);
+     }
  
-     }*/
+     checkOrgunits(){
+         if(!this.orgunits.length == false && !this.filterset){
+             this.setFilter();
+             this.filterset = true;
+         }
+         else if(!this.orgunits.length){
+             this.filteredOrgunits = [];
+             if(this.filterset) {
+                 this.filterset = false;
+             }
  
-     setFilter(){
-         var text = livesearch.value;
-         livesearch.value = "";
-         console.log(text);
-         for(var i = 0; i < text.length; i++){
-             livesearch.value += text.charAt(i);
          }
+         return !this.orgunits.length;
      }
  
+     setFilter(){
+         this.filteredOrgunits = [];
+         for (var i = 0; i < this.orgunits.length; i++) {
+             this.http.get(this.orgunits[i].href)
+                 .map(res => res.json())
+                 .subscribe(
+                     zone.bind(orgunits => {
+                         if (this.ownershipSelector.value == "" && this.typeSelector.value == "" && this.locationSelector.value == "") {
+                             this.filteredOrgunits.push(orgunits);
+                         }
+                         else {
+                             var os = false; var ls = false;var ts = false;
+                             for (var group in orgunits.organisationUnitGroups) {
+                                 if (this.ownershipSelector.value != "") {
+                                     if (orgunits.organisationUnitGroups[group].name == this.ownershipSelector.value) {
+                                         os = true;
+                                     }
+                                 }
+                                 if (this.ownershipSelector.value == "") {
+                                     os = true;
+                                 }
+                                 if (this.typeSelector.value != "") {
+                                     if (orgunits.organisationUnitGroups[group].name == this.typeSelector.value) {
+                                         ts = true;
+                                     }
+                                 }
+                                 if (this.typeSelector.value == "") {
+                                     ts = true;
+                                 }
+                                 if (this.locationSelector.value != "") {
+                                     if (orgunits.organisationUnitGroups[group].name == this.locationSelector.value) {
+                                         ls = true;
+                                     }
+                                 }
+                                 if (this.locationSelector.value == "") {
+                                     ls = true;
+                                 }
+                                 if (os == true && ts == true && ls == true) {
+                                     this.filteredOrgunits.push(orgunits);
+                                     os = false;
+                                     ts = false;
+                                     ls = false;
+                                 }
+                             }
+                         }
+                     })
+                 )
+         }
+     }
  }
  
  
@@@ -1,19 -1,77 +1,77 @@@
 -<div>
 +<div class="sideBar">
      <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">
+         <form *ng-if="editmode">
+             <div class="form-group">
+                 <label>Name</label>
+                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name">
              </div>
-         </fieldset>
-         <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
+             <div class="form-group">
+                 <label>Short Name</label>
+                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName">
+             </div>
+             <div class="form-group">
+                 <label>Description</label>
+                 <textarea class="form-control" [(ng-model)]="activeOrgUnit.description" rows="3"></textarea>
+             </div>
+             <div class="form-group">
+                 <label>Code</label>
+                 <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.code">
+             </div>
+             <div class="form-group">
+                 <label>Opening Date</label>
+                 <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate">
+             </div>
+             <div class="form-group">
+                 <label>Closed Date</label>
+                 <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.closedDate">
+             </div>
+             <div class="form-group">
+                 <label>URL</label>
+                 <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.closedDate">
+             </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">
+                 </div>
+             </fieldset>
+         </form>
+         <section *ng-if="!editmode">
+             <label for="actOrgUnitName">Name</label>
+             <p id="actOrgUnitName">{{(activeOrgUnit.name) || "[None]"}}</p>
+             <label for="actOrgUnitShortName">Short Name</label>
+             <p id="actOrgUnitShortName">{{(activeOrgUnit.shortName)||["None"]}}</p>
+             <label for="actOrgUnitDescription">Description</label>
+             <p id="actOrgUnitDescription">{{(activeOrgUnit.description)||"None"}}</p>
+             <label for="actOrgUnitCode">Code</label>
+             <p id="actOrgUnitCode">{{(activeOrgUnit.code)||["None"]}}</p>
+             <label for="actOrgUnitOpeningDate">Opening Date</label>
+             <p id="actOrgUnitOpeningDate">{{activeOrgUnit.openingDate||["None"]}}</p>
+             <label for="actOrgUnitClosingDate">Closed Date</label>
+             <p id="actOrgUnitClosingDate">{{activeOrgUnit.closingDate||["None"]}}</p>
+             <label for="actOrgUnitURL">Url</label>
+             <p id="actOrgUnitURL">{{(activeOrgUnit.url) ||["None"]}}</p>
+             <label>Group(s)</label>
+             <ul *ng-for="#group of activeOrgUnit.organisationUnitGroups">
+                 <li>{{group.name}}</li>
+             </ul>
+         </section>
+         <button class="btn btn-default" (click)="editmode = !editmode">{{editmode ? "Cancel" : "Edit"}}</button>
+         <button *ng-if="editmode" class="btn btn-default" (click)="save()">Save</button>
      </div>
 -</div>
 +</div>