gistfile1.txt

/*
* Site base configuration
*/

// Wialon KIT
var WIALON_SDK_URL = "https://kit-api.wialon.com"
var GIS_URL = "http://render.mapsviewer.com/kit-api.wialon.com";

// Wialon Hosting
//var WIALON_SDK_URL = "https://hst-api.wialon.com"
//var GIS_URL = "http://render.mapsviewer.com/hst-api.wialon.com";

/// Demo login and password
var DEMO_LOGIN = "kitdemo";
var DEMO_PASSW = "kitdemo";

/**
* Fetch default Gurtam maps map options
*/ 
function gurtam_maps_options(opts) {
	if (typeof opts != 'object')
		opts = new Object;

	opts.maxExtent = new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892);
	opts.numZoomLevels = 19;
	opts.maxResolution = 156543.0339;
	opts.units = 'm';
	opts.projection = "EPSG:900913";
	opts.displayProjection = new OpenLayers.Projection("EPSG:4326");
	
	return opts;
}

/**
* Log in to wialon
*/
function login(login, password, callback) {
	wialon.core.Session.getInstance().login(login, password, "",  qx.lang.Function.bind(function(login, code) {
		if(!code){
			jQuery("#user_name_id").html(login);
			callback();
		}
		else 
			alert("login error: ["+ code +"] "+ wialon.core.Errors.getErrorText(code));
	}, this, login));
}

/**
* Init wialon event system and create map
*/
function initEnv() {	
	// load library for working with unit icons
	wialon.core.Session.getInstance().loadLibrary("itemIcon");
	
	// init wialon event system
	var spec = [{type: "type", 
				data: "avl_unit", 
				flags: wialon.item.Item.dataFlag.base|wialon.item.Unit.dataFlag.lastMessage|wialon.item.Item.dataFlag.image, 
				mode: 0}];	
	wialon.core.Session.getInstance().updateDataFlags(spec, function(code) {
		if(code) {
			alert("updateDataFlags error: ["+ code +"] " + wialon.core.Errors.getErrorText(code));
			return;
		}
		
		// init map options
		var map_options = gurtam_maps_options({controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.KeyboardDefaults()]});
		// create map
		map = new OpenLayers.Map("map_id", map_options);
		
		// options for GurtmMaps layer
		var opts = {};
		opts.maxExtent = new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892);
		opts.numZoomLevels = 19;
		opts.maxResolution = 156543.0339;
		opts.units = 'm';
		opts.projection = "EPSG:900913";
		opts.displayProjection = new OpenLayers.Projection("EPSG:4326");
		// create layer
		var gurtamMaps = new OpenLayers.Layer.GurtamMaps("Gurtam Maps", GIS_URL, opts);
		map.addLayer(gurtamMaps);
		
		// set default center
		map.setCenter(new OpenLayers.LonLat(27.5, 53.9).transform(
		  new OpenLayers.Projection("EPSG:4326"),
		  map.getProjectionObject()
		), 10);
		
		// hide login dialog
		jQuery("#login_dlg").hide();
		
		// create markers layer
		var markersLayer = new OpenLayers.Layer.Markers("markers");
		layerId = markersLayer.id;
		markersLayer.setVisibility(true);
		map.addLayer(markersLayer);

		// init unit table
		showUnits();
	});		
}

/**
* Show units in the table and on the map
*/
function showUnits() {
	// get units
	var units = wialon.core.Session.getInstance().getItems("avl_unit");		
	if (!units || !units.length)
		return;
	// populate table
	for(var i in units) {	
		var unit = units[i];
		addUnitRow(unit);		
		// if map available - add to map
		if(map)
			createUnitMarker(unit);
		// listen unit event
		addUnitListener(unit);
	}
	
	// center unit on map
	jQuery("a.row-name").click(function(e) {
		var id = e.currentTarget.id.substr(10);		
		goToMarker(id);
	});
}

/**
* Add listener to the current unit
* @param unit {Object} wialon unit object
*/
function addUnitListener(unit) {
	if(typeof listeners[unit.getId()] == "undefined") {
		// change name
		unit.addListener("changeName", redrawUnit, this);			
		// change position
		unit.addListener("changePosition", redrawUnit, this);
		// change last message
		unit.addListener("changeLastMessage", redrawUnit, this);	
		listeners[unit.getId()] = true;	
	}
}

