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
|
{{ header }}{{ column_left }}
<div id="content">
<div class="page-header">
<div class="container-fluid">
<h1>{{ heading_title }}</h1>
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-puzzle-piece"></i> {{ text_list }}</h3>
</div>
<div class="panel-body">
<fieldset>
<legend>{{ text_type }}</legend>
<div class="well">
<div class="input-group">
<select name="type" class="form-control">
{% for category in categories %}
{% if type == category.code %}
<option value="{{ category.href }}" selected="selected">{{ category.text }}</option>
{% else %}
<option value="{{ category.href }}">{{ category.text }}</option>
{% endif %}
{% endfor %}
</select>
<span class="input-group-addon"><i class="fa fa-filter"></i> {{ text_filter }}</span>
</div>
</div>
</fieldset>
<div id="extension"></div>
</div>
</div>
</div>
{% if categories %}
<script type="text/javascript"><!--
$('select[name="type"]').on('change', function() {
$.ajax({
url: $('select[name="type"]').val(),
dataType: 'html',
beforeSend: function() {
$('.fa-filter').addClass('fa-circle-o-notch fa-spin');
$('.fa-filter').removeClass('fa-filter');
$('select[name=\'type\']').prop('disabled', true);
},
complete: function() {
$('.fa-circle-o-notch').addClass('fa-filter');
$('.fa-circle-o-notch').removeClass('fa-circle-o-notch fa-spin');
$('select[name=\'type\']').prop('disabled', false);
},
success: function(html) {
$('#extension').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
$('select[name="type"]').trigger('change');
$('#extension').on('click', '.btn-success', function(e) {
e.preventDefault();
var element = this;
$.ajax({
url: $(element).attr('href'),
dataType: 'html',
beforeSend: function() {
$(element).button('loading');
},
complete: function() {
$(element).button('reset');
},
success: function(html) {
$('#extension').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
$('#extension').on('click', '.btn-danger, .btn-warning', function(e) {
e.preventDefault();
if (confirm('{{ text_confirm }}')) {
var element = this;
$.ajax({
url: $(element).attr('href'),
dataType: 'html',
beforeSend: function() {
$(element).button('loading');
},
complete: function() {
$(element).button('reset');
},
success: function(html) {
$('#extension').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
});
//--></script>
{% endif %}
</div>
{{ footer }}
|