sd-spreadsheet/www/js/routes.js

var tables = [];
var table_updates = [];
var editors = [];
var rows = {};


function initializeRoutes()
{
	router('/login',		routes['login']);
	router('/logout',		routes['logout']);
	router('/sd',			routes['sd']);
	
	router('/',				routes['login']);
	router('*',				routes['login']);
}


//add a 'firstLoad' setup function into the route's middleware chain


var routes =
{
	login: function()
	{
		showPage('login');
	},
	
	logout: function()
	{
		$.post('api/logout.php');

		router('/');
	},
	
	sd: function()
	{
		showPage('sd');
		
		loadAllData();
	}
};

function showPage(page)
{
	console.log('show page', page);
	
	var $page_old = $('.screen.active');
	var $page_new = $('#screen-' + page);
	
	//do nothing if we are already on the page
	if($page_old.is($page_new))
		return;
	
	$('body').attr('class', 'screen-' + page);
	
	
	//put new page on top of old
	$page_new.insertAfter('.screen.active');

	//slide it to the right while crossfading
	$page_old
		.one('animationend', function(event) //jshint ignore:line, unused
		{
			$(this).hide();
		}) //TODO: add detect webkitanimationend or animationend
		.removeClass('active');

	//slide from left while crossfading
	$page_new
		.show()
		.off('animationend')
		.addClass('active')
		.focus();  //this needs to be used in conjunction with a "tabindex" field on the html object to maintain keyboard focus
}


function loadAllData()
{
	$.post('api/getRows.php', 'json')
	.done(function(companies)
	{
		//go through each company and add a tab if one isn't present
		
		if(!companies.length)
			return;
		
		for(var c = 0; c < companies.length; c++)
		{
			var company = companies[c];
			var id_company = company['id_company'];
			
			
			if(company['file_rows'])
				for(var r = 0; r < company['file_rows'].length; r++)
				{
					var id_file_row = company['file_rows'][r]['id_file_row'];
					rows[id_file_row] = company['file_rows'][r];
				}
			

			//if the company's tab doesn't exist, create it
			if(!tables[id_company])
			{
				//add tab
				$('<li><a data-toggle="tab" href="#table-' + id_company + '-container">' + company['name'] + '</a></li>')
					.data('id_company', id_company)
					.appendTo('#screen-sd ul.nav-tabs');
				
				//add table
				$('<div id="table-' + id_company + '-container" class="tab-pane fade in">'
					+ '<table id="table-' + id_company + '" class="table table-striped editable" width="100%"></table>'
					+ '<table id="table-updates-' + id_company + '" class="table table-striped editable" width="100%"></table>'
				+ '</div>')
				.appendTo('#screen-sd .tab-content');

				//create the datatable
				tables[id_company] = createTable(id_company, '#screen-sd #table-' + id_company);
				table_updates[id_company] = createUpdatesTable(id_company, '#screen-sd #table-updates-' + id_company);
			}
			else
			{
				tables[id_company].clear();
			}
			
			//load the data into the data
			tables[id_company].rows.add(company['file_rows']).draw();
			
			table_updates[id_company].rows.add(company['row_updates']).draw();
		}
		
		if($('#screen-sd ul.nav-tabs > li.active').length === 0)
			$('#screen-sd ul.nav-tabs > li:eq(0) a').click();
	})
	.fail(function(err, xhr, text)
	{
		console.error(err['responseText']);
	});
}

function loadCompanies()
{
	$.post('api/getCompanies.php')
	.done(function(response)
	{
		
	})
	.fail(function(err, xhr, text)
	{
		console.error(err.responseText);
	});
}

