108 lines
3.8 KiB
Plaintext
108 lines
3.8 KiB
Plaintext
%h2= @user.name
|
|
|
|
= render 'transactions/new'
|
|
|
|
.panel.panel-default.data-table-filters
|
|
.panel-heading
|
|
%h3.panel-title Filters
|
|
.panel-body
|
|
.pure-g
|
|
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range', 'data-filter-name': 'Time' }
|
|
%form.form-inline
|
|
.input-group
|
|
%span.input-group-addon
|
|
%span.glyphicon.glyphicon-calendar
|
|
%input.lower-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
|
|
.input-group
|
|
%span.input-group-addon
|
|
%span.glyphicon.glyphicon-calendar
|
|
%input.upper-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
|
|
.pure-g
|
|
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', 'data-filter-name': 'Amount' }
|
|
%form.form-inline
|
|
.input-group
|
|
%span.input-group-addon
|
|
%span.glyphicon.glyphicon-euro
|
|
%input.lower-bound.form-control.filter-align{type: 'number', placeholder: 'Minimum'}
|
|
.input-group
|
|
%span.input-group-addon
|
|
%span.glyphicon.glyphicon-euro
|
|
%input.upper-bound.form-control.filter-align{type: 'number', placeholder: 'Maximum'}
|
|
.pure-g
|
|
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Issuer' }
|
|
%input{type: 'text', placeholder: 'Filter on Issuer'}
|
|
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Peer' }
|
|
%input{type: 'text', placeholder: 'Filter on Peer'}
|
|
.input-listen.pure-u-md-1-2{ 'data-input-type': 'text', 'data-filter-name': 'Message' }
|
|
%input{type: 'text', placeholder: 'Filter on Message'}
|
|
|
|
|
|
%table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
|
|
%thead
|
|
%tr
|
|
%th Time
|
|
%th Amount
|
|
%th Peer
|
|
%th Issuer
|
|
%th Message
|
|
%tbody
|
|
|
|
:javascript
|
|
$(document).ready(function() {
|
|
var table = $('#transactions').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
searching: true,
|
|
lengthChange: false,
|
|
ordering: false,
|
|
ajax: $('#transactions').data('source'),
|
|
pagingType: 'full_numbers',
|
|
autoWidth: false,
|
|
responsive: true,
|
|
columns: [
|
|
{ data: 'time', name: 'Time', width: "15%", className: 'min-tablet-l'},
|
|
{ data: 'amount', name: 'Amount', width: "10%", className: 'min-mobile'},
|
|
{ data: 'peer', name: 'Peer', width: "15%", className: 'min-mobile'},
|
|
{ data: 'issuer', name: 'Issuer', width: "15%", className: 'min-desktop'},
|
|
{ data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'}
|
|
],
|
|
columnDefs: [
|
|
{
|
|
targets: 0,
|
|
render: function(data, type, full, meta) {
|
|
return $.format.date(data, 'E dd/MM/yyyy HH:mm');
|
|
}
|
|
},
|
|
{
|
|
targets: 1,
|
|
render: function(data, type, full, meta) {
|
|
return data/100;
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
$('.dataTables_filter').hide();
|
|
|
|
$('.input-listen').each(function(index, element) {
|
|
var filter = $(element);
|
|
var type = filter.attr('data-input-type');
|
|
var column = table.column(filter.attr('data-filter-name') + ':name');
|
|
console.log(column);
|
|
filter.find('input').on('keyup change', function() {
|
|
var value = null
|
|
if(filter.hasClass('bound')) {
|
|
var lower = filter.find('.lower-bound');
|
|
var upper = filter.find('.upper-bound');
|
|
value = lower.val() + '~' + upper.val();
|
|
} else {
|
|
value = $(this).val();
|
|
}
|
|
value = filter.attr('data-input-type') + ':' + value;
|
|
if(column.search() !== value) {
|
|
column.search(value).draw();
|
|
}
|
|
});
|
|
});
|
|
});
|