summaryrefslogtreecommitdiffstats
path: root/modules-available/statistics/templates/filterbox.html
blob: e7c1cd9b5ad420330e3dee9a52eb9003e373723a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<a href="#top" class="btn btn-default to-top-btn"><span class="glyphicon glyphicon-menu-up"></span></a>

<h1>{{lang_moduleHeading}}</h1>

<form id="query-form" method="GET" action="?do=statistics" role="form">
	<input type="hidden" name="show" value="{{show}}">
	<input type="hidden" name="do" value="statistics">
	<div class="btn-group pull-right">
		<button type="submit" hidden><!-- first button, so hitting enter in the form fields doesn't jump to summary -->
		<button class="btn btn-default {{summaryButtonClass}}" type="submit" name="show" value="summary"
				  {{perms.view.summary.disabled}}>
			<span class="glyphicon glyphicon-stats"></span>
			{{lang_showVisualization}}
		</button>
		<button class="btn btn-default {{listButtonClass}}" type="submit" name="show" value="list"
				  {{perms.view.list.disabled}}>
			<span class="glyphicon glyphicon-list"></span>
			{{lang_showList}}
		</button>
	</div>

	<h3>{{lang_labelFilter}}</h3>
	<div class="filter-list">
		{{#columns}}
		<div class="{{collapse}} row filter-row" id="filter-{{key}}">
			<div class="col-sm-4 col-xs-12">
				<div class="checkbox checkbox-inline text-nowrap">
					<input id="check-{{key}}" type="checkbox" name="filter[{{key}}]" value="1" class="filter-enable"
							 {{checked}}>
					<label for="check-{{key}}">{{name}}</label>
				</div>
			</div>
			<div class="col-sm-2 col-xs-3">
				<select name="op[{{key}}]" class="form-control enable-check op">
					{{#op}}
					<option {{selected}}>{{op}}</option>
					{{/op}}
				</select>
			</div>
			<div class="col-sm-6 col-xs-9">
				{{#input}}
				<input name="arg[{{key}}]" type="{{.}}" class="form-control enable-check {{inputclass}} arg"
						value="{{currentvalue}}" placeholder="{{placeholder}}">
				{{/input}}
				{{#enum}}
				<select name="arg[{{key}}]" class="form-control enable-check arg">
					{{#values}}
					<option value="{{key}}" {{disabled}} {{selected}}>{{value}}</option>
					{{/values}}
				</select>
				{{/enum}}
			</div>
		</div>
		<div class="clearfix"></div><!-- fixes jumping around of items on firefox -->
		{{/columns}}
	</div>
	<div class="row">
		<div class="col-md-12 col-sm-10 col-xs-12">
			<button type="submit" class="btn btn-primary pull-right">
				<span class="glyphicon glyphicon-ok"></span>
				{{lang_apply}}
			</button>
			<button type="button" class="btn btn-default" id="filter-expand">
				<span class="glyphicon glyphicon-arrow-down"></span>
				{{lang_more}}
			</button>
		</div>
	</div>
	<div class="clearfix slx-space"></div>
</form>

<script type="application/javascript"><!--

document.addEventListener("DOMContentLoaded", function () {

	$('.is-date').datepicker({format : 'yyyy-mm-dd'});

	$('#filter-expand').click(function() {
		$('#query-form .filter-row.collapse').show();
		$(this).remove();
	});

	// Cosmetic - less clutter in URL
	$('#query-form').submit(function(e) {
		$(this).find('.filter-row').each(function() {
			var $row = $(this);
			if ($row.find('.filter-enable').prop('checked'))
				return;
			$row.find('input, select').prop('name', '');
		});
	});

	var check = function() {
		$(this).closest('.filter-row').find('.filter-enable:visible').prop('checked', true);
	};

	// This sucks - we need to wait a bit otherwise datepicker triggers change
	setTimeout(function() {
		$('.enable-check').change(check).keypress(check);
	}, 100);

	$('.filter-col').each(function(idx, elem) {
		var e = $(elem);
		var col = e.data('filter-col');
		if (!col) return;
		e.find('.filter-val').each(function(idx, elem) {
			var e = $(elem);
			var val = e.data('filter-val');
			if (val === null || val === undefined) return;
			e.click(function(ev) {
				ev.preventDefault();
				addFilter(col, '=', val);
				refresh();
			});
		});
	});

}, false);

function popupFilter(field) {
	var $row = addFilter(field, null, null);
	if ($row !== null) {
		$row.find('.arg').focus();
		$row.removeClass('slx-focus')
		setTimeout(function() { $row.addClass('slx-focus'); }, 10);
	}
}

function addFilter(field, op, argument) {
	if (field === null)
		return null;
	var $row = $('#filter-' + field);
	if ($row.length === 0)
		return null;
	if (argument !== null) {
		$row.find('.op').val(op);
		$row.find('.arg').val(argument);
	}
	// Enable checkbox only if we got a predefined value, or if argument is in a select, as the user might want the preselected item and doesn't notice the checkbox is unchecked
	if (argument !== null || $row.find('select.arg').length !== 0) {
		$row.find('.filter-enable').prop('checked', true);
	}
	$row.show();
	return $row;
}

function refresh() {
	$('#query-form').submit();
}
// --></script>