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-{{settingsButtonClass}}" data-toggle="modal" data-target="#modal-settings"><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}}>{{days}} {{lang_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}}
				<div class="checkbox">
					<input id="id_{{id}}" name="{{id}}" value="on" type="checkbox" class="column-toggle form-control" {{checked}}>
					<label for="id_{{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" {{reportChecked}}>
					<label for="checkbox-reporting" style="padding-left: 40px">{{lang_reportingLabel}}</label>
				</div>
				<div>
					<p>{{lang_reportingDescription}}</p>
					<a class="btn btn-success" href="?do=statistics_reporting&amp;action=getreport">{{lang_downloadReport}}</a>
				</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>');
		});

		$(".locationLink").click(function(e) {
			e.preventDefault();
			var form = $('#controlsForm');
			var inp = $('#location-id');
			if (inp.length === 0) {
				inp = $('<input />').attr('type', 'hidden')
					.attr('name', "location")
					.attr('id', 'location-id')
					.appendTo(form);
			}
			inp.attr('value', $(this).data('lid'));
			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) {
				if (!box.is(':checked')) {
					box.attr('value', 'off');
					box.prop('checked', true);
				}
				box.parent().hide();
			} else {
				updateColumn(box);
			}
		});
	});

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

	function saveSettings() {
		$.ajax({
			url: '?do=statistics_reporting',
			type: 'POST',
			data: { action: "setReporting", reporting: $("#checkbox-reporting").is(":checked") ? "on" : "off", token: TOKEN },
			success: function(value) {
				if (typeof(value) === 'object') {
					$("#checkbox-reporting").prop('checked', !!value['checked']);
					$("#button-settings").removeClass('btn-default btn-danger').addClass('btn-' + value['class']);
				} else {
					alert('Invalid reply when setting value: ' + value + ' (' + typeof(value) + ')');
				}
			}
		});
	}
</script>