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