merge fun
authorErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 21:36:15 +0000 (22:36 +0100)
committerErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 21:36:15 +0000 (22:36 +0100)
1  2 
src/components/app.html
src/components/app.ts
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/components/sidebar/sidebar.ts
src/css/map.css

@@@ -1,14 -1,20 +1,9 @@@
--<div class="container">
-     <mou-navbar (outevent)="map.update($event)"></mou-navbar>
-     <div class="row">
-         <div class="col-md-8">
-             <mou-map (newactive)="sidebar.update($event)" (neworg)="sidebar.add($event)"#map></mou-map>
-         </div>
-         <div class="col-md-4">
-             <mou-sidebar (tempmarker)="map.tempMarker($event)" #sidebar></mou-sidebar>
-         </div>
-     </div>
++<div>
 -    <div class="row">
++    <div class="col-lg-9 col-md-8 col-xs-7"><mou-search (newsearch)="map.update($event)"></mou-search></div>
++    <div class="col-lg-3 col-md-4 col-xs-5 no-padding"><mou-sidebar (tempmarker)="map.tempMarker($event)" #sidebar></mou-sidebar></div>
++    <mou-map (newactive)="sidebar.update($event)" (neworg)="sidebar.add($event)"#map></mou-map>
 -   <!-- <div class="row">
 -        <div class="col-md-8">-->
 -            <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>
  
  
@@@ -3,7 -3,7 +3,6 @@@ import {Component, View, bootstrap, pro
  import {Map} from './map/map';
  import {Search} from "./search/search";
  import {Sidebar} from "./sidebar/sidebar";
--import {Navbar} from "./navbar/navbar";
  
  
  declare var System:any;
@@@ -12,7 -12,7 +11,7 @@@
      {
          selector: 'mou-app',
          templateUrl: './components/app.html',
--        directives:[Navbar, Map, Search, Sidebar]
++        directives:[Map, Search, Sidebar]
      })
  
  
@@@ -1,34 -1,8 +1,33 @@@
 -<div id="map">
 +<div id="map"></div>
  
- <div id="divModal" role="dialog">
-     <div class="modal-dialog modal-sm">
-         <div class="modal-content">
-             <div class="modal-header">
-                 <button type="button" class="close" (click)="html()">&times;</button>
-                 <h4 class="modal-title">What do you want ? </h4>
-             </div>
-             <div id="topLevel">
-                 <div class="modal-footer">
-                     <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
-                     <button type="button" class="btn btn-default" (click)="drillDown()">Drill down</button>
-                 </div>
-             </div>
-             <div id="middleLevel">
 -</div>
 -<div class="col-lg-12">
 -    <mou-search (newsearch)="inevent($event)"></mou-search>
 -</div>
++<div id="divModal" class="modal-dialog modal-sm">
++    <div class="modal-content">
++        <div class="modal-header">
++            <button type="button" class="close" (click)="html()">&times;</button>
++            <h4 class="modal-title">What do you want ? </h4>
++        </div>
++        <div id="topLevel">
++            <div class="modal-footer">
 +                <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
 +                <button type="button" class="btn btn-default" (click)="drillDown()">Drill down</button>
-                 <button type="button" class="btn btn-default" (click)="drillUp()">drill up</button>
 +            </div>
-             <div id="bottomLevel">
-                 <div class="modal-body">
-                     <p>Do you want to add new a facility or see details?</p>
-                 </div>
-                 <div class="modal-footer">
-                     <button type="button" class="btn btn-default" (click)="addUnit()">Yes</button>
-                     <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
-                     <button type="button" class="btn btn-default" (click)="drillUp()">Drill up</button>
-                 </div>
++        </div>
++        <div id="middleLevel">
++            <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
++            <button type="button" class="btn btn-default" (click)="drillDown()">Drill down</button>
++            <button type="button" class="btn btn-default" (click)="drillUp()">drill up</button>
++        </div>
++        <div id="bottomLevel">
++            <div class="modal-body">
++                <p>Do you want to add new a facility or see details?</p>
++            </div>
++            <div class="modal-footer">
++                <button type="button" class="btn btn-default" (click)="addUnit()">Yes</button>
++                <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
++                <button type="button" class="btn btn-default" (click)="drillUp()">Drill up</button>
 +            </div>
 +        </div>
 +    </div>
