SSDM-344 : New Free Form Table structure (ongoing work).

SVN: 32223

plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/util/FormUtil.js

@@ -146,6 +146,20 @@ var FormUtil = new function() {
 		return $pinBtn;
 	}
 	
+	this.getButtonWithImage = function(src, clickEvent) {
+		var $pinBtn = $("<a>", { 'class' : 'btn btn-default' });
+		$pinBtn.append($("<img>", { 'src' : src, 'style' : 'width:16px; height:16px;'}));
+		$pinBtn.click(clickEvent);
+		return $pinBtn;
+	}
+	
+	this.getButtonWithText = function(text, clickEvent) {
+		var $pinBtn = $("<a>", { 'class' : 'btn btn-default' });
+		$pinBtn.append(text);
+		$pinBtn.click(clickEvent);
+		return $pinBtn;
+	}
+	
 	this.getHierarchyButton = function(permId) {
 		var $hierarchyButton = $("<a>", { 'class' : 'btn btn-default'} )
 									.append($('<img>', { 'src' : './img/hierarchy-icon.png', 'style' : 'width:16px; height:17px;' }));
@@ -154,6 +168,7 @@ var FormUtil = new function() {
 		});
 		return $hierarchyButton;
 	}
+	
 	//
 	// Get Field with container to obtain a correct layout
 	//

plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleForm/widgets/FreeFormTableModel.js

@@ -22,8 +22,8 @@ function FreeFormTableModel(sample, isEnabled) {
 	
 	this.tables = [{
 		name : "Untitled",
-		modelDetailed : [1][1],
-		modelMini : { rows : [1], columns : [1] }
+		modelDetailed : [['1,1']],
+		modelMini : { rows : ['1'], columns : ['1'] }
 	}];
 	
 }
\ No newline at end of file

plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleForm/widgets/FreeFormTableView.js

