spot/masks/admin.html

<div id="admin">
	<h1>Projects</h1>
	<div id="projects">
		<table>
			<thead>
				<tr>
					<th>[#]lang:project_id[#]</th>
					<th>[#]lang:project[#]</th>
					<th>[#]lang:mode[#]</th>
					<th>[#]lang:code_name[#]</th>
					<th>[#]lang:start[#]</th>
					<th>[#]lang:end[#]</th>
					<th>[#]lang:time_zone[#]</th>
					<th>[#]lang:delete[#]</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div id="new"></div>
	</div>
	<h1>Feeds</h1>
	<div id="feeds">
		<table>
			<thead>
				<tr>
					<th>[#]lang:feed_id[#]</th>
					<th>[#]lang:ref_feed_id[#]</th>
					<th>[#]lang:spot_id[#]</th>
					<th>[#]lang:project_id[#]</th>
					<th>[#]lang:name[#]</th>
					<th>[#]lang:status[#]</th>
					<th>[#]lang:last_update[#]</th>
					<th>[#]lang:delete[#]</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<h1>Spots</h1>
	<div id="spots">
		<table>
			<thead>
				<tr>
					<th>[#]lang:spot_id[#]</th>
					<th>[#]lang:ref_spot_id[#]</th>
					<th>[#]lang:name[#]</th>
					<th>[#]lang:model[#]</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<div id="feedback" class="feedback"></div>
</div>
<script type="text/javascript">
oSpot.pageInit = function(asHash) {
	self.get('admin_get', setProjects);
	$('#new').addButton('new', 'New Project', 'new', createProject, 'main-btn');
};

oSpot.onFeedback = function(sType, sMsg, asContext) {
	delete asContext.a;
	delete asContext.t;
	sMsg += ' (';
	$.each(asContext, function(sKey, sElem) {
		sMsg += sKey+'='+sElem+' / ' ;
	});
	sMsg = sMsg.slice(0, -3)+')';
	$('#feedback').append($('<p>', {'class': sType}).text(sMsg));
};

function setProjects(asElemTypes) {
	var aoEvents = [{on:'change', callback:commit}, {on:'keyup', callback:waitAndCommit}];
	
	$.each(asElemTypes, function(sElemType, aoElems) {
		$.each(aoElems, function(iKey, oElem) {
			var sElemId = sElemType+'_'+oElem.id;
			var bNew = ($('#'+sElemId).length == 0);
						
			var $Elem = (bNew?$('<tr>', {'id': sElemId}):$('#'+sElemId).empty())
				.data('type', sElemType)
				.data('id', oElem.id)
				.append($('<td>').text(oElem.id || ''));
			
			if(oElem.del) $Elem.remove();
			else {
				switch(sElemType) {
					case 'project':
						$Elem
							.append($('<td>').addInput('text', 'name', oElem.name, aoEvents))
							.append($('<td>', {'class': 'mode'}).text(oElem.mode))
							.append($('<td>').addInput('text', 'codename', oElem.codename, aoEvents))
							.append($('<td>').addInput('date', 'active_from', oElem.active_from.substr(0, 10), aoEvents))
							.append($('<td>').addInput('date', 'active_to', oElem.active_to.substr(0, 10), aoEvents))
							.append($('<td>').addInput('text', 'timezone', oElem.timezone, aoEvents))
							.append($('<td>').addButton('close fa-lg', '', 'del_proj', del));
						break;
					case 'feed':
						$Elem
							.append($('<td>').addInput('text', 'ref_feed_id', oElem.ref_feed_id, aoEvents))
							.append($('<td>').addInput('number', 'spot_id', oElem.id_spot, aoEvents))
							.append($('<td>').addInput('number', 'project_id', oElem.id_project, aoEvents))
							.append($('<td>').text(oElem.name))
							.append($('<td>').text(oElem.status))
							.append($('<td>').text(oElem.last_update))
							.append($('<td>').addButton('close fa-lg', '', 'del_feed', del));
						break;
					case 'spot':
						$Elem
							.append($('<td>').text(oElem.ref_spot_id))
							.append($('<td>').text(oElem.name))
							.append($('<td>').text(oElem.model))
						break;
				}
				
				if(bNew) $Elem.appendTo($('#'+sElemType+'s').find('table tbody'));
			}
		});
	});
}

function createProject() {
	self.get('admin_new', setProjects);
}

function commit(event, $This) {
	$This = $This || $(this);
	if(typeof self.tmp('wait') != 'undefined') clearTimeout(self.tmp('wait'));
	
	var sOldVal = $This.data('old_value');
	var sNewVal = $This.val();
	if(sOldVal!=sNewVal) {
		$This.data('old_value', sNewVal);
		
		var $Record = $This.closest('tr');
		var asInputs = {type: $Record.data('type'), id: $Record.data('id'), field: $This.attr('name'), value: sNewVal}; 
		self.get(
			'admin_set', 
			function(asData){
				oSpot.onFeedback('success', self.lang('admin_save_success'), asInputs);
				setProjects(asData);
			},
			asInputs,
			function(sError){
				$This.data('old_value', sOldVal);
				oSpot.onFeedback('error', sError, asInputs);
			}
		);
	}
}

function waitAndCommit(event) {
	if(typeof self.tmp('wait') != 'undefined') clearTimeout(self.tmp('wait'));
	self.tmp('wait', setTimeout(()=>{commit(event,$(this));}, 2000));
}

function del() {
	var $Record = $(this).closest('tr');
	var asInputs = {type: $Record.data('type'), id: $Record.data('id')}; 
	self.get(
		'admin_del', 
		function(asData){
			oSpot.onFeedback('success', self.lang('admin_save_success'), asInputs);
			setProjects(asData);
		},
		asInputs,
		function(sError){
			oSpot.onFeedback('error', sError, asInputs);
		}
	);
}
</script>