everything is working, great success
[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;
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