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


d7f50e3a
JHR
283 if(!instance.popupON) {
284 instance.popupON = true;
19468546 285
d7f50e3a
JHR
286 instance.popup = new google.maps.InfoWindow({
287 content: e.feature.getProperty('name'),
288 position: e.latLng
289 });
290 instance.popup.open(instance.map);
291
292 }
293 });

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


295 instance.popupON = false;
296 instance.popup.open(null);

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