MT#5585 Add details about cdr record

(cherry picked from commit f1e3602b3e)
Change-Id: I68655171f13e06a7c1566ae82b58341ccdbb12fb

lib/NGCP/Panel/Controller/Subscriber.pm

@@ -2044,6 +2044,7 @@ sub master :Chained('base') :PathPart('details') :CaptureArgs(0) {
     my ($self, $c) = @_;
 
     my $call_cols = [
+        { name => "id", title => $c->loc('#')  },
         { name => "source_user", search => 1, title => $c->loc('Caller') },
         { name => "destination_user", search => 1, title => $c->loc('Callee') },
         { name => "call_status", search => 1, title => $c->loc('Status') },
@@ -3048,6 +3049,16 @@ sub ajax_calls :Chained('master') :PathPart('calls/ajax') :Args(0) {
 
     $c->detach( $c->view("JSON") );
 }
+sub ajax_call_details :Chained('master') :PathPart('calls/ajax') :Args(1) {
+    my ($self, $c, $call_id) = @_;
+    my $call = $c->model('DB')->resultset('cdr')->search_rs({
+        id => $call_id,
+    });
+    $c->stash( 
+        template => 'subscriber/call_details.tt',
+        call     => { $call->first->get_inflated_columns } );
+    $c->detach( $c->view('TT') );
+}
 
 sub ajax_registered :Chained('master') :PathPart('registered/ajax') :Args(0) {
     my ($self, $c) = @_;

share/templates/subscriber/call_details.tt

@@ -0,0 +1,5 @@
+<ul> 
+[% FOREACH key IN call.keys().sort(); %]
+    <li class="calldetails"><span class="calldetails_title">[% key %]</span> <span class="calldetails_value">[%call.${key}%]</span></li>
+[% END -%]
+</ul>

share/templates/subscriber/call_details_wrapper.tt

@@ -0,0 +1,37 @@
+<style>
+#call_details{
+    display:none;
+    position:absolute;
+    top:150px;
+    left:700px;
+    width: 450px;
+    height: 700px;   
+}   
+.calldetails_title{
+    font-weight:bold;
+    font-style:italic;
+}
+.calldetails_value{
+    font-weight:bold;
+    margin-right:12px;
+    float: right;
+}
+li.calldetails{
+    border-bottom: 1px solid #444444;
+}
+</style>
+<div id="call_details" class="modal ngcp-modal">
+    <div class="modal-header">
+        <h3>[%c.loc('Call details')%]
+        <button type="button" class="close mod_close">×</button>
+        </h3>
+    </div>
+    <div style="overflow:auto;height:85%;" id="call_details_container">
+
+[%PROCESS 'subscriber/call_details.tt' %]
+
+    </div>
+    <div class="modal-footer">
+        <a class="mod_close btn btn-primary btn-small">[%c.loc('Close')%]</a>
+    </div>
+</div>

share/templates/subscriber/master.tt

@@ -164,13 +164,36 @@
         ((c.user.roles == 'admin' || c.user.roles == 'reseller') && c.user.call_data) ||
         c.user.roles == 'subscriberadmin'
     -%]
+
+    <script type="text/javascript" src="/js/background.js"></script>
+<script>
+function showCallDetails(callId){
+    var divId = 'call_details';
+    var uri = '[%c.uri_for_action('/subscriber/ajax_call_details', [c.req.captures.0, 'call_id'])%]';
+    uri=uri.replace('call_id', callId);
+    fetch_into(
+        'call_details_container',
+        uri,
+        '',
+        function(){ 
+            $('#'+divId).draggable({
+                handle: '.modal-header',
+                cursor: 'crosshair',
+            }).css('display','block').find($('.mod_close')).click(function(event) {
+                $('#'+divId).css('display','none');
+            });
+        }
+    );
+}
+</script>
     <div class="accordion-group">
         <div class="accordion-heading">
             <a class="accordion-toggle" data-toggle="collapse" data-parent="#subscriber_data" href="#collapse_calls">[% c.loc('Call History') %]</a>
         </div>
         <div class="accordion-body collapse" id="collapse_calls">
             <div class="accordion-inner">
-            
+
+[%PROCESS 'subscriber/call_details_wrapper.tt' %]  
 [%
     helper.name = 'Calls';
     helper.dt_columns = calls_dt_columns;
@@ -179,10 +202,14 @@
     helper.ajax_uri = c.uri_for_action('/subscriber/ajax_calls', [c.req.captures.0]);
     helper.show_footer = 1;
 
-    IF (c.user.roles == "admin" || c.user.roles == "reseller") && c.config.features.callflow;
+    IF (c.user.roles == "admin" || c.user.roles == "reseller");
+        IF c.config.features.callflow;
     helper.dt_buttons = [
         { name = c.loc('Call Flow'), uri = "/callflow/'+encodeURIComponent(full.call_id)+'/callmap", class = 'btn-small btn-primary', icon = 'icon-random' },
     ];
+        END;
+    details_button = { name = c.loc('Call Details'), uri = "javascript:showCallDetails(\\''+encodeURIComponent(full.id)+'\\');void(0);" , class = 'btn-small btn-primary', icon = 'icon-edit' };
+    helper.dt_buttons.push( details_button );
     END;
 
     PROCESS 'helpers/datatables.tt';