view.js

/**
 * View is responsible for UI manipulation, Templates, UI events handling, etc
 *
 * @class view
 */
app.view = {

	/**
	 It initializes UI by activating JqueryUI components and binds EventHandlers
	 @method initialize
	 **/
	initialize: function () {
		this.bindTitleTabsUi();
		$("#serverList").selectable();
		this.bindServerListUi();
		$("#floorPlanList").selectable();
		this.bindFloorPlanListUi();
		$("#titleTabs").tabs();
		$("#servers").tabs();
		$("#databases").tabs();
		$("#collections").tabs();
		$("#floorPlans").tabs();
		$("#channelMenu").menu();
		$("#accesspoints").tabs();
		$("#floorInfoTabs").tabs();
		$("#graphInfoTabs").tabs();
		$("#accordion").accordion({
			collapsible: true,
			active: 0
		});
	},

	/**
	 It binds EventHandlers with Callback to Tabs in title.
	 @method bindTitleTabsUi
	 **/
	bindTitleTabsUi: function () {
		$("#titleTabs").on("tabsactivate", function (event, ui) {
			if (ui.newTab.context.hash == '#docTab' || ui.newTab.context.hash == '#infoTab'
				|| ui.newTab.context.hash == '#plotTab' || ui.newTab.context.hash == '#statTab') {
				$("#accordion").hide()
			} else {
				$("#accordion").show()
			}
		});
	},

	/**
	 It binds EventHandlers with Callback to the list of servers
	 @method bindServerListUi
	 **/
	bindServerListUi: function () {
		$("#serverList").on("selectableselected", function (event, ui) {
			app.eventBus.publish("server:selected", ui.selected.id)
		});
	},

	/**
	 It binds EventHandlers with Callback to the list of FloorPlans
	 @method bindFloorPlanListUi
	 **/
	bindFloorPlanListUi: function () {
		$("#floorPlanList").on("selectableselected", function (event, ui) {
			app.selectedFloorPlan = ui.selected.id;
			app.eventBus.publish("floorPlan:selected")
		});
	},

	/**
	 It shows the loader when data is being retrieved
	 @method showLoader
	 **/
	showLoader: function () {
		$('#loader').show()
	},

	/**
	 It hides the loader after data is retrieved
	 @method hideLoader
	 **/
	hideLoader: function () {
		$('#loader').hide()
	},

	/**
	 It dynamically creates a database list and activates as JqueryUI Selectable List
	 @method createDatabaseListUi
	 **/
	createDatabaseListUi: function () {
		var template = '<ol id="databaseList" class="selectableList"></ol>';
		$('#database-1').append(template);
		$("#databaseList").selectable();
	},

	/**
	 It clears the database list
	 @method clearDatabaseList
	 **/
	clearDatabaseList: function () {
		$("#database-1").empty()
	},

	/**
	 It adds templates to the list items and add them to the database list and binds EventHandlers with Callback
	 @method updateDatabaseListUi
	 @param {Array} databaseList The list of databases
	 **/
	updateDatabaseListUi: function (data) {
		$.each(data, function (key, val) {
			var template = '<li class="ui-widget-content" href=' + val + '>' + key + '</li>';
			$("#databaseList").append(template)
		})
		$("#databaseList").on("selectableselected", function (event, ui) {
			app.view.resetFloorPlanList();
			app.selectedDatabase = {
				name: $(ui.selected).text(),
				uri: ui.selected.getAttribute('href')
			}
			app.eventBus.publish("database:selected", ui.selected.getAttribute('href'))
		})
	},

	/**
	 It clears the collection list
	 @method clearCollectionList
	 **/
	clearCollectionList: function () {
		$("#collection-1").empty()
	},

	/**
	 It dynamically creates a collection list and activates as JqueryUI Selectable List
	 @method createCollectionListUi
	 **/
	createCollectionListUi: function () {
		var template = '<ol id="collectionList" class="selectableList"></ol>';
		$('#collection-1').append(template);
		$("#collectionList").selectable();
	},

	/**
	 It adds templates to the list items and add them to the collection list and binds EventHandlers with Callback
	 @method updateCollectionListUi
	 @param {Array} collectionList The list of collections
	 **/
	updateCollectionListUi: function (data) {
		$.each(data, function (key, val) {
			var template = '<li class="ui-widget-content" href=' + val.uri + '>' + val.collection + '</li>';
			$('#collectionList').append(template)
		})
		$("#collectionList").on("selectableselected", function (event, ui) {
			app.view.resetFloorPlanList();
			app.selectedCollection = {
				name: $(ui.selected).text(),
				uri: ui.selected.getAttribute('href')
			}
			app.eventBus.publish("collection:selected", ui.selected.getAttribute('href'))
		})
	},

	/**
	 It clears the floor
	 @method clearFloor
	 **/
	clearFloor: function () {
		$("#floor").empty()
	},

	/**
	 It dynamically creates a nodes list and activates as JqueryUI Selectable List
	 @method createNodeList
	 **/
	createNodeList: function () {
		var template = '<ol id="pointsList" class="selectablePoints"></ol>';
		$('#floor').append(template)
		$("#pointsList").selectable();
	},

	/**
	 It shows the floor plan Tab
	 @method showFloorPanel
	 **/
	showFloorPanel: function () {
		$("#accordion").accordion({
			active: 1
		})
	},

	/**
	 It creates the floorPlan container
	 @method createFloorPlan
	 **/
	createFloorPlan: function () {
		$('#floor').removeClass();
		$('#floor').addClass(app.selectedFloorPlan);
	},

	/**
	 It resets the selected node on FloorPlan
	 @method resetFloorPlanList
	 **/
	resetFloorPlanList: function () {
		$('#floorPlanList').find('.ui-selected').removeClass("ui-selected")
	},

	/**
	 It adds templates to the list items and add them to the nodes list and binds EventHandlers with Callback
	 @method updateNodeUi
	 @param {Array} filteredRawDataByFloor The RawData of the selected FloorPlan
	 **/
	updateNodeUi: function (data) {
		app.view.createFloorPlan();
		app.view.clearFloor();
		app.view.clearChannelMenu();
		app.view.clearAccesspointList();
		app.view.createNodeList();

		app.nodeList = [];
		$.each(data, function (key, val) {
			var node = val.receiver_location;
			node.data_id = val.data_id;
			app.nodeList.push(node);

			var template = '<li class="ui-widget-content node" id=node' + val.data_id + '/>';
			$('#pointsList').append(template);

			var nodeId = '#node' + val.data_id;
			$(nodeId).css('left', val.receiver_location.coordinate_x_translated + 'px');
			$(nodeId).css('top', val.receiver_location.coordinate_y_translated + 'px');
		});

		$("#pointsList").on("selectableselected", function (event, ui) {
			app.view.clearAccesspointList();
			var nodeId = ui.selected.id.substr(4);
			app.eventBus.publish("node:selected", nodeId)
		})
	},

	/**
	 It activates the Channel Menu under accesspoints tab
	 @method activateChannelMenu
	 **/
	activateChannelMenu: function () {
		$("#channelMenu").menu("refresh");
		$("#channelMenu").show();
	},

	/**
	 It clears the Channel menu
	 @method clearChannelMenu
	 **/
	clearChannelMenu: function () {
		$("#channelMenu").hide();
		$("#channelList").empty()
	},

	/**
	 It adds templates to the list items and add them to the channels list and binds EventHandlers with Callback
	 @method updateChannelList
	 @param {Array} channelList The list of channel numbers of selected node
	 **/
	updateChannelList: function (data) {
		app.view.clearChannelMenu()

		$.each(data, function (key, val) {
			var template = '<li id=channel' + val + '>' + '<a>' + val + '</a>' + '</li>';
			$('#channelList').append(template)
		})

		app.view.activateChannelMenu();

		$("#channelMenu").on("menuselect", function (event, ui) {
			var channel = ui.item.context.id.substr(7);
			app.eventBus.publish("channel:selected", channel);
		})
	},

	/**
	 It clears the accesspoints list
	 @method clearAccesspointList
	 **/
	clearAccesspointList: function () {
		$("#accesspoint-1").empty()
	},

	/**
	 It dynamically creates a accesspoints list and activates as JqueryUI Selectable List
	 @method createAccesspointListUi
	 **/
	createAccesspointListUi: function () {
		var template = '<ol id="accesspointList" class="selectableList"></ol>';
		$('#accesspoint-1').append(template);
		$("#accesspointList").selectable();
	},

	/**
	 It adds templates to the list items and add them to the accesspoints list and binds EventHandlers with Callback
	 @method updateAccessPointUi
	 @param {Array} groupedSsidData The grouped RSSI data of selected node
	 **/
	updateAccessPointUi: function (data) {
		app.view.clearAccesspointList();
		app.view.createAccesspointListUi();

		$.each(data, function (key, val) {
			var template = '<li class="ui-widget-content" value=' + val.ssid + '>' + val.ssid + '</li>';
			$('#accesspointList').append(template)
		})

		$("#accesspointList").on("selectableselected", function (event, ui) {
			var ssid = ui.selected.getAttribute("value");
			app.eventBus.publish("accessPoint:selected", ssid)
		})

	},

	/**
	 It updates the information related to the selected node of the selected experiment
	 @method updateFloorInfo
	 **/
	updateFloorInfo: function (data) {
		if (_.isEmpty(data)) {
			app.view.updateFloorInfoUi({scan: 0, latency: 0})
		} else {
			if ('latency' in data) {
				app.view.updateFloorInfoUi({scan: data.raw_measurement.length, latency: data.latency})
			} else {
				app.view.updateFloorInfoUi({scan: data.raw_measurement.length, latency: 'Unknown'})
			}
		}

	},

	/**
	 It updates the information related to the selected node of the selected experiment
	 @method updateFloorInfoUi
	 **/
	updateFloorInfoUi: function (data) {
		$('#floorInfoTab-1').empty()
		$('#floorInfoTab-1').append("<b>Number of Measurement Points : </b>" + app.nodeList.length);
		$('#floorInfoTab-1').append("<br>")
		$('#floorInfoTab-1').append("<b>Number of RSSIs measured at the selected Point: </b>" + data.scan);
		$('#floorInfoTab-1').append("<br>")
		$('#floorInfoTab-1').append("<b>Latency measured at the selected Point: </b>" + data.latency);
	},

	/**
	 It shows the graph panel Tab
	 @method showGraphPanel
	 **/
	showGraphPanel: function () {
		$("#accordion").accordion({
			active: 2
		})
	},

	/**
	 It clears the graph panel
	 @method clearGraph
	 **/
	clearGraph: function () {
		$("#graph").empty()
	},

	/**
	 It updates the information related to graph of the selected experiment
	 @method updateGraphInfoUi
	 @param {Object} selectedNodeData.location The Location data of the selected node
	 **/
	updateGraphInfoUi: function (data) {
		var stat = app.utils.statisticsCalculator(app.graphData)
		$('#graphInfoTab-1').empty()
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>SSID : </b>" + app.selectedSsidData.data[0].sender_id);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>BSSID : </b>" + app.selectedSsidData.data[0].sender_bssid);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Total Number of measurements: </b>" + app.selectedSsidData.data.length);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Data ID : </b>" + data.data_id);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Room Label : </b>" + data.room_label);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Coordinate X : </b>" + data.coordinate_x);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Coordinate Y : </b>" + data.coordinate_y);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b>Coordinate Z : </b>" + data.coordinate_z);
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Minimum : </b>" + d3.min(app.graphData));
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Maximum : </b>" + d3.max(app.graphData));
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Mean : </b>" + d3.round(d3.mean(app.graphData), 2));
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Median : </b>" + d3.median(app.graphData));
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Variance : </b>" + d3.round(stat.variance, 2));
		$('#graphInfoTab-1').append("<br>");
		$('#graphInfoTab-1').append("<b> Deviation : </b>" + d3.round(stat.deviation, 2))
	},

	/**
	 It updates the information related to the selected experiment
	 @method updateMetadataUi
	 @param {Object} metadata The metadata of the selected experiment
	 **/
	updateMetadataUi: function (data) {
		$('#description').empty();
		$.each(data.scenario, function (key, val) {
			var heading = '<h3>' + key + '</h3>';
			var text = '<p>' + val + '</p>';
			var template = '<li class="ui-widget-content" >' + heading + text + '</li>';
			$('#description').append(template)
		})
	},

	updatePlotData: function () {
		$('#plotTab').empty();
		var template = 'exp = "' + app.plotData.experiment.substring(12) + '";' + '<br>'
			+ "x = [" + app.plotData.x_axis.join(',') + "];" + '<br>'
			+ "y = [" + app.plotData.y_axis.join(',') + "];" + '<br>'
			+ "z = [" + app.plotData.mean.join(',') + "];" + '<br>'
			+ "variance = [" + app.plotData.variance.join(',') + "];" + '<br>';
		$('#plotTab').append(template);

		var rssi = 1;
		$.each(app.plotData.rssi, function (key, val) {
			template = "rssi" + rssi + " = [" + val.join(',') + "];" + '<br>';
			$('#plotTab').append(template);
			rssi++;
		});

		template = "x = x';" + '<br>' + "y = y';" + '<br>' + "z = z';" + '<br>' + "k = mean(z);" + '<br>' + "k = k*-1;" + '<br>'
		+ "[xx,yy] = meshgrid (linspace (0,30,200));" + '<br>'
		+ "griddata (x,y,z,xx,yy);" + '<br>'
		+ "xlim([0 32]);" + '<br>'
		+ "ylim([0 12]);" + '<br>'
		+ "view([0 90]);" + '<br>'
		+ "title (exp);" + '<br>'
		+ "xlabel('x co-ordinate distance in meters');" + '<br>'
		+ "ylabel('y co-ordinate distance in meters');" + '<br>'
		+ "zlabel('mean of RSSI values in dBm');" + '<br>' + '<br>'
		+ "%clf();" + '<br>'
		+ "%boxplot ({rssi1,rssi2,rssi3,rssi4,rssi5,rssi6,rssi7,rssi8,rssi9,rssi10,rssi11,rssi12,rssi13,rssi14,rssi15,rssi16,rssi17,rssi18,rssi19,rssi20});" + '<br>'
		+ "%hold on" + '<br>'
		+ "%line([0:21], k, 'color', 'green');" + '<br>'
		+ "%hold off" + '<br>'
		+ "%title (exp);" + '<br>'
		+ "%ylabel('RSSI values in dBm');" + '<br>'
		+ "%xlabel('Measurement points');" + '<br>'
		+ "%xlim([0,21]);" + '<br>'
		+ '%set(gca, "XTick", [1:20]);' + '<br>' + '<br>' + '<br>' + '<br>';

		$('#plotTab').append(template);
	},
	updatePlotDataRepeat: function () {
//        $('#plotTab').empty()
		$('#plotTab').append(JSON.stringify(app.plotData.repeat))
	}

}