Merge branch 'sidebar'
[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],
ebaf2f58 8 events: ['newactive','neworg'],
28765058 9 templateUrl: './components/map/map.html'
cb2c4ba8
JHR
10})
11
12
28765058 13export class Map {
6ced1bc7 14
784566de 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;
15b422d5 23 // COLORS:Object;
65c7cdf5 24
dd095993 25 constructor(http:Http) {
7ee898bc 26 this.newactive = new EventEmitter();
ebaf2f58 27 this.neworg = new EventEmitter();
6ced1bc7
JHR
28 this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
29 this.init();
30 this.http = http;
0d91e9f9
JHR
31 this.LEVEL = 2;
32 this.runned = false;
65c7cdf5
JHR
33 this.getData('?paging=false&level=2', this);
34 this.parent = null;
a8451d12 35 this.currentPos = null;
951b1c9f 36 this.uprunned = false;
15b422d5 37 // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
784566de
RM
38 this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
39 }
9d471cab 40
784566de
RM
41 showModal(){
42 return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
a8451d12 43 }
9992f01a 44
b41d2490
RM
45 closeModal(){
46 console.log("hei");
47 return this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
48
49 }
50
65c7cdf5 51 getMap() {
36f8898a
JHR
52 return this.map;
53 }
54
65c7cdf5 55 getHttp() {
36f8898a
JHR
56 return this.http;
57 }
65c7cdf5
JHR
58
59 setcurrentPos(latlng) {
9992f01a
JHR
60 this.currentPos = latlng;
61 }
9992f01a 62
65c7cdf5
JHR
63 getcurrentPos() {
64 return this.currentPos;
65 }
66
67 setParent(id) {
68 this.parent = id;
a8451d12 69 }
9d471cab 70
65c7cdf5
JHR
71 getParent() {
72 return this.parent;
1e6ce2f5
EHF
73 }
74
65c7cdf5 75 setRunned(value) {
a8ba81d3
JHR
76 this.runned = value;
77 }
a2d7d6b4 78
65c7cdf5 79 setupRunned(value) {
951b1c9f
JHR
80 this.uprunned = value;
81 }
82
65c7cdf5 83 setLevel(value) {
d647078e
JHR
84 this.LEVEL = value;
85 }
65c7cdf5
JHR
86
87 addLevel() {
b470b939
JHR
88 this.LEVEL++;
89 }
65c7cdf5
JHR
90
91 upLevel() {
951b1c9f
JHR
92 this.LEVEL--;
93 }
b470b939 94
6ced1bc7 95 init() {
a2d7d6b4 96
6ced1bc7 97 let map = this.map;
b27f57f1
JHR
98 let pos = {lat: 9.1, lng: -11.6};
99
100 map.setCenter(pos, 0);
101 map.setZoom(7);
102
cdcaf46c 103
a2d7d6b4
JHR
104 }
105
106 logError(error) {
107 console.error(error);
108
cb2c4ba8 109 }
28765058 110
65c7cdf5
JHR
111 getData(query, instance, isParent) {
112 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
113 .map(res => res.json())
114 .subscribe(
65c7cdf5 115 res => instance.parseResult(res, instance, isParent),
c7e8b786 116 error => instance.logError(error)
6ced1bc7 117 );
6ced1bc7
JHR
118 }
119
65c7cdf5 120 parseResult(res, instance, isParent) {
951b1c9f 121
65c7cdf5 122 if (isParent) {
03c7df04 123 instance.setParent(res.parent.id);
65c7cdf5 124 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 125 }
65c7cdf5 126 else {
951b1c9f
JHR
127 if (res.organisationUnits) {
128 for (let item in res.organisationUnits) {
129 this.getData('/' + res.organisationUnits[item].id, this);
130
b470b939 131 }
951b1c9f 132 instance.setupRunned(false);
03c7df04 133 instance.setRunned(false);
951b1c9f
JHR
134 } else if (!res.displayName && res.children) {
135 for (let item in res.children) {
136 if (res.children[item].level == instance.LEVEL) {
137 this.getData('/' + res.children[item].id, this);
138 }
139 }
140 instance.setRunned(false);
141 instance.setupRunned(false);
b470b939 142 }
951b1c9f
JHR
143 else {
144 this.drawPolygon(res, instance);
145 }
03c7df04 146 }
6ced1bc7 147 }
951b1c9f 148
65c7cdf5 149 drawPolygon(item, instance) {
36f8898a 150 let bounds = new google.maps.LatLngBounds();
1f8c27ee 151 let feature;
65c7cdf5 152 let incoming:string;
1f8c27ee 153 incoming = item.featureType.toLowerCase();
65c7cdf5 154 switch (incoming) {
1f8c27ee
JHR
155 case "point":
156 feature = 'Point';
157 break;
158 case "multi_polygon":
159 feature = 'MultiPolygon';
160 break;
65c7cdf5
JHR
161 case "polygon":
162 feature = 'MultiPolygon';
1f8c27ee
JHR
163 break;
164 default:
165 }
65c7cdf5
JHR
166 // TODO: test på feature og behandle type: NONE
167 if (feature !== undefined) {
1f8c27ee
JHR
168 let unit = {
169 "type": "Feature",
170 "geometry": {
171 "type": feature,
172 "coordinates": JSON.parse(item.coordinates)
173 },
174 "properties": {
175 "name": item.name,
98cc809b 176 "id": item.id,
15b422d5
JHR
177 "color": "gray",
178 "icon": null
65c7cdf5 179 }
1f8c27ee 180 };
15b422d5 181
65c7cdf5 182 if (unit.geometry.type == 'Point') {
15b422d5
JHR
183 unit.properties.icon = {
184 path: google.maps.SymbolPath.CIRCLE,
185 scale: 3
186 };
98cc809b 187
f3e550a1 188 }
65c7cdf5 189
1f8c27ee 190 this.map.data.addGeoJson(unit);
15b422d5
JHR
191 this.map.data.setStyle(function(feature) {
192 let color = 'gray';
193 let icon;
194 if (feature.getProperty('icon')!== null) {
195 icon = feature.getProperty('icon');
196 }
197 color = feature.getProperty('color');
198 return /** @type {google.maps.Data.StyleOptions} */({
199 fillColor: color,
200 strokeColor: color,
201 strokeWeight: 2,
202 icon: icon
203 });
204 });
205
c7e8b786 206
65c7cdf5 207 this.map.data.addListener('click', function (event) {
951b1c9f 208
65c7cdf5
JHR
209 //TODO: spør om man vil ned/opp eller se info
210 //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
a8ba81d3 211
65c7cdf5
JHR
212 if (instance.runned == false && instance.LEVEL < 4) {
213 instance.setRunned(true);
1f8c27ee 214
65c7cdf5
JHR
215 let infowindow = new google.maps.InfoWindow({
216 //TODO: Style this
217 content: '<div> <button >DrillUP</button>' +
218 ' <button ">DrillDOWN</button>' +
219 '<button ">SEEINFO</button></div>'
220 });
951b1c9f 221
65c7cdf5
JHR
222 infowindow.setPosition(event.latlng);
223 // infowindow.open(instance.map);
951b1c9f 224
65c7cdf5
JHR
225 let id = event.feature.O.id;
226 instance.setParent(id);
bbee9db0 227
65c7cdf5 228 instance.map.data.forEach(function (feature) {
365fd2e0 229 if (!(feature.O.id == id && instance.LEVEL == 3)) {
36f8898a 230 instance.map.data.remove(feature);
365fd2e0 231
65c7cdf5
JHR
232 }
233 });
03c7df04 234
65c7cdf5
JHR
235 instance.addLevel();
236 instance.getData('/' + id + '/children', instance);
237 } else if (instance.runned == false && instance.LEVEL >= 4) {
238 instance.setRunned(true);
784566de 239
65c7cdf5 240 instance.setcurrentPos(event.latLng);
03c7df04 241
65c7cdf5
JHR
242 var marker = new google.maps.Marker({
243 position: event.latLng,
244 map: instance.map,
245 title: 'newOrg',
246 icon: {
247 path: google.maps.SymbolPath.CIRCLE,
248 scale: 5
249 }
03c7df04 250
65c7cdf5 251 });
03c7df04 252
65c7cdf5 253 marker.setMap(instance.map);
784566de 254 instance.showModal();
03c7df04 255
03c7df04 256
65c7cdf5 257 instance.addUnit();
03c7df04 258
65c7cdf5 259 }
65c7cdf5 260 });
0a4273ac 261
bbee9db0 262
65c7cdf5
JHR
263 this.map.data.addListener('rightclick', function (event) {
264 if (instance.uprunned == false) {
951b1c9f 265 instance.setupRunned(true);
951b1c9f
JHR
266 instance.upLevel();
267
03c7df04 268 if (instance.LEVEL > 1) {
951b1c9f
JHR
269 instance.map.data.forEach(function (feature) {
270 instance.map.data.remove(feature);
271 });
03c7df04 272
951b1c9f 273 let parent = instance.getParent();
65c7cdf5 274 instance.getData('/' + parent, instance, true);
03c7df04 275 }
951b1c9f 276 else {
03c7df04
JHR
277 instance.addLevel();
278 instance.setupRunned(true);
951b1c9f
JHR
279 //TODO skriv en warning om at man ikke kan gå opp
280
65c7cdf5 281 }
951b1c9f
JHR
282 }
283 });
15b422d5
JHR
284 }
285 else {
1f8c27ee
JHR
286 // ToDO:
287 console.log("fiks meg! gi warning på topp av kart");
288 }
6ced1bc7
JHR
289 }
290
65c7cdf5 291 addUnit() {
a8451d12 292 let parent = this.getParent();
9992f01a 293 let pos = this.getcurrentPos();
951b1c9f
JHR
294 let lat = pos.lat();
295 let lng = pos.lng()
65c7cdf5
JHR
296 let location = {lat: lat, lng: lng};
297 let event = {location, parent};
ebaf2f58 298 this.neworg.next(event);
a8451d12 299 }
dd095993 300
65c7cdf5 301 update(event) {
7ee898bc 302 this.newactive.next(event);
36f8898a
JHR
303 let test = this.getMap();
304 let http = this.getHttp();
305
306 test.data.forEach(function (feature) {
307 test.data.remove(feature);
308 });
65c7cdf5 309 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
310 .map(res => res.json())
311 .subscribe(
d647078e 312 res=> this.mapUpdate(res, this)
36f8898a 313 );
7ee898bc 314 }
d647078e 315
65c7cdf5 316 mapUpdate(res, instance) {
d647078e
JHR
317 this.setLevel(res.level);
318 this.setParent(res.parent.id);
65c7cdf5 319 this.drawPolygon(res, instance);
d647078e
JHR
320
321 }
322
6ced1bc7 323}
dd095993 324
dd095993
JHR
325
326
327
328