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

<div class="container-fluid">
	<form method="get">
		<input type="hidden" name="do" value="statistics_reporting">
		<div class="row form-inline">
			<div class="col-md-12  top-row">
				<select name="type" id="select-table" class="form-control">
					{{#tables}}
					<option value="{{value}}" {{selected}}>{{name}}</option>
					{{/tables}}
				</select>
				<select name="cutoff" id="select-cutoff" class="form-control">
					{{#days}}
					<option value="{{days}}" {{selected}}>{{lang_days}}: {{days}}</option>
					{{/days}}
				</select>

				<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>
				<button type="submit" class="btn btn-sm btn-primary">{{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">
				{{#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>
	</form>
</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">&times;</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 = $('#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>');
		});

		$(".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;
		});

		$('.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 }
		});
	}
</script>