]> git.uio.no Git - u/erikhf/frm.git/commitdiff
Merge branch 'sidebar'
authorErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 14:12:42 +0000 (15:12 +0100)
committerErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 14:12:42 +0000 (15:12 +0100)
* sidebar:
  [sidebar] Using model-driven form instead of data-driven form
  [sidebar] Working on adding object
  [sidebar] Functionality to cancel editing
  [sidebar] Update existing organizational unit

# Conflicts:
# src/components/map/map.ts

src/components/map/map.html
src/components/map/map.ts
src/css/map.css

index ad19e7dab4ca728b69560802763cd034c365a1a8..075cb288fc9f3840c399d7760d91830d5bb812e4 100644 (file)
@@ -1 +1,18 @@
 <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)="closeModal()">&times;</button>
+                <h4 class="modal-title">Add new</h4>
+            </div>
+            <div class="modal-body">
+                <p>Do you want to add new a facility?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" (click)="addUnit()">Yes</button>
+            </div>
+        </div>
+    </div>
+        </div>
index 97ea4c18f3a4657aa7dfbc86aa11cece557696af..d4e1ecf83d01a3435421a71acce4114e7722908c 100644 (file)
@@ -12,13 +12,16 @@ import {Headers, Http} from 'angular2/http';
 
 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;