@@ -17,14 +17,139 @@
 function FreeFormTableView(freeFormTableController, freeFormTableModel) {
 	this._dilutionTableController = freeFormTableController;
 	this._freeFormTableModel = freeFormTableModel;
+
+	this._getSwitchForTable = function(tableIdx) {
+		var $switch = $("<div>", {"class" : "switch-toggle well", "style" : "width:33%; margin-left: auto; margin-right: auto; min-height: 38px !important;"});
+		$switch.change(function(event) {
+			var isMini = $(this).children()[0].checked;
+			if(isMini) {
+				alert('Mini!');
+			} else {
+				alert('Detailed!');
+			}
+		});
+		
+		$switch
+			.append($("<input>", {"value" : "mini", "id" : "tableModeMini", "name" : "tableMode", "type" : "radio", "checked" : ""}))
+			.append($("<label>", {"for" : "tableModeMini", "onclick" : "", "style" : "padding-top:3px;"}).append("Mini"))
+			.append($("<input>", {"value" : "detailed", "id" : "tableModeDetailed","name" : "tableMode", "type" : "radio"}))
+			.append($("<label>", {"for" : "tableModeDetailed", "onclick" : "", "style" : "padding-top:3px;"}).append("Detailed"));
+		
+		$switch.append($("<a>", {"class" : "btn btn-primary"}));
+		return $switch;
+	}
+	
+	this._getMiniTable = function(modelMini) {
+		var $colsTitle = $("<h4>").append("Columns");
+		var $colsContainer = $("<div>");
+		for(var i = 0; i < modelMini.columns.length; i++) {
+			if(this._freeFormTableModel.isEnabled) {
+				var $textField = FormUtil._getInputField('text', null, "Column " + (i+1), null, false);
+				$textField.val(modelMini.columns[i]);
+				$colsContainer.append(FormUtil.getFieldForComponentWithLabel($textField, "Code"));
+			} else {
+				$colsContainer.append(FormUtil.getFieldForLabelWithText("Column " + (i+1), modelMini.columns[i]));
+			}
+		}
+		var $rowsTitle = $("<h4>").append("Rows");
+		var $rowsContainer = $("<div>");
+		for(var i = 0; i < modelMini.columns.length; i++) {
+			if(this._freeFormTableModel.isEnabled) {
+				var $textField = FormUtil._getInputField('text', null, "Row " + (i+1), null, false);
+				$textField.val(modelMini.rows[i]);
+				$rowsContainer.append(FormUtil.getFieldForComponentWithLabel($textField, "Code"));
+			} else {
+				$rowsContainer.append(FormUtil.getFieldForLabelWithText("Row " + (i+1), modelMini.rows[i]));
+			}
+		}
+		var $container = $("<div>")
+							.append($colsTitle)
+							.append($colsContainer)
+							.append($rowsTitle)
+							.append($rowsContainer);
+		
+		return $container;
+	}
+	
+	this._getDetailedTable = function(modelDetailed) {
+		var $table = $("<table>");
+		for(var i = 0; i < modelDetailed.length; i++) {
+			var $row = $("<tr>");
+			$table.append($row);
+			for(var j = 0; j < modelDetailed[i].length; j++) {
+				var $column = $("<td>");
+				$row.append($column);
+				
+				if(this._freeFormTableModel.isEnabled) {
+					var $textField = FormUtil._getInputField('text', null, "Pos (" + (i+1) + "," + (j+1) + ")", null, false);
+					$textField.val(modelDetailed[i][j]);
+					$column.append($textField);
+				} else {
+					$column.append(modelDetailed[i][j]);
+				}
+			}
+			
+		}
+		return $table;
+	}
 	
 	this.repaint = function($container) {
 		$container.empty();
 		for(var tableIdx = 0; tableIdx < this._freeFormTableModel.tables.length; tableIdx++) {
 			var tableData = this._freeFormTableModel.tables[tableIdx];
 			var $tableContainer = $("<div>");
+			$tableContainer.css({
+				//'background-color' : 'lightgrey',
+				'padding' : '10px'
+			});
+			
+			var $title = null;
+			
+			if(this._freeFormTableModel.isEnabled) {
+				$title = $("<input>", { 'type' : 'text', 'style' : 'width:250px;' });
+				$title.val(tableData.name);
+			} else {
+				$title = $("<h3>");
+				$title.append(tableData.name);
+			}
+			
+			var $switch = this._getSwitchForTable(tableIdx);
+			
+			var $toolBar = $("<span>", { 'style' : 'margin-left:150px;' });
+			
+			var $toolBarBtnTACL = FormUtil.getButtonWithImage('./img/table-add-column-left.png' ,null);
+			var $toolBarBtnTACR = FormUtil.getButtonWithImage('./img/table-add-column-right.png' ,null);
+			var $toolBarBtnTDC = FormUtil.getButtonWithImage('./img/table-delete-column.png' ,null);
+			
+			var $toolBarBtnTARA = FormUtil.getButtonWithImage('./img/table-add-row-above.png' ,null);
+			var $toolBarBtnTARB = FormUtil.getButtonWithImage('./img/table-add-row-below.png' ,null);
+			var $toolBarBtnTDR = FormUtil.getButtonWithImage('./img/table-delete-row.png' ,null);
+			
+			var $toolBarBtnAT = FormUtil.getButtonWithText('Add Table' ,null);
+			
+			if(this._freeFormTableModel.isEnabled) {
+				$toolBar
+					.append($toolBarBtnTACL).append(' ')
+					.append($toolBarBtnTACR).append(' ')
+					.append($toolBarBtnTDC).append(' ')
+					.append($toolBarBtnTARA).append(' ')
+					.append($toolBarBtnTARB).append(' ')
+					.append($toolBarBtnTDR).append(' ')
+					.append($toolBarBtnAT);
+			}
+			
+			var $titleAndToolbar = $("<div>")
+								.append($switch)
+								.append($title)
+								.append($toolBar);
+			
+			$tableContainer.append($titleAndToolbar);
+			//$tableContainer.append(this._getMiniTable(tableData.modelMini));
+			$tableContainer.append(this._getDetailedTable(tableData.modelDetailed));
 			
 			$container.append($tableContainer);
 		}
 	}
+	
+	
 }
\ No newline at end of file