function createTable(id_company, table_dom)
{
	var table = $(table_dom).DataTable(
	{
		'data': [],
		'order': [[0, 'row_number']],
		'columns':
		[
			{ 'title': 'Division', 'data': 'division', 'defaultContent': '', 'className': 'division' },
			{ 'title': 'Consignee', 'data': 'consignee', 'defaultContent': '', 'className': 'consignee' },
			{ 'title': 'Called&nbsp;In', 'data': 'date_called_in', 'defaultContent': '', 'className': 'date_called_in' },
			{ 'title': 'Dispatch&nbsp;#', 'data': 'dispatch_number', 'defaultContent': '', 'className': 'dispatch_number' },
			{ 'title': 'Shipper', 'data': 'shipper', 'defaultContent': '', 'className': 'shipper' },
			{ 'title': 'Ready', 'data': 'date_ready', 'defaultContent': '', 'className': 'date_ready' },

			{ 'title': 'Address&nbsp;1', 'data': 'address_1', 'address_1': '', 'className': 'address_1' },
			{ 'title': 'Address&nbsp;2', 'data': 'address_2', 'address_2': '', 'className': 'address_2' },
			{ 'title': 'City', 'data': 'city', 'defaultContent': '', 'className': 'city' },
			{ 'title': 'State', 'data': 'state', 'defaultContent': '', 'className': 'state' },
			{ 'title': 'Zip', 'data': 'zip', 'defaultContent': '', 'className': 'zip' },
			{ 'title': 'Phone', 'data': 'phone', 'defaultContent': '', 'className': 'phone' },
			
			{ 'title': 'Ready&nbsp;Time', 'data': 'time_ready', 'defaultContent': '', 'className': 'time_ready' },
			{ 'title': 'Close&nbsp;Time', 'data': 'time_close', 'defaultContent': '', 'className': 'time_close' },
			
			{ 'title': 'Dispatch&nbsp;Reference', 'data': 'dispatch_reference', 'defaultContent': '', 'className': 'dispatch_reference' },

			{ 'title': 'Ctns', 'data': 'ctns', 'defaultContent': '', 'className': 'ctns' },
			{ 'title': 'Weight', 'data': 'weight', 'defaultContent': '', 'className': 'weight' },
			{ 'title': 'Cube', 'data': 'cube', 'defaultContent': '', 'className': 'cube' },
			
			{ 'title': 'Pickup&nbsp;Time', 'data': 'time_pickup', 'defaultContent': '&nbsp;', 'className': 'time_pickup' },
			{ 'title': 'Depart&nbsp;Time', 'data': 'time_depart', 'defaultContent': '&nbsp;', 'className': 'time_depart' },
			{ 'title': 'BOL&nbsp;Delivered', 'data': 'bol_delivered', 'defaultContent': '&nbsp;', 'className': 'bol_delivered' }
		],
		'language':
		{
			'search': '',
			'searchPlaceholder': "Search Active"
		},
		'deferRender': true,
		'lengthChange': false,
		'scrollX': true,
		'fixedColumns':
		{
			leftColumns: 0,
			rightColumns: 3
		}
	});
	
	
	var editor = new $.fn.dataTable.Editor(
	{
		idSrc: 'id_file_row',
		table: table_dom,
		fields: [
		{
			label: "Pickup Time:",
			name: "time_pickup",
			type: "datetime",
			format: 'MM/DD/YYYY hh:mm A'
		},
		{
			label: "Depart Time:",
			name: "time_depart",
			type: "datetime",
			format: 'MM/DD/YYYY hh:mm A'
		},
		{
			label: "BOL Delivered:",
			name: "bol_delivered",
			type: "datetime",
			format: 'MM/DD/YYYY hh:mm A'
		}],
		ajax: function(method, url, d, success, error)
		{
			if(d['action'] === 'edit')
			{
				//just get the first row
				var id_file_row;
					for(id_file_row in d['data']);
					
				var row_partial = d['data'][id_file_row];
				
				//go thru all the properties on the object
				for(var property in row_partial)
				{
					var value = row_partial[property];
					
					//update our master record
					rows[id_file_row][property] = value;
				}

				
				//send the update up to the server thru api
				$.post('api/CreateRowUpdate.php?id_file_row=' + id_file_row, row_partial)
					.done(function(response)
					{
						console.log(response);
						
						//report to the datatable a full updated row
						success({ "data": [ rows[id_file_row] ] });
					})
					.fail(function(err, xhr, text)
					{
						console.log(err['responseText'])
						
						//TODO: handle error
					});
			}
		}
	});
	
	
	
	//attach the editor
	$(table_dom).on('click', 'td.time_pickup', function(e) {
		editor.bubble(this, 'time_pickup');
	});

	$(table_dom).on('click', 'td.time_depart', function(e) {
		editor.bubble(this, 'time_depart');
	});

	$(table_dom).on('click', 'td.bol_delivered', function(e) {
		editor.bubble(this, 'bol_delivered');
	});
	
	/*
	$(table_dom).on('click', 'td.time_pickup, td.time_depart, td.bol_delivered', function(e) {
		editor.bubble(this, [ 'time_pickup', 'time_depart', 'bol_delivered' ]);
	});
	*/
	
	return table;
}


function createUpdatesTable(id_company, table_dom)
{
	var table = $(table_dom).DataTable(
	{
		'data': [],
		'order': [[0, 'date_modified']],
		'columns':
		[
			{ 'title': 'Date', 'data': 'date_modified', 'defaultContent': '&nbsp;', 'className': 'date_modified' },
			{ 'title': 'User', 'data': 'user_name', 'defaultContent': '&nbsp;', 'className': 'user_name' },
			
			{ 'title': 'Pickup&nbsp;Time', 'data': 'time_pickup', 'defaultContent': '&nbsp;', 'className': 'time_pickup' },
			{ 'title': 'Depart&nbsp;Time', 'data': 'time_depart', 'defaultContent': '&nbsp;', 'className': 'time_depart' },
			{ 'title': 'BOL&nbsp;Delivered', 'data': 'bol_delivered', 'defaultContent': '&nbsp;', 'className': 'bol_delivered' }
		],
		'language':
		{
			'search': '',
			'searchPlaceholder': "Search Updates"
		},
		'deferRender': true,
		'lengthChange': false
	});
	
	return table;
}