+    // COLORS:Object;
+
     constructor(http:Http) {
         this.newactive = new EventEmitter();
         this.neworg = new EventEmitter();
@@ -27,92 +30,100 @@ export class Map {
         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.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
+        this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
+    }
+
+    showModal(){
+        return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
+    }
+
+    closeModal(){
+        console.log("hei");
+        return this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
 
     }
 
-    getMap(){
+    getMap() {
         return this.map;
     }
 
-    getHttp(){
+    getHttp() {
         return this.http;
     }
-    setcurrentPos(latlng){
+
+    setcurrentPos(latlng) {
         this.currentPos = latlng;
     }
-     getcurrentPos(){
-         return this.currentPos;
-     }
 
-    setParent(id){
-        console.log("satte parents");
-        this.parent=id;
+    getcurrentPos() {
+        return this.currentPos;
+    }
+
+    setParent(id) {
+        this.parent = id;
     }
-    getParent(){
-        return this.parent;
 
+    getParent() {
+        return this.parent;
     }
 
-    setRunned(value){
+    setRunned(value) {
         this.runned = value;
     }
 
-    setupRunned(value){
+    setupRunned(value) {
         this.uprunned = value;
     }
 
-    setLevel(value){
+    setLevel(value) {
         this.LEVEL = value;
     }
-    addLevel(){
+
+    addLevel() {
         this.LEVEL++;
     }
-    upLevel(){
+
+    upLevel() {
         this.LEVEL--;
     }
 
     init() {
 
         let map = this.map;
-        let pos = {lat: 9.1, lng: -10.6};
+        let pos = {lat: 9.1, lng: -11.6};
+
+        map.setCenter(pos, 0);
+        map.setZoom(7);
 
-        map.setCenter(pos,12);
-    }
 
+    }
 
     logError(error) {
         console.error(error);
 
     }
 
-    getData(query,instance, isParent){
-        instance.http.get(dhisAPI+'/api/organisationUnits'+query)
+    getData(query, instance, isParent) {
+        instance.http.get(dhisAPI + '/api/organisationUnits' + query)
             .map(res => res.json())
             .subscribe(
-                res => instance.parseResult(res,instance,isParent),
+                res => instance.parseResult(res, instance, isParent),
                 error => instance.logError(error)
-
             );
-
     }
 
-    parseResult(res,instance,isParent){
-        console.log("parent: "+isParent);
+    parseResult(res, instance, isParent) {
 
-        if(isParent) {
-            console.log(instance.LEVEL);
-            console.log('/'+res.parent.id+'/children');
-            console.log(res);
+        if (isParent) {
             instance.setParent(res.parent.id);
-            instance.getData('/'+res.parent.id+'/children',instance,false);
+            instance.getData('/' + res.parent.id + '/children', instance, false);
         }
-        else{
-
-            console.log(res);
+        else {
             if (res.organisationUnits) {
                 for (let item in res.organisationUnits) {
                     this.getData('/' + res.organisationUnits[item].id, this);
@@ -120,7 +131,6 @@ export class Map {
                 }
                 instance.setupRunned(false);
                 instance.setRunned(false);
-                //liten hack
             } else if (!res.displayName && res.children) {
                 for (let item in res.children) {
                     if (res.children[item].level == instance.LEVEL) {
@@ -133,31 +143,28 @@ export class Map {
             else {
                 this.drawPolygon(res, instance);
             }
-
         }
-
     }
 
-    drawPolygon(item, instance){
-        console.log("tegne polygon");
+    drawPolygon(item, instance) {
         let bounds = new google.maps.LatLngBounds();
         let feature;
-        let incoming: string;
+        let incoming:string;
         incoming = item.featureType.toLowerCase();
-        switch(incoming){
+        switch (incoming) {
             case "point":
                 feature = 'Point';
                 break;
             case "multi_polygon":
                 feature = 'MultiPolygon';
                 break;
-             case "polygon":
-                 feature = 'MultiPolygon';
+            case "polygon":
+                feature = 'MultiPolygon';
                 break;
             default:
         }
-          // TODO: test på feature og behandle type: NONE
-        if(feature !== undefined) {
+        // TODO: test på feature og behandle type: NONE
+        if (feature !== undefined) {
             let unit = {
                 "type": "Feature",
                 "geometry": {
@@ -167,86 +174,95 @@ export class Map {
                 "properties": {
                     "name": item.name,
                     "id": item.id,
-
-                },
-                "style": null
+                    "color": "gray",
+                    "icon": null
+                }
             };
-            if(unit.geometry.type == 'Point'){
 
-               //ToDO: add en style på markeren !
+            if (unit.geometry.type == 'Point') {
+                unit.properties.icon = {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    scale: 3
+                };
 
             }
+
             this.map.data.addGeoJson(unit);
+            this.map.data.setStyle(function(feature) {
+                let color = 'gray';
+                let icon;
+                if (feature.getProperty('icon')!== null) {
+                   icon = feature.getProperty('icon');
+                }
+                color = feature.getProperty('color');
+                return /** @type {google.maps.Data.StyleOptions} */({
+                    fillColor: color,
+                    strokeColor: color,
+                    strokeWeight: 2,
+                    icon: icon
+                });
+            });
 
-                this.map.data.addListener('click', function (event) {
-                    //TODO: spør om man vil ned/opp eller se info
-                    //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
 
-                    console.log(instance.LEVEL);
+            this.map.data.addListener('click', function (event) {
 
-                    if (instance.runned == false && instance.LEVEL < 4) {
-                        instance.setRunned(true);
+                //TODO: spør om man vil ned/opp eller se info
+                //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
 
-                        let infowindow = new google.maps.InfoWindow({
-                            //TODO: Style this
-                            content: '<div> <button >DrillUP</button>' +
-                            ' <button ">DrillDOWN</button>' +
-                            '<button ">SEEINFO</button></div>'
-                        });
+                if (instance.runned == false && instance.LEVEL < 4) {
+                    instance.setRunned(true);
 
-                        infowindow.setPosition(event.latlng);
-                        // infowindow.open(instance.map);
+                    let infowindow = new google.maps.InfoWindow({
+                        //TODO: Style this
+                        content: '<div> <button >DrillUP</button>' +
+                        ' <button ">DrillDOWN</button>' +
+                        '<button ">SEEINFO</button></div>'
+                    });
 
-                        let id = event.feature.O.id;
-                        instance.setParent(id);
-                        console.log(id);
+                    infowindow.setPosition(event.latlng);
+                    // infowindow.open(instance.map);
 
-                        instance.map.data.forEach(function (feature) {
-                            instance.map.data.remove(feature);
-                        });
-
-                        instance.addLevel();
-                        instance.getData('/' + id + '/children', instance);
-                    } else if (instance.runned == false && instance.LEVEL >= 4) {
-                        instance.setRunned(true);
-                        let infowindowNew = new google.maps.InfoWindow({
-                            //TODO: Style this
-                            content: '<div>Du you want to add a new OrgUnit here ?    <button onclick="myFunction()">Yes</button></div>'
-                        });
-                        instance.setcurrentPos(event.latLng);
+                    let id = event.feature.O.id;
+                    instance.setParent(id);
 
-                        var marker = new google.maps.Marker({
-                            position: event.latLng,
-                            map: instance.map,
-                            title: 'newOrg',
-                            icon: {
-                                path: google.maps.SymbolPath.CIRCLE,
-                                scale: 5
-                            }
+                    instance.map.data.forEach(function (feature) {
+                        if (!(feature.O.id == id && instance.LEVEL == 3)) {
+                            instance.map.data.remove(feature);
 
-                        });
+                        }
+                    });
 
-                        marker.setMap(instance.map);
+                    instance.addLevel();
+                    instance.getData('/' + id + '/children', instance);
+                } else if (instance.runned == false && instance.LEVEL >= 4) {
+                    instance.setRunned(true);
 
-                        infowindowNew.open(instance.map, marker);
+                    instance.setcurrentPos(event.latLng);
 
-                        infowindowNew.addListener('closeclick', function (e) {
-                            marker.setMap(null);
-                        });
+                    var marker = new google.maps.Marker({
+                        position: event.latLng,
+                        map: instance.map,
+                        title: 'newOrg',
+                        icon: {
+                            path: google.maps.SymbolPath.CIRCLE,
+                            scale: 5
+                        }
 
-                        instance.addUnit();
+                    });
 
+                    marker.setMap(instance.map);
+                    instance.showModal();
 
-                    }
 
+                    instance.addUnit();
 
-                });
+                }
+            });
 
 
-            this.map.data.addListener('rightclick', function(event) {
-                if(instance.uprunned == false) {
+            this.map.data.addListener('rightclick', function (event) {
+                if (instance.uprunned == false) {
                     instance.setupRunned(true);
-
                     instance.upLevel();
 
                     if (instance.LEVEL > 1) {
@@ -255,70 +271,52 @@ export class Map {
                         });
 
                         let parent = instance.getParent();
-                        instance.getData('/'+parent, instance,true);
+                        instance.getData('/' + parent, instance, true);
                     }
                     else {
                         instance.addLevel();
                         instance.setupRunned(true);
                         //TODO skriv en warning om at man ikke kan gå opp
 
-                }
-
+                    }
                 }
             });
-
-
-        }else {
+        }
+        else {
             // ToDO:
             console.log("fiks meg! gi warning på topp av kart");
         }
-
-
     }
 
-    addUnit(){
-
+    addUnit() {
         let parent = this.getParent();
         let pos = this.getcurrentPos();
         let lat = pos.lat();
         let lng = pos.lng()
-        let location= {lat: lat, lng: lng};
-        let event =  {location,parent};
+        let location = {lat: lat, lng: lng};
+        let event = {location, parent};
         this.neworg.next(event);
-
     }
 
-    myFunction(){
-        console.log("Inne i myfunksjonen");
-    }
-
-
-    update(event){
+    update(event) {
         this.newactive.next(event);
-        let getResult = Object;
         let test = this.getMap();
         let http = this.getHttp();
 
         test.data.forEach(function (feature) {
             test.data.remove(feature);
         });
-        http.get(dhisAPI+'/api/organisationUnits/'+event)
+        http.get(dhisAPI + '/api/organisationUnits/' + event)
             .map(res => res.json())
             .subscribe(
                 res=> this.mapUpdate(res, this)
-
             );
-
-
-
-
     }
 
-    mapUpdate(res, instance){
-        console.log(res.level);
+    mapUpdate(res, instance) {
         this.setLevel(res.level);
         this.setParent(res.parent.id);
-        this.drawPolygon(res,instance);
+        this.drawPolygon(res, instance);
 
     }
 
index 3e6a6d974d3d0ce62c2303cd8aeb4ba9ad376412..2b023e45457f6286a9d4f8db8d7c2b9f3b7920b2 100644 (file)
@@ -10,6 +10,7 @@ html, body {
     height: 750px;
     margin: 0 auto;
     width: 100%;
+    position: absolute;
 
 }
 
@@ -190,3 +191,7 @@ html, body {
 }
 
 
+#divModal{
+    position: relative;
+    margin-bottom: 500px;
+}
\ No newline at end of file