ruhnet
/
monster-ui-voip
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

UI-629: added a button to load more cdrs using the pagination system

4.3
Maxime Roux 11 years ago
parent
fe19fa82f4
commit
2e93ba366b
4 changed files with 200 additions and 121 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +25
    -0
      submodules/callLogs/callLogs.css
  2. +69
    -20
      submodules/callLogs/callLogs.js
  3. +100
    -0
      views/callLogs-additionalCdrs.html
  4. +6
    -101
      views/callLogs-layout.html

+ 25
- 0
submodules/callLogs/callLogs.css View File

@ -156,6 +156,31 @@
line-height: 40px;
}
#call_logs_container .call-logs-loader {
margin-top: 10px;
padding: 10px;
border: solid 1px #999;
border-radius: 4px;
text-align: center;
background-color: #eaeaea;
}
#call_logs_container .call-logs-loader .loader-message {
cursor: pointer;
}
#call_logs_container .call-logs-loader.loading .loader-message {
display: none;
}
#call_logs_container .call-logs-loader:not(.loading) .loading-message {
display: none;
}
#call_logs_container .call-logs-loader .loading-message i {
margin-right: 10px;
}
/******************** Popup *********************/
#call_logs_details_popup {


+ 69
- 20
submodules/callLogs/callLogs.js View File

