merge with master
authorJulie Hill Roa <julie.hill.roa@gmail.com>
Thu, 10 Dec 2015 18:53:59 +0000 (19:53 +0100)
committerJulie Hill Roa <julie.hill.roa@gmail.com>
Thu, 10 Dec 2015 18:53:59 +0000 (19:53 +0100)
src/components/map/map.ts
src/components/search/search.html
src/components/search/search.ts
src/components/sidebar/sidebar.ts
src/css/map.css
src/index.html

index b46e09e..82ed0e7 100644 (file)
@@ -296,11 +296,11 @@ export class Map {
 
             if (unit.geometry.type == 'Point') {
                 unit.properties.icon = {
-                    path: google.maps.SymbolPath.CIRCLE,//'d=M648 1169q117 0 216 -60t156.5 -161t57.5 -218q0 -115 -70 -258q-69 -109 -158 -225.5t-143 -179.5l-54 -62q-9 8 -25.5 24.5t-63.5 67.5t-91 103t-98.5 128t-95.5 148q-60 132 -60 249q0 88 34 169.5t91.5 142t137 96.5t166.5 36zM652.5 974q-91.5 0 -156.5 -65 t-65 -157t65 -156.5t156.5 -64.5t156.5 64.5t65 156.5t-65 157t-156.5 65z',
+                    path: google.maps.SymbolPath.CIRCLE,
                     strokeColor: 'black',
                     scale: 4
                 };
-                //instance.map.setCenter({lat: unit.geometry.coordinates[1], lng: unit.geometry.coordinates[0]});
+                instance.map.setCenter({lat: unit.geometry.coordinates[1], lng: unit.geometry.coordinates[0]});
             }
 
             this.map.data.addGeoJson(unit);
@@ -495,27 +495,41 @@ export class Map {
         }
 
     }
+
     /**
      * adds a temperary marker so the user can see an update of the latitude and longitude of a marker
      * @param pos - position for the temp marker
      */
     tempMarker(pos) {
 
-        let map = this.map;
-        if (this.currentMarker)
-            this.currentMarker.setMap(null);
+        let current = {};
+        current.lat = Math.round(this.getcurrentPos().lat() * 10000)/10000;
+        current.lng = Math.round(this.getcurrentPos().lng() * 10000)/10000;
+
+        let position = {};
+        position.lat= Math.round(pos.lat * 10000) / 10000;
+        position.lng= Math.round(pos.lng * 10000)/10000;
+
+        if((current.lat != position.lat) || (current.lng != position.lng)){
+
+            let map = this.map;
+            if (this.currentMarker)
+                this.currentMarker.setMap(null);
+
+            this.currentMarker = new google.maps.Marker({
+                position: pos,
+                map: map,
+                title: 'neworg',
+                icon: {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    strokeColor: "#871F78",
+                    scale: 4
+                }
+            });
+            this.currentMarker.setMap(map);
+            map.panTo(this.currentMarker.getPosition());
+        }
 
-        this.currentMarker = new google.maps.Marker({
-            position: pos,
-            map: map,
-            title: 'neworg',
-            icon: {
-                path: google.maps.SymbolPath.CIRCLE,
-                scale: 4
-            }
-        });
-        this.currentMarker.setMap(map);
-        map.setCenter(this.currentMarker.getPosition());
     }
 
 
index dfb79b2..3ca52b0 100644 (file)
@@ -19,9 +19,8 @@
                     onfocus="this.placeholder = ''"
                     value=""/>
 
-            <!--Show and empty filtermenu-->
-            <button type="button" class="filterbutton col-md-2" (click)="toggle()"
-                    data-toggle="collapse" data-target="#dropdown-menu">
+            <!--Show or hide, and empty filtermenu-->
+            <button type="button" class="filterbutton col-md-2" (click)="toggle()">
                 {{ visible ? '&xdtri;' : '&khcy;' }}
             </button>
         </div>
