]> git.uio.no Git - u/erikhf/frm.git/blobdiff - src/components/map/map.ts
style update
[u/erikhf/frm.git] / src / components / map / map.ts
index c69e3709c4d493e6d6295eafb5c920eac51cd360..345a321f23c936531caf7477ee4506c7d367f253 100644 (file)
@@ -1,10 +1,11 @@
-import {Component, CORE_DIRECTIVES,} from 'angular2/angular2';
+import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
 import {Headers, Http} from 'angular2/http';
 
 
 @Component({
     selector: 'mou-map',
     directives: [CORE_DIRECTIVES],
+    events: ['newactive'],
     templateUrl: './components/map/map.html'
 })
 
@@ -12,73 +13,78 @@ import {Headers, Http} from 'angular2/http';
 export class Map {
 
     map:Object;
-    marker:Object;
-    http: Http;
+    http:Http;
+    LEVEL:number;
+    runned:boolean;
+    parent:Object;
+    currentPos:Object;
+    uprunned:boolean;
 
     constructor(http:Http) {
-
-        this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
+        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;
+        this.LEVEL = 2;
+        this.runned = false;
+        this.getData('?paging=false&level=2', this);
+        this.parent = null;
+        this.currentPos = null;
+        this.uprunned = false;
 
-        this.getData('?paging=false&level=2');
     }
 
-
-    init() {
-
-        let initMap = this.initMap;
-        let addMarker = this.addMarker;
-        let map = this.map;
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function (position) {
-                    let pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-                    initMap(pos,map,addMarker);
-                }, function () {
-                    //handleNoGeolocation(true);
-                }
-            );
-        } else {
-            alert("You do not support geolocation");
-        }
-
-
+    getMap() {
+        return this.map;
     }
 
+    getHttp() {
+        return this.http;
+    }
 
