final commit of mindmup editable table before switch to datatables

css/general.css

@@ -135,12 +135,16 @@ body.screen-login #nav
 #screen-sd table.editable
 {
 	background: #f4f4f4;
+	margin: 0;
 }
 
 .table-responsive 
 {   
     width: 100%;
-    margin-bottom: 15px;
+    
+	margin-top: 2em;
+	margin-bottom: 1em;
+	
     overflow-x: auto;   
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;

css/sd.css

@@ -1,50 +0,0 @@
-/* 
- * this CSS is not part of the widget, it is here just as an example of the demo page styling.... 
- * 
- * Don't copy this one, roll your own. One of the key things about the widget is that 
- * it allows you to do your own styling!
- *
- */
-td:focus {
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;	
-	outline: rgb(91, 157, 217) auto 5px;
-}
-input.error {
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;
-	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red;	
-	outline: thin auto red;
-}
-input {
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;	
-	outline: rgb(91, 157, 217) auto 5px;
-	outline-offset: 0px;
-	border: none;
-}
-#mainTable thead th, #mainTable tbody td { 
-  width: 25%;
-}
-#mainTable td + td, #mainTable th + th {
-	text-align: right;
-}
-table.scrollable thead tr, table.scrollable tfoot tr  {
-	position: relative;
-	display: block
-}
-
-html>body table.scrollable tbody {
-	display: block;
-	height: 330px;
-	overflow: auto;
-	width: 100%
-}
-
-html>body table.scrollable td, html>body table.scrollable th {
-	width: 200px
-}
-
-

html/screen/sd.html

@@ -1,78 +1,7 @@
 <div id="screen-sd" class="screen">
 	<div class="container">
 		<br/>
-		<ul class="nav nav-tabs">
-			<li class="active"><a data-toggle="tab" href="#table1">Dynamics</a></li>
-			<li><a data-toggle="tab" href="#table2">Tilly's</a></li>
-			<li><a data-toggle="tab" href="#table3">Sephoria</a></li>
-		</ul>
-
-		<div class="tab-content">
-			<div id="table1" class="tab-pane fade in active">
-				<div class="hero-unit">
-				<!--
-					<h1>Worksheet</h1>
-					<h4>live edit</h4>
-					-->
-					<br/>
-				
-					<div class="table-responsive">
-						<table class="table table-striped editable" style="cursor: pointer;">
-							<thead>
-								<tr>
-									<th>Division</th>
-									<th>Consignee</th>
-									<th>Called&nbsp;In</th>
-									<th>Dispatch&nbsp;#</th>
-									<th>Shipper</th>
-									<th>Ready</th>
-									<th>Address&nbsp;1</th>
-									<th>Address&nbsp;2</th>
-									<th>City</th>
-									<th>ST</th>
-									<th>Zip</th>
-									<th>Phone</th>
-									
-									<th>Ready&nbsp;Time</th>
-									<th>Close&nbsp;Time</th>
-									<th class="editable">Pickup&nbsp;Time</th>
-									<th class="editable">Depart&nbsp;Time</th>
-									<th class="editable">BOL&nbsp;Delivered</th>
-									
-									<th>Dispatch&nbsp;Refere</th>
-									
-									<th>Ctns</th>
-									<th>Weight</th>
-									<th>Cube</th>
-								</tr>
-							</thead>
-						
-							<tbody>
-							</tbody>
-						
-							<tfoot></tfoot>
-						</table>
-					</div>
-
-					<input style="position: absolute; display: none;">
-					
-					<!--
-					<div style="text-align: right">
-						<button type="submit" class="btn btn-primary">Save</button>
-					</div>
-					-->
-				</div>
-			</div>
-			
-			<div id="table2" class="tab-pane fade">
-				<h3>Menu 1</h3>
-				<p>Some content in menu 1.</p>
-			</div>
-			
-			<div id="table3" class="tab-pane fade">
-				<h3>Menu 2</h3>
-				<p>Some content in menu 2.</p>
-			</div>
-		</div>
+		<ul class="nav nav-tabs"></ul>
+		<div class="tab-content"></div>
 	</div>
 </div>

js/init.js

@@ -13,36 +13,27 @@ function loadApp()
 	//login and logout
 	$('form.form-signin').submit(login);
 	//$('#logout').click(logout);
-	
-	
-	$('table.editable').editableTableWidget();
-	
-	$('table.editable td').on('change', function(evt, newValue)
-	{
-		// do something with the new cell value 
-/*		if (....) { 
-			return false; // reject change
-		}
-*/
-	});
-	
-	loadData();
 }
 
 function login(e)
 {
 	e.preventDefault();
 	
-	router('/sd');
+	$.post('api/login.php',
+	{
+		'email': $('#email').val(),
+		'password': $('#password').val()
+	})
+	.done(function(response)
+	{
+		console.log(res);
+		
+		router('/sd');
+	})
+	.fail(function(err, xhr, text)
+	{
+		console.error(err.responseText);
+	});
 	
 	return false;
-}
-
-function loadData()
-{
-	
-}
-
-function addCompany(company)
-{
 }

js/routes.js

