draw searched parent and markes searched as active
[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;
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