spot/masks/admin.html

<div id="admin">
	<h1>Projects</h1>
	<div id="projects">
		<table>
			<thead>
				<tr>
					<th>[#]lang:id_project[#]</th>
					<th>[#]lang:project[#]</th>
					<th>[#]lang:mode[#]</th>
					<th>[#]lang:code_name[#]</th>
					<th>[#]lang:start[#]</th>
					<th>[#]lang:end[#]</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:id_feed[#]</th>
					<th>[#]lang:ref_feed_id[#]</th>
					<th>[#]lang:id_spot[#]</th>
					<th>[#]lang:id_project[#]</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:id_spot[#]</th>
					<th>[#]lang:ref_spot_id[#]</th>
					<th>[#]lang:name[#]</th>
					<th>[#]lang:model[#]</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<h1>Users</h1>
	<div id="users">
		<table>
			<thead>
				<tr>
					<th>[#]lang:id_user[#]</th>
					<th>[#]lang:name[#]</th>
					<th>[#]lang:language[#]</th>
					<th>[#]lang:time_zone[#]</th>
					<th>[#]lang:clearance[#]</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<h1>ToolBox</h1>
	<div id="toolbox"></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');
	$('#toolbox').addButton('refresh', 'Update Project', 'refresh', updateProject, '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}];
	var aoChangeEvent = [aoEvents[0]];

	$.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))
				.data('type', sElemType)
				.data('id', oElem.id);

			if(oElem.del) $Elem.remove();
			else if(!bNew) {
				$Elem.find('input').each(function(iKey, oInput){
					var $Input = $(oInput);
					if($Input.attr('name') in oElem && $Input.attr('type')!='date') $Input.val(oElem[$Input.attr('name')]);
				});
			}
			else {
				$Elem.append($('<td>').text(oElem.id || ''));
				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, aoChangeEvent))
							.append($('<td>').addInput('date', 'active_to', oElem.active_to, aoChangeEvent))
							.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', 'id_spot', oElem.id_spot, aoEvents))
							.append($('<td>').addInput('number', 'id_project', 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;
					case 'user':
						$Elem
							.append($('<td>').text(oElem.name))
							.append($('<td>').text(oElem.language))
							.append($('<td>').text(oElem.timezone))
							.append($('<td>').text(oElem.clearance))
						break;
				}

				$Elem.appendTo($('#'+sElemType+'s').find('table tbody'));
			}
		});
	});
}

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

function updateProject() {
	self.get(
		'update_project',
		function(asData, sMsg){oSpot.onFeedback('success', sMsg, {'update':'project'});},
		{},
		function(sMsg){oSpot.onFeedback('error', sMsg, {'update':'project'});}
	);
}

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>