@@ -20,9 +20,18 @@ var routes =
 		showPage('login');
 	},
 	
+	logout: function()
+	{
+		$.post('api/logout.php');
+		
+		showPage('login');
+	},
+	
 	sd: function()
 	{
 		showPage('sd');
+		
+		loadAllData();
 	}
 };
 
@@ -57,4 +66,146 @@ function showPage(page)
 		.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/getAllData.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];
+			
+			//if the company's tab doesn't exist, create it
+			if($('#screen-sd ul.nav-tabs > li[data-id_company]').length === 0)
+			{
+				//add tab
+				$('<li><a data-toggle="tab" href="#tabletab-' + company['id_company'] + '">' + company['name'] + '</a></li>')
+					.appendTo('#screen-sd ul.nav-tabs');
+				
+				//add table
+				$('<div id="tabletab-' + company['id_company'] + '" class="tab-pane fade in">'
+					+ '<div class="table-responsive">'
+						+ '<table class="table table-striped editable">'
+							+ '<thead>'
+								+ '<tr>'
+									+ '<th>Division</th>'
+									+ '<th>Consignee</th>'
+									+ '<th>Called&nbsp;In</th>'
+									+ '<th>Dispatch&nbsp;#</th>'
+									+ '<th>Shipper</th>'
+									+ '<th>Ready</th>'
+									+ '<th>Address&nbsp;1</th>'
+									+ '<th>Address&nbsp;2</th>'
+									+ '<th>City</th>'
+									+ '<th>ST</th>'
+									+ '<th>Zip</th>'
+									+ '<th>Phone</th>'
+									
+									+ '<th>Ready&nbsp;Time</th>'
+									+ '<th>Close&nbsp;Time</th>'
+									+ '<th class="editable">Pickup&nbsp;Time</th>'
+									+ '<th class="editable">Depart&nbsp;Time</th>'
+									+ '<th class="editable">BOL&nbsp;Delivered</th>'
+									
+									+ '<th>Dispatch&nbsp;Refere</th>'
+									
+									+ '<th>Ctns</th>'
+									+ '<th>Weight</th>'
+									+ '<th>Cube</th>'
+								+ '</tr>'
+							+ '</thead>'
+						
+							+ '<tbody></tbody>'
+							//+ '<tfoot></tfoot>'
+						+ '</table>'
+					+ '</div>'
+				+ '</div>')
+				.appendTo('#screen-sd .tab-content');
+			}
+			
+			//empty table
+			var tbody = $('#screen-sd #tabletab-' + company['id_company'] + ' table > tbody');
+			tbody.empty();
+			
+			//add all data
+			var rows = company['file_rows'];
+			
+			console.log(tbody);
+			
+			for(var r = 0; r < rows.length; r++)
+			{
+				var row = rows[r];
+
+				$('<tr>'
+					+ '<td class="division">' + (row['division']||'') + '</td>'
+					+ '<td class="consignee">' + (row['consignee']||'') + '</td>'
+					+ '<td class="date_called_in">' + (row['date_called_in']||'') + '</td>'
+					+ '<td class="dispatch_number">' + (row['dispatch_number']||'') + '</td>'
+					+ '<td class="shipper">' + (row['shipper']||'') + '</td>'
+					+ '<td class="date_ready">' + (row['date_ready']||'') + '</td>'
+					+ '<td class="address_1">' + (row['address_1']||'') + '</td>'
+					+ '<td class="address_2">' + (row['address_2']||'') + '</td>'
+					+ '<td class="city">' + (row['city']||'') + '</td>'
+					+ '<td class="state">' + (row['state']||'') + '</td>'
+					+ '<td class="zip">' + (row['zip']||'') + '</td>'
+					+ '<td class="phone">' + (row['phone']||'') + '</td>'
+					+ '<td class="time_ready">' + (row['time_ready']||'') + '</td>'
+					+ '<td class="time_close">' + (row['time_close']||'') + '</td>'
+					
+					+ '<td class="time_pickup">' + (row['time_pickup']||'') + '</td>'
+					+ '<td class="time_depart">' + (row['time_depart']||'') + '</td>'
+					+ '<td class="bol_delivered">' + (row['bol_delivered']||'') + '</td>'
+					+ '<td class="dispatch_reference">' + (row['dispatch_reference']||'') + '</td>'
+					+ '<td class="ctns">' + (row['ctns']||'') + '</td>'
+					+ '<td class="weight">' + (row['weight']||'') + '</td>'
+					+ '<td class="cube">' + (row['cube']||'') + '</td>'
+				+ '</tr>')
+				.appendTo(tbody);
+			}
+		}
+		
+		if($('#screen-sd ul.nav-tabs > li.active').length === 0)
+			$('#screen-sd ul.nav-tabs > li:eq(0) a').click();
+		
+		
+		$('table.editable').editableTableWidget();
+		
+		$('table.editable td').off('change').on('change', function(evt, newValue)
+		{
+			// do something with the new cell value 
+	/*		if (....) { 
+				return false; // reject change
+			}
+	*/
+		});
+	})
+	.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 addCompany(company)
+{
 }