You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ngcp-panel/share/templates/helpers/datatables.tt

254 lines
10 KiB

[%
IF helper.dt_columns;
helper.column_titles = [];
helper.column_fields = [];
FOR col IN helper.dt_columns;
IF !col.accessor;
col.accessor = col.name;
col.accessor = col.accessor.replace('\.','_');
END;
NEXT UNLESS col.title;
helper.column_titles.push(col.title);
helper.column_fields.push(col.accessor);
END;
END;
backuri = c.req.uri;
tmp = backuri.query_param_delete('back');
# create unique identifier
helper.id_from_name = helper.identifier || helper.name.remove('[\s+\.#]');
helper.identifier = 0; # make sure we dont use the same identifier twice
-%]
<script src="/js/libs/bootstrap/datatables-paging.js"></script>
<script src="/js/libs/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$.extend( $.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );
$(document).ready(function() {
var date_search_rendered = 0;
var [% helper.id_from_name %]_table = $('#[% helper.id_from_name %]_table')
.dataTable( {
"sDom": "<'row-fluid ngcp_dt_top_elements'lf<r>>t<'row-fluid'<'pull-left'i><'pull-right'p>>",
"bProcessing": true,
"bServerSide": true,
"bPaginate": [% helper.paginate || 'true' %],
"bFilter": [% helper.filter || 'true' %],
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem(
'ngcp_dt_[% helper.id_from_name %]_table',
JSON.stringify(oData)
);
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('ngcp_dt_[% helper.id_from_name %]_table') );
},
"sPaginationType": "bootstrap",
[% IF helper.length_change %]
"bLengthChange": true,
"aLengthMenu": [5, 10, 25, 50],
[% ELSE %]
"bLengthChange": false,
[% END %]
"bSort": [% IF helper.no_sort %] false [% ELSE %] true [% END %],
"bInfo": true,
"iDisplayLength": 5,
'iShowPages': 5,
"sAjaxSource": "[% helper.ajax_uri %]",
"fnServerParams": function ( aoData ) {
var params = localStorage.getItem("ngcp_dt.[%helper.id_from_name%]_table.paramsJSON");
if(params){
var paramsParsed = JSON.parse(params);
for(var key in paramsParsed){
aoData.push( {"name":key,"value":paramsParsed[key]} );
}
}
},
[% IF helper.column_sort -%]
"aaSorting": [
[%
FOR f IN helper.column_fields;
IF helper.column_sort == f;
-%]
[ [% loop.index %], "asc" ],
[%
END;
END;
-%]
],
[% END -%]
"oLanguage": {
"sUrl": "/js/i18n/[% c.loc('dataTables.default.js') %]"
},
"aoColumns": [
[% FOREACH f IN helper.column_fields -%]
{
"mData": "[% f %]",
"mRender": function ( data, type, full ) {
if(data == null)
return '';
return String(data).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');//"
}
},
[% END -%]
{ "mRender": function ( data, type, full ) {
var html = '' +
'<div class="sw_actions pull-right">';
[% backuri = backuri | uri%]
[% FOR button IN helper.dt_buttons -%]
[% confirm_delete = button.name == "Delete" ? 'data-confirm="Delete"' : '' -%]
[% confirm_delete = button.name == "Terminate" ? 'data-confirm="Terminate"' : confirm_delete -%]
[%IF !( button.uri.search('[\?\&]back=|^javascript:') ); %]
[% button.uri = button.uri _ '?back=' _ backuri %]
[%END%]
[% IF button.condition -%]
if([% button.condition %]) {
[% END -%]
html +=
'<a class="btn [% button.class %]" href="[% button.uri %]" [% confirm_delete %][%IF button.onclick -%] onclick="[%button.onclick%]"[%END%][%IF button.tooltip -%] rel="tooltip" data-original-title="[%button.tooltip%]"[%END%]>' +
'<i class="[% button.icon %]"></i> [% button.name %]' +
'</a>';
[% IF button.condition -%]
}
[% END -%]
[% END -%]
html += '</div>';
return html;
},
"mData": null,
"bSortable": false,
"sClass": "ngcp-actions-column"
}
],
"fnDrawCallback": function( oSettings ) {
$('.sw_actions').css('visibility','hidden');
$('.sw_action_row').hover(
function() { $(this).find('.sw_actions').css('visibility','visible'); },
function() { $(this).find('.sw_actions').css('visibility','hidden'); }
);
if ($('.sw_actions').find("[rel=tooltip]").length) {
$('.sw_actions').find("[rel=tooltip]").tooltip();
}
if(date_search_rendered) return;
date_search_rendered = 1;
[% has_from = 0; has_to = 0; -%]
[% FOR col IN helper.dt_columns -%]
[% IF col.search_from_epoch && !has_from -%]
var f = '<label>From Date: <input type="text" id="[% helper.id_from_name %]_datepicker_start" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD"/></label>';
$('#[% helper.id_from_name %]_table_filter').prepend(f);
$('#[% helper.id_from_name %]_datepicker_start').datepicker({
"dateFormat": "yy-mm-dd",
"onSelect": function(date) {
[% helper.id_from_name %]_table.fnFilter(date, 0);
}
}).keyup( function () {
[% helper.id_from_name %]_table.fnFilter(this.value, 0);
});
[% has_from = 1 -%]
[% END -%]
[% IF col.search_to_epoch && !has_to -%]
var t = '<label>To Date: <input type="text" id="[% helper.id_from_name %]_datepicker_end" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD"/></label>';
if($('#[% helper.id_from_name %]_datepicker_start').length > 0) {
$('#[% helper.id_from_name %]_datepicker_start').parent().after(t);
} else {
$('#[% helper.id_from_name %]_table_filter').prepend(t);
}
$('#[% helper.id_from_name %]_datepicker_end').datepicker({
"dateFormat": "yy-mm-dd",
"onSelect": function(date) {
[% helper.id_from_name %]_table.fnFilter(date, 1);
}
}).keyup( function () {
[% helper.id_from_name %]_table.fnFilter(this.value, 1);
});
[% has_to = 1-%]
[% END -%]
[% END %]
},
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
nRow.className = "sw_action_row";
return nRow;
},
} );
} );
</script>
<div class="row">
[% UNLESS back_created -%]
<span class="pull-left" style="margin:0 5px 0 5px;">
<a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc("Back") %]</a>
</span>
[% back_created = 1 -%]
[% END -%]
[% FOR button IN helper.top_buttons -%]
[% IF button.method == "post" -%]
<form method="post" action="[% button.uri %]" style="float:left; margin:0 5px 0 5px;">
<button class="btn btn-primary btn-large" style="height:47px;"><i class="[% button.icon %]"></i> [% button.name %]</button>
<input type="hidden" name="back" value="[% c.req.uri %]"/>
</form>
[% ELSE -%]
<span class="pull-left" style="margin:0 5px 0 5px;">
[% IF button.accordion_button == 1 && loop.count == 1 -%]
<a class="btn btn-primary btn-large" href="[% button.uri %]" style="margin-left:25px;"><i class="[% button.icon %]"></i> [% button.name %]</a>
[% ELSE -%]
<a class="btn btn-primary btn-large" href="[% button.uri %]"><i class="[% button.icon %]"></i> [% button.name %]</a>
[% END -%]
</span>
[% END -%]
[% END -%]
</div>
[% IF helper.messages -%]
<div class="row">
[% FOREACH m IN helper.messages -%]
<div class="alert alert-[% m.type %]">[% m.text %]</div>
[% END -%]
</div>
[% END -%]
<div class="ngcp-separator"></div>
<table class="table table-bordered table-striped table-highlight table-hover ngcp-datatable" id="[% helper.id_from_name %]_table">
<thead>
<tr>
[% FOREACH t IN helper.column_titles -%]
<th>[% t %]</th>
[% END -%]
[% # one for actions -%]
<th class="ngcp-actions-column"></th>
</tr>
</thead>
<tbody>
<tr class="sw_action_row">
<td colspan="[% helper.column_titles.size + 1 %]">[% c.loc('Loading...') %]</td>
</tr>
</tbody>
</table>
[% IF helper.edit_flag || helper.create_flag == 1 -%]
[%
IF helper.form_object.has_for_js;
helper.form_object.render_repeatable_js;
END;
PROCESS "helpers/modal.tt";
modal_header(m.create_flag=helper.create_flag,
m.name = helper.name);
helper.form_object = translate_form( helper.form_object );
helper.form_object.render;
modal_footer();
modal_script(m.close_target = helper.close_target);
-%]
[% END -%]
[% # vim: set tabstop=4 syntax=html expandtab: -%]