path: root/modules-available/statistics/templates/filterbox.html

<div id="modal-add-filter" class="modal modal-sm fade" role="dialog"
	  style="position:absolute; min-width:600px; min-height: 400px;margin:auto">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
					class="sr-only">Close</span></button>
			{{lang_add_filter}}
		</div>
		<form class="modal-body form-inline center" onsubmit="$('#add-btn').click(); return false">
			<div class="form-group">
				<select id="columnSelect" name="column" class="form-control col-4-xs"> </select>
			</div>
			<div class="form-group">
				<select id="operatorSelect" name="operator" class="form-control col-4-xs"> </select>
			</div>
			<div class="form-group">
				<input name="argument" id="argumentInput" class="form-control col-4-xs"> </input>
				<select name="argument" id="argumentSelect" class="form-control col-4-xs"> </select>
			</div>
			<button id="add-btn" type="button" class="btn btn-primary" onclick="addFilterFromForm()">
				<span class="glyphicon glyphicon-plus"></span>
				{{lang_add}}
			</button>
		</form>
	</div>
</div>


<div style="height:120px" class="col-xs-12">
	<!-- use GET here, to avoid the "resend form?" confirmation, and anyway this is stateless, so GET makes more sense -->
	<form id="queryForm" method="GET" action="?do=Statistics" class="" role="form">
		<input type="hidden" name="do" value="statistics">
		<input type="hidden" name="show" value="{{show}}">
		<label for="filterInput">{{lang_labelFilter}}</label>
		<input type="text" name="filters" class="" id="filterInput"/>
		<input type="hidden" name="sortColumn" id="sortColumn" value="{{sortColumn}}"/>
		<input type="hidden" name="sortDirection" id="sortDirection" value="{{sortDirection}}"/>

		<button type="button" class="btn btn-success pull-left" onclick="popupFilter(null)">
			<span class="glyphicon glyphicon-plus"></span>
			{{lang_add_filter}}
		</button>
		<div class="btn-group pull-right">
			<button class="btn {{statButtonClass}}" type="submit" name="show" value="stat">
				<span class="glyphicon glyphicon-stats"></span>
				{{lang_showVisualization}}
			</button>
			<button class="btn {{listButtonClass}}" type="submit" name="show" value="list">
				<span class="glyphicon glyphicon-list"></span>
				{{lang_showList}}
			</button>
		</div>
	</form>
	<br/>
	<br/>
</div>
<script type="application/javascript"><!--

var filterSelectize;

var slxFilterNames = {
	machineuuid: '{{lang_uuid}}',
	macaddr: '{{lang_macAddr}}',
	firstseen: '{{lang_firstSeen}}',
	lastseen: '{{lang_lastSeen}}',
	lastboot: '{{lang_lastBoot}}',
	logintime: '{{lang_lastLogin}}',
	realcores: '{{lang_cores}}',
	systemmodel: '{{lang_model}}',
	cpumodel: '{{lang_cpuModel}}',
	hddgb: '{{lang_tmpGb}}',
	gbram: '{{lang_gbRam}}',
	kvmstate: '{{lang_kvmSupport}}',
	badsectors: '{{lang_reallocatedSectors}}',
	clientip: '{{lang_ip}}',
	state: '{{lang_usageState}}',
	location: '{{lang_location}}'
};

slxLocations = {{{locations}}};

var slxFilterDel = '{{delimiter}}';


document.addEventListener("DOMContentLoaded", function () {

	/* some objects */
	var $columnSelect = $('#columnSelect');
	$modal = $('#modal-add-filter');
	$queryForm = $('#queryForm');

	var columns= {{{columns}}};

	/* add options to column select */
	for (var key in columns) {
		$columnSelect.append($('<option>', {
			value: key, text: (slxFilterNames[key] ? slxFilterNames[key] : key) }));
	};


	/* initialize selectize */
	filterSelectize = $('#filterInput').selectize({
		delimiter: slxFilterDel,
		persist: false,
		plugins: ['remove_button'],
		create: function(input) {
			return {value: input, text: input}
		},
		onChange: function() {
			// if (initComplete && !$('#filterInput').is(':focus')) {
			// reload();
			// }
		}
	})[0].selectize;
	/* add query */
	var str = "{{{query}}}";
	var eExp = /^(\w+)\s*([=><!~]+)\s*(.*)$/;
	str.split(slxFilterDel).forEach(function(v) {
		if (v.trim().length === 0)
			return;
		var match = eExp.exec(v);
		if (match && match.length === 4) {
			addFilter(match[1], match[2], match[3]);
		} else {
			filterSelectize.addOption({value: v, text: v});
			filterSelectize.addItem(v);
		}
	});

	$('#columnSelect').on('change', function() {
		$('#operatorSelect option').remove();
		var col = $('#columnSelect').val();
		var opS = $('#operatorSelect');
		columns[col]['op'].sort(myOpSort);
		columns[col]['op'].forEach(function (v) {
			$(opS).append($('<option>', {
				value: v, text: v
			}));
		});
		/* also set the type of the input */
		if (columns[col]['type'] == 'date') {
			$('#argumentInput').datepicker({format : 'yyyy-mm-dd'});
			$('#argumentSelect').hide();
		} else if(columns[col]['type'] == 'enum') {
			$('#argumentInput').hide();
			$('#argumentSelect').show();
			columns[col]['values'].forEach(function (v) {
				var t = v;
				if (col === 'location' && slxLocations['L' + v]) {
					t = slxLocations['L' + v].pad + ' ' + slxLocations['L' + v].name;
				}
				$('#argumentSelect').append($('<option>', { value: v, text: t }));
			});
		} else {
			$('#argumentInput').datepicker('remove');
			$('#argumentSelect option').remove();
			$('#argumentInput').show();
			$('#argumentSelect').hide();
		}
	});

	$('.filter-col').each(function(idx, elem) {
		var e = $(elem);
		var col = e.data('filter-col');
		if (!col) return;
		e.find('.filter-val').each(function(idx, elem) {
			var e = $(elem);
			var val = e.data('filter-val');
			if (!val) return;
			e.click(function(ev) {
				ev.preventDefault();
				addFilter(col, '=', val);
				refresh();
			});
		});
	});

}, false);

function popupFilter(field) {
		if (field != null) {
			$('#columnSelect').val(field);
		}
		$('#columnSelect').change();
		$modal.modal('show');
}

function addFilterFromForm() {
	var argument1 = $('#argumentInput').val();
	var argument2 = $('#argumentSelect').val();
	var argument = argument1 == '' ? argument2 : argument1;
	var col = $('#columnSelect').val();
	var op = $('#operatorSelect').val();

	addFilter(col, op, argument);
	refresh(); // TODO: AJAX
}

function addFilter(col, op, argument) {
	var filterValue = col + ' ' + op + ' ' + argument;
	var filterText = filterValue;
	var displayArgument = argument;
	if (col === 'location' && slxLocations['L' + argument]) {
		displayArgument = slxLocations['L' + argument].name;
	}
	if (slxFilterNames[col]) {
		filterText = slxFilterNames[col] + ' ' + op + ' ' + displayArgument;
	}
	filterSelectize.addOption({value: filterValue, text: filterText});
	filterSelectize.addItem(filterValue);
}

function toggleSort(field) {
	$('#sort').val(field + ' ' + order);
	refresh();
}

/* equal sign should always be first, the rest doesn't matter*/
function myOpSort(a,b) {
	if (a == '=') { return -1; }
	else if (a == b) {return 0}
	else { return 1;}

}

function refresh() {
	$queryForm.submit(); /* TODO: use AJAX */
}
// --></script>