- </div>
++</div>
@@@ -1,77 -1,42 +1,86 @@@
  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, Search],
 -    events: ['newactive', 'outevent'],
 +    directives: [CORE_DIRECTIVES],
 +    events: ['newactive', 'neworg'],
      templateUrl: './components/map/map.html'
  })
  
  
  export class Map {
  
 +    hideModal:any;
      map:Object;
 -    http: Http;
 -    LEVEL: number;
 -    runned: boolean;
 -    parent: Object;
 -    currentPos : Object;
 -    uprunned: boolean;
 +    http:Http;
 +    LEVEL:number;
 +    runned:boolean;
 +    parent:Object;
 +    currentPos:Object;
 +    uprunned:boolean;
 +    activeId:string;
 +    currentMarker:Object;
 +
 +    // COLORS:Object;
 +
      constructor(http:Http) {
 -        this.outevent = new EventEmitter();
  
 +        this.activeId = null;
          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.neworg = new EventEmitter();
-         this.map = new google.maps.Map(document.getElementById("map"), {center: {lat: 0, lng: 0}, zoom: 12});
++        this.map = new google.maps.Map(document.getElementById("map"), {
++            center: {lat: 0, lng: 0},
++            zoom: 12,
++            mapTypeControlOptions: {
++                position: google.maps.ControlPosition.BOTTOM_CENTER
++            },
++            zoomControlOptions:{
++                position: google.maps.ControlPosition.LEFT_BOTTOM
++            },
++            streetViewControl: false
++        });
          this.init();
          this.http = http;
          this.LEVEL = 2;
          this.runned = false;
 -        this.getData('?paging=false&level=2',this);
 -        this.parent =null ;
 +        this.getData('?paging=false&level=2', this);
 +        this.parent = null;
          this.currentPos = null;
          this.uprunned = false;
 +        this.currentMarker = null;
 +        // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
 +        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
 +        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
 +        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
-         this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
++        this.hideModal = document.getElementById("divModal").style.display = "none";
 +    }
 +
 +    showModal() {
-         return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
++        return this.hideModal = document.getElementById("divModal").style.display = "block";
 +    }
 +
 +    closeModal() {
 +        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
 +        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
 +        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
 +        this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
 +
 +        this.setRunned(false);
 +
 +    }
 +
 +    html() {
 +        this.currentMarker.setMap(null);
  
 +        this.closeModal();
      }
  
 -    getMap(){
 +    setActiveId(id) {
 +        this.activeId = id;
 +    }
 +
 +    getMap() {
          return this.map;
      }
  
@@@ -2,68 -2,57 +2,61 @@@
  
      <label class="sr-only" for="livesearch">Search</label>
  
-         <input  mou-live-search
-                (results)="orgunits = $event"
-                (loading)="loading = $event"
-                type="text"
-                autofocus
-                class="livesearch"
-                name="livesearch"
-                id="livesearch"
-                placeholder="Search"
-                 />
-     <img class="loadingpic" [hidden]="!loading"
-          src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
-     <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>
 -      <form> <input
 -                mou-live-search
 -               (results)="orgunits = $event"
 -               (loading)="loading = $event"
 -               type="text"
 -               autofocus
 -               class="livesearch"
 -               name="livesearch"
 -               id="livesearch"
 -               placeholder="Search"
 -                value = "" />
 -
 - <button class="exitsearch" id="exitsearch" (click)="emptyByClick()">
 -        &cross; </button></form>
++    <form>
++        <div class="row">
++            <input
++                    mou-live-search
++                    (results)="orgunits = $event"
++                    (loading)="loading = $event"
++                    type="text"
++                    autofocus
++                    class="livesearch col-md-10"
++                    name="livesearch"
++                    id="livesearch"
++                    placeholder="Search"
++                    value=""/>
++
++
++            <!--<button class="exitsearch" id="exitsearch" (click)="emptyByClick()">
++          &cross; </button>-->
++            <button type="button" class="knapp col-md-2" (click)="toggle()"
++                    onclick="$('#ownershipSelector, #typeSelector, #locationSelector').prop('selectedIndex',0);"
++                    data-toggle="collapse" data-target="#dropdown-menu">
++                {{ visible ? '&xdtri;' : '&cross;' }}
++            </button>
++        </div>
++    </form>
+ <span [hidden]="hideDiv()">
 -    <div class="divresult" id="divresult" [hidden]="checkOrgunits()" >
++    <div class="divresult" id="divresult" [hidden]="checkOrgunits()">
+         <ul id="d" class="dropdown-menu result">
 -            <li id="c" *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)" >
++            <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">
++    <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()">
  
-     <!--pil opp og ned-->
 -<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>
++        </select></li>
++        <li><select class="form-control filtervalg" id="locationSelector" (click)="setFilter()">
  
-     <div class="zippy">
-         <div (click)="toggle()" class="zippy__title">
-             {{ visible ? '&xdtri;' : '&xutri;' }} {{title}}
-         </div>
-         <div [hidden]="!visible" class="zippy__content">
-             <content></content>
-         </div>
-     </div>
++        </select></li>
++    </ul>
  
- </button>
  
- <div>
- <ul id="dropdown-menu" class="dropdown-menu">
-     <li><select class="form-control filtervalg" id="ownershipSelector" (click)="setFilter()">
+ </div>
  
-     </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>
  
@@@ -40,7 -43,8 +43,7 @@@ export class Search 
      }
  
      getMoreInfo(orgunit) {
-         console.log();
+         this.orgunits = [];
 -        console.log();
          this.newsearch.next(orgunit.id);
      }
  
