databap/masks/table.html

<div id="table">
	<div id="table_container">
		<form id="table_info">
			<div id="table_meta" class="step_box form_success round">
				<p class="step_box_title">
					<span class="edit">Table</span>
					<span class="read"><span id="read_system"></span>| <span id="read_title"></span> - <span id="read_description"></span></span></p>
				<select id="system" name="system" class="edit inc_border round">
					<option value="TOUS">Tous</option>
					<option value="BW" selected="selected">BW</option>
					<option value="ECC">ECC</option>
				</select>
				<input type="text" name="title" id="title" class="edit inc_border round" maxlength="200" value="" />
				<input type="text" name="description" id="description" class="edit inc_border round" maxlength="500" value="" />
				<input type="hidden" name="id" id="id" value="" />
				<p class="read table_info"><i class="fa fa-c-desc fa-inline fa-30"></i>Dernière modification par <span id="read_name"></span> le <span id="read_date"></span></p>
			</div>
			<div id="table_main" class="step_box form_success round">
				<p class="step_box_title"><!-- <a href="http://fr.wikipedia.org/wiki/Le_Monde_de_monsieur_Fred" target="_blank"> --><span title="Helmut Perchut">&quot;J'ai explication !&quot;</span><!-- </a> --></p>
				<textarea name="keywords" id="keywords" class="edit inc_border round"></textarea>
				<p class="read" id="read_formatted_keywords"></p>
			</div>
			<div id="validation" class="form_success"></div>
		</form>
	</div>
</div>
<script type="text/javascript">
databap.pageInit = function()
{
	//Scroll bar
	self.initScrollBar('#main', '#table', '#table_container');
	
	//Table object
	oTable = new Table(self.vars.id);
	
	//Init's end
	databap.setInitEnd(true);
};

databap.onResize = function()
{
	self.setScrollBarSize('maximize');
	//self.maximizeElem($('#keywords'), false, $('#table'));
};

function Table(oTable)
{
	
	this.DISPLAY_EDIT = 'edit';
	this.DISPLAY_READ = 'read';
	this.DISPLAY_ERROR = 'error'
	this.ACTION_BTN_ID = 'table_button';
	this.SUCCESS_CLASS = 'form_success';
	this.ERROR_CLASS = 'form_error';
	
	this.sDisplay = '';
	this.oTable = oTable;
	this.iTableId = ($.type(oTable)=='number')?oTable:0;
	this.sTableName = ($.type(oTable)=='string')?oTable:'';
	this.sFeedBackBoxId = '#validation';
	tableself = this;
	
	$('#title').addDefaultValue('Nom de la table');
	$('#description').addDefaultValue('Description');
	$('#validation').addButton('dummy', '', function(){}, this.ACTION_BTN_ID, '', this.ACTION_BTN_ID);
	this.$Button = databap.tmp(this.ACTION_BTN_ID);
	
	if(this.iTableId>0 || this.sTableName!='') this.applyTableInfo();
	else this.setDisplay(this.DISPLAY_EDIT);
}

Table.prototype.applyTableInfo = function()
{
	databap.getInfo
	(
		'get_table', 
		function(asData)
		{
			if(asData.result == databap.consts.error)
			{
				if(asData.desc == databap.consts.errors.not_found)
				{
					databap.addErrorBefore('Table '+tableself.oTable+' introuvable', tableself.sFeedBackBoxId);
					if(tableself.sTableName!='')
					{
						tableself.setDisplay(tableself.DISPLAY_EDIT);
						$('#title').val(tableself.sTableName).focus();
						databap.addSuccessBefore('Mais vous pouvez la créer !', tableself.sFeedBackBoxId);
					}
				}
				else
				{
					tableself.setDisplay(tableself.DISPLAY_ERROR);
					databap.addErrorBefore(asData.desc, tableself.sFeedBackBoxId);
				}
			}
			else
			{
				tableself.sTableName = asData.title;
				$.each(asData, function(sKey, sValue)
				{
					if(sKey=='warning' && sValue!='') databap.addWarningBefore(sValue, tableself.sFeedBackBoxId);
					//debug('key='+sKey+', value='+sValue);
					$('#read_'+sKey).html(sValue.replace(/(?:\r\n|\r|\n)/g, '<br />'));
					$('#'+sKey).val(sValue);
				});
				tableself.setDisplay(tableself.DISPLAY_READ);
				databap.updateScrollBar();
			}
		}, 
		{id:this.oTable},
		'json',
		function(){debug('Error: Unknown error thrown');},
		true
	);
};

Table.prototype.setDisplay = function(sDisplay)
{
	var sOtherDisplay = '';
	var bRedit = (this.sDisplay!='');  //Edit existing table
	this.sDisplay = sDisplay || (this.sDisplay==this.DISPLAY_EDIT?this.DISPLAY_READ:this.DISPLAY_EDIT);
	
	var bSuccess = true;
	switch(this.sDisplay)
	{
		case this.DISPLAY_READ:
			sOtherDisplay = this.DISPLAY_EDIT;
			this.$Button.modifyButton({'type':'edit', 'title':'Modifier', 'action':function(){tableself.setDisplay(sOtherDisplay)}});
			break;
		case this.DISPLAY_EDIT:
			sOtherDisplay = this.DISPLAY_READ;
			this.$Button.modifyButton({'type':'ok', 'title':'Valider', 'action':tableself.save});
			if(bRedit) $('#title').prop('disabled', true).add('#description').focus().blur();
			break;
		case this.DISPLAY_ERROR:
			bSuccess = false;
			sOtherDisplay = 'dummy';
			break;
	}
	$('.'+sOtherDisplay).add('.'+(bSuccess?this.ERROR_CLASS:this.SUCCESS_CLASS)).hide();
	$('.'+this.sDisplay).add('.'+(bSuccess?this.SUCCESS_CLASS:this.ERROR_CLASS)).show();
	databap.updateScrollBar();
};

Table.prototype.save = function()
{
	var $Form = $('#table_info');
	if($Form.checkForm())
	{
		databap.saveForm
		(
			'add_table', 
			$Form, 
			function(asData)
			{
				if(asData.result == databap.consts.success)
				{
					databap.goToInternalLink('table', asData.name.toUpperCase());
					//tableself.iTableId = asData.name;
					//tableself.applyTableInfo();
				}
				else databap.addErrorBefore(asData.desc, tableself.sFeedBackBoxId);
			},
			true,
			'json'
		);
	}
	else databap.addWarningBefore('Formulaire incomplet', this.sFeedBackBoxId);
};

</script>