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