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