/**
* Create marker and add it to the markers array
* @param unit {Object} wialon unit object
*/
function createUnitMarker(unit) {
	if (map && unit && unit.getPosition()) {
		var markersLayer = map.getLayer(layerId);		
		var iconSize =  new OpenLayers.Size(32,32);
		var iconOffset = new OpenLayers.Pixel(-(iconSize.w/2), -(iconSize.h/2));
		var pos = new OpenLayers.LonLat(unit.getPosition().x, unit.getPosition().y).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		if (!pos)
			return;
		var marker = new OpenLayers.Marker(pos, new OpenLayers.Icon(unit.getIconUrl(), iconSize, iconOffset));
		markersLayer.addMarker(marker);
		markersArray[unit.getId()] = marker;
	}
}

/**
* Pan map to current unit
* @param id {Number} id of wialon unit
*/
function goToMarker(id) {	
	var unit = wialon.core.Session.getInstance().getItem(id);
	if (!unit)
	  return;
	if (map && unit.getPosition()) {
	  var pos = new OpenLayers.LonLat(unit.getPosition().x,unit.getPosition().y).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
	  if (pos)
		map.panTo(pos);     
	}
}

/**
* Move marker to new coordinates, in fact destroy old marker and draw new one
* @param unit {Object} wialon unit object
*/
function moveMarker(unit) {		
	if (map && unit.getPosition()) {
		map.getLayer(layerId).removeMarker(markersArray[unit.getId()]);
		markersArray[unit.getId()].destroy();
		createUnitMarker(unit);		
	}
}

/**
* Redraw unit info
* @param e {Object} changeName, changePosition or changeLastMessage event
*/
function redrawUnit(e) {
	var unit = e.getTarget();	
	var type = e.getType();
	if (type == "changeName") {		
		jQuery("#unit_name_" + unit.getId()).html(unit.getName());
	} else if (type == "changePosition") {		
		jQuery("#unit_speed_" + unit.getId()).html(unit.getPosition().s);
		moveMarker(unit);
	} else if (type == "changeLastMessage") {		
		var tm = unit.getLastMessage().t;
		jQuery("#unit_time_" + unit.getId()).html(wialon.util.DateTime.formatDate(tm) + "  " + wialon.util.DateTime.formatTime(tm,2));
	}
}

/**
* Add row to the table of units 
* @param unit {Object} wialon unit object
*/
function addUnitRow(unit) {
	if (!unit)
		return;
	var lastMessage = unit.getLastMessage();
	var tm = "";
	if(lastMessage)
		tm = lastMessage.t;
	var speed = "-";
	if(unit.getPosition())
		speed = unit.getPosition().s + " km/h";
	var id = unit.getId();
	var html = "<tr>"
		+ "<td><img src='" + unit.getIconUrl() + "'/></td>"
		+ "<td><a href='#' class='row-name' id='unit_name_"+ id +"'>" + unit.getName() + "</a></td>"	
		+ "<td id='unit_time_" + id + "'>" + wialon.util.DateTime.formatDate(tm) + "  " + wialon.util.DateTime.formatTime(tm,2) + "</td>"	
		+ "<td id='unit_speed_" + id + "'>" + speed + "</td>"	
		+ "</tr>";
	jQuery("#units_tbl").append(html);
}


/**
* Initialize
*/ 
jQuery(document).ready(function() {	
	// array for map markers
	markersArray = [];	
	// array for event listeners indicators
	listeners = [];
	// map
	map = null;	
	
	// init Wialon SDK 
	var isInit = wialon.core.Session.getInstance().initSession(WIALON_SDK_URL, "");
					
	if (isInit) {					
		jQuery("#login_dlg").show();
		jQuery("#login").focus();
	
		// bind an event handler to "Enter" button
		jQuery("#btn_enter").click(function() {
			var user = jQuery("#login").val();
			if (typeof user == "undefined" || user == "") {
				alert("Invalid user name");
				return;
			  }  
			var pass = jQuery("#password").val();
			if(typeof pass == "undefined")
				pass = "";
			// login to wialon
			login(user, pass, initEnv);
		});		
		
		// bind an event handler to "Demo" link
		jQuery("#demo_lnk").click(function() {
			if (DEMO_LOGIN == "")
				return;
			// demo login to wialon
			login(DEMO_LOGIN, DEMO_PASSW, initEnv);
		});	
		
		jQuery("#login_dlg").keydown(function (e) {
			if(e.which == 13) {
				if(document.activeElement.id=="login" || document.activeElement.id=="password")
					jQuery("#btn_enter").click();
			}
		});	
		
		jQuery("#exit_lnk").click(function() {
			wialon.core.Session.getInstance().logout(qx.lang.Function.bind(function(code) {
				jQuery("#login_dlg").show();				
				jQuery("#units_tbl").empty();
			}, this));
		});		
	}
	else {
		alert("session has not been initialized");
	}
});