[levels] modal buttons swaped
[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
JHR
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();
f800869b
EHF
33 this.map = new google.maps.Map(document.getElementById("map"), {
34 center: {lat: 0, lng: 0},
35 zoom: 12,
36 mapTypeControlOptions: {
37 position: google.maps.ControlPosition.BOTTOM_CENTER
38 },
57a79ad4 39 zoomControlOptions: {
f800869b
EHF
40 position: google.maps.ControlPosition.LEFT_BOTTOM
41 },
42 streetViewControl: false
43 });
6ced1bc7
JHR
44 this.init();
45 this.http = http;
57a79ad4 46 this.LEVEL = 2;//
0d91e9f9 47 this.runned = false;
57a79ad4
JHR
48 this.getLevels(this);
49 // this.getData('?paging=false&level=2', this);/////////////////////////////////////////////////////////
65c7cdf5 50 this.parent = null;
a8451d12 51 this.currentPos = null;
951b1c9f 52 this.uprunned = false;
59ffa1e6 53 this.currentMarker = null;
15b422d5 54 // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
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";
f800869b 58 this.hideModal = document.getElementById("divModal").style.display = "none";
784566de 59 }
9d471cab 60
57a79ad4
JHR
61 setActiveId(id) {
62 this.activeId = id;
63 }
9992f01a 64
57a79ad4
JHR
65 getMap() {
66 return this.map;
67 }
330dd6d3 68
57a79ad4
JHR
69 getHttp() {
70 return this.http;
71 }
b41d2490 72
57a79ad4
JHR
73 setcurrentPos(latlng) {
74 this.currentPos = latlng;
75 }
b41d2490 76
57a79ad4
JHR
77 getcurrentPos() {
78 return this.currentPos;
79 }
9d471cab 80
57a79ad4
JHR
81 setParent(id) {
82 this.parent = id;
83 }
59ffa1e6 84
57a79ad4
JHR
85 getParent() {
86 return this.parent;
87 }
9992f01a 88
57a79ad4
JHR
89 setRunned(value) {
90 this.runned = value;
91 }
36f8898a 92
57a79ad4
JHR
93 setupRunned(value) {
94 this.uprunned = value;
95 }
65c7cdf5 96
57a79ad4
JHR
97 setLevel(value) {
98 this.LEVEL = value;
99 }
9992f01a 100
57a79ad4
JHR
101 addLevel() {
102 this.LEVEL++;
103 }
65c7cdf5 104
57a79ad4
JHR
105 upLevel() {
106 this.LEVEL--;
107 }
b470b939 108
6ced1bc7 109 init() {
a2d7d6b4 110
6ced1bc7 111 let map = this.map;
b27f57f1
JHR
112 let pos = {lat: 9.1, lng: -11.6};
113
114 map.setCenter(pos, 0);
115 map.setZoom(7);
116
a2d7d6b4
JHR
117 }
118
119 logError(error) {
120 console.error(error);
121
cb2c4ba8 122 }
28765058 123
65c7cdf5
JHR
124 getData(query, instance, isParent) {
125 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
126 .map(res => res.json())
127 .subscribe(
65c7cdf5 128 res => instance.parseResult(res, instance, isParent),
c7e8b786 129 error => instance.logError(error)
6ced1bc7 130 );
6ced1bc7
JHR
131 }
132
57a79ad4
JHR
133 getLevels() {
134 this.http.get(dhisAPI + '/api/organisationUnitLevels')
135 .map(res => res.json())
136 .subscribe(
137 res => this.saveLevelTotalandGetdata(res,this),
138 err => this.logError(err)
139 );
140 }
141
142 saveLevelTotalandGetdata(res,instance){
143 instance.allLevels = res.pager.total;
144 instance.getData('?paging=false&level=2',instance,false);
145 }
146
65c7cdf5 147 parseResult(res, instance, isParent) {
65c7cdf5 148 if (isParent) {
03c7df04 149 instance.setParent(res.parent.id);
65c7cdf5 150 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 151 }
65c7cdf5 152 else {
951b1c9f
JHR
153 if (res.organisationUnits) {
154 for (let item in res.organisationUnits) {
155 this.getData('/' + res.organisationUnits[item].id, this);
156
b470b939 157 }
951b1c9f 158 instance.setupRunned(false);
03c7df04 159 instance.setRunned(false);
951b1c9f
JHR
160 } else if (!res.displayName && res.children) {
161 for (let item in res.children) {
162 if (res.children[item].level == instance.LEVEL) {
163 this.getData('/' + res.children[item].id, this);
164 }
165 }
166 instance.setRunned(false);
167 instance.setupRunned(false);
b470b939 168 }
951b1c9f
JHR
169 else {
170 this.drawPolygon(res, instance);
171 }
03c7df04 172 }
6ced1bc7 173 }
57a79ad4 174
65c7cdf5 175 drawPolygon(item, instance) {
1f8c27ee 176 let feature;
65c7cdf5 177 let incoming:string;
1f8c27ee 178 incoming = item.featureType.toLowerCase();
65c7cdf5 179 switch (incoming) {
1f8c27ee
JHR
180 case "point":
181 feature = 'Point';
182 break;
183 case "multi_polygon":
184 feature = 'MultiPolygon';
185 break;
65c7cdf5
JHR
186 case "polygon":
187 feature = 'MultiPolygon';
1f8c27ee
JHR
188 break;
189 default:
190 }
65c7cdf5
JHR
191 // TODO: test på feature og behandle type: NONE
192 if (feature !== undefined) {
1f8c27ee
JHR
193 let unit = {
194 "type": "Feature",
195 "geometry": {
196 "type": feature,
197 "coordinates": JSON.parse(item.coordinates)
198 },
199 "properties": {
200 "name": item.name,
98cc809b 201 "id": item.id,
15b422d5
JHR
202 "color": "gray",
203 "icon": null
65c7cdf5 204 }
1f8c27ee 205 };
65c7cdf5 206 if (unit.geometry.type == 'Point') {
15b422d5
JHR
207 unit.properties.icon = {
208 path: google.maps.SymbolPath.CIRCLE,
b3b5cc9c 209 strokeColor: 'black',
15b422d5
JHR
210 scale: 3
211 };
f3e550a1 212 }
65c7cdf5 213
1f8c27ee 214 this.map.data.addGeoJson(unit);
0fc3af96 215 this.map.data.setStyle(function (feature) {
15b422d5
JHR
216 let color = 'gray';
217 let icon;
0fc3af96
EHF
218 if (feature.getProperty('icon') !== null) {
219 icon = feature.getProperty('icon');
15b422d5
JHR
220 }
221 color = feature.getProperty('color');
222 return /** @type {google.maps.Data.StyleOptions} */({
223 fillColor: color,
224 strokeColor: color,
59ffa1e6 225 strokeWeight: 3,
15b422d5
JHR
226 icon: icon
227 });
228 });
229
65c7cdf5 230 this.map.data.addListener('click', function (event) {
59ffa1e6
JHR
231 instance.setActiveId(event.feature.O.id);
232 instance.setcurrentPos(event.latLng);
951b1c9f 233
59ffa1e6
JHR
234 if (instance.uprunned == false && instance.LEVEL == 2) {
235 this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
236 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
237 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
238 instance.showModal();
a8ba81d3 239
59ffa1e6 240 }
57a79ad4 241 else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
59ffa1e6
JHR
242 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
243 this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
244 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
245 instance.showModal();
57a79ad4 246 } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
1f8c27ee 247
59ffa1e6
JHR
248 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
249 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
250 this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
951b1c9f 251
65c7cdf5 252 instance.setcurrentPos(event.latLng);
59ffa1e6 253 instance.showModal();
59ffa1e6 254 }
59ffa1e6
JHR
255 });
256 }
257 else {
258 // ToDO:
259 console.log("fiks meg! gi warning på topp av kart");
260 }
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 });
295 if(this.currentMarker !== null){
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 }
314 }
315 else {
316 feature.setProperty('color', 'gray');
317 if (feature.getProperty('icon') !== null) {
318 feature.O.icon.strokeColor = 'black';
319 }
59ffa1e6
JHR
320 }
321 });
322 this.newactive.next(this.activeId);
6ced1bc7
JHR
323 }
324
65c7cdf5 325 addUnit() {
59ffa1e6 326 this.closeModal();
9992f01a 327 let pos = this.getcurrentPos();
951b1c9f 328 let lat = pos.lat();
59ffa1e6 329 let lng = pos.lng();
59ffa1e6
JHR
330 let parent = this.getParent();
331
65c7cdf5
JHR
332 let location = {lat: lat, lng: lng};
333 let event = {location, parent};
ebaf2f58 334 this.neworg.next(event);
0fc3af96 335 this.closeModal();
bc2f4c9e 336 this.setRunned(false);
a8451d12 337 }
dd095993 338
65c7cdf5 339 update(event) {
fa052229 340 this.newactive.next(event);
59ffa1e6 341 let map = this.getMap();
36f8898a
JHR
342 let http = this.getHttp();
343
59ffa1e6
JHR
344 map.data.forEach(function (feature) {
345 map.data.remove(feature);
36f8898a 346 });
65c7cdf5 347 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
348 .map(res => res.json())
349 .subscribe(
d647078e 350 res=> this.mapUpdate(res, this)
36f8898a 351 );
7ee898bc 352 }
d647078e 353
65c7cdf5 354 mapUpdate(res, instance) {
d647078e
JHR
355 this.setLevel(res.level);
356 this.setParent(res.parent.id);
65c7cdf5 357 this.drawPolygon(res, instance);
d647078e
JHR
358
359 }
360
fa052229
EHF
361 tempMarker(pos) {
362 let map = this.map;
b3b5cc9c 363 if (this.currentMarker)
fa052229
EHF
364 this.currentMarker.setMap(null);
365
366 this.currentMarker = new google.maps.Marker({
367 position: pos,
368 map: map,
369 title: 'neworg',
370 icon: {
371 path: google.maps.SymbolPath.CIRCLE,
372 scale: 3
373 }
374 });
375 this.currentMarker.setMap(map);
376 }
b3b5cc9c 377
258519d6 378 showModal() {
dcbd19bc 379 return this.hideModal = document.getElementById("divModal").style.display = "block";
258519d6
JHR
380 }
381
382 closeModal() {
383 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
384 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
385 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
dcbd19bc 386 this.hideModal = document.getElementById("divModal").style.display = "none";
258519d6
JHR
387
388 this.setRunned(false);
389 }
390
6ced1bc7 391}
dd095993 392
dd095993
JHR
393
394
395
396