@@@ -1,15 -1,9 +1,15 @@@
 -<div class="sideBar">
 -    <div *ng-if="activeOrgUnit">
 -        <form *ng-if="editmode">
 +<div>
-     <div [hidden]="!active" class="form-background" style="overflow-y:auto;">
++    <div [hidden]="!active" class="form-background" style="overflow-y:auto; position:relative; float:right; ">
 +        <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
 +            <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
 +
              <div class="form-group">
                  <label>Name</label>
 -                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name">
 +                <input class="form-control" type="text" ng-control="name">
 +                <p [hidden]="name.valid || name.untouched" class="alert alert-danger">
 +                    Name is required
 +                </p>
 +
              </div>
              <div class="form-group">
                  <label>Short Name</label>
@@@ -5,185 -4,28 +5,190 @@@ declare var zone: Zone
  
  @Component({
      selector: 'mou-sidebar',
 -    directives: [CORE_DIRECTIVES,FORM_DIRECTIVES,NgFor,NgModel,NgIf],
 -    templateUrl: './components/sidebar/sidebar.html'
 +    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
 +    events: ['tempmarker'],
 +    templateUrl: './components/sidebar/sidebar.html',
 +    styles: [`
 +        .ng-valid.ng-dirty {
 +            border-left: 5px solid #42A948; /* green */
 +        }
 +        .ng-invalid {
 +            border-left: 5px solid #a94442; /* red */
 +        }
 +        .form-background {
 +            padding: 10px;
 +            background: white;
++            width: 100%;
++            float: right;
++            height: 100vh;
++            z-index: 5;
 +        }
 +    `]
  })
 +
  export class Sidebar {
 -    http: Http;
 -    activeOrgUnit: Object;
 -    editmode: boolean;
  
 -    constructor(http:Http){
 +    form: ControlGroup;
 +    http:Http;
 +    newObject: boolean;
 +    editmode:boolean;
 +    active: boolean;
 +    coordinatePoint: boolean;
 +
 +    id: Control = new Control("");
 +    name: Control = new Control("", Validators.required);
 +    shortName: Control = new Control("",Validators.required);
 +    description: Control = new Control("");
 +    code: Control = new Control("");
 +    openingDate: Control = new Control("",Validators.required);
 +    closedDate: Control = new Control("");
 +    url: Control = new Control("");
 +    lat: Control = new Control("");
 +    lng: Control = new Control("");
 +    parent: Control = new Control("");
 +    contactPerson: Control = new Control("");
 +    address: Control = new Control("");
 +    email: Control = new Control("");
 +    phoneNumber: Control = new Control("");
 +
 +
 +    constructor(http:Http, fb: FormBuilder) {
          this.http = http;
          this.editmode = false;
 +        this.active = false;
 +        this.coordinatePoint = false;
 +        this.tempmarker = new EventEmitter();
 +
 +        this.form = fb.group({
 +            "id": this.id,
 +            "name": this.name,
 +            "shortName": this.shortName,
 +            "description": this.description,
 +            "code": this.code,
 +            "openingDate": this.openingDate,
 +            "closedDate": this.closedDate,
 +            "url": this.url,
 +            "lat": this.lat,
 +            "lng": this.lng,
 +            "parent": this.parent,
 +            "contactPerson": this.contactPerson,
 +            "address": this.address,
 +            "email": this.email,
 +            "phoneNumber": this.phoneNumber
 +        });
 +        let instance = this;
 +        this.lat.valueChanges.observer({
 +            next: (value) => {
 +                if(instance.lng.value && value) {
 +                    let pos = {lat: value, lng: instance.lng.value};
 +                    this.tempmarker.next(pos);
 +                }
 +            }
 +        });
 +        this.lng.valueChanges.observer({
 +            next: (value) => {
 +                if(instance.lat.value && value) {
 +                    let pos = {lat: instance.lat.value, lng: value};
 +                    this.tempmarker.next(pos);
 +                }
 +            }
 +        });
      }
  
 -    update(orgunitId){
 -        console.log(orgunitId);
 +    update(orgunitId) {
++        console.log("Skjer det noe her? ");
 +        this.active = true;
 +        this.newObject = false;
          this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
              .map(res => res.json())
 -            .subscribe(res => this.activeOrgUnit = res)
 +            .subscribe(res => this.updateValues(res))
 +    }
 +
 +    updateValues(res){
 +
 +        for(control in this.form.controls){
 +            if(res[control] !== undefined) {
 +                this.form.controls[control].updateValue(res[control]);
 +            }
 +            else
 +                this.form.controls[control].updateValue("");
 +        }
 +
 +        if(res.featureType === "POINT"){
 +            this.coordinatePoint = true;
 +            let coord = new Object();
 +            coord = JSON.parse(res["coordinates"]);
 +            this.form.controls.lat.updateValue(coord[0]);
 +            this.form.controls.lng.updateValue(coord[1]);
 +        }
 +        else{
 +            this.coordinatePoint = false;
 +        }
 +    }
 +
 +
 +
 +    onSubmit() {
 +        this.editmode = false;
 +
 +        let headers = new Headers();
 +        headers.append('Accept', 'application/json');
 +
 +        headers.append('Content-Type', 'application/json');
 +
 +        let jsonObject = this.form.value;
 +
 +        $.each(jsonObject, function(key, value){
 +            if (value === "" || value === null){
 +                delete jsonObject[key];
 +            }
 +        });
 +
 +
 +
 +        console.log(this.form.value);
 +
 +        if (this.newObject) {
 +            jsonObject.parent = {};
 +            jsonObject.parent.id = this.form.controls.parent.value;
 +            jsonObject.featureType="POINT";
 +            jsonObject.coordinates="[" + this.form.controls.lat.value + ","+this.form.controls.lng.value+"]";
 +            delete jsonObject["lat"];
 +            delete jsonObject["lng"];
 +            this.http.post(dhisAPI + "/api/organisationUnits/", JSON.stringify(jsonObject), {
 +                    headers: headers
 +                })
 +                .map(res => res.json())
 +                .subscribe(res => console.log(res));
 +        }else {
 +            this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject), {
 +                    headers: headers
 +                })
 +                .map(res => res.json())
 +                .subscribe(res => console.log(res));
 +        }
 +
      }
  
 -    save(){
 -        console.log("YOlo");
 +    cancel(){
 +        this.editmode = false;
 +    }
 +
 +
 +    add(data){
 +        this.coordinatePoint = true;
 +        this.newObject=true;
 +        this.active = true;
 +        this.editmode = true;
 +
 +        for(control in this.form.controls){
 +            this.form.controls[control].updateValue("");
 +        }
 +
 +        this.form.controls.lat.updateValue(data.location.lat);
 +        this.form.controls.lng.updateValue(data.location.lng);
 +        this.form.controls.parent.updateValue(data.parent);
 +
      }
  }
  
diff --cc src/css/map.css
@@@ -55,17 -56,17 +56,18 @@@ html, body 
  }
  
  #search {