@ -15,10 +15,6 @@ define(function(require){
headers: {
'Accept': 'application/octet-stream'
}
},
'voip.callLogs.getCdr': {
url: 'accounts/{accountId}/cdrs/{cdrId}',
verb: 'GET'
}
},
@ -46,11 +42,16 @@ define(function(require){
toDate = dates.to;
}
self.callLogsGetCdrs(fromDate, toDate, function(cdrs) {
self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) {
cdrs = self.callLogsFormatCdrs(cdrs);
dataTemplate.cdrs = cdrs;
template = $(monster.template(self, 'callLogs-layout', dataTemplate));
if(cdrs && cdrs.length) {
var cdrsTemplate = $(monster.template(self, 'callLogs-additionalCdrs', {cdrs: cdrs}));
template.find('.call-logs-grid').append(cdrsTemplate);
}
var optionsDatePicker = {
container: template,
range: rangeCallLogs
@ -61,7 +62,17 @@ define(function(require){
template.find('#startDate').datepicker('setDate', fromDate);
template.find('#endDate').datepicker('setDate', toDate);
self.callLogsBindEvents(template, cdrs);
if(!nextStartKey) {
template.find('.call-logs-loader').hide();
}
self.callLogsBindEvents({
template: template,
cdrs: cdrs,
fromDate: fromDate,
toDate: toDate,
nextStartKey: nextStartKey
});
parent
.empty()
@ -69,8 +80,13 @@ define(function(require){
});
},
callLogsBindEvents: function(template, cdrs) {
var self = this;
callLogsBindEvents: function(params) {
var self = this,
template = params.template,
cdrs = params.cdrs,
fromDate = params.fromDate,
toDate = params.toDate,
startKey = params.nextStartKey;
template.find('.filter-div .apply-filter').on('click', function(e) {
var fromDate = template.find('.filter-div input.filter-from').datepicker("getDate"),
@ -126,7 +142,7 @@ define(function(require){
}
});
template.find('.a-leg.has-b-legs').on('click', function(e) {
template.on('click', '.a-leg.has-b-legs', function(e) {
var rowGroup = $(this).parents('.grid-row-group');
if(rowGroup.hasClass('open')) {
rowGroup.removeClass('open');
@ -139,28 +155,61 @@ define(function(require){
}
});
template.find('.grid-cell.details i').on('click', function(e) {
template.on('click', '.grid-cell.details i', function(e) {
e.stopPropagation();
var cdrId = $(this).parents('.grid-row').data('id');
self.callLogsShowDetailsPopup(cdrId);
});
template.find('.grid-cell.report a').on('click', function(e) {
template.on('click', '.grid-cell.report a', function(e) {
e.stopPropagation();
});
template.find('.call-logs-loader:not(.loading) .loader-message').on('click', function(e) {
var loaderDiv = template.find('.call-logs-loader');
if(startKey) {
loaderDiv.toggleClass('loading');
loaderDiv.find('.loading-message > i').toggleClass('icon-spin');
self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) {
cdrs = self.callLogsFormatCdrs(cdrs);
addTemplate = $(monster.template(self, 'callLogs-additionalCdrs', {cdrs: cdrs}));
startKey = nextStartKey;
if(!startKey) {
template.find('.call-logs-loader').hide();
}
template.find('.call-logs-grid').append(addTemplate);
loaderDiv.toggleClass('loading');
loaderDiv.find('.loading-message > i').toggleClass('icon-spin');
}, startKey);
} else {
loaderDiv.hide();
}
});
},
callLogsGetCdrs: function(fromDate, toDate, callback) {
callLogsGetCdrs: function(fromDate, toDate, callback, pageStartKey) {
var self = this,
fromDateTimestamp = monster.util.dateToBeginningOfGregorianDay(fromDate),
toDateTimestamp = monster.util.dateToEndOfGregorianDay(toDate);
toDateTimestamp = monster.util.dateToEndOfGregorianDay(toDate),
filters = {
'created_from': fromDateTimestamp,
'created_to': toDateTimestamp,
'page_size': 50
};
if(pageStartKey) {
filters['start_key'] = pageStartKey;
}
monster.request({
resource: 'voip.callLogs.listCdrs',
self.callApi({
resource: 'cdrs.list',
data: {
accountId: self.accountId,
fromDate: fromDateTimestamp,
toDate: toDateTimestamp
filters: filters
},
success: function(data, status) {
var cdrs = {};
@ -177,7 +226,7 @@ define(function(require){
}
}
});
callback(cdrs);
callback(cdrs, data['next_start_key']);
}
});
},
@ -251,8 +300,8 @@ define(function(require){
callLogsShowDetailsPopup: function(callLogId) {
var self = this;
monster.request({
resource: 'voip.callLogs.getCdr',
self.callApi({
resource: 'cdrs.get',
data: {
accountId: self.accountId,
cdrId: callLogId


+ 100
- 0
views/callLogs-additionalCdrs.html View File

@ -0,0 +1,100 @@
{{#each cdrs}}
<div class="grid-row-group">
<div class="grid-row a-leg {{#if this.bLegs.length}}has-b-legs{{/if}}" data-id="{{this.id}}">
<div class="grid-cell direction">
<div class="sub-cell single-cell">
{{#if this.isOutboundCall}}
<i class="icon-arrow-left icon-orange"></i>
{{else}}
<i class="icon-arrow-right icon-green"></i>
{{/if}}
</div>
</div>
<div class="grid-cell datetime">
<div class="sub-cell cell-top">{{this.date}}</div>
<div class="sub-cell cell-bottom">{{this.time}}</div>
</div>
<div class="grid-cell from">
{{#if this.fromName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
<div class="sub-cell cell-bottom">{{this.fromName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
{{/if}}
</div>
<div class="grid-cell to">
{{#if this.toName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
<div class="sub-cell cell-bottom">{{this.toName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
{{/if}}
</div>
<div class="grid-cell duration">
<div class="sub-cell single-cell">
{{this.duration}}
</div>
</div>
<div class="grid-cell hangup">
<div class="sub-cell single-cell" title="{{this.hangupCause}}">
{{this.hangupCause}}
</div>
</div>
<div class="grid-cell details">
<div class="sub-cell single-cell">
<i class="icon-cog icon-large"></i>
</div>
</div>
<div class="grid-cell report">
<div class="sub-cell single-cell">
<a href="{{this.mailtoLink}}">{{../i18n.callLogs.reportCall}}</a>
</div>
</div>
</div>
{{#each this.bLegs}}
<div class="grid-row b-leg" data-id={{this.id}}>
<div class="grid-cell direction">
<div class="sub-cell single-cell"></div>
</div>
<div class="grid-cell datetime">
<div class="sub-cell cell-top">{{this.date}}</div>
<div class="sub-cell cell-bottom">{{this.time}}</div>
</div>
<div class="grid-cell from">
{{#if this.fromName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
<div class="sub-cell cell-bottom">{{this.fromName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
{{/if}}
</div>
<div class="grid-cell to">
{{#if this.toName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
<div class="sub-cell cell-bottom">{{this.toName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
{{/if}}
</div>
<div class="grid-cell duration">
<div class="sub-cell single-cell">
{{this.duration}}
</div>
</div>
<div class="grid-cell hangup">
<div class="sub-cell single-cell" title="{{this.hangupCause}}">
{{this.hangupCause}}
</div>
</div>
<div class="grid-cell details">
<div class="sub-cell single-cell">
<i class="icon-cog icon-large"></i>
</div>
</div>
<div class="grid-cell report">
<div class="sub-cell single-cell"></div>
</div>
</div>
{{/each}}
</div>
{{/each}}

+ 6
- 101
views/callLogs-layout.html View File

@ -65,110 +65,15 @@
<div class="grid-row no-match">
<div class="grid-cell">{{i18n.callLogs.noSearchMatch}}</div>
</div>
{{#each cdrs}}
<div class="grid-row-group">
<div class="grid-row a-leg {{#if this.bLegs.length}}has-b-legs{{/if}}" data-id="{{this.id}}">
<div class="grid-cell direction">
<div class="sub-cell single-cell">
{{#if this.isOutboundCall}}
<i class="icon-arrow-left icon-orange"></i>
{{else}}
<i class="icon-arrow-right icon-green"></i>
{{/if}}
</div>
</div>
<div class="grid-cell datetime">
<div class="sub-cell cell-top">{{this.date}}</div>
<div class="sub-cell cell-bottom">{{this.time}}</div>
</div>
<div class="grid-cell from">
{{#if this.fromName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
<div class="sub-cell cell-bottom">{{this.fromName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
{{/if}}
</div>
<div class="grid-cell to">
{{#if this.toName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
<div class="sub-cell cell-bottom">{{this.toName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
{{/if}}
</div>
<div class="grid-cell duration">
<div class="sub-cell single-cell">
{{this.duration}}
</div>
</div>
<div class="grid-cell hangup">
<div class="sub-cell single-cell" title="{{this.hangupCause}}">
{{this.hangupCause}}
</div>
</div>
<div class="grid-cell details">
<div class="sub-cell single-cell">
<i class="icon-cog icon-large"></i>
</div>
</div>
<div class="grid-cell report">
<div class="sub-cell single-cell">
<a href="{{this.mailtoLink}}">{{../i18n.callLogs.reportCall}}</a>
</div>
</div>
</div>
{{#each this.bLegs}}
<div class="grid-row b-leg" data-id={{this.id}}>
<div class="grid-cell direction">
<div class="sub-cell single-cell"></div>
</div>
<div class="grid-cell datetime">
<div class="sub-cell cell-top">{{this.date}}</div>
<div class="sub-cell cell-bottom">{{this.time}}</div>
</div>
<div class="grid-cell from">
{{#if this.fromName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
<div class="sub-cell cell-bottom">{{this.fromName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
{{/if}}
</div>
<div class="grid-cell to">
{{#if this.toName}}
<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
<div class="sub-cell cell-bottom">{{this.toName}}</div>
{{else}}
<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
{{/if}}
</div>
<div class="grid-cell duration">
<div class="sub-cell single-cell">
{{this.duration}}
</div>
</div>
<div class="grid-cell hangup">
<div class="sub-cell single-cell" title="{{this.hangupCause}}">
{{this.hangupCause}}
</div>
</div>
<div class="grid-cell details">
<div class="sub-cell single-cell">
<i class="icon-cog icon-large"></i>
</div>
</div>
<div class="grid-cell report">
<div class="sub-cell single-cell"></div>
</div>
</div>
{{/each}}
</div>
{{else}}
{{#unless cdrs}}
<div class="grid-row">
<div class="grid-cell">{{i18n.table.empty}}</div>
</div>
{{/each}}
{{/unless}}
</div>
</div>
<div class="call-logs-loader">
<div class="loader-message">Scroll down or click here to load additional Call Logs.</div>
<div class="loading-message"><i class="icon-spinner icon-large"></i><span>Loading additional Call Logs...</span></div>
</div>
</div>

Write Preview
Loading…
Cancel
Save