-    initMap(location,map,addMarker){
-
-
-        map.setCenter(location,12);
+    setcurrentPos(latlng) {
+        this.currentPos = latlng;
+    }
 
-        addMarker(location,map,'This is YOU');
+    getcurrentPos() {
+        return this.currentPos;
+    }
 
+    setParent(id) {
+        this.parent = id;
+    }
 
+    getParent() {
+        return this.parent;
+    }
 
-        map.addListener('click', function (event) {
-                addMarker(event.latLng,map, 'Want to add a new marker here ? <br> <button onclick=\"createOrgUnit()\">Yes</button> <button onclick=\"deleteMarker()">No</button> ');
-            }
-        );
+    setRunned(value) {
+        this.runned = value;
+    }
 
+    setupRunned(value) {
+        this.uprunned = value;
     }
 
-    addMarker(location, map, title) {
+    setLevel(value) {
+        this.LEVEL = value;
+    }
 
-        let marker = new google.maps.Marker({
-            position: location,
-            map: map
-        });
+    addLevel() {
+        this.LEVEL++;
+    }
 
-        let infowindow = new google.maps.InfoWindow({
-            content: title
-        });
+    upLevel() {
+        this.LEVEL--;
+    }
 
-        marker.addListener('click', function () {
-            console.log(marker);
-            infowindow.open(map,marker);
-        });
+    init() {
 
+        let map = this.map;
+        let pos = {lat: 9.1, lng: -10.6};
 
+        map.setCenter(pos, 12);
     }
 
     logError(error) {
@@ -86,74 +92,243 @@ export class Map {
 
     }
 
-    getData(query){
-        this.http.get(dhisAPI+'/api/organisationUnits'+query)
+    getData(query, instance, isParent) {
+        console.log("hoi");
+        instance.http.get(dhisAPI + '/api/organisationUnits' + query)
             .map(res => res.json())
             .subscribe(
-                res => this.parseResult(res),
-                error => this.logError(error)
+                res => instance.parseResult(res, instance, isParent),
+                error => instance.logError(error)
             );
-
     }
 
-    parseResult(res){
+    parseResult(res, instance, isParent) {
+        console.log(res);
+
+
+        if (isParent) {
+            instance.setParent(res.parent.id);
+            instance.getData('/' + res.parent.id + '/children', instance, false);
+        }
+        else {
+            if (res.organisationUnits) {
+                for (let item in res.organisationUnits) {
+                    this.getData('/' + res.organisationUnits[item].id, this);
 
-        if(res.organisationUnits) {
-            for (let item in res.organisationUnits) {
-                this.getData('/' + res.organisationUnits[item].id);
+                }
+                instance.setupRunned(false);
+                instance.setRunned(false);
+            } else if (!res.displayName && res.children) {
+                console.log("children");
+                for (let item in res.children) {
+                    console.log(res.children[item].level + " og " + instance.LEVEL);
+                    if (res.children[item].level == instance.LEVEL) {
+                        this.getData('/' + res.children[item].id, this);
+                    }
+                }
+                instance.setRunned(false);
+                instance.setupRunned(false);
             }
-        } else {
+            else {
+                console.log("jeei");
+                this.drawPolygon(res, instance);
+            }
+        }
+    }
+
+    drawPolygon(item, instance) {
+        let bounds = new google.maps.LatLngBounds();
+        let feature;
+        let incoming:string;
+        incoming = item.featureType.toLowerCase();
+        switch (incoming) {
+            case "point":
+                feature = 'Point';
+                break;
+            case "multi_polygon":
+                feature = 'MultiPolygon';
+                break;
+            case "polygon":
+                feature = 'MultiPolygon';
+                break;
+            default:
+        }
+        // TODO: test på feature og behandle type: NONE
+        if (feature !== undefined) {
+            let unit = {
+                "type": "Feature",
+                "geometry": {
+                    "type": feature,
+                    "coordinates": JSON.parse(item.coordinates)
+                },
+                "properties": {
+                    "name": item.name,
+                    "id": item.id,
+                    "icon": null
+                    }
+                }
+            };
+            if (unit.geometry.type == 'Point') {
+                //ToDO: add en style på markeren !
+
+                instance.map.data.setStyle(function(feature) {
+                    var color = 'gray';
+                    if (feature.getProperty('isColorful')) {
+                        color = feature.getProperty('color');
+
+                    }
+                    return /** @type {google.maps.Data.StyleOptions} */({
+                        fillColor: color,
+                        strokeColor: color,
+                        strokeWeight: 2
+                    });
+                });
 
-            this.drawPolygon(res);};
-    }
-    drawPolygon(item){
-        console.log(item);
-        console.log(item.featureType);
-        console.log(item.coordinates);
-        console.log(item.name);
-        let unit = {
-            "type": "Feature",
-            "geometry": {
-                "type": "MultiPolygon",
-                "coordinates": JSON.parse(item.coordinates)},
-            "properties": {
-                "name": item.name
             }
-        };
-        this.map.data.addGeoJson(unit);
-        this.center(unit.geometry.coordinates);
 
+            this.map.data.addGeoJson(unit);
 
+            this.map.data.addListener('click', function (event) {
+
+                console.log("klikket " + instance.runned + " og " + instance.LEVEL + " og " + event.feature.O.id);
+
+                //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 !!
+
+                if (instance.runned == false && instance.LEVEL < 4) {
+                    instance.setRunned(true);
+
+                    let infowindow = new google.maps.InfoWindow({
+                        //TODO: Style this
+                        content: '<div> <button >DrillUP</button>' +
+                        ' <button ">DrillDOWN</button>' +
+                        '<button ">SEEINFO</button></div>'
+                    });
+
+                    infowindow.setPosition(event.latlng);
+                    // infowindow.open(instance.map);
+
+                    let id = event.feature.O.id;
+                    instance.setParent(id);
+                    console.log(id);
+
+                    instance.map.data.forEach(function (feature) {
+                        if (!(feature.O.id == id && instance.LEVEL == 3)) {
+                            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);
+
+                    var marker = new google.maps.Marker({
+                        position: event.latLng,
+                        map: instance.map,
+                        title: 'newOrg',
+                        icon: {
+                            path: google.maps.SymbolPath.CIRCLE,
+                            scale: 5
+                        }
+
+                    });
+
+                    marker.setMap(instance.map);
+
+                    infowindowNew.open(instance.map, marker);
+
+                    infowindowNew.addListener('closeclick', function (e) {
+                        instance.setRunned(false);
+                        marker.setMap(null);
+                    });
+
+                    instance.addUnit();
+
+
+                }
 
-    }
 
-    center(coordinates){
-        // let bounds = new google.maps.LatLngBounds(coordinates);
-        /* console.log(coordinates.Array);
-         for (let i = 0; i < coordinates.length; i++) {
-         for(let j = 0; j < coordinates[i]; j++) {
-         console.log(coordinates.Array[j]);
-         bounds.extend(coordinates.Array[j]);
-         }
+            });
+
+
+            this.map.data.addListener('rightclick', function (event) {
+                if (instance.uprunned == false) {
+                    instance.setupRunned(true);
+
+                    instance.upLevel();
+
+                    if (instance.LEVEL > 1) {
+                        instance.map.data.forEach(function (feature) {
+                            instance.map.data.remove(feature);
+                        });
+
+                        let parent = instance.getParent();
+                        instance.getData('/' + parent, instance, true);
+                    }
+                    else {
+                        instance.addLevel();
+                        instance.setupRunned(true);
+                        //TODO skriv en warning om at man ikke kan gå opp
+
+                    }
+
+                }
+            });
+
+
+        } else {
+            // ToDO:
+            console.log("fiks meg! gi warning på topp av kart");
+        }
 
-         }*/
-        // for (let i = 0; i < coordinates.length; i++) {
-        //     bounds.extend(new google.maps.LatLng(coordinates.[i][1], coordinates[i][2]));
-        // }
-        // console.log("center: " + bounds.getCenter());
 
     }
 
+    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};
+        this.newOrg.next(event);
+    }
 
-    createOrgUnit(){
-        console.log('you just added a new organisation unit');
+    //TODO slett denne når popup er klar !
+    myFunction() {
+        console.log("Inne i myfunksjonen");
     }
 
-    deleteMarker(){
-        console.log('you just deleted the marker');
+    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)
+            .map(res => res.json())
+            .subscribe(
+                res=> this.mapUpdate(res, this)
+            );
     }
-    //Other map functions
 
+    mapUpdate(res, instance) {
+        this.setLevel(res.level);
+        this.setParent(res.parent.id);
+        this.drawPolygon(res, instance);
+
+    }
 
 }