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