-     width: 357px;
-     margin: 15px;
-     margin-left: 150px;
+     position: relative;
+     z-index: 1;
+     margin-top: 20px;
+     padding-left: 20px;
+     background: transparent;
+     display: inline-block;
++    width: 400px;
++    max-width: 100%;
  }
  
  #livesearch{
      box-shadow: 0 0 1px darkgrey;
--    width: 500px;
      padding: 5px 0 5px 20px;
      font-size: 16px;
      font-family: Montserrat, sans-serif;
      transition: all 0.15s;
  }
  
+ .hide {
+     display:none;
+ }
+ .exitsearch {
+     border-radius: 60px;
+     background-color: lightgrey;
+     border: black;
+     position: relative;
+ }
+ .exitsearch:hover{
+     background-color: white;
+     position: relative;
+ }
+ .exitsearch:after {
+     display: block;
+     margin: auto;
+     padding: 2px;
+     cursor: pointer;
+ }
+ .livesearch:not(:valid) ~ .close-icon {
+      display: none;
+  }
 -.sideBar{
 -    height: 300px;
 -    width: 300px;
 -    background-color: white;
 +
 +#divModal{
      position: relative;
-     margin-bottom: 500px;
++    margin-top: 0;
  }
  
++.no-padding{
++    padding: 0;
++}