index c3aed55..80425c4 100644 (file)
@@ -39,8 +39,12 @@ export class Search {
     getMoreInfo(orgunit) {
         this.orgunits = [];
         this.newsearch.next(orgunit.id);
+        if(!this.visible){
+            this.visible = !this.visible;
+            this.resetSelector();
+            document.getElementById("dropdown-menu").style.display = "none";
+        }
         return document.getElementById("searchform").reset();
-
     }
 
     //When filtermenu is open show x else show arraowdown
@@ -48,9 +52,14 @@ export class Search {
         this.visible = !this.visible;
         if (this.visible) {
             this.resetSelector();
+            document.getElementById("dropdown-menu").style.display = "none";
+        }
+        else{
+            document.getElementById("dropdown-menu").style.display = "block";
         }
     }
 
+    //Resets the filter values in selectors
     resetSelector(){
         this.ownershipSelector.selectedIndex = 0;
         this.typeSelector.selectedIndex = 0;
@@ -61,7 +70,6 @@ export class Search {
     //Hide results when search bar input is erased
     hideDiv() {
         if (this.searchBar.value == ""){
-            //this.toggle();
             return true;
         }
     }
@@ -130,24 +138,32 @@ export class Search {
 
     //Checks the status of orgunits-array and if filter is set
     checkOrgunits() {
+        //If all selectors are empty
         if (this.ownershipSelector.value == "" && this.typeSelector.value == "" && this.locationSelector.value == "") {
+            //empty filteredOrgunits
             this.filteredOrgunits = [];
             for (var i = 0; i < this.orgunits.length; i++) {
+                //push orgunits to filteredOrgunits
                 this.filteredOrgunits.push(this.orgunits[i]);
             }
         }
+        //If orgunits.length is more than zero and filterset is false, call setFilter()
         else if (!this.orgunits.length == false && !this.filterset) {
             this.setFilter();
         }
+        //If orgunits has no elements, empty filteredOrgunits
         else if (!this.orgunits.length) {
             this.filteredOrgunits = [];
+            //if filterset is true, set to false
             if (this.filterset) {
                 this.filterset = false;
             }
         }
+        //If filteredOrgunits has no elements, return false
         if(this.filteredOrgunits.length == 0){
             return false;
         }
+        //If filteredOrgunits has elements return true if orgunits has elements or false if orgunits has no elements
         else{
             return !this.orgunits.length;
         }
@@ -157,14 +173,17 @@ export class Search {
     setFilter() {
         this.filteredOrgunits = [];
         this.filterset = true;
+        //loop orgunits to get orgunit object
         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 no filter is selected, push all orgunit objects to filteredOrgunits
                         if (this.ownershipSelector.value == "" && this.typeSelector.value == "" && this.locationSelector.value == "") {
                             this.filteredOrgunits.push(orgunits);
                         }
+                        //if filter is set, sort
                         else {
                             var os = false;
                             var ls = false;
@@ -194,6 +213,7 @@ export class Search {
                                 if (this.locationSelector.value == "") {
                                     ls = true;
                                 }
+                                //if all boolean values are true, add orgunit object to filteredOrgunits
                                 if (os == true && ts == true && ls == true) {
                                     this.filteredOrgunits.push(orgunits);
                                     os = false;
index 9ca4bd0..c9329f4 100644 (file)
@@ -1,50 +1,48 @@
 import {Component, NgFor, NgIf, EventEmitter, NgModel, Control, ControlGroup, ControlArray, Validators, FormBuilder, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
 import {Http, Headers} from 'angular2/http';
 
-declare var zone: Zone;
+declare var zone:Zone;
 
 @Component({
     selector: 'mou-sidebar',
     directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
-    events: ['tempmarker','updateorg'],
+    events: ['tempmarker', 'updateorg'],
     templateUrl: './components/sidebar/sidebar.html'
 })
 
 export class Sidebar {
-
-
     http:Http;
-    newObject: boolean;
+    newObject:boolean;
     editmode:boolean;
-    active: boolean;
-    coordinatePoint: boolean;
-
-    groupSets: Array<any> = [];
-    groupsDoubleArray: any[][] = [];
-
-    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("");
-    exitButton: any;
-    featureType: Control = new Control("");
-    coordinates: Control = new Control("");
-    ctrlGroups: Array<Control> = [new Control('')];
-    groupsArray: ControlArray = new ControlArray(this.ctrlGroups);
-
-
-    form: ControlGroup = new ControlGroup({
+    active:boolean;
+    coordinatePoint:boolean;
+
+    groupSets:Array<any> = [];
+    groupsDoubleArray:any[][] = [];
+
+    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("");
+    exitButton:any;
+    featureType:Control = new Control("");
+    coordinates:Control = new Control("");
+    ctrlGroups:Array<Control> = [new Control('')];
+    groupsArray:ControlArray = new ControlArray(this.ctrlGroups);
+
+
+    form:ControlGroup = new ControlGroup({
         organisationUnitGroups: this.groupsArray,
         id: this.id,
         name: this.name,
@@ -65,7 +63,7 @@ export class Sidebar {
         coordinates: this.coordinates
     });
 
-    constructor(http:Http, fb: FormBuilder) {
+    constructor(http:Http, fb:FormBuilder) {
         this.http = http;
         this.editmode = false;
         this.active = false;
@@ -73,11 +71,12 @@ export class Sidebar {
         this.tempmarker = new EventEmitter();
         this.updateorg = new EventEmitter();
         this.exitButton = document.getElementById("slideout")
-
         let instance = this;
+
+        // listener for value change in coordinate input field
         this.lat.valueChanges.observer({
             next: (value) => {
-                if(instance.lng.value && value) {
+                if (instance.lng.value && value) {
                     let pos = {lat: value, lng: instance.lng.value};
                     this.tempmarker.next(pos);
                 }
@@ -85,19 +84,19 @@ export class Sidebar {
         });
         this.lng.valueChanges.observer({
             next: (value) => {
-                if(instance.lat.value && value) {
+                if (instance.lat.value && value) {
                     let pos = {lat: instance.lat.value, lng: value};
                     this.tempmarker.next(pos);
                 }
             }
         });
 
+        // find all orgUnitSets
         this.findOrgUnitSets();
-
     }
 
+    // this method is called when the sidebar should update its content with new org unit
     update(orgunitId) {
-        console.log("Skjer det noe her? ");
         this.active = true;
         this.newObject = false;
         this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
@@ -105,13 +104,15 @@ export class Sidebar {
             .subscribe(res => this.updateValues(res))
     }
 
-    updateValues(res){
+    // update form values with new information from http get result
+    updateValues(res) {
 
-        for(control in this.form.controls){
-            if(this.form.controls[control] instanceof ControlArray){
+        // update the form controls with data from incoming json object
+        for (control in this.form.controls) {
+            if (this.form.controls[control] instanceof ControlArray) {
                 console.log("nothing to do here");
             }
-            else if(res[control] !== undefined) {
+            else if (res[control] !== undefined) {
                 this.form.controls[control].updateValue(res[control]);
             }
             else
@@ -120,39 +121,39 @@ export class Sidebar {
         }
 
         // Date fix:
-        if(res["openingDate"]){
-            this.form.controls["openingDate"].updateValue((new Date(res["openingDate"].substring(0,10))).toISOString().substring(0,10));
+        if (res["openingDate"]) {
+            this.form.controls["openingDate"].updateValue((new Date(res["openingDate"].substring(0, 10))).toISOString().substring(0, 10));
         }
-        if(res["closedDate"]){
-            this.form.controls["closedDate"].updateValue((new Date(res["closedDate"].substring(0,10))).toISOString().substring(0,10));
+        if (res["closedDate"]) {
+            this.form.controls["closedDate"].updateValue((new Date(res["closedDate"].substring(0, 10))).toISOString().substring(0, 10));
         }
 
-        if(res.featureType === "POINT"){
+        // we're only interested in coordinates if it's a featureType point. Since we want to use two different input fields for lat and lang (and the api uses a single object for both)
+        // we need to have a separate data structure for coordinates, and update them manually
+        if (res.featureType === "POINT") {
             this.coordinatePoint = true;
             let coord = new Object();
             coord = JSON.parse(res["coordinates"]);
             this.form.controls.lat.updateValue(coord[1]);
             this.form.controls.lng.updateValue(coord[0]);
         }
-        else{
+        else {
             this.coordinatePoint = false;
         }
 
-        for(var i = 0; i < this.groupsDoubleArray.length; i++){
-            for(var j = 0; j < this.groupsDoubleArray[i].length; j++){
-                for( group in res.organisationUnitGroups){
-                    if( res.organisationUnitGroups[group].id == this.groupsDoubleArray[i][j].id ){
+        // Update organisationUnitGroups with correct values from api
+        for (var i = 0; i < this.groupsDoubleArray.length; i++) {
+            for (var j = 0; j < this.groupsDoubleArray[i].length; j++) {
+                for (group in res.organisationUnitGroups) {
+                    if (res.organisationUnitGroups[group].id == this.groupsDoubleArray[i][j].id) {
                         this.form.controls.organisationUnitGroups.controls[i].updateValue(this.groupsDoubleArray[i][j].name);
                     }
                 }
             }
         }
-
-        console.log("faenskap");
     }
 
-
-
+    // called on form submit
     onSubmit() {
         this.editmode = false;
 
@@ -161,37 +162,41 @@ export class Sidebar {
 
         headers.append('Content-Type', 'application/json');
 
+
         let jsonObject = this.form.value;
 
-        $.each(jsonObject, function(key, value){
-            if (value === "" || value === null){
+        // remove empty fields from the form object, no need to send empty values to the api
+        $.each(jsonObject, function (key, value) {
+            if (value === "" || value === null) {
                 delete jsonObject[key];
             }
         });
 
-        $.each(jsonObject.organisationUnitGroups, function(key, value){
+        // we were unable to find a way to associate a new (or existing) organisation unit with one or more organisationUnitGroups, so we're removing the data before posting to API
+        $.each(jsonObject.organisationUnitGroups, function (key, value) {
 //            if( value === "" || value === null){
-                delete jsonObject.organisationUnitGroups[key];
-  //          } else {
-  //              jsonObject.organisationUnitGroups[key].id = value;
-   //         }
+            delete jsonObject.organisationUnitGroups[key];
+            //          } else {
+            //              jsonObject.organisationUnitGroups[key].id = value;
+            //         }
         });
 
-
         jsonObject.openingDate = (new Date(this.form.value.openingDate)).toISOString();
 
-        if(this.form.value.closedDate){
+        if (this.form.value.closedDate) {
             jsonObject.closedDate = (new Date(this.form.value.closedDate)).toISOString();
         }
 
+        if (this.coordinatePoint) {
+            jsonObject.featureType = "POINT";
+            jsonObject.coordinates = "[" + this.form.controls.lng.value + "," + this.form.controls.lat.value + "]";
+        }
 
-        console.log(this.form.value);
-
+        // POST if the object is new, PUT if it's an update to an existing orgUnit
         if (this.newObject) {
             jsonObject.parent = {};
             jsonObject.parent.id = this.form.controls.parent.value;
-            jsonObject.featureType="POINT";
-            jsonObject.coordinates="[" + this.form.controls.lng.value + ","+this.form.controls.lat.value+"]";
+
             delete jsonObject["lat"];
             delete jsonObject["lng"];
             this.http.post(dhisAPI + "/api/organisationUnits/", JSON.stringify(jsonObject), {
@@ -199,38 +204,35 @@ export class Sidebar {
                 })
                 .map(res => res.json())
                 .subscribe(res => this.emitNewUpdatedObject(res));
-        }else {
+        } 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));
         }
-
-
-
-
     }
 
-    emitNewUpdatedObject(obj){
-        console.log(obj);
+    // emit an event that the current orgUnit has been updated (useful for map component)
+    emitNewUpdatedObject(obj) {
         this.updateorg.next(obj.response.lastImported);
     }
 
-    cancel(){
+    // cancel editing orgUnit
+    cancel() {
         this.editmode = false;
         this.tempmarker.next(null);
     }
 
-
-    add(data){
+    // Prepare sidebar for adding new object. Receiving location and parent for the new orgUnit
+    add(data) {
         this.coordinatePoint = true;
-        this.newObject=true;
+        this.newObject = true;
         this.active = true;
         this.editmode = true;
 
-        for(control in this.form.controls){
-            if(!(this.form.controls[control] instanceof ControlArray))
+        for (control in this.form.controls) {
+            if (!(this.form.controls[control] instanceof ControlArray))
                 this.form.controls[control].updateValue("");
         }
 
@@ -240,11 +242,13 @@ export class Sidebar {
 
     }
 
-    exit(){
+    // dismiss sidebar
+    exit() {
         this.active = false;
     }
 
-    findOrgUnitSets(){
+    // dynamically find all orgUnitSets for populating input selects
+    findOrgUnitSets() {
         let instance = this;
         this.http.get(dhisAPI + "/api/organisationUnitGroupSets?paging=false")
             .map(res => res.json())
@@ -252,10 +256,10 @@ export class Sidebar {
             .subscribe(res => this.addOrgUnitSets(instance, res))
     }
 
-    addOrgUnitSets(instance, res){
+    // adding the orgUnitSets from the api
+    addOrgUnitSets(instance, res) {
         //delete instance.ctrlGroups[0];
-        for( group in res){
-            console.log(instance.form.controls);
+        for (group in res) {
             instance.groupsArray.push(new Control(''));
             instance.groupSets.push(res[group]);
 
@@ -264,19 +268,16 @@ export class Sidebar {
                 .map(res => res.organisationUnitGroups)
                 .subscribe(res => this.addOrgUnitGroup(instance, res))
 
-            //    instance.form.push(new Control(""));
         }
-        console.log(instance.groupSets);
     }
 
-    addOrgUnitGroup(instance, res){
-        let ar: Array<any> = [];
-        for( group in res){
+    // add orgUnitGroup as option to input selects
+    addOrgUnitGroup(instance, res) {
+        let ar:Array<any> = [];
+        for (group in res) {
             ar.push(res[group]);
         }
         instance.groupsDoubleArray.push(ar);
-
-        console.log(instance.groupsDoubleArray);
     }
 }
 
index 9d1f0de..a151f8d 100644 (file)
@@ -43,7 +43,7 @@ html, body {
     float: left;
     box-sizing: border-box;
     transition: all 0.15s;
-    border-radius: 2px 0px 0px 2px; /* top left, top right, bottom right, bottom left */
+    border-radius: 2px 0px 0px 2px; 
 }
 
 ::-webkit-input-placeholder {
@@ -65,7 +65,7 @@ html, body {
 
 .filterbutton
 {
-    border-radius: 0px 2px 2px 0px; /* top left, top right, bottom right, bottom left */
+    border-radius: 0px 2px 2px 0px;
     box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3);
     border-right: 1px solid white;
     border-top:1px solid white;
@@ -99,7 +99,6 @@ html, body {
     border-radius: 0;
     border-top: 2px solid darkgrey;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-
 }
 
 .result{
@@ -120,7 +119,7 @@ html, body {
     background-color: #fff;
     border: 1px solid whitesmoke;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-    border-radius: 0px 0px 2px 2px; /* top left, top right, bottom right, bottom left */
+    border-radius: 0px 0px 2px 2px;
 }
 
 .result li{
@@ -180,7 +179,7 @@ html, body {
     border: none;
     border-top: 2px solid darkgrey;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-    border-radius: 0px 2px 2px 2px; /* top left, top right, bottom right, bottom left */
+    border-radius: 0px 2px 2px 2px;
     top: 0px;
     margin-top: 0;
     z-index: 1;
index 8b21207..fa869f7 100644 (file)
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
     <script src="../node_modules/angular2/bundles/http.dev.js"></script>
-    <!--<script src="../node_modules/angular2/bundles/router.dev.js"></script>-->
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <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'}}
         });
         System.import('components/app');
     </script>
-
-
-
-
 </head>
 <body>
     <mou-app>loading...</mou-app>