summaryrefslogblamecommitdiffstats
path: root/modules-available/statistics_reporting/templates/columnChooser.html
blob: 49c9a75d8a14addb1b8f8bd63e752f17856e7372 (plain) (tree)
1
2
3
4
5
6
7
8
9
10
                             

                                                
                                                                                                          
                                                                             




                                                                                         
                                                                                                






                                                                           





                                                                                                                                           
                      
                                                 
                                                                                                                                                                         
                                                                                                                                                                                     

                                                                                                                                                                                     


                                                                                                                                                                                



                      

                                                                   





















                                                                                      
                           
 







                                                                                                                        




                                         





                                                                         

         
                               
                           



                                                                                                                   

         
                                  



                                                          

                                              

                                                          


                                              















                                                                                                                                            

                                                             




                                                                                       










                                                                
        
<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>
		</div>
		<div class="col-md-12 buttonbar">
			<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-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>

<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>');
		});
	});

	function chooseTable(v) {
		$("[id^=table-]").hide();
		$('#table-'+v).show();
		$("[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);
	}
</script>