merge with master
[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 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 13export 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
258519d6 50 setActiveId(id) { this.activeId = id; }
9992f01a 51
258519d6 52 getMap() { return this.map; }
330dd6d3 53
258519d6 54 getHttp() { return this.http; }
b41d2490 55
258519d6 56 setcurrentPos(latlng) { this.currentPos = latlng; }
9d471cab 57
258519d6 58 getcurrentPos() { return this.currentPos; }
59ffa1e6 59
258519d6 60 setParent(id) { this.parent = id; }
9992f01a 61
258519d6 62 getParent() { return this.parent; }
36f8898a 63
258519d6 64 setRunned(value) { this.runned = value; }
65c7cdf5 65
258519d6 66 setupRunned(value) { this.uprunned = value; }
9992f01a 67
258519d6 68 setLevel(value) { this.LEVEL = value; }
65c7cdf5 69
258519d6 70 addLevel() { this.LEVEL++; }
1e6ce2f5 71
258519d6 72 upLevel() { this.LEVEL--; }
a2d7d6b4 73
b470b939 74
6ced1bc7 75 init() {
a2d7d6b4 76
6ced1bc7 77 let map = this.map;
b27f57f1
JHR
78 let pos = {lat: 9.1, lng: -11.6};
79
80 map.setCenter(pos, 0);
81 map.setZoom(7);
82
a2d7d6b4
JHR
83 }
84
85 logError(error) {
86 console.error(error);
87
cb2c4ba8 88 }
28765058 89
65c7cdf5
JHR
90 getData(query, instance, isParent) {
91 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
92 .map(res => res.json())
93 .subscribe(
65c7cdf5 94 res => instance.parseResult(res, instance, isParent),
c7e8b786 95 error => instance.logError(error)
6ced1bc7 96 );
6ced1bc7
JHR
97 }
98
65c7cdf5 99 parseResult(res, instance, isParent) {
951b1c9f 100
65c7cdf5 101 if (isParent) {
03c7df04 102 instance.setParent(res.parent.id);
65c7cdf5 103 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 104 }
65c7cdf5 105 else {
951b1c9f
JHR
106 if (res.organisationUnits) {
107 for (let item in res.organisationUnits) {
108 this.getData('/' + res.organisationUnits[item].id, this);
109
b470b939 110 }
951b1c9f 111 instance.setupRunned(false);
03c7df04 112 instance.setRunned(false);
951b1c9f
JHR
113 } else if (!res.displayName && res.children) {
114 for (let item in res.children) {
115 if (res.children[item].level == instance.LEVEL) {
116 this.getData('/' + res.children[item].id, this);
117 }
118 }
119 instance.setRunned(false);
120 instance.setupRunned(false);
b470b939 121 }
951b1c9f
JHR
122 else {
123 this.drawPolygon(res, instance);
124 }
03c7df04 125 }
6ced1bc7 126 }
951b1c9f 127
65c7cdf5 128 drawPolygon(item, instance) {
1f8c27ee 129 let feature;
65c7cdf5 130 let incoming:string;
1f8c27ee 131 incoming = item.featureType.toLowerCase();
65c7cdf5 132 switch (incoming) {
1f8c27ee
JHR
133 case "point":
134 feature = 'Point';
135 break;
136 case "multi_polygon":
137 feature = 'MultiPolygon';
138 break;
65c7cdf5
JHR
139 case "polygon":
140 feature = 'MultiPolygon';
1f8c27ee
JHR
141 break;
142 default:
143 }
65c7cdf5
JHR
144 // TODO: test på feature og behandle type: NONE
145 if (feature !== undefined) {
1f8c27ee
JHR
146 let unit = {
147 "type": "Feature",
148 "geometry": {
149 "type": feature,
150 "coordinates": JSON.parse(item.coordinates)
151 },
152 "properties": {
153 "name": item.name,
98cc809b 154 "id": item.id,
15b422d5
JHR
155 "color": "gray",
156 "icon": null
65c7cdf5 157 }
1f8c27ee 158 };
15b422d5 159
65c7cdf5 160 if (unit.geometry.type == 'Point') {
15b422d5
JHR
161 unit.properties.icon = {
162 path: google.maps.SymbolPath.CIRCLE,
163 scale: 3
164 };
98cc809b 165
f3e550a1 166 }
65c7cdf5 167
1f8c27ee 168 this.map.data.addGeoJson(unit);
0fc3af96 169 this.map.data.setStyle(function (feature) {
15b422d5
JHR
170 let color = 'gray';
171 let icon;
0fc3af96
EHF
172 if (feature.getProperty('icon') !== null) {
173 icon = feature.getProperty('icon');
15b422d5
JHR
174 }
175 color = feature.getProperty('color');
176 return /** @type {google.maps.Data.StyleOptions} */({
177 fillColor: color,
178 strokeColor: color,
59ffa1e6 179 strokeWeight: 3,
15b422d5
JHR
180 icon: icon
181 });
182 });
183
c7e8b786 184
65c7cdf5 185 this.map.data.addListener('click', function (event) {
59ffa1e6
JHR
186 instance.setActiveId(event.feature.O.id);
187 instance.setcurrentPos(event.latLng);
951b1c9f 188
951b1c9f 189
65c7cdf5 190 //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
59ffa1e6
JHR
191 if (instance.uprunned == false && instance.LEVEL == 2) {
192 this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
193 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
194 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
195 instance.showModal();
a8ba81d3 196
59ffa1e6
JHR
197 }
198 else if (instance.runned == false && instance.LEVEL < 4) {
199 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
200 this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
201 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
202 instance.showModal();
203 } else if (instance.runned == false && instance.LEVEL <= 4) {
1f8c27ee 204
59ffa1e6
JHR
205 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
206 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
207 this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
951b1c9f 208
65c7cdf5 209 instance.setcurrentPos(event.latLng);
59ffa1e6 210 instance.showModal();
951b1c9f 211
59ffa1e6 212 }
bbee9db0 213
365fd2e0 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');
268 }
269 });
270 this.newactive.next(this.activeId);
6ced1bc7
JHR
271 }
272
65c7cdf5 273 addUnit() {
59ffa1e6 274 this.closeModal();
9992f01a 275 let pos = this.getcurrentPos();
951b1c9f 276 let lat = pos.lat();
59ffa1e6 277 let lng = pos.lng();
59ffa1e6
JHR
278
279 let parent = this.getParent();
280
281
65c7cdf5
JHR
282 let location = {lat: lat, lng: lng};
283 let event = {location, parent};
ebaf2f58 284 this.neworg.next(event);
0fc3af96 285 this.closeModal();
bc2f4c9e 286 this.setRunned(false);
a8451d12 287 }
dd095993 288
65c7cdf5 289 update(event) {
fa052229 290 this.newactive.next(event);
59ffa1e6 291 let map = this.getMap();
36f8898a
JHR
292 let http = this.getHttp();
293
59ffa1e6
JHR
294 map.data.forEach(function (feature) {
295 map.data.remove(feature);
36f8898a 296 });
65c7cdf5 297 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
298 .map(res => res.json())
299 .subscribe(
d647078e 300 res=> this.mapUpdate(res, this)
36f8898a 301 );
7ee898bc 302 }
d647078e 303
65c7cdf5 304 mapUpdate(res, instance) {
d647078e
JHR
305 this.setLevel(res.level);
306 this.setParent(res.parent.id);
65c7cdf5 307 this.drawPolygon(res, instance);
d647078e
JHR
308
309 }
310
fa052229
EHF
311
312 tempMarker(pos) {
313 let map = this.map;
314 if(this.currentMarker)
315 this.currentMarker.setMap(null);
316
317 this.currentMarker = new google.maps.Marker({
318 position: pos,
319 map: map,
320 title: 'neworg',
321 icon: {
322 path: google.maps.SymbolPath.CIRCLE,
323 scale: 3
324 }
325 });
326 this.currentMarker.setMap(map);
327 }
258519d6
JHR
328 showModal() {
329 return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
330 }
331
332 closeModal() {
333 this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
334 this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
335 this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
336 this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
337
338 this.setRunned(false);
339 }
340
6ced1bc7 341}
dd095993 342
dd095993
JHR
343
344
345
346