[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;
    runned:boolean;
    parent:Object;
    currentPos:Object;
    uprunned:boolean;
    activeId:string;
    currentMarker:Object;

    // 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});
        this.init();
        this.http = http;
        this.LEVEL = 2;
        this.runned = false;
        this.getData('?paging=false&level=2', this);
        this.parent = null;
        this.currentPos = null;
        this.uprunned = false;
        this.currentMarker = null;
        // 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.visibility = "hidden";
    }

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

    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.visibility = "hidden";

        this.setRunned(false);

    }

    html() {
        this.currentMarker.setMap(null);

        this.closeModal();
    }

    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)
            );
    }

    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:
        }
        // TODO: test på feature og behandle type: NONE
        if (feature !== undefined) {
            let unit = {
                "type": "Feature",
                "geometry": {
                    "type": feature,
                    "coordinates": JSON.parse(item.coordinates)
                },
                "properties": {
                    "name": item.name,
                    "id": item.id,
                    "color": "gray",
                    "icon": null
                }
            };

            if (unit.geometry.type == 'Point') {
                unit.properties.icon = {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 3
                };

            }

            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
                });
            });


            this.map.data.addListener('click', function (event) {
                instance.setActiveId(event.feature.O.id);
                instance.setcurrentPos(event.latLng);


                //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
                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 < 4) {
                    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 <= 4) {

                    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();

                }


            });
        }
        else {
            // ToDO:
            console.log("fiks meg! gi warning på topp av kart");
        }
    }

    drillDown() {
        this.closeModal();
        let map = this.getMap();
        let id = this.activeId;
        let level = this.LEVEL;
        console.log(id);
        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() {

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

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