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