<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">×</span><span
class="sr-only">Close</span></button>
{{lang_add_filter}}
</div>
<form class="modal-body form-inline center">
<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 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>