Filter rows by date range, e.g. CDR table.

lib/NGCP/Panel/Controller/Subscriber.pm

@@ -1290,7 +1290,7 @@ sub master :Chained('base') :PathPart('details') :CaptureArgs(0) {
         { name => "source_user", search => 1, title => "Caller" },
         { name => "destination_user", search => 1, title => "Callee" },
         { name => "call_status", search => 1, title => "Status" },
-        { name => "start_time", search => 1, title => "Start Time" },
+        { name => "start_time", search_from_epoch => 1, search_to_epoch => 1, title => "Start Time" },
         { name => "duration", search => 1, title => "Duration" },
     ]);
 

lib/NGCP/Panel/Utils/Datatables.pm

@@ -5,6 +5,7 @@ use warnings;
 use Sipwise::Base;
 use List::Util qw/first/;
 use Scalar::Util qw/blessed/;
+use DateTime::Format::Strptime;
 
 sub process {
     my ($c, $rs, $cols) = @_;
@@ -28,7 +29,7 @@ sub process {
         }
     }
 
-    # searching
+    # generic searching
     my @searchColumns = ();
     foreach my $c(@{ $cols }) {
         # avoid amigious column names if we have the same column in different joined tables
@@ -40,6 +41,34 @@ sub process {
         $rs = $rs->search([ map{ +{ $_ => { like => '%'.$searchString.'%' } } } @searchColumns ]);
     }
 
+    # data-range searching
+    my $from_date = $c->request->params->{sSearch_0} // "";
+    my $to_date = $c->request->params->{sSearch_1} // "";
+    my $parser = DateTime::Format::Strptime->new(
+        pattern => '%Y-%m-%d %H:%M',
+    );
+    if($from_date) {
+        $from_date = $parser->parse_datetime($from_date);
+    }
+    if($to_date) {
+        $to_date = $parser->parse_datetime($to_date);
+    }
+    @searchColumns = ();
+    foreach my $c(@{ $cols }) {
+        # avoid amigious column names if we have the same column in different joined tables
+        my $name = $c->{name} =~ /\./ ? $c->{name} : 'me.'.$c->{name};
+        if($c->{search_from_epoch} && $from_date) {
+            $rs = $rs->search({
+                $name => { '>=' => $from_date->epoch },
+            });
+        }
+        if($c->{search_to_epoch} && $to_date) {
+            $rs = $rs->search({
+                $name => { '<=' => $to_date->epoch },
+            });
+        }
+    }
+
     $displayRecords = $rs->count;
 
     # show specific row on top (e.g. if we come back from a newly created entry)
@@ -123,7 +152,7 @@ sub _prune_row {
             next;
         }
         if(blessed($v) && $v->isa('DateTime')) {
-            $row{$k} = $v->datetime;
+            $row{$k} = $v->ymd('-') . ' ' . $v->hms(':');
             $row{$k} .= '.'.$v->millisecond if $v->millisecond > 0.0;
         }
     }

share/static/css/main.css

@@ -39,6 +39,23 @@ div.ngcp-modal .help-inline {
     z-index: 2000 !important;
 }
 
+div.ui-datepicker {
+    /* make sure to put the datepicker over the header */
+    z-index: 2000 !important;
+}
+
+dt.ui_tpicker_time_label,
+dt.ui_tpicker_hour_label,
+dt.ui_tpicker_minute_label,
+dd.ui_tpicker_time
+{
+    color: gray;
+}
+
+button.ui-datepicker-current.ui-state-hover {
+    border: 5px solid blue;
+}
+
 /* remove left margin for repeatable elements */
 
 div.ngcp-modal div.modal-body div.control-group.hfh-rep {
@@ -198,6 +215,16 @@ div.dataTables_length label {
 div.dataTables_filter, div.dataTables_paginate {
     float: right;
 }
+
+div.dataTables_filter label {
+    float: left;
+    margin-left: 5px;
+}
+
+input.ngcp-datepicker {
+    width: 9em;
+}
+
 @media (max-width: 300px) {
     div.dataTables_filter {
         float: none;

share/templates/helpers/datatables.tt

@@ -11,6 +11,7 @@
 -%]
 
 <script src="/js/libs/datatables-bootstrap-paging.js"></script>
+<script src="/js/libs/jquery-ui-timepicker-addon.js"></script>
 <script type="text/javascript">
 
 $.extend( $.fn.dataTableExt.oStdClasses, {
@@ -20,7 +21,7 @@ $.extend( $.fn.dataTableExt.oStdClasses, {
             } );
 
 $(document).ready(function() {
-	$('#[% helper.name.remove('[\s+\.]') %]_table')
+	var [% helper.name.remove('[\s+\.]') %]_table = $('#[% helper.name.remove('[\s+\.]') %]_table')
 	    .dataTable( {
         "sDom": "<'row-fluid'<'pull-left'r><'pull-right'f>>t<'row-fluid'<'pull-left'i><'pull-right'p>>",
         "bProcessing": true,
@@ -88,6 +89,43 @@ $(document).ready(function() {
             return nRow;
         },
 	} );
+
+    [% has_from = 0; has_to = 0; -%]
+    [% FOR c IN helper.dt_columns -%]
+      [% IF c.search_from_epoch && !has_from -%]
+        var f = '<label>From Date: <input type="text" id="[% helper.name.remove('[\s+\.]') %]_datepicker_start" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD hh:mm"/></label>';
+        $('#[% helper.name.remove('[\s+\.]') %]_table_filter').prepend(f);
+        $('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').datetimepicker({
+            "dateFormat": "yy-mm-dd",
+            "timeFormat": "HH:mm",
+            "onSelect": function(date) {
+                [% helper.name.remove('[\s+\.]') %]_table.fnFilter(date, 0);
+            }
+        }).keyup( function () {
+            [% helper.name.remove('[\s+\.]') %]_table.fnFilter(this.value, 0);    
+        });
+        [% has_from = 1 -%]
+      [% END -%]
+      [% IF c.search_to_epoch && !has_to -%]
+
+        var t = '<label>To Date: <input type="text" id="[% helper.name.remove('[\s+\.]') %]_datepicker_end" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD hh:mm"/></label>';
+        if($('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').length > 0) {
+            $('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').parent().after(t);
+        } else {
+            $('#[% helper.name.remove('[\s+\.]') %]_table_filter').prepend(t);
+        }
+        $('#[% helper.name.remove('[\s+\.]') %]_datepicker_end').datetimepicker({
+            "dateFormat": "yy-mm-dd",
+            "timeFormat": "HH:mm",
+            "onSelect": function(date) {
+                [% helper.name.remove('[\s+\.]') %]_table.fnFilter(date, 1);
+            }
+        }).keyup( function () {
+            [% helper.name.remove('[\s+\.]') %]_table.fnFilter(this.value, 1);    
+        });
+        [% has_to = 1-%]
+      [% END -%]
+    [% END %]
 } );
 </script>
 

share/templates/subscriber/master.tt

@@ -130,6 +130,7 @@
         </div>
         <div class="accordion-body collapse" id="collapse_calls">
             <div class="accordion-inner">
+            
 [%
     helper.name = 'Calls';
     helper.column_sort = 'status';