[u/erikhf/frm.git] / src / components / map / map.ts

import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
import {Headers, Http} from 'angular2/http';

@Component({
    selector: 'mou-map',
    directives: [CORE_DIRECTIVES],
    events: ['newactive', 'neworg'],
    templateUrl: './components/map/map.html'
})


export class Map {

    hideModal:any;
    map:Object;
    http:Http;
    LEVEL:number;
    allLevels:Object;
    runned:boolean;
    uprunned:boolean;
    parent:Object;
    activeId:string;
    currentPos:Object;
    currentMarker:Object;
    isSearched:boolean;

    // COLORS:Object;

    constructor(http:Http) {

        this.activeId = null;
        this.newactive = new EventEmitter();
        this.neworg = new EventEmitter();
        this.map = new google.maps.Map(document.getElementById("map"), {
            center: {lat: 0, lng: 0},
            zoom: 12,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_CENTER
            },
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            streetViewControl: false
        });
        this.init();
        this.http = http;
        this.LEVEL = 2;//
        this.runned = false;
        this.getLevels(this);
        this.parent = null;
        this.currentPos = null;
        this.uprunned = false;
        this.currentMarker = null;
        this.isSearched = false;
        // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("divModal").style.display = "none";
    }

    setActiveId(id) {
        this.activeId = id;
    }

    getMap() {
        return this.map;
    }

    getHttp() {
        return this.http;
    }

    setcurrentPos(latlng) {
        this.currentPos = latlng;
    }

    getcurrentPos() {
        return this.currentPos;
    }

    setParent(id) {
        this.parent = id;
    }

    getParent() {
        return this.parent;
    }

    setRunned(value) {
        this.runned = value;
    }

    setupRunned(value) {
        this.uprunned = value;
    }

    setLevel(value) {
        this.LEVEL = value;
    }

    addLevel() {
        this.LEVEL++;
    }

    upLevel() {
        this.LEVEL--;
    }

    init() {

        let map = this.map;
        let pos = {lat: 9.1, lng: -11.6};
        map.setCenter(pos, 0);
        map.setZoom(7);

    }

    logError(error) {
        console.error(error);

    }

    getData(query, instance, isParent) {
        instance.http.get(dhisAPI + '/api/organisationUnits' + query)
            .map(res => res.json())
            .subscribe(
                res => instance.parseResult(res, instance, isParent),
                error => instance.logError(error)
            );
    }

    getLevels() {
        this.http.get(dhisAPI + '/api/organisationUnitLevels')
            .map(res => res.json())
            .subscribe(
                res => this.saveLevelTotalandGetdata(res, this),
                err => this.logError(err)
            );
    }

    saveLevelTotalandGetdata(res, instance) {
        instance.allLevels = res.pager.total;
        instance.getData('?paging=false&level=2', instance, false);
    }

    parseResult(res, instance, isParent) {
        if (isParent) {
            instance.setParent(res.parent.id);
            instance.getData('/' + res.parent.id + '/children', instance, false);
        }
        else {
            if (res.organisationUnits) {
                for (let item in res.organisationUnits) {
                    this.getData('/' + res.organisationUnits[item].id, this);

                }
                instance.setupRunned(false);
                instance.setRunned(false);
            } else if (!res.displayName && res.children) {
                for (let item in res.children) {
                    if (res.children[item].level == instance.LEVEL) {
                        this.getData('/' + res.children[item].id, this);
                    }
                }
                instance.setRunned(false);
                instance.setupRunned(false);
            }
            else {
                this.drawPolygon(res, instance);
            }
        }
    }

    drawPolygon(item, instance) {
        let feature;
        let incoming:string;
        incoming = item.featureType.toLowerCase();
        switch (incoming) {
            case "point":
                feature = 'Point';
                break;
            case "multi_polygon":
                feature = 'MultiPolygon';
                break;
            case "polygon":
                feature = 'MultiPolygon';
                break;
            default:
        }

        if (feature !== undefined) {
            let unit = {
                "type": "Feature",
                "geometry": {
                    "type": feature,
                    "coordinates": JSON.parse(item.coordinates)
                },
                "properties": {
                    "title": item.name,
                    "name": item.name,
                    "id": item.id,
                    "color": "gray",
                    "icon": null
                }
            };
            if (unit.geometry.type == 'Point') {
                unit.properties.icon = {
                    path: google.maps.SymbolPath.CIRCLE,
                    strokeColor: 'black',
                    scale: 3
                };
                instance.map.panTo({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]});
            }

            this.map.data.addGeoJson(unit);
            this.map.data.setStyle(function (feature) {
                let color = 'gray';
                let icon;
                if (feature.getProperty('icon') !== null) {
                    icon = feature.getProperty('icon');
                }
                color = feature.getProperty('color');
                return /** @type {google.maps.Data.StyleOptions} */({
                    fillColor: color,
                    strokeColor: color,
                    strokeWeight: 3,
                    icon: icon
                });
            });
            if(instance.isSearched){
                instance.seeDetails();
            }
            this.map.data.addListener('click', function (event) {
                instance.setActiveId(event.feature.O.id);
                instance.setcurrentPos(event.latLng);

                if (instance.uprunned == false && instance.LEVEL == 2) {
                    this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
                    this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
                    instance.showModal();

                }
                else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
                    this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
                    this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
                    instance.showModal();
                } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {

                    this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
                    this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";

                    instance.setcurrentPos(event.latLng);
                    instance.showModal();
                }
            });
        }
    }

   /* getpolygonCenter(coordinates,instance){
        let bounds = new google.maps.LatLngBounds();
        let polygonCoords = Array;
        for(let i = 0; i < coordinates.length; i++){
            for(let j = 0; j<coordinates[i].length; j++) {
                for (let k = 0; k<coordinates[i][j].length; k++) {
                    polygonCoords[i] = new google.maps.LatLng(coordinates[i][j][k][0],coordinates[i][j][k][1]);
                }
            }
        }

        for (let i = 0; i < polygonCoords.length; i++) {
            bounds.extend(polygonCoords[i]);
        }

        instance.map.panTo(bounds.getCenter());
    }*/

    drillDown() {
        this.closeModal();
        let map = this.getMap();
        let id = this.activeId;
        let level = this.LEVEL;
        this.setRunned(true);
        this.setParent(id);

        map.data.forEach(function (feature) {
            if (!(feature.O.id == id && level == 3)) {
                map.data.remove(feature);

            }
        });

        this.addLevel();
        this.getData('/' + id + '/children', this);

    }

    drillUp() {


        this.setupRunned(true);
        this.upLevel();
        let instance = this;
        this.closeModal();
        this.map.data.forEach(function (feature) {
            instance.map.data.remove(feature);

        });
        if (this.currentMarker !== null) {
            this.currentMarker.setMap(null);
        }
        let parent = instance.getParent();
        instance.getData('/' + parent, instance, true);

        this.closeModal();
    }

    seeDetails() {
        let map = this.getMap();
        let id = this.activeId;
        this.closeModal();
        map.data.forEach(function (feature) {
            if (feature.getProperty('id') == id) {
                feature.setProperty('color', 'red');
                if (feature.getProperty('icon') !== null) {
                    feature.O.icon.strokeColor = 'red';
                }
                this.isSearched=false;
            }
            else {
                feature.setProperty('color', 'gray');
                if (feature.getProperty('icon') !== null) {
                    feature.O.icon.strokeColor = 'black';
                }
            }
        });
        this.newactive.next(this.activeId);
    }

    addUnit() {
        this.closeModal();
        let pos = this.getcurrentPos();
        let lat = pos.lat();
        let lng = pos.lng();
        let parent = this.getParent();

        let location = {lat: lat, lng: lng};
        let event = {location, parent};
        this.neworg.next(event);
        this.closeModal();
        this.setRunned(false);
    }

    update(event) {
        this.newactive.next(event);
        let map = this.getMap();
        let http = this.getHttp();

        map.data.forEach(function (feature) {
            map.data.remove(feature);
        });
        http.get(dhisAPI + '/api/organisationUnits/' + event)
            .map(res => res.json())
            .subscribe(
                res=> this.mapUpdate(res, this)
            );

    }

    mapUpdate(res, instance) {
        this.setLevel(res.level);
        this.setActiveId(res.id);
        this.isSearched = true;
        this.setParent(res.parent.id);

        instance.getData('/' + res.parent.id + '/children', instance);
        if (res.coordinates == null || instance.LEVEL == instance.allLevels) {
            instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id)
                .map(res => res.json())
                .subscribe(
                    res => instance.drawPolygon(res, instance)
                );
        }

    }

    tempMarker(pos) {
        let map = this.map;
        if (this.currentMarker)
            this.currentMarker.setMap(null);

        this.currentMarker = new google.maps.Marker({
            position: pos,
            map: map,
            title: 'neworg',
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 3
            }
        });
        this.currentMarker.setMap(map);
        map.panTo(this.currentMarker.getPosition());
        //console.log(this.currentMarker.getPosition());
    }

    showModal() {
        return this.hideModal = document.getElementById("divModal").style.display = "block";
    }

    closeModal() {
        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
        this.hideModal = document.getElementById("divModal").style.display = "none";

        this.setRunned(false);
    }

}
Commit	Line	Data
	1	import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
	2	import {Headers, Http} from 'angular2/http';
	3
	4	@Component({
	5	selector: 'mou-map',
	6	directives: [CORE_DIRECTIVES],
	7	events: ['newactive', 'neworg'],
	8	templateUrl: './components/map/map.html'
	9	})
	10
	11
	12	export class Map {
	13
	14	hideModal:any;
	15	map:Object;
	16	http:Http;
	17	LEVEL:number;
	18	allLevels:Object;
	19	runned:boolean;
	20	uprunned:boolean;
	21	parent:Object;
	22	activeId:string;
	23	currentPos:Object;
	24	currentMarker:Object;
	25	isSearched:boolean;
	26
	27	// COLORS:Object;
	28
	29	constructor(http:Http) {
	30
	31	this.activeId = null;
	32	this.newactive = new EventEmitter();
	33	this.neworg = new EventEmitter();
	34	this.map = new google.maps.Map(document.getElementById("map"), {
	35	center: {lat: 0, lng: 0},
	36	zoom: 12,
	37	mapTypeControlOptions: {
	38	position: google.maps.ControlPosition.BOTTOM_CENTER
	39	},
	40	zoomControlOptions: {
	41	position: google.maps.ControlPosition.LEFT_BOTTOM
	42	},
	43	streetViewControl: false
	44	});
	45	this.init();
	46	this.http = http;
	47	this.LEVEL = 2;//
	48	this.runned = false;
	49	this.getLevels(this);
	50	this.parent = null;
	51	this.currentPos = null;
	52	this.uprunned = false;
	53	this.currentMarker = null;
	54	this.isSearched = false;
	55	// this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
	56	this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
	57	this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
	58	this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
	59	this.hideModal = document.getElementById("divModal").style.display = "none";
	60	}
	61
	62	setActiveId(id) {
	63	this.activeId = id;
	64	}
	65
	66	getMap() {
	67	return this.map;
	68	}
	69
	70	getHttp() {
	71	return this.http;
	72	}
	73
	74	setcurrentPos(latlng) {
	75	this.currentPos = latlng;
	76	}
	77
	78	getcurrentPos() {
	79	return this.currentPos;
	80	}
	81
	82	setParent(id) {
	83	this.parent = id;
	84	}
	85
	86	getParent() {
	87	return this.parent;
	88	}
	89
	90	setRunned(value) {
	91	this.runned = value;
	92	}
	93
	94	setupRunned(value) {
	95	this.uprunned = value;
	96	}
	97
	98	setLevel(value) {
	99	this.LEVEL = value;
	100	}
	101
	102	addLevel() {
	103	this.LEVEL++;
	104	}
	105
	106	upLevel() {
	107	this.LEVEL--;
	108	}
	109
	110	init() {
	111
	112	let map = this.map;
	113	let pos = {lat: 9.1, lng: -11.6};
	114	map.setCenter(pos, 0);
	115	map.setZoom(7);
	116
	117	}
	118
	119	logError(error) {
	120	console.error(error);
	121
	122	}
	123
	124	getData(query, instance, isParent) {
	125	instance.http.get(dhisAPI + '/api/organisationUnits' + query)
	126	.map(res => res.json())
	127	.subscribe(
	128	res => instance.parseResult(res, instance, isParent),
	129	error => instance.logError(error)
	130	);
	131	}
	132
	133	getLevels() {
	134	this.http.get(dhisAPI + '/api/organisationUnitLevels')
	135	.map(res => res.json())
	136	.subscribe(
	137	res => this.saveLevelTotalandGetdata(res, this),
	138	err => this.logError(err)
	139	);
	140	}
	141
	142	saveLevelTotalandGetdata(res, instance) {
	143	instance.allLevels = res.pager.total;
	144	instance.getData('?paging=false&level=2', instance, false);
	145	}
	146
	147	parseResult(res, instance, isParent) {
	148	if (isParent) {
	149	instance.setParent(res.parent.id);
	150	instance.getData('/' + res.parent.id + '/children', instance, false);
	151	}
	152	else {
	153	if (res.organisationUnits) {
	154	for (let item in res.organisationUnits) {
	155	this.getData('/' + res.organisationUnits[item].id, this);
	156
	157	}
	158	instance.setupRunned(false);
	159	instance.setRunned(false);
	160	} else if (!res.displayName && res.children) {
	161	for (let item in res.children) {
	162	if (res.children[item].level == instance.LEVEL) {
	163	this.getData('/' + res.children[item].id, this);
	164	}
	165	}
	166	instance.setRunned(false);
	167	instance.setupRunned(false);
	168	}
	169	else {
	170	this.drawPolygon(res, instance);
	171	}
	172	}
	173	}
	174
	175	drawPolygon(item, instance) {
	176	let feature;
	177	let incoming:string;
	178	incoming = item.featureType.toLowerCase();
	179	switch (incoming) {
	180	case "point":
	181	feature = 'Point';
	182	break;
	183	case "multi_polygon":
	184	feature = 'MultiPolygon';
	185	break;
	186	case "polygon":
	187	feature = 'MultiPolygon';
	188	break;
	189	default:
	190	}
	191
	192	if (feature !== undefined) {
	193	let unit = {
	194	"type": "Feature",
	195	"geometry": {
	196	"type": feature,
	197	"coordinates": JSON.parse(item.coordinates)
	198	},
	199	"properties": {
	200	"title": item.name,
	201	"name": item.name,
	202	"id": item.id,
	203	"color": "gray",
	204	"icon": null
	205	}
	206	};
	207	if (unit.geometry.type == 'Point') {
	208	unit.properties.icon = {
	209	path: google.maps.SymbolPath.CIRCLE,
	210	strokeColor: 'black',
	211	scale: 3
	212	};
	213	instance.map.panTo({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]});
	214	}
	215
	216	this.map.data.addGeoJson(unit);
	217	this.map.data.setStyle(function (feature) {
	218	let color = 'gray';
	219	let icon;
	220	if (feature.getProperty('icon') !== null) {
	221	icon = feature.getProperty('icon');
	222	}
	223	color = feature.getProperty('color');
	224	return /** @type {google.maps.Data.StyleOptions} */({
	225	fillColor: color,
	226	strokeColor: color,
	227	strokeWeight: 3,
	228	icon: icon
	229	});
	230	});
	231	if(instance.isSearched){
	232	instance.seeDetails();
	233	}
	234	this.map.data.addListener('click', function (event) {
	235	instance.setActiveId(event.feature.O.id);
	236	instance.setcurrentPos(event.latLng);
	237
	238	if (instance.uprunned == false && instance.LEVEL == 2) {
	239	this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
	240	this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
	241	this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
	242	instance.showModal();
	243
	244	}
	245	else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
	246	this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
	247	this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
	248	this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
	249	instance.showModal();
	250	} else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
	251
	252	this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
	253	this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
	254	this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
	255
	256	instance.setcurrentPos(event.latLng);
	257	instance.showModal();
	258	}
	259	});
	260	}
	261	}
	262
	263	/* getpolygonCenter(coordinates,instance){
	264	let bounds = new google.maps.LatLngBounds();
	265	let polygonCoords = Array;
	266	for(let i = 0; i < coordinates.length; i++){
	267	for(let j = 0; j<coordinates[i].length; j++) {
	268	for (let k = 0; k<coordinates[i][j].length; k++) {
	269	polygonCoords[i] = new google.maps.LatLng(coordinates[i][j][k][0],coordinates[i][j][k][1]);
	270	}
	271	}
	272	}
	273
	274	for (let i = 0; i < polygonCoords.length; i++) {
	275	bounds.extend(polygonCoords[i]);
	276	}
	277
	278	instance.map.panTo(bounds.getCenter());
	279	}*/
	280
	281	drillDown() {
	282	this.closeModal();
	283	let map = this.getMap();
	284	let id = this.activeId;
	285	let level = this.LEVEL;
	286	this.setRunned(true);
	287	this.setParent(id);
	288
	289	map.data.forEach(function (feature) {
	290	if (!(feature.O.id == id && level == 3)) {
	291	map.data.remove(feature);
	292
	293	}
	294	});
	295
	296	this.addLevel();
	297	this.getData('/' + id + '/children', this);
	298
	299	}
	300
	301	drillUp() {
	302
	303
	304	this.setupRunned(true);
	305	this.upLevel();
	306	let instance = this;
	307	this.closeModal();
	308	this.map.data.forEach(function (feature) {
	309	instance.map.data.remove(feature);
	310
	311	});
	312	if (this.currentMarker !== null) {
	313	this.currentMarker.setMap(null);
	314	}
	315	let parent = instance.getParent();
	316	instance.getData('/' + parent, instance, true);
	317
	318	this.closeModal();
	319	}
	320
	321	seeDetails() {
	322	let map = this.getMap();
	323	let id = this.activeId;
	324	this.closeModal();
	325	map.data.forEach(function (feature) {
	326	if (feature.getProperty('id') == id) {
	327	feature.setProperty('color', 'red');
	328	if (feature.getProperty('icon') !== null) {
	329	feature.O.icon.strokeColor = 'red';
	330	}
	331	this.isSearched=false;
	332	}
	333	else {
	334	feature.setProperty('color', 'gray');
	335	if (feature.getProperty('icon') !== null) {
	336	feature.O.icon.strokeColor = 'black';
	337	}
	338	}
	339	});
	340	this.newactive.next(this.activeId);
	341	}
	342
	343	addUnit() {
	344	this.closeModal();
	345	let pos = this.getcurrentPos();
	346	let lat = pos.lat();
	347	let lng = pos.lng();
	348	let parent = this.getParent();
	349
	350	let location = {lat: lat, lng: lng};
	351	let event = {location, parent};
	352	this.neworg.next(event);
	353	this.closeModal();
	354	this.setRunned(false);
	355	}
	356
	357	update(event) {
	358	this.newactive.next(event);
	359	let map = this.getMap();
	360	let http = this.getHttp();
	361
	362	map.data.forEach(function (feature) {
	363	map.data.remove(feature);
	364	});
	365	http.get(dhisAPI + '/api/organisationUnits/' + event)
	366	.map(res => res.json())
	367	.subscribe(
	368	res=> this.mapUpdate(res, this)
	369	);
	370
	371	}
	372
	373	mapUpdate(res, instance) {
	374	this.setLevel(res.level);
	375	this.setActiveId(res.id);
	376	this.isSearched = true;
	377	this.setParent(res.parent.id);
	378
	379	instance.getData('/' + res.parent.id + '/children', instance);
	380	if (res.coordinates == null \|\| instance.LEVEL == instance.allLevels) {
	381	instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id)
	382	.map(res => res.json())
	383	.subscribe(
	384	res => instance.drawPolygon(res, instance)
	385	);
	386	}
	387
	388	}
	389
	390	tempMarker(pos) {
	391	let map = this.map;
	392	if (this.currentMarker)
	393	this.currentMarker.setMap(null);
	394
	395	this.currentMarker = new google.maps.Marker({
	396	position: pos,
	397	map: map,
	398	title: 'neworg',
	399	icon: {
	400	path: google.maps.SymbolPath.CIRCLE,
	401	scale: 3
	402	}
	403	});
	404	this.currentMarker.setMap(map);
	405	map.panTo(this.currentMarker.getPosition());
	406	//console.log(this.currentMarker.getPosition());
	407	}
	408
	409	showModal() {
	410	return this.hideModal = document.getElementById("divModal").style.display = "block";
	411	}
	412
	413	closeModal() {
	414	this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
	415	this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
	416	this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
	417	this.hideModal = document.getElementById("divModal").style.display = "none";
	418
	419	this.setRunned(false);
	420	}
	421
	422	}
	423
	424
	425
	426
	427