src/components/map/map.ts

   1 import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
   2 import {Headers, Http} from 'angular2/http';
   3
   4
   5 @Component({
   6     selector: 'mou-map',
   7     directives: [CORE_DIRECTIVES],
   8     events: ['newactive'],
   9     templateUrl: './components/map/map.html'
  10 })
  11
  12
  13 export class Map {
  14
  15     hideModal: any;
  16     map:Object;
  17     http:Http;
  18     LEVEL:number;
  19     runned:boolean;
  20     parent:Object;
  21     currentPos:Object;
  22     uprunned:boolean;
  23
  24     constructor(http:Http) {
  25         this.newactive = new EventEmitter();
  26         this.newOrg = new EventEmitter();
  27         this.map = new google.maps.Map(document.getElementById("map"), {center: {lat: 0, lng: 0}, zoom: 12});
  28         this.init();
  29         this.http = http;
  30         this.LEVEL = 2;
  31         this.runned = false;
  32         this.getData('?paging=false&level=2', this);
  33         this.parent = null;
  34         this.currentPos = null;
  35         this.uprunned = false;
  36         this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
  37     }
  38
  39     showModal(){
  40         return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
  41     }
  42
  43     closeModal(){
  44         console.log("hei");
  45         return this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
  46
  47     }
  48
  49     getMap() {
  50         return this.map;
  51     }
  52
  53     getHttp() {
  54         return this.http;
  55     }
  56
  57     setcurrentPos(latlng) {
  58         this.currentPos = latlng;
  59     }
  60
  61     getcurrentPos() {
  62         return this.currentPos;
  63     }
  64
  65     setParent(id) {
  66         this.parent = id;
  67     }
  68
  69     getParent() {
  70         return this.parent;
  71     }
  72
  73     setRunned(value) {
  74         this.runned = value;
  75     }
  76
  77     setupRunned(value) {
  78         this.uprunned = value;
  79     }
  80
  81     setLevel(value) {
  82         this.LEVEL = value;
  83     }
  84
  85     addLevel() {
  86         this.LEVEL++;
  87     }
  88
  89     upLevel() {
  90         this.LEVEL--;
  91     }
  92
  93     init() {
  94
  95         let map = this.map;
  96         let pos = {lat: 9.1, lng: -11.6};
  97
  98         map.setCenter(pos, 0);
  99         map.setZoom(7);
 100
 101
 102     }
 103
 104     logError(error) {
 105         console.error(error);
 106
 107     }
 108
 109     getData(query, instance, isParent) {
 110         instance.http.get(dhisAPI + '/api/organisationUnits' + query)
 111             .map(res => res.json())
 112             .subscribe(
 113                 res => instance.parseResult(res, instance, isParent),
 114                 error => instance.logError(error)
 115             );
 116     }
 117
 118     parseResult(res, instance, isParent) {
 119
 120         if (isParent) {
 121             instance.setParent(res.parent.id);
 122             instance.getData('/' + res.parent.id + '/children', instance, false);
 123         }
 124         else {
 125             if (res.organisationUnits) {
 126                 for (let item in res.organisationUnits) {
 127                     this.getData('/' + res.organisationUnits[item].id, this);
 128
 129                 }
 130                 instance.setupRunned(false);
 131                 instance.setRunned(false);
 132             } else if (!res.displayName && res.children) {
 133                 for (let item in res.children) {
 134                     if (res.children[item].level == instance.LEVEL) {
 135                         this.getData('/' + res.children[item].id, this);
 136                     }
 137                 }
 138                 instance.setRunned(false);
 139                 instance.setupRunned(false);
 140             }
 141             else {
 142                 this.drawPolygon(res, instance);
 143             }
 144         }
 145     }
 146
 147     drawPolygon(item, instance) {
 148         let bounds = new google.maps.LatLngBounds();
 149         let feature;
 150         let incoming:string;
 151         incoming = item.featureType.toLowerCase();
 152         switch (incoming) {
 153             case "point":
 154                 feature = 'Point';
 155                 break;
 156             case "multi_polygon":
 157                 feature = 'MultiPolygon';
 158                 break;
 159             case "polygon":
 160                 feature = 'MultiPolygon';
 161                 break;
 162             default:
 163         }
 164         // TODO: test på feature og behandle type: NONE
 165         if (feature !== undefined) {
 166             let unit = {
 167                 "type": "Feature",
 168                 "geometry": {
 169                     "type": feature,
 170                     "coordinates": JSON.parse(item.coordinates)
 171                 },
 172                 "properties": {
 173                     "name": item.name,
 174                     "id": item.id,
 175                     "color": "yellow",
 176                 }
 177             };
 178             if (unit.geometry.type == 'Point') {
 179                 //ToDO: add en style på markeren !
 180
 181             }
 182
 183             this.map.data.addGeoJson(unit);
 184
 185             this.map.data.addListener('click', function (event) {
 186
 187                 //TODO: spør om man vil ned/opp eller se info
 188                 //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
 189
 190                 if (instance.runned == false && instance.LEVEL < 4) {
 191                     instance.setRunned(true);
 192
 193                     let infowindow = new google.maps.InfoWindow({
 194                         //TODO: Style this
 195                         content: '<div> <button >DrillUP</button>' +
 196                         ' <button ">DrillDOWN</button>' +
 197                         '<button ">SEEINFO</button></div>'
 198                     });
 199
 200                     infowindow.setPosition(event.latlng);
 201                     // infowindow.open(instance.map);
 202
 203                     let id = event.feature.O.id;
 204                     instance.setParent(id);
 205
 206                     instance.map.data.forEach(function (feature) {
 207                         if (!(feature.O.id == id && instance.LEVEL == 3)) {
 208                             instance.map.data.remove(feature);
 209
 210                         }
 211                     });
 212
 213                     instance.addLevel();
 214                     instance.getData('/' + id + '/children', instance);
 215                 } else if (instance.runned == false && instance.LEVEL >= 4) {
 216                     instance.setRunned(true);
 217
 218                     instance.setcurrentPos(event.latLng);
 219
 220                     var marker = new google.maps.Marker({
 221                         position: event.latLng,
 222                         map: instance.map,
 223                         title: 'newOrg',
 224                         icon: {
 225                             path: google.maps.SymbolPath.CIRCLE,
 226                             scale: 5
 227                         }
 228
 229                     });
 230
 231                     marker.setMap(instance.map);
 232                     instance.showModal();
 233
 234
 235                     instance.addUnit();
 236
 237                 }
 238             });
 239
 240
 241             this.map.data.addListener('rightclick', function (event) {
 242                 if (instance.uprunned == false) {
 243                     instance.setupRunned(true);
 244                     instance.upLevel();
 245
 246                     if (instance.LEVEL > 1) {
 247                         instance.map.data.forEach(function (feature) {
 248                             instance.map.data.remove(feature);
 249                         });
 250
 251                         let parent = instance.getParent();
 252                         instance.getData('/' + parent, instance, true);
 253                     }
 254                     else {
 255                         instance.addLevel();
 256                         instance.setupRunned(true);
 257                         //TODO skriv en warning om at man ikke kan gå opp
 258
 259                     }
 260                 }
 261             });
 262         } else {
 263             // ToDO:
 264             console.log("fiks meg! gi warning på topp av kart");
 265         }
 266     }
 267
 268     addUnit() {
 269         console.log("her")
 270         let parent = this.getParent();
 271         let pos = this.getcurrentPos();
 272         let lat = pos.lat();
 273         let lng = pos.lng()
 274         let location = {lat: lat, lng: lng};
 275         let event = {location, parent};
 276         this.newOrg.next(event);
 277     }
 278
 279     update(event) {
 280         this.newactive.next(event);
 281         let test = this.getMap();
 282         let http = this.getHttp();
 283
 284         test.data.forEach(function (feature) {
 285             test.data.remove(feature);
 286         });
 287         http.get(dhisAPI + '/api/organisationUnits/' + event)
 288             .map(res => res.json())
 289             .subscribe(
 290                 res=> this.mapUpdate(res, this)
 291             );
 292     }
 293
 294     mapUpdate(res, instance) {
 295         this.setLevel(res.level);
 296         this.setParent(res.parent.id);
 297         this.drawPolygon(res, instance);
 298
 299     }
 300
 301 }
 302
 303
 304
 305
 306