path: root/modules-available/statistics_reporting/templates/columnChooser.html

<form method="get" id="controlsForm">
	<input type="hidden" name="do" value="statistics_reporting">
	<div class="row">
		<div class="col-md-12">
			<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>
			<strong class="text-capitalize">{{lang_displaySelection}}</strong>
		</div>
	</div>
	<div class="row top-row">
		<div class="col-md-4">
			<select name="type" id="select-table" class="form-control">
				{{#tables}}
				<option value="{{value}}" {{selected}}>{{name}}</option>
				{{/tables}}
			</select>
		</div>
		<div class="col-md-4">
			<select name="cutoff" id="select-cutoff" class="form-control">
				{{#days}}
				<option value="{{days}}" {{selected}}>{{lang_days}}: {{days}}</option>
				{{/days}}
			</select>
		</div>
		<div class="col-md-3">
			<div id="slider">
				<div id="lower-handle" class="ui-slider-handle"></div>
				<div id="upper-handle" class="ui-slider-handle"></div>
				<input type="hidden" id="lower-field" name="lower" value="{{lower}}">
				<input type="hidden" id="upper-field" name="upper" value="{{upper}}">
			</div>
		</div>
	</div>
	<div class="row top-row">
		<div class="col-md-12 form-inline">
			<div><strong class="text-capitalize">{{lang_displayColumns}}</strong></div>
			{{#columns}}
					<input type="hidden" name="{{id}}" value="off">
					<div class="checkbox">
						<input id="{{id}}" name="{{id}}" type="checkbox" class="column-toggle form-control" {{checked}}>
						<label for="{{id}}">{{name}}</label>
					</div>
			{{/columns}}
		</div>
	</div>
	<div class="row top-row">
		<div class="col-md-12 form-inline">
			<div class="pull-right input-group">
				<select class="form-control" name="format">
					<option value="json">JSON</option>
					<option value="csv">CSV (Excel)</option>
					<option value="xml">XML</option>
				</select>
				<div class="input-group-btn">
				<button type="submit" class="btn btn-default" name="action" value="export">{{lang_export}}</button>
				</div>
			</div>
			<button type="submit" class="btn btn-primary">{{lang_apply}}</button>
		</div>
	</div>
</form>

<hr>

<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">&times;</button>
				<h4 class="modal-title"><b>Settings</b></h4>
			</div>
			<div class="modal-body">
				<div class="checkbox">
					<input id="checkbox-reporting" type="checkbox" value="on" style="margin-top: 0; margin-left: -30px">
					<label for="checkbox-reporting" style="padding-left: 40px">{{lang_reportingDescription}}</label>
				</div>
			</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 = $('#lower-field').val();
		var upper = $('#upper-field').val();
		$( "#slider" ).slider({
			range: true,
			min: 0,
			max: 24,
			values: [ lower, upper ],
			create: function() {
				lowerHandle.text( lower+":00" );
				upperHandle.text( upper+":00" );
			},
			slide: function(event, ui) {
				lowerHandle.text(ui.values[0]+":00");
				upperHandle.text(ui.values[1]+":00");
				$('#lower-field').val(ui.values[0]);
				$('#upper-field').val(ui.values[1]);
			},
		});

		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 ? "up" : "down";
			th.eq(data.column).append(' <span class="arrow glyphicon glyphicon-chevron-'+arrow+'"></span>');
		});

		if (getParameter("type") == "location" && getParameter("location")) {
			var target = $(".locationName:contains('"+decodeURIComponent(getParameter("location")).replace(/\+/g, " ")+"'):first");
			$(window).scrollTop(target.offset().top - $(window).height()/2);
			target.parent().css( "background-color", "#f8ff99" );
		}

		$(".locationLink").click(function(e) {
			e.preventDefault();
			var form = $('#controlsForm');
			$('<input />').attr('type', 'hidden')
				.attr('name', "location")
				.attr('value', $(this).text())
				.appendTo(form);
			form.find('#select-table').val("location");
			form.submit();
		});

		$('.column-toggle').change(function () {
			updateColumn($(this));
		});
		$('.column-toggle').each(function () {
			var box = $(this);
			if ($('.' + box.attr('name')).length === 0) {
				box.parent().hide();
			} else {
				updateColumn(box);
			}
		});
	});

	function updateColumn(checkbox) {
		var cols = $('.' + checkbox.attr('name'));
		if (checkbox.is(':checked')) {
			cols.show();
		} else {
			cols.hide();
		}
	}

	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: 'POST',
			data: { action: "setReporting", reporting: $("#checkbox-reporting").is(":checked") ? "on" : "off", token: TOKEN }
		});
	}

	function getParameter(name) {
			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] == name){return pair[1];}
			}
			return(false);
	}
</script>