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