merge
[u/erikhf/frm.git] / src / components / map / map.ts
CommitLineData
7ee898bc 1import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
a2d7d6b4 2import {Headers, Http} from 'angular2/http';
cb2c4ba8
JHR
3
4@Component({
28765058 5 selector: 'mou-map',
cb2c4ba8 6 directives: [CORE_DIRECTIVES],
0fc3af96 7 events: ['newactive', 'neworg'],
28765058 8 templateUrl: './components/map/map.html'
cb2c4ba8
JHR
9})
10
11
28765058 12export class Map {
6ced1bc7 13
0fc3af96 14 hideModal:any;
dd095993 15 map:Object;
65c7cdf5
JHR
16 http:Http;
17 LEVEL:number;
57a79ad4 18 allLevels:Object;
65c7cdf5 19 runned:boolean;
65c7cdf5 20 uprunned:boolean;
57a79ad4 21 parent:Object;
59ffa1e6 22 activeId:string;
57a79ad4 23 currentPos:Object;
59ffa1e6 24 currentMarker:Object;
e58627b7 25 isSearched:boolean;
59ffa1e6 26
15b422d5 27 // COLORS:Object;
65c7cdf5 28
dd095993 29 constructor(http:Http) {
59ffa1e6
JHR
30
31 this.activeId = null;
7ee898bc 32 this.newactive = new EventEmitter();
ebaf2f58 33 this.neworg = new EventEmitter();
f800869b
EHF
34 this.map = new google.maps.Map(document.getElementById("map"), {
35 center: {lat: 0, lng: 0},
36 zoom: 12,
37 mapTypeControlOptions: {
38 position: google.maps.ControlPosition.BOTTOM_CENTER
39 },
57a79ad4 40 zoomControlOptions: {
f800869b
EHF
41 position: google.maps.ControlPosition.LEFT_BOTTOM
42 },
43 streetViewControl: false
44 });
6ced1bc7
JHR
45 this.init();
46 this.http = http;
57a79ad4 47 this.LEVEL = 2;//
0d91e9f9 48 this.runned = false;
57a79ad4 49 this.getLevels(this);
65c7cdf5 50 this.parent = null;
a8451d12 51 this.currentPos = null;
951b1c9f 52 this.uprunned = false;
59ffa1e6 53 this.currentMarker = null;
e58627b7 54 this.isSearched = false;
15b422d5 55 // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
59ffa1e6
JHR
56 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
57 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
58 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
f800869b 59 this.hideModal = document.getElementById("divModal").style.display = "none";
784566de 60 }
9d471cab 61
57a79ad4
JHR
62 setActiveId(id) {
63 this.activeId = id;
64 }
9992f01a 65
57a79ad4
JHR
66 getMap() {
67 return this.map;
68 }
330dd6d3 69
57a79ad4
JHR
70 getHttp() {
71 return this.http;
72 }
b41d2490 73
57a79ad4
JHR
74 setcurrentPos(latlng) {
75 this.currentPos = latlng;
76 }
b41d2490 77
57a79ad4
JHR
78 getcurrentPos() {
79 return this.currentPos;
80 }
9d471cab 81
57a79ad4
JHR
82 setParent(id) {
83 this.parent = id;
84 }
59ffa1e6 85
57a79ad4
JHR
86 getParent() {
87 return this.parent;
88 }
9992f01a 89
57a79ad4
JHR
90 setRunned(value) {
91 this.runned = value;
92 }
36f8898a 93
57a79ad4
JHR
94 setupRunned(value) {
95 this.uprunned = value;
96 }
65c7cdf5 97
57a79ad4
JHR
98 setLevel(value) {
99 this.LEVEL = value;
100 }
9992f01a 101
57a79ad4
JHR
102 addLevel() {
103 this.LEVEL++;
104 }
65c7cdf5 105
57a79ad4
JHR
106 upLevel() {
107 this.LEVEL--;
108 }
b470b939 109
6ced1bc7 110 init() {
a2d7d6b4 111
6ced1bc7 112 let map = this.map;
b27f57f1 113 let pos = {lat: 9.1, lng: -11.6};
b27f57f1
JHR
114 map.setCenter(pos, 0);
115 map.setZoom(7);
116
a2d7d6b4
JHR
117 }
118
119 logError(error) {
120 console.error(error);
121
cb2c4ba8 122 }
28765058 123
65c7cdf5
JHR
124 getData(query, instance, isParent) {
125 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
126 .map(res => res.json())
127 .subscribe(
65c7cdf5 128 res => instance.parseResult(res, instance, isParent),
c7e8b786 129 error => instance.logError(error)
6ced1bc7 130 );
6ced1bc7
JHR
131 }
132
57a79ad4
JHR
133 getLevels() {
134 this.http.get(dhisAPI + '/api/organisationUnitLevels')
135 .map(res => res.json())
136 .subscribe(
e58627b7 137 res => this.saveLevelTotalandGetdata(res, this),
57a79ad4
JHR
138 err => this.logError(err)
139 );
140 }
141
e58627b7 142 saveLevelTotalandGetdata(res, instance) {
57a79ad4 143 instance.allLevels = res.pager.total;
e58627b7 144 instance.getData('?paging=false&level=2', instance, false);
57a79ad4
JHR
145 }
146
65c7cdf5 147 parseResult(res, instance, isParent) {
65c7cdf5 148 if (isParent) {
03c7df04 149 instance.setParent(res.parent.id);
65c7cdf5 150 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 151 }
65c7cdf5 152 else {
951b1c9f
JHR
153 if (res.organisationUnits) {
154 for (let item in res.organisationUnits) {
155 this.getData('/' + res.organisationUnits[item].id, this);
156
b470b939 157 }
951b1c9f 158 instance.setupRunned(false);
03c7df04 159 instance.setRunned(false);
951b1c9f
JHR
160 } else if (!res.displayName && res.children) {
161 for (let item in res.children) {
162 if (res.children[item].level == instance.LEVEL) {
163 this.getData('/' + res.children[item].id, this);
164 }
165 }
166 instance.setRunned(false);
167 instance.setupRunned(false);
b470b939 168 }
951b1c9f
JHR
169 else {
170 this.drawPolygon(res, instance);
171 }
03c7df04 172 }
6ced1bc7 173 }
57a79ad4 174
65c7cdf5 175 drawPolygon(item, instance) {
1f8c27ee 176 let feature;
65c7cdf5 177 let incoming:string;
1f8c27ee 178 incoming = item.featureType.toLowerCase();
65c7cdf5 179 switch (incoming) {
1f8c27ee
JHR
180 case "point":
181 feature = 'Point';
182 break;
183 case "multi_polygon":
184 feature = 'MultiPolygon';
185 break;
65c7cdf5
JHR
186 case "polygon":
187 feature = 'MultiPolygon';
1f8c27ee
JHR
188 break;
189 default:
190 }
2cab9a95 191
65c7cdf5 192 if (feature !== undefined) {
1f8c27ee
JHR
193 let unit = {
194 "type": "Feature",
195 "geometry": {
196 "type": feature,
197 "coordinates": JSON.parse(item.coordinates)
198 },
199 "properties": {
e58627b7 200 "title": item.name,
1f8c27ee 201 "name": item.name,
98cc809b 202 "id": item.id,
15b422d5
JHR
203 "color": "gray",
204 "icon": null
65c7cdf5 205 }
1f8c27ee 206 };
65c7cdf5 207 if (unit.geometry.type == 'Point') {
15b422d5
JHR
208 unit.properties.icon = {
209 path: google.maps.SymbolPath.CIRCLE,
b3b5cc9c 210 strokeColor: 'black',
15b422d5
JHR
211 scale: 3
212 };
2cab9a95 213 instance.map.panTo({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]});
f3e550a1 214 }
65c7cdf5 215
1f8c27ee 216 this.map.data.addGeoJson(unit);
0fc3af96 217 this.map.data.setStyle(function (feature) {
15b422d5
JHR
218 let color = 'gray';
219 let icon;
0fc3af96
EHF
220 if (feature.getProperty('icon') !== null) {
221 icon = feature.getProperty('icon');
15b422d5
JHR
222 }
223 color = feature.getProperty('color');
224 return /** @type {google.maps.Data.StyleOptions} */({
225 fillColor: color,
226 strokeColor: color,
59ffa1e6 227 strokeWeight: 3,
15b422d5
JHR
228 icon: icon
229 });
230 });
e58627b7
JHR
231 if(instance.isSearched){
232 instance.seeDetails();
233 }
65c7cdf5 234 this.map.data.addListener('click', function (event) {
59ffa1e6
JHR
235 instance.setActiveId(event.feature.O.id);
236 instance.setcurrentPos(event.latLng);
951b1c9f 237
59ffa1e6
JHR
238 if (instance.uprunned == false && instance.LEVEL == 2) {
239 this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
240 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
241 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
242 instance.showModal();
a8ba81d3 243
59ffa1e6 244 }
57a79ad4 245 else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
59ffa1e6
JHR
246 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
247 this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
248 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
249 instance.showModal();
57a79ad4 250 } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
1f8c27ee 251
59ffa1e6
JHR
252 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
253 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
254 this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
951b1c9f 255
65c7cdf5 256 instance.setcurrentPos(event.latLng);
59ffa1e6 257 instance.showModal();
59ffa1e6 258 }
59ffa1e6
JHR
259 });
260 }
59ffa1e6 261 }
03c7df04 262
2cab9a95
JHR
263 /* getpolygonCenter(coordinates,instance){
264 let bounds = new google.maps.LatLngBounds();
265 let polygonCoords = Array;
266 for(let i = 0; i < coordinates.length; i++){
267 for(let j = 0; j<coordinates[i].length; j++) {
268 for (let k = 0; k<coordinates[i][j].length; k++) {
269 polygonCoords[i] = new google.maps.LatLng(coordinates[i][j][k][0],coordinates[i][j][k][1]);
270 }
271 }
272 }
273
274 for (let i = 0; i < polygonCoords.length; i++) {
275 bounds.extend(polygonCoords[i]);
276 }
277
278 instance.map.panTo(bounds.getCenter());
279 }*/
280
59ffa1e6
JHR
281 drillDown() {
282 this.closeModal();
283 let map = this.getMap();
284 let id = this.activeId;
285 let level = this.LEVEL;
59ffa1e6
JHR
286 this.setRunned(true);
287 this.setParent(id);
784566de 288
59ffa1e6
JHR
289 map.data.forEach(function (feature) {
290 if (!(feature.O.id == id && level == 3)) {
291 map.data.remove(feature);
03c7df04 292
59ffa1e6
JHR
293 }
294 });
03c7df04 295
59ffa1e6
JHR
296 this.addLevel();
297 this.getData('/' + id + '/children', this);
03c7df04 298
59ffa1e6 299 }
bbee9db0 300
59ffa1e6 301 drillUp() {
951b1c9f 302
03c7df04 303
57a79ad4
JHR
304 this.setupRunned(true);
305 this.upLevel();
306 let instance = this;
307 this.closeModal();
308 this.map.data.forEach(function (feature) {
309 instance.map.data.remove(feature);
310
311 });
e58627b7 312 if (this.currentMarker !== null) {
57a79ad4 313 this.currentMarker.setMap(null);
15b422d5 314 }
57a79ad4
JHR
315 let parent = instance.getParent();
316 instance.getData('/' + parent, instance, true);
317
59ffa1e6
JHR
318 this.closeModal();
319 }
320
321 seeDetails() {
322 let map = this.getMap();
323 let id = this.activeId;
324 this.closeModal();
325 map.data.forEach(function (feature) {
326 if (feature.getProperty('id') == id) {
327 feature.setProperty('color', 'red');
b3b5cc9c
JHR
328 if (feature.getProperty('icon') !== null) {
329 feature.O.icon.strokeColor = 'red';
330 }
e58627b7 331 this.isSearched=false;
b3b5cc9c
JHR
332 }
333 else {
334 feature.setProperty('color', 'gray');
335 if (feature.getProperty('icon') !== null) {
336 feature.O.icon.strokeColor = 'black';
337 }
59ffa1e6
JHR
338 }
339 });
340 this.newactive.next(this.activeId);
6ced1bc7
JHR
341 }
342
65c7cdf5 343 addUnit() {
59ffa1e6 344 this.closeModal();
9992f01a 345 let pos = this.getcurrentPos();
951b1c9f 346 let lat = pos.lat();
59ffa1e6 347 let lng = pos.lng();
59ffa1e6
JHR
348 let parent = this.getParent();
349
65c7cdf5
JHR
350 let location = {lat: lat, lng: lng};
351 let event = {location, parent};
ebaf2f58 352 this.neworg.next(event);
0fc3af96 353 this.closeModal();
bc2f4c9e 354 this.setRunned(false);
a8451d12 355 }
dd095993 356
65c7cdf5 357 update(event) {
fa052229 358 this.newactive.next(event);
59ffa1e6 359 let map = this.getMap();
36f8898a
JHR
360 let http = this.getHttp();
361
59ffa1e6
JHR
362 map.data.forEach(function (feature) {
363 map.data.remove(feature);
36f8898a 364 });
65c7cdf5 365 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
366 .map(res => res.json())
367 .subscribe(
d647078e 368 res=> this.mapUpdate(res, this)
36f8898a 369 );
e58627b7 370
7ee898bc 371 }
d647078e 372
65c7cdf5 373 mapUpdate(res, instance) {
d647078e 374 this.setLevel(res.level);
e58627b7
JHR
375 this.setActiveId(res.id);
376 this.isSearched = true;
d647078e 377 this.setParent(res.parent.id);
e58627b7
JHR
378
379 instance.getData('/' + res.parent.id + '/children', instance);
380 if (res.coordinates == null || instance.LEVEL == instance.allLevels) {
381 instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id)
382 .map(res => res.json())
383 .subscribe(
384 res => instance.drawPolygon(res, instance)
385 );
386 }
d647078e
JHR
387
388 }
389
fa052229
EHF
390 tempMarker(pos) {
391 let map = this.map;
b3b5cc9c 392 if (this.currentMarker)
fa052229
EHF
393 this.currentMarker.setMap(null);
394
395 this.currentMarker = new google.maps.Marker({
396 position: pos,
397 map: map,
398 title: 'neworg',
399 icon: {
400 path: google.maps.SymbolPath.CIRCLE,
401 scale: 3
402 }
403 });
404 this.currentMarker.setMap(map);
2cab9a95
JHR
405 map.panTo(this.currentMarker.getPosition());
406 //console.log(this.currentMarker.getPosition());
fa052229 407 }
b3b5cc9c 408
258519d6 409 showModal() {
dcbd19bc 410 return this.hideModal = document.getElementById("divModal").style.display = "block";
258519d6
JHR
411 }
412
413 closeModal() {
414 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
415 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
416 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
dcbd19bc 417 this.hideModal = document.getElementById("divModal").style.display = "none";
258519d6
JHR
418
419 this.setRunned(false);
420 }
421
6ced1bc7 422}
dd095993 423
dd095993
JHR
424
425
426
427