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