src/components/map/map.ts

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