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