bugfix
[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;
d7f50e3a
JHR
26 popupON:boolean;
27 popup:Object;
2e861c75
JHR
28 COLORS:Object;
29 colornum: number;
65c7cdf5 30
dd095993 31 constructor(http:Http) {
59ffa1e6
JHR
32
33 this.activeId = null;
7ee898bc 34 this.newactive = new EventEmitter();
ebaf2f58 35 this.neworg = new EventEmitter();
f800869b
EHF
36 this.map = new google.maps.Map(document.getElementById("map"), {
37 center: {lat: 0, lng: 0},
38 zoom: 12,
39 mapTypeControlOptions: {
40 position: google.maps.ControlPosition.BOTTOM_CENTER
41 },
57a79ad4 42 zoomControlOptions: {
f800869b
EHF
43 position: google.maps.ControlPosition.LEFT_BOTTOM
44 },
45 streetViewControl: false
46 });
6ced1bc7
JHR
47 this.init();
48 this.http = http;
57a79ad4 49 this.LEVEL = 2;//
0d91e9f9 50 this.runned = false;
57a79ad4 51 this.getLevels(this);
65c7cdf5 52 this.parent = null;
a8451d12 53 this.currentPos = null;
951b1c9f 54 this.uprunned = false;
59ffa1e6 55 this.currentMarker = null;
e58627b7 56 this.isSearched = false;
2e861c75 57 this.colornum = 0;
5e23d106 58 this.COLORS = ['#ede1bb', '#1d407e', '#ff512e', '#662d47','#3b3a35', '#419175', '#983e41', '#f3002d', '#b0a875', '#00bfb5', '#926851', '#47a0a4','#333f50','#6f007b'];
d7f50e3a 59 this.popupON = false;
58627f9c 60 this.popup = null;
784566de 61 }
9d471cab 62
ac22d373 63
57a79ad4
JHR
64 setActiveId(id) {
65 this.activeId = id;
66 }
9992f01a 67
57a79ad4
JHR
68 getMap() {
69 return this.map;
70 }
330dd6d3 71
57a79ad4
JHR
72 getHttp() {
73 return this.http;
74 }
b41d2490 75
57a79ad4
JHR
76 setcurrentPos(latlng) {
77 this.currentPos = latlng;
78 }
b41d2490 79
57a79ad4
JHR
80 getcurrentPos() {
81 return this.currentPos;
82 }
9d471cab 83
57a79ad4
JHR
84 setParent(id) {
85 this.parent = id;
86 }
59ffa1e6 87
57a79ad4
JHR
88 getParent() {
89 return this.parent;
90 }
9992f01a 91
57a79ad4
JHR
92 setRunned(value) {
93 this.runned = value;
94 }
36f8898a 95
57a79ad4
JHR
96 setupRunned(value) {
97 this.uprunned = value;
98 }
65c7cdf5 99
57a79ad4
JHR
100 setLevel(value) {
101 this.LEVEL = value;
102 }
9992f01a 103
57a79ad4
JHR
104 addLevel() {
105 this.LEVEL++;
106 }
65c7cdf5 107
57a79ad4
JHR
108 upLevel() {
109 this.LEVEL--;
110 }
b470b939 111
6ced1bc7 112 init() {
a2d7d6b4 113
6ced1bc7 114 let map = this.map;
b27f57f1 115 let pos = {lat: 9.1, lng: -11.6};
b27f57f1
JHR
116 map.setCenter(pos, 0);
117 map.setZoom(7);
118
a2d7d6b4
JHR
119 }
120
121 logError(error) {
122 console.error(error);
123
cb2c4ba8 124 }
28765058 125
65c7cdf5
JHR
126 getData(query, instance, isParent) {
127 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
128 .map(res => res.json())
129 .subscribe(
65c7cdf5 130 res => instance.parseResult(res, instance, isParent),
c7e8b786 131 error => instance.logError(error)
6ced1bc7 132 );
6ced1bc7
JHR
133 }
134
57a79ad4
JHR
135 getLevels() {
136 this.http.get(dhisAPI + '/api/organisationUnitLevels')
137 .map(res => res.json())
138 .subscribe(
e58627b7 139 res => this.saveLevelTotalandGetdata(res, this),
57a79ad4
JHR
140 err => this.logError(err)
141 );
142 }
143
e58627b7 144 saveLevelTotalandGetdata(res, instance) {
57a79ad4 145 instance.allLevels = res.pager.total;
e58627b7 146 instance.getData('?paging=false&level=2', instance, false);
57a79ad4
JHR
147 }
148
65c7cdf5 149 parseResult(res, instance, isParent) {
65c7cdf5 150 if (isParent) {
03c7df04 151 instance.setParent(res.parent.id);
65c7cdf5 152 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 153 }
65c7cdf5 154 else {
951b1c9f
JHR
155 if (res.organisationUnits) {
156 for (let item in res.organisationUnits) {
157 this.getData('/' + res.organisationUnits[item].id, this);
158
b470b939 159 }
951b1c9f 160 instance.setupRunned(false);
03c7df04 161 instance.setRunned(false);
951b1c9f
JHR
162 } else if (!res.displayName && res.children) {
163 for (let item in res.children) {
164 if (res.children[item].level == instance.LEVEL) {
165 this.getData('/' + res.children[item].id, this);
166 }
167 }
168 instance.setRunned(false);
169 instance.setupRunned(false);
b470b939 170 }
951b1c9f
JHR
171 else {
172 this.drawPolygon(res, instance);
173 }
03c7df04 174 }
6ced1bc7 175 }
57a79ad4 176
65c7cdf5 177 drawPolygon(item, instance) {
1f8c27ee 178 let feature;
65c7cdf5 179 let incoming:string;
1f8c27ee 180 incoming = item.featureType.toLowerCase();
65c7cdf5 181 switch (incoming) {
1f8c27ee
JHR
182 case "point":
183 feature = 'Point';
184 break;
185 case "multi_polygon":
186 feature = 'MultiPolygon';
187 break;
65c7cdf5
JHR
188 case "polygon":
189 feature = 'MultiPolygon';
1f8c27ee
JHR
190 break;
191 default:
192 }
2cab9a95 193
65c7cdf5 194 if (feature !== undefined) {
1f8c27ee
JHR
195 let unit = {
196 "type": "Feature",
197 "geometry": {
198 "type": feature,
199 "coordinates": JSON.parse(item.coordinates)
200 },
201 "properties": {
e58627b7 202 "title": item.name,
1f8c27ee 203 "name": item.name,
98cc809b 204 "id": item.id,
2e861c75 205 "color":instance.COLORS[instance.colornum],
15b422d5 206 "icon": null
65c7cdf5 207 }
1f8c27ee 208 };
2e861c75
JHR
209 if(instance.COLORS.length == instance.colornum){
210 instance.colornum = 0;
211 }else{ instance.colornum++;}
212
65c7cdf5 213 if (unit.geometry.type == 'Point') {
15b422d5
JHR
214 unit.properties.icon = {
215 path: google.maps.SymbolPath.CIRCLE,
b3b5cc9c 216 strokeColor: 'black',
ac22d373 217 scale: 4
15b422d5 218 };
bd209f35 219 instance.map.setCenter({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]});
f3e550a1 220 }
65c7cdf5 221
1f8c27ee 222 this.map.data.addGeoJson(unit);
0fc3af96 223 this.map.data.setStyle(function (feature) {
15b422d5
JHR
224 let color = 'gray';
225 let icon;
0fc3af96
EHF
226 if (feature.getProperty('icon') !== null) {
227 icon = feature.getProperty('icon');
15b422d5
JHR
228 }
229 color = feature.getProperty('color');
230 return /** @type {google.maps.Data.StyleOptions} */({
231 fillColor: color,
ac22d373
JHR
232 fillOpacity: 0.91,
233 strokeColor: 'white',
234 strokeWeight: 2,
15b422d5
JHR
235 icon: icon
236 });
237 });
e58627b7
JHR
238 if(instance.isSearched){
239 instance.seeDetails();
240 }
65c7cdf5 241 this.map.data.addListener('click', function (event) {
cad70644 242 $('#myModal').modal('show');
59ffa1e6
JHR
243 instance.setActiveId(event.feature.O.id);
244 instance.setcurrentPos(event.latLng);
951b1c9f 245
59ffa1e6 246 if (instance.uprunned == false && instance.LEVEL == 2) {
cad70644
EHF
247 this.hideModal = document.getElementById("topLevel").style.display = "block";
248 this.hideModal = document.getElementById("middleLevel").style.display = "none";
249 this.hideModal = document.getElementById("bottomLevel").style.display = "none";
59ffa1e6 250 }
57a79ad4 251 else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
cad70644
EHF
252 this.hideModal = document.getElementById("topLevel").style.display = "none";
253 this.hideModal = document.getElementById("middleLevel").style.display = "block";
254 this.hideModal = document.getElementById("bottomLevel").style.display = "none";
57a79ad4 255 } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
cad70644
EHF
256 this.hideModal = document.getElementById("topLevel").style.display = "none";
257 this.hideModal = document.getElementById("middleLevel").style.display = "none";
258 this.hideModal = document.getElementById("bottomLevel").style.display = "block";
951b1c9f 259
65c7cdf5 260 instance.setcurrentPos(event.latLng);
59ffa1e6 261 }
59ffa1e6 262 });
d7f50e3a
JHR
263
264
265 this.map.data.addListener('mouseover', function (e) {


266 if(!instance.popupON) {
267 instance.popupON = true;
268 console.log("hei");
269 instance.popup = new google.maps.InfoWindow({
270 content: e.feature.getProperty('name'),
271 position: e.latLng
272 });
273 instance.popup.open(instance.map);
274
275 }
276 });

