]>
Commit | Line | Data |
---|---|---|
7ee898bc | 1 | import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2'; |
a2d7d6b4 | 2 | import {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 | 12 | export 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 JHR |
113 | let pos = {lat: 9.1, lng: -11.6}; |
114 | ||
115 | map.setCenter(pos, 0); | |
116 | map.setZoom(7); | |
117 | ||
a2d7d6b4 JHR |
118 | } |
119 | ||
120 | logError(error) { | |
121 | console.error(error); | |
122 | ||
cb2c4ba8 | 123 | } |
28765058 | 124 | |
65c7cdf5 JHR |
125 | getData(query, instance, isParent) { |
126 | instance.http.get(dhisAPI + '/api/organisationUnits' + query) | |
6ced1bc7 JHR |
127 | .map(res => res.json()) |
128 | .subscribe( | |
65c7cdf5 | 129 | res => instance.parseResult(res, instance, isParent), |
c7e8b786 | 130 | error => instance.logError(error) |
6ced1bc7 | 131 | ); |
6ced1bc7 JHR |
132 | } |
133 | ||
57a79ad4 JHR |
134 | getLevels() { |
135 | this.http.get(dhisAPI + '/api/organisationUnitLevels') | |
136 | .map(res => res.json()) | |
137 | .subscribe( | |
e58627b7 | 138 | res => this.saveLevelTotalandGetdata(res, this), |
57a79ad4 JHR |
139 | err => this.logError(err) |
140 | ); | |
141 | } | |
142 | ||
e58627b7 | 143 | saveLevelTotalandGetdata(res, instance) { |
57a79ad4 | 144 | instance.allLevels = res.pager.total; |
e58627b7 | 145 | instance.getData('?paging=false&level=2', instance, false); |
57a79ad4 JHR |
146 | } |
147 | ||
65c7cdf5 | 148 | parseResult(res, instance, isParent) { |
65c7cdf5 | 149 | if (isParent) { |
03c7df04 | 150 | instance.setParent(res.parent.id); |
65c7cdf5 | 151 | instance.getData('/' + res.parent.id + '/children', instance, false); |
03c7df04 | 152 | } |
65c7cdf5 | 153 | else { |
951b1c9f JHR |
154 | if (res.organisationUnits) { |
155 | for (let item in res.organisationUnits) { | |
156 | this.getData('/' + res.organisationUnits[item].id, this); | |
157 | ||
b470b939 | 158 | } |
951b1c9f | 159 | instance.setupRunned(false); |
03c7df04 | 160 | instance.setRunned(false); |
951b1c9f JHR |
161 | } else if (!res.displayName && res.children) { |
162 | for (let item in res.children) { | |
163 | if (res.children[item].level == instance.LEVEL) { | |
164 | this.getData('/' + res.children[item].id, this); | |
165 | } | |
166 | } | |
167 | instance.setRunned(false); | |
168 | instance.setupRunned(false); | |
b470b939 | 169 | } |
951b1c9f JHR |
170 | else { |
171 | this.drawPolygon(res, instance); | |
172 | } | |
03c7df04 | 173 | } |
6ced1bc7 | 174 | } |
57a79ad4 | 175 | |
65c7cdf5 | 176 | drawPolygon(item, instance) { |
1f8c27ee | 177 | let feature; |
65c7cdf5 | 178 | let incoming:string; |
1f8c27ee | 179 | incoming = item.featureType.toLowerCase(); |
65c7cdf5 | 180 | switch (incoming) { |
1f8c27ee JHR |
181 | case "point": |
182 | feature = 'Point'; | |
183 | break; | |
184 | case "multi_polygon": | |
185 | feature = 'MultiPolygon'; | |
186 | break; | |
65c7cdf5 JHR |
187 | case "polygon": |
188 | feature = 'MultiPolygon'; | |
1f8c27ee JHR |
189 | break; |
190 | default: | |
191 | } | |
65c7cdf5 JHR |
192 | // TODO: test på feature og behandle type: NONE |
193 | if (feature !== undefined) { | |
1f8c27ee JHR |
194 | let unit = { |
195 | "type": "Feature", | |
196 | "geometry": { | |
197 | "type": feature, | |
198 | "coordinates": JSON.parse(item.coordinates) | |
199 | }, | |
200 | "properties": { | |
e58627b7 | 201 | "title": item.name, |
1f8c27ee | 202 | "name": item.name, |
98cc809b | 203 | "id": item.id, |
15b422d5 JHR |
204 | "color": "gray", |
205 | "icon": null | |
65c7cdf5 | 206 | } |
1f8c27ee | 207 | }; |
65c7cdf5 | 208 | if (unit.geometry.type == 'Point') { |
15b422d5 JHR |
209 | unit.properties.icon = { |
210 | path: google.maps.SymbolPath.CIRCLE, | |
b3b5cc9c | 211 | strokeColor: 'black', |
15b422d5 JHR |
212 | scale: 3 |
213 | }; | |
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 | |
59ffa1e6 JHR |
263 | drillDown() { |
264 | this.closeModal(); | |
265 | let map = this.getMap(); | |
266 | let id = this.activeId; | |
267 | let level = this.LEVEL; | |
268 | console.log(id); | |
269 | this.setRunned(true); | |
270 | this.setParent(id); | |
784566de | 271 | |
59ffa1e6 JHR |
272 | map.data.forEach(function (feature) { |
273 | if (!(feature.O.id == id && level == 3)) { | |
274 | map.data.remove(feature); | |
03c7df04 | 275 | |
59ffa1e6 JHR |
276 | } |
277 | }); | |
03c7df04 | 278 | |
59ffa1e6 JHR |
279 | this.addLevel(); |
280 | this.getData('/' + id + '/children', this); | |
03c7df04 | 281 | |
59ffa1e6 | 282 | } |
bbee9db0 | 283 | |
59ffa1e6 | 284 | drillUp() { |
951b1c9f | 285 | |
03c7df04 | 286 | |
57a79ad4 JHR |
287 | this.setupRunned(true); |
288 | this.upLevel(); | |
289 | let instance = this; | |
290 | this.closeModal(); | |
291 | this.map.data.forEach(function (feature) { | |
292 | instance.map.data.remove(feature); | |
293 | ||
294 | }); | |
e58627b7 | 295 | if (this.currentMarker !== null) { |
57a79ad4 | 296 | this.currentMarker.setMap(null); |
15b422d5 | 297 | } |
57a79ad4 JHR |
298 | let parent = instance.getParent(); |
299 | instance.getData('/' + parent, instance, true); | |
300 | ||
59ffa1e6 JHR |
301 | this.closeModal(); |
302 | } | |
303 | ||
304 | seeDetails() { | |
305 | let map = this.getMap(); | |
306 | let id = this.activeId; | |
307 | this.closeModal(); | |
308 | map.data.forEach(function (feature) { | |
309 | if (feature.getProperty('id') == id) { | |
310 | feature.setProperty('color', 'red'); | |
b3b5cc9c JHR |
311 | if (feature.getProperty('icon') !== null) { |
312 | feature.O.icon.strokeColor = 'red'; | |
313 | } | |
e58627b7 | 314 | this.isSearched=false; |
b3b5cc9c JHR |
315 | } |
316 | else { | |
317 | feature.setProperty('color', 'gray'); | |
318 | if (feature.getProperty('icon') !== null) { | |
319 | feature.O.icon.strokeColor = 'black'; | |
320 | } | |
59ffa1e6 JHR |
321 | } |
322 | }); | |
323 | this.newactive.next(this.activeId); | |
6ced1bc7 JHR |
324 | } |
325 | ||
65c7cdf5 | 326 | addUnit() { |
59ffa1e6 | 327 | this.closeModal(); |
9992f01a | 328 | let pos = this.getcurrentPos(); |
951b1c9f | 329 | let lat = pos.lat(); |
59ffa1e6 | 330 | let lng = pos.lng(); |
59ffa1e6 JHR |
331 | let parent = this.getParent(); |
332 | ||
65c7cdf5 JHR |
333 | let location = {lat: lat, lng: lng}; |
334 | let event = {location, parent}; | |
ebaf2f58 | 335 | this.neworg.next(event); |
0fc3af96 | 336 | this.closeModal(); |
bc2f4c9e | 337 | this.setRunned(false); |
a8451d12 | 338 | } |
dd095993 | 339 | |
65c7cdf5 | 340 | update(event) { |
fa052229 | 341 | this.newactive.next(event); |
59ffa1e6 | 342 | let map = this.getMap(); |
36f8898a JHR |
343 | let http = this.getHttp(); |
344 | ||
59ffa1e6 JHR |
345 | map.data.forEach(function (feature) { |
346 | map.data.remove(feature); | |
36f8898a | 347 | }); |
65c7cdf5 | 348 | http.get(dhisAPI + '/api/organisationUnits/' + event) |
36f8898a JHR |
349 | .map(res => res.json()) |
350 | .subscribe( | |
d647078e | 351 | res=> this.mapUpdate(res, this) |
36f8898a | 352 | ); |
e58627b7 | 353 | |
7ee898bc | 354 | } |
d647078e | 355 | |
65c7cdf5 | 356 | mapUpdate(res, instance) { |
d647078e | 357 | this.setLevel(res.level); |
e58627b7 JHR |
358 | this.setActiveId(res.id); |
359 | this.isSearched = true; | |
d647078e | 360 | this.setParent(res.parent.id); |
e58627b7 JHR |
361 | |
362 | instance.getData('/' + res.parent.id + '/children', instance); | |
363 | if (res.coordinates == null || instance.LEVEL == instance.allLevels) { | |
364 | instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id) | |
365 | .map(res => res.json()) | |
366 | .subscribe( | |
367 | res => instance.drawPolygon(res, instance) | |
368 | ); | |
369 | } | |
d647078e JHR |
370 | |
371 | } | |
372 | ||
fa052229 EHF |
373 | tempMarker(pos) { |
374 | let map = this.map; | |
b3b5cc9c | 375 | if (this.currentMarker) |
fa052229 EHF |
376 | this.currentMarker.setMap(null); |
377 | ||
378 | this.currentMarker = new google.maps.Marker({ | |
379 | position: pos, | |
380 | map: map, | |
381 | title: 'neworg', | |
382 | icon: { | |
383 | path: google.maps.SymbolPath.CIRCLE, | |
384 | scale: 3 | |
385 | } | |
386 | }); | |
387 | this.currentMarker.setMap(map); | |
388 | } | |
b3b5cc9c | 389 | |
258519d6 | 390 | showModal() { |
dcbd19bc | 391 | return this.hideModal = document.getElementById("divModal").style.display = "block"; |
258519d6 JHR |
392 | } |
393 | ||
394 | closeModal() { | |
395 | this.hideModal = document.getElementById("topLevel").style.visibility = "hidden"; | |
396 | this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden"; | |
397 | this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden"; | |
dcbd19bc | 398 | this.hideModal = document.getElementById("divModal").style.display = "none"; |
258519d6 JHR |
399 | |
400 | this.setRunned(false); | |
401 | } | |
402 | ||
6ced1bc7 | 403 | } |
dd095993 | 404 | |
dd095993 JHR |
405 | |
406 | ||
407 | ||
408 |