|
|
<div class="container-fluid">
<div class="row form-inline">
<div class="col-md-12 top-row">
<select id="select-table" onchange="chooseTable(this.value)" class="form-control">
<option value="total">{{lang_total}}</option>
<option value="perlocation">{{lang_perlocation}}</option>
<option value="perclient">{{lang_perclient}}</option>
<option value="peruser">{{lang_peruser}}</option>
<option value="pervm">{{lang_pervm}}</option>
</select>
<select id="select-cutoff" onchange="reloadPage()" class="form-control">
<option value="1">{{lang_last1}}</option>
<option value="2">{{lang_last2}}</option>
<option value="7">{{lang_last7}}</option>
<option value="14">{{lang_last14}}</option>
<option value="30">{{lang_last30}}</option>
<option value="90">{{lang_last90}}</option>
</select>
<div id="slider">
<div id="lower-handle" class="ui-slider-handle"></div>
<div id="upper-handle" class="ui-slider-handle"></div>
</div>
<button id="applybound" type="button" class="btn btn-sm btn-primary" onclick="reloadPage()">{{lang_apply}}</button>
<button id="button-settings" type="button" class="pull-right btn btn-default" data-toggle="modal" data-target="#modal-settings" onclick="loadSettings()"><span class="glyphicon glyphicon-cog"></span></button>
</div>
<div class="col-md-12 buttonbar">
<button id="button-location" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('location')">{{lang_location}}</button>
<button id="button-totaltime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('totaltime')">{{lang_totalTime}}</button>
<button id="button-mediantime" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('mediantime')">{{lang_medianSessionLength}}</button>
<button id="button-sessions" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('sessions')">{{lang_sessions}}</button>
<button id="button-longsessions" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('longsessions')">{{lang_longSessions}}</button>
<button id="button-shortsessions" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('shortsessions')">{{lang_shortSessions}}</button>
<button id="button-timeoffline" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('timeoffline')">{{lang_totalOffTime}}</button>
<button id="button-lastlogout" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('lastlogout')">{{lang_clientLogout}}</button>
<button id="button-laststart" type="button" class="column-toggle btn btn-primary" onclick="toggleButton('laststart')">{{lang_clientStart}}</button>
</div>
</div>
</div>
<div id="modal-settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Settings</b></h4>
</div>
<div class="modal-body">
<label class="checkbox-inline" style="padding-left: 40px">
<input id="checkbox-reporting" type="checkbox" value="" style="margin-top: 0; margin-left: -30px">
{{lang_reportingDescription}}
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveSettings()">{{lang_save}}</button>
</div>
</div>
</div>
</div>
<script type="application/javascript">
document.addEventListener("DOMContentLoaded", function () {
var lowerHandle = $("#lower-handle");
var upperHandle = $("#upper-handle");
var lower = getQueryVariable("lower");
var upper = getQueryVariable("upper");
$( "#slider" ).slider({
range: true,
min: 0,
max: 24,
values: [ lower ? lower : 8, upper ? upper : 22 ],
create: function() {
lowerHandle.text( $(this).slider("values")[0]+":00" );
upperHandle.text( $(this).slider("values")[1]+":00" );
},
slide: function(event, ui) {
lowerHandle.text(ui.values[0]+":00");
upperHandle.text(ui.values[1]+":00");
},
change: function(event, ui) {
$("#applybound").show()
}
});
loadForm();
var table = $("table").stupidtable();
table.on("aftertablesort", function (event, data) {
var th = $(this).find("th");
th.find(".arrow").remove();
var dir = $.fn.stupidtable.dir;
var arrow = data.direction === dir.ASC ? "down" : "up";
th.eq(data.column).append(' <span class="arrow glyphicon glyphicon-chevron-'+arrow+'"></span>');
});
$(".locationLink").click(function(e) {
e.preventDefault();
$('#select-table').val('perlocation');
chooseTable('perlocation');
var target = $(".locationName:contains('"+$(this).text()+"'):first");
$(window).scrollTop(target.offset().top - $(window).height()/2);
target.parent().css( "background-color", "#f8ff99" );
return false;
});
});
function chooseTable(v) {
$("tr").removeAttr('style');
$("[id^=table-]").hide();
$('#table-'+v).show();
$('.buttonbar').find("[id^=button-]").hide();
var re = /column-(\w+)/g;
var match;
while (match = re.exec($('thead', '#table-'+v).html())) {
$('#button-'+match[1]).show();
}
}
function reloadPage() {
saveForm();
var cutoff = $("#select-cutoff").val();
var lower = $("#lower-handle").text().split(":")[0];
var upper = $("#upper-handle").text().split(":")[0];
window.location.replace("?do=statistics_reporting&cutoff="+cutoff+"&lower="+lower+"&upper="+upper);
}
function toggleButton(v) {
var button = $('#button-'+v);
if(button.hasClass('btn-default')) {
button.removeClass('btn-default');
button.addClass('btn-primary');
$('.column-'+v).show()
} else {
button.removeClass('btn-primary');
button.addClass('btn-default');
$('.column-'+v).hide()
}
}
function saveForm() {
sessionStorage.setItem("select-table", $("#select-table").val());
sessionStorage.setItem("buttons", $('.buttonbar').find(".btn-default").map(function() { return this.id; }).get().join(" "));
}
function loadForm() {
var selectTable = sessionStorage.getItem("select-table");
if (selectTable) {
$("#select-table").val(selectTable);
chooseTable(selectTable);
} else {
$("#select-table").val("total");
chooseTable("total");
}
var cutoff = getQueryVariable("cutoff");
$('#select-cutoff').val(cutoff ? cutoff : 7);
sessionStorage.getItem("buttons").split(" ").forEach(function(button) {
toggleButton(button.substr(7));
});
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
function loadSettings() {
$.ajax({
url: '?do=statistics_reporting',
type: 'GET',
data: { action: "getReporting"},
success: function(value) {
$("#checkbox-reporting").prop("checked", value == "on");
}
});
}
function saveSettings() {
$.ajax({
url: '?do=statistics_reporting',
type: 'GET',
data: { action: "setReporting", reporting: $("#checkbox-reporting").is(":checked") ? "on" : "off" }
});
}
</script>
|