277 this.map.data.addListener('mouseout', function (event) {


278 instance.popupON = false;
279 instance.popup.open(null);

280 });
281
59ffa1e6 282 }
59ffa1e6 283 }
03c7df04 284
59ffa1e6
JHR
285 drillDown() {
286 this.closeModal();
287 let map = this.getMap();
288 let id = this.activeId;
289 let level = this.LEVEL;
59ffa1e6
JHR
290 this.setRunned(true);
291 this.setParent(id);
784566de 292
59ffa1e6
JHR
293 map.data.forEach(function (feature) {
294 if (!(feature.O.id == id && level == 3)) {
295 map.data.remove(feature);
03c7df04 296
59ffa1e6
JHR
297 }
298 });
03c7df04 299
59ffa1e6
JHR
300 this.addLevel();
301 this.getData('/' + id + '/children', this);
03c7df04 302
59ffa1e6 303 }
bbee9db0 304
59ffa1e6 305 drillUp() {
951b1c9f 306
03c7df04 307
57a79ad4
JHR
308 this.setupRunned(true);
309 this.upLevel();
310 let instance = this;
311 this.closeModal();
312 this.map.data.forEach(function (feature) {
313 instance.map.data.remove(feature);
314
315 });
e58627b7 316 if (this.currentMarker !== null) {
57a79ad4 317 this.currentMarker.setMap(null);
15b422d5 318 }
57a79ad4
JHR
319 let parent = instance.getParent();
320 instance.getData('/' + parent, instance, true);
321
59ffa1e6
JHR
322 this.closeModal();
323 }
324
325 seeDetails() {
326 let map = this.getMap();
327 let id = this.activeId;
328 this.closeModal();
329 map.data.forEach(function (feature) {
330 if (feature.getProperty('id') == id) {
331 feature.setProperty('color', 'red');
b3b5cc9c
JHR
332 if (feature.getProperty('icon') !== null) {
333 feature.O.icon.strokeColor = 'red';
334 }
e58627b7 335 this.isSearched=false;
b3b5cc9c
JHR
336 }
337 else {
338 feature.setProperty('color', 'gray');
339 if (feature.getProperty('icon') !== null) {
340 feature.O.icon.strokeColor = 'black';
341 }
59ffa1e6
JHR
342 }
343 });
344 this.newactive.next(this.activeId);
6ced1bc7
JHR
345 }
346
65c7cdf5 347 addUnit() {
59ffa1e6 348 this.closeModal();
9992f01a 349 let pos = this.getcurrentPos();
951b1c9f 350 let lat = pos.lat();
59ffa1e6 351 let lng = pos.lng();
59ffa1e6
JHR
352 let parent = this.getParent();
353
65c7cdf5
JHR
354 let location = {lat: lat, lng: lng};
355 let event = {location, parent};
ebaf2f58 356 this.neworg.next(event);
0fc3af96 357 this.closeModal();
bc2f4c9e 358 this.setRunned(false);
a8451d12 359 }
dd095993 360
65c7cdf5 361 update(event) {
fa052229 362 this.newactive.next(event);
59ffa1e6 363 let map = this.getMap();
36f8898a
JHR
364 let http = this.getHttp();
365
59ffa1e6
JHR
366 map.data.forEach(function (feature) {
367 map.data.remove(feature);
36f8898a 368 });
65c7cdf5 369 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
370 .map(res => res.json())
371 .subscribe(
d7f50e3a 372 res => this.mapUpdate(res, this)
36f8898a 373 );
e58627b7 374
7ee898bc 375 }
d647078e 376
65c7cdf5 377 mapUpdate(res, instance) {
d647078e 378 this.setLevel(res.level);
e58627b7
JHR
379 this.setActiveId(res.id);
380 this.isSearched = true;
d647078e 381 this.setParent(res.parent.id);
e58627b7
JHR
382
383 instance.getData('/' + res.parent.id + '/children', instance);
384 if (res.coordinates == null || instance.LEVEL == instance.allLevels) {
385 instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id)
386 .map(res => res.json())
387 .subscribe(
388 res => instance.drawPolygon(res, instance)
389 );
390 }
d647078e
JHR
391
392 }
393
fa052229
EHF
394 tempMarker(pos) {
395 let map = this.map;
b3b5cc9c 396 if (this.currentMarker)
fa052229
EHF
397 this.currentMarker.setMap(null);
398
399 this.currentMarker = new google.maps.Marker({
400 position: pos,
401 map: map,
402 title: 'neworg',
403 icon: {
404 path: google.maps.SymbolPath.CIRCLE,
ac22d373 405 scale: 4
fa052229
EHF
406 }
407 });
408 this.currentMarker.setMap(map);
2cab9a95 409 map.panTo(this.currentMarker.getPosition());
fa052229 410 }
b3b5cc9c 411
258519d6 412
258519d6 413
58627f9c 414
258519d6 415 closeModal() {
cad70644 416 $("#myModal").modal("hide");
258519d6
JHR
417 this.setRunned(false);
418 }
419
6ced1bc7 420}
dd095993 421
dd095993
JHR
422
423
424
425