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

<form method="get" id="controlsForm">
	<input type="hidden" name="do" value="statistics_reporting">

	<div class="page-header">
		<button id="button-settings" type="button" class="btn
			btn-{{settingsButtonClass}} pull-right" data-toggle="modal"
			data-target="#modal-settings"><span class="glyphicon
			glyphicon-cog"></span> {{lang_settings}}</button>
		<h1>{{lang_moduleName}}</h1>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">
			{{lang_displaySelection}}
		</div>
		<div class="panel-body">
			<div class="row top-row">
				<div class="col-md-2">
					<select name="type" id="select-table" class="form-control">
						{{#tables}}
						<option {{^allowed}}disabled{{/allowed}} value="{{value}}" {{selected}}>{{name}}</option>
						{{/tables}}
					</select>
				</div>
				<div class="col-md-2">
					<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" style="margin-top: 10px;">
					<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 class="col-md-1">
						<button type="submit" class="btn btn-primary">{{lang_show}}</button>
				</div>
				<div class="col-md-3">
					<div class="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 {{^allowedExport}}disabled {{/allowedExport}} type="submit" class="btn btn-default" name="action" value="export">{{lang_export}}</button>
						</div>
					</div>
				</div>

			</div>

		</div>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">
			{{lang_displayColumns}}
		</div>
		<div class="panel-body">
			<div class="row top-row">
				<div class="col-md-12 form-inline">
					{{#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>
	</div>
</form>


<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>{{lang_settings}}</b></h4>
			</div>
			<div class="modal-body">
				<div class="checkbox">
					<input {{^allowedReportChange}}disabled {{/allowedReportChange}} id="checkbox-reporting" type="checkbox" value="on" {{reportChecked}}>
					<label for="checkbox-reporting" style="padding-left: 20px">{{lang_reportingLabel}}</label>
				</div>
				<div>
					<p>{{lang_reportingDescription}}</p>
					<p><a href="https://www.bwlehrpool.de/doku.php/satellite/statistics_reporting" target="_blank">{{lang_reportMoreInfo}}</a></p>
				</div>
			</div>
			<div class="modal-footer">
				<button {{^allowedDownload}}disabled {{/allowedDownload}} class="btn btn-warning pull-left" onclick="window.location.href='?do=statistics_reporting&amp;action=getreport'">{{lang_downloadReport}}</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
				<button {{^allowedReportChange}}disabled {{/allowedReportChange}} 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]);
			},
		});

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

		$('th[data-sort]').first().click();
	});

	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>