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