clean up
[u/erikhf/frm.git] / src / components / map / map.ts
1 import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
2 import {Headers, Http} from 'angular2/http';
3
4
5 @Component({
6     selector: 'mou-map',
7     directives: [CORE_DIRECTIVES],
8     events: ['newactive', 'neworg'],
9     templateUrl: './components/map/map.html'
10 })
11
12
13 export class Map {
14
15     hideModal:any;
16     map:Object;
17     http:Http;
18     LEVEL:number;
19     runned:boolean;
20     parent:Object;
21     currentPos:Object;
22     uprunned:boolean;
23     activeId:string;
24     currentMarker:Object;
25
26     // COLORS:Object;
27
28     constructor(http:Http) {
29
30         this.activeId = null;
31         this.newactive = new EventEmitter();
32         this.neworg = new EventEmitter();
33         this.map = new google.maps.Map(document.getElementById("map"), {center: {lat: 0, lng: 0}, zoom: 12});
34         this.init();
35         this.http = http;
36         this.LEVEL = 2;
37         this.runned = false;
38         this.getData('?paging=false&level=2', this);
39         this.parent = null;
40         this.currentPos = null;
41         this.uprunned = false;
42         this.currentMarker = null;
43         // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
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";
47         this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
48     }
49
50     setActiveId(id) { this.activeId = id; }
51
52     getMap() { return this.map; }
53
54     getHttp() { return this.http; }
55
56     setcurrentPos(latlng) { this.currentPos = latlng; }
57
58     getcurrentPos() { return this.currentPos; }
59
60     setParent(id) {  this.parent = id; }
61
62     getParent() { return this.parent; }
63
64     setRunned(value) { this.runned = value; }
65
66     setupRunned(value) { this.uprunned = value; }
67
68     setLevel(value) { this.LEVEL = value; }
69
70     getLevel(){ return this.LEVEL; }
71
72     addLevel() { this.LEVEL++; }
73
74     upLevel() { this.LEVEL--; }
75
76
77     init() {
78
79         let map = this.map;
80         let pos = {lat: 9.1, lng: -11.6};
81
82         map.setCenter(pos, 0);
83         map.setZoom(7);
84
85     }
86
87     logError(error) {
88         console.error(error);
89
90     }
91
92     getData(query, instance, isParent) {
93         instance.http.get(dhisAPI + '/api/organisationUnits' + query)
94             .map(res => res.json())
95             .subscribe(
96                 res => instance.parseResult(res, instance, isParent),
97                 error => instance.logError(error)
98             );
99     }
100
101     parseResult(res, instance, isParent) {
102
103         if (isParent) {
104             instance.setParent(res.parent.id);
105             instance.getData('/' + res.parent.id + '/children', instance, false);
106         }
107         else {
108             if (res.organisationUnits) {
109                 for (let item in res.organisationUnits) {
110                     this.getData('/' + res.organisationUnits[item].id, this);
111
112                 }
113                 instance.setupRunned(false);
114                 instance.setRunned(false);
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);
123             }
124             else {
125                 this.drawPolygon(res, instance);
126             }
127         }
128     }
129
130     drawPolygon(item, instance) {
131         let feature;
132         let incoming:string;
133         incoming = item.featureType.toLowerCase();
134         switch (incoming) {
135             case "point":
136                 feature = 'Point';
137                 break;
138             case "multi_polygon":
139                 feature = 'MultiPolygon';
140                 break;
141             case "polygon":
142                 feature = 'MultiPolygon';
143                 break;
144             default:
145         }
146         // TODO: test på feature og behandle type: NONE
147         if (feature !== undefined) {
148             let unit = {
149                 "type": "Feature",
150                 "geometry": {
151                     "type": feature,
152                     "coordinates": JSON.parse(item.coordinates)
153                 },
154                 "properties": {
155                     "name": item.name,
156                     "id": item.id,
157                     "color": "gray",
158                     "icon": null
159                 }
160             };
161
162             if (unit.geometry.type == 'Point') {
163                 unit.properties.icon = {
164                     path: google.maps.SymbolPath.CIRCLE,
165                     scale: 3
166                 };
167
168             }
169
170             this.map.data.addGeoJson(unit);
171             this.map.data.setStyle(function (feature) {
172                 let color = 'gray';
173                 let icon;
174                 if (feature.getProperty('icon') !== null) {
175                     icon = feature.getProperty('icon');
176                 }
177                 color = feature.getProperty('color');
178                 return /** @type {google.maps.Data.StyleOptions} */({
179                     fillColor: color,
180                     strokeColor: color,
181                     strokeWeight: 3,
182                     icon: icon
183                 });
184             });
185
186
187             this.map.data.addListener('click', function (event) {
188                 instance.setActiveId(event.feature.O.id);
189                 instance.setcurrentPos(event.latLng);
190
191
192                 //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
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();
198
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) {
206
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";
210
211                     instance.setcurrentPos(event.latLng);
212                     instance.showModal();
213
214                 }
215
216
217             });
218         }
219         else {
220             // ToDO:
221             console.log("fiks meg! gi warning på topp av kart");
222         }
223     }
224
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);
233
234         map.data.forEach(function (feature) {
235             if (!(feature.O.id == id && level == 3)) {
236                 map.data.remove(feature);
237
238             }
239         });
240
241         this.addLevel();
242         this.getData('/' + id + '/children', this);
243
244     }
245
246     drillUp() {
247
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);
255
256             });
257             let parent = instance.getParent();
258             instance.getData('/' + parent, instance, true);
259         }
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);
273     }
274
275     addUnit() {
276         this.closeModal();
277         let pos = this.getcurrentPos();
278         let lat = pos.lat();
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
304         let location = {lat: lat, lng: lng};
305         let event = {location, parent};
306         this.neworg.next(event);
307         this.closeModal();
308         this.setRunned(false);
309     }
310
311     update(event) {
312         this.neworg.next(event);
313         let map = this.getMap();
314         let http = this.getHttp();
315
316         map.data.forEach(function (feature) {
317             map.data.remove(feature);
318         });
319         http.get(dhisAPI + '/api/organisationUnits/' + event)
320             .map(res => res.json())
321             .subscribe(
322                 res=> this.mapUpdate(res, this)
323             );
324     }
325
326     mapUpdate(res, instance) {
327         this.setLevel(res.level);
328         this.setParent(res.parent.id);
329         this.drawPolygon(res, instance);
330
331     }
332
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
346 }
347
348
349
350
351