TT#10972 Cosmetic changes to conversation view

Change-Id: I2454f6bba5b05030c4e25990bc385928ba95eff2
changes/82/11282/3
Andreas Granig 8 years ago committed by Robert Axelsen
parent c2fa8ce2b6
commit 034dd09d13

@ -187,9 +187,6 @@
*
*/
"js": [{
"path": "libs/libphonenumber-js.min.js",
"includeInBundle": true
},{
"path": "initLocalStorage.js",
"includeInBundle": true
},{

@ -2,7 +2,7 @@ Ext.define('Ngcp.csc.locales', {
statics: {
login: {
title: {
en: 'Self Care Login',
en: 'Login to your Portal',
it: 'Connessione all\'Area di Amministrazione',
de: 'Ihr persönliches Portal',
fr: 'Connexion à l\'espace d\'administration',
@ -145,11 +145,11 @@ Ext.define('Ngcp.csc.locales', {
}
},
section_title: {
en: 'Conversations.',
it: 'Conversations.',
de: 'Conversations.',
fr: 'Conversations.',
sp: 'Conversations.'
en: 'Conversations',
it: 'Conversations',
de: 'Conversations',
fr: 'Conversations',
sp: 'Conversations'
},
recent_calls: {
en: 'RECENT CALLS',
@ -209,51 +209,156 @@ Ext.define('Ngcp.csc.locales', {
fr: 'Folder',
sp: 'Folder'
},
location:{
location: {
en: 'Location',
it: 'Location',
de: 'Location',
fr: 'Location',
sp: 'Location'
},
direction:{
direction: {
en: 'Direction',
it: 'Direction',
de: 'Direction',
fr: 'Direction',
sp: 'Direction'
},
tooltips:{
call_types:{
call:{
received_call_from: {
en: 'Received call from',
it: 'Received call from',
de: 'Received call from',
fr: 'Received call from',
sp: 'Received call from'
},
received_fax_from: {
en: 'Received fax from',
it: 'Received fax from',
de: 'Received fax from',
fr: 'Received fax from',
sp: 'Received fax from'
},
received_sms_from: {
en: 'Received sms from',
it: 'Received sms from',
de: 'Received sms from',
fr: 'Received sms from',
sp: 'Received sms from'
},
received_chat_message_from: {
en: 'Received chat message from',
it: 'Received chat message from',
de: 'Received chat message from',
fr: 'Received chat message from',
sp: 'Received chat message from'
},
received_voice_mail_from: {
en: 'Received voice mail from',
it: 'Received voice mail from',
de: 'Received voice mail from',
fr: 'Received voice mail from',
sp: 'Received voice mail from'
},
missed_call_from: {
en: 'Missed call from',
it: 'Missed call from',
de: 'Missed call from',
fr: 'Missed call from',
sp: 'Missed call from'
},
successful_call_to: {
en: 'Successful call to',
it: 'Successful call to',
de: 'Successful call to',
fr: 'Successful call to',
sp: 'Successful call to'
},
successful_fax_to: {
en: 'Successful fax to',
it: 'Successful fax to',
de: 'Successful fax to',
fr: 'Successful fax to',
sp: 'Successful fax to'
},
successful_sms_to: {
en: 'Sent sms to',
it: 'Sent sms to',
de: 'Sent sms to',
fr: 'Sent sms to',
sp: 'Sent sms to'
},
sent_chat_message_to: {
en: 'Sent chat message to',
it: 'Sent chat message to',
de: 'Sent chat message to',
fr: 'Sent chat message to',
sp: 'Sent chat message to'
},
unsuccessful_call_to: {
en: 'Unsuccessful call to',
it: 'Unsuccessful call to',
de: 'Unsuccessful call to',
fr: 'Unsuccessful call to',
sp: 'Unsuccessful call to'
},
unsuccessful_fax_to: {
en: 'Unsuccessful fax to',
it: 'Unsuccessful fax to',
de: 'Unsuccessful fax to',
fr: 'Unsuccessful fax to',
sp: 'Unsuccessful fax to'
},
successful_call_forward_to: {
en: 'Successful call forward to',
it: 'Successful call forward to',
de: 'Successful call forward to',
fr: 'Successful call forward to',
sp: 'Successful call forward to'
},
successful_sms_forward_to: {
en: 'Successful sms forward to',
it: 'Successful sms forward to',
de: 'Successful sms forward to',
fr: 'Successful sms forward to',
sp: 'Successful sms forward to'
},
unsuccessful_call_forward_to: {
en: 'Unsuccessful call forward to',
it: 'Unsuccessful call forward to',
de: 'Unsuccessful call forward to',
fr: 'Unsuccessful call forward to',
sp: 'Unsuccessful call forward to'
},
tooltips: {
call_types: {
call: {
en: 'Call',
it: 'Call',
de: 'Call',
fr: 'Call',
sp: 'Call'
},
sms:{
sms: {
en: 'SMS',
it: 'SMS',
de: 'SMS',
fr: 'SMS',
sp: 'SMS'
},
fax:{
fax: {
en: 'Fax',
it: 'Fax',
de: 'Fax',
fr: 'Fax',
sp: 'Fax'
},
voicemail:{
voicemail: {
en: 'Voicemail',
it: 'Voicemail',
de: 'Voicemail',
fr: 'Voicemail',
sp: 'Voicemail'
},
chat:{
chat: {
en: 'Chat',
it: 'Chat',
de: 'Chat',
@ -261,68 +366,68 @@ Ext.define('Ngcp.csc.locales', {
sp: 'Chat'
}
},
new_sms:{
en: 'Create and send a new SMS.',
it: 'Create and send a new SMS.',
de: 'Create and send a new SMS.',
fr: 'Create and send a new SMS.',
sp: 'Create and send a new SMS.'
new_sms: {
en: 'Send a new SMS',
it: 'Send a new SMS',
de: 'Send a new SMS',
fr: 'Send a new SMS',
sp: 'Send a new SMS'
},
new_call:{
en: 'Call a new or an existing number.',
it: 'Call a new or an existing number.',
de: 'Call a new or an existing number.',
fr: 'Call a new or an existing number.',
sp: 'Call a new or an existing number.'
new_call: {
en: 'Place a new Call',
it: 'Place a new Call',
de: 'Place a new Call',
fr: 'Place a new Call',
sp: 'Place a new Call'
},
new_fax:{
en: 'Create and send a new fax.',
it: 'Create and send a new fax.',
de: 'Create and send a new fax.',
fr: 'Create and send a new fax.',
sp: 'Create and send a new fax.'
new_fax: {
en: 'Send a new Fax',
it: 'Send a new Fax',
de: 'Send a new Fax',
fr: 'Send a new Fax',
sp: 'Send a new Fax'
},
recall:{
en: 'Call this number.',
it: 'Call this number.',
de: 'Call this number.',
fr: 'Call this number.',
sp: 'Call this number.'
recall: {
en: 'Call',
it: 'Call',
de: 'Call',
fr: 'Call',
sp: 'Call'
},
listen:{
en: 'Reproduce the message.',
it: 'Reproduce the message.',
de: 'Reproduce the message.',
sp: 'Reproduce the message.',
fr: 'Reproduce the message.'
listen: {
en: 'Play Message',
it: 'Play Message',
de: 'Play Message',
sp: 'Play Message',
fr: 'Play Message'
},
send_fax:{
en: 'Send a fax to this number.',
it: 'Send a fax to this number.',
de: 'Send a fax to this number.',
fr: 'Send a fax to this number.',
sp: 'Send a fax to this number.'
send_fax: {
en: 'Send Fax',
it: 'Send Fax',
de: 'Send Fax',
fr: 'Send Fax',
sp: 'Send Fax'
},
download_fax:{
en: 'Download this fax.',
it: 'Download this fax.',
de: 'Download this fax.',
fr: 'Download this fax.',
sp: 'Download this fax.'
download_fax: {
en: 'Download',
it: 'Download',
de: 'Download',
fr: 'Download',
sp: 'Download'
},
send_sms:{
en: 'Send an sms to this number.',
it: 'Send an sms to this number.',
de: 'Send an sms to this number.',
fr: 'Send an sms to this number.',
sp: 'Send an sms to this number.'
send_sms: {
en: 'Send SMS',
it: 'Send SMS',
de: 'Send SMS',
fr: 'Send SMS',
sp: 'Send SMS'
},
chat :{
en: 'Start a private conversation.',
it: 'Start a private conversation.',
de: 'Start a private conversation.',
fr: 'Start a private conversation.',
sp: 'Start a private conversation.'
chat: {
en: 'Send Chat Message',
it: 'Send Chat Message',
de: 'Send Chat Message',
fr: 'Send Chat Message',
sp: 'Send Chat Message'
}
}
},

@ -2,7 +2,7 @@
$ui: 'core-container',
$ui-border-color: lightgray,
$ui-border-width: 1px,
$ui-border-radius: 10px
$ui-border-radius: 1px
);
.x-panel-core-container {
.x-panel-body {

@ -20,12 +20,9 @@ $grid-row-cell-focus-border-color: '#fff';
table-layout: auto;
border: 1px solid lightgray;
margin-bottom: 10px;
border-radius: 5px;
border-radius: 1px;
margin-right: 11px;
padding:10px;
-webkit-box-shadow: 0 8px 6px -6px lightgray;
-moz-box-shadow: 0 8px 6px -6px lightgray;
box-shadow: 0 8px 6px -6px lightgray;
}
.x-grid-td {

@ -7,6 +7,7 @@
$ui: 'conversations-actions-btn'
// btns customisations goes here
);
// custom rules
.missed-call-color {
color: rgb(234, 80, 0);
@ -17,11 +18,44 @@
color: $base-color;
}
.sms-preview, .chat-preview {
padding: 16px;
}
.caller{
.caller {
font-size: 16px;
}
.x-grid-item {
padding: 0 !important;
}
.x-grid-cell-inner {
padding: 15px 0px 15px 10px;
}
.x-grid-rowbody {
width: 100%;
padding: 0;
}
.card-footer {
background: #efefef;
color: #666;
padding: 10px;
}
.conv-description {
color: #666;
text-align: right;
font-size: 12px;
}
.x-btn-conversations-actions-btn-medium {
background: white;
border: none;
.x-fa,
.x-btn-inner {
color: $base-color;
}
}

@ -26,9 +26,10 @@ Ext.define('NgcpCsc.view.login.Login', {
margin: '5 0'
},
items: [{
id: 'title',
panel: 'label',
title: Ngcp.csc.locales.login.title[localStorage.getItem('languageSelected')]
id: 'login-title',
padding: '20 0 20 0',
height: 70,
html: Ngcp.csc.locales.login.title[localStorage.getItem('languageSelected')]
}, {
xtype: 'textfield',
name: 'username',
@ -66,20 +67,6 @@ Ext.define('NgcpCsc.view.login.Login', {
cls: 'auth-password-trigger'
}
}
}, {
xtype: 'combo',
emptyText: Ngcp.csc.locales.login.choose_language[localStorage.getItem('languageSelected')],
padding: '0 0 0 15',
store: 'Languages',
queryMode: 'local',
id: 'login-language',
valueField: 'id',
displayField: 'language',
editable: false,
value: localStorage.getItem('languageSelected'),
listeners: {
'select': 'languageSelection'
}
},
{
xtype: 'container',

@ -35,20 +35,20 @@ Ext.define('NgcpCsc.view.pages.conversations.Conversations', {
items: [{
text: Ngcp.csc.locales.conversations.btns.new_sms[localStorage.getItem('languageSelected')],
itemId: 'newSms',
iconCls: 'x-fa fa-comment fa-2x',
iconCls: 'x-fa fa-envelope fa',
margin: '0 20 0 0',
tooltip: Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')]
}, {
text: Ngcp.csc.locales.conversations.btns.new_call[localStorage.getItem('languageSelected')],
itemId: 'newCall',
iconCls: 'x-fa fa-phone fa-2x',
iconCls: 'x-fa fa-phone fa',
margin: '0 20 0 0',
tooltip: Ngcp.csc.locales.conversations.tooltips.new_call[localStorage.getItem('languageSelected')]
}, {
text: Ngcp.csc.locales.conversations.btns.new_fax[localStorage.getItem('languageSelected')],
itemId: 'newfax',
iconCls: 'x-fa fa-fax fa-2x',
iconCls: 'x-fa fa-file-text fa',
tooltip: Ngcp.csc.locales.conversations.tooltips.new_fax[localStorage.getItem('languageSelected')]
}]
}]

@ -27,22 +27,22 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
switch (record.get('call_type')) {
case 'call':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.call[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-phone-square green-icon fa-2x pointer';
icon = 'fa fa-phone green-icon pointer';
break;
case 'voicemail':
icon = 'fa fa-envelope green-icon fa-2x pointer';
icon = 'fa fa-folder-open-o green-icon pointer';
break;
case 'sms':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.sms[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-comment green-icon fa-2x pointer';
icon = 'fa fa-envelope-o green-icon pointer';
break;
case 'chat':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.chat[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-wechat green-icon fa-2x pointer';
icon = 'fa fa-comment-o green-icon pointer';
break;
case 'fax':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.fax[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-file-text green-icon fa-2x pointer';
icon = 'fa fa-file-text-o green-icon pointer';
break;
};
return Ext.String.format('<div class="{0}"></div>', icon);
@ -50,24 +50,117 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
renderCallTypeIcons: function(value, meta, record) {
var icon,
color = record.get('status') + '-call-color';
color = record.get('status') + '-call-color',
direction = record.get('direction');
switch (record.get('direction')) {
case 'incoming':
icon = color + ' fa fa-chevron-left fa-2x';
icon = color + ' fa fa-chevron-left';
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.incoming[localStorage.getItem('languageSelected')] + '"';
break;
case 'outgoing':
icon = color + ' fa fa-chevron-right fa-2x';
icon = color + ' fa fa-chevron-right';
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.outgoing[localStorage.getItem('languageSelected')] + '"';
break;
case 'forwarded':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.forwarded[localStorage.getItem('languageSelected')] + '"';
return '<div><span class="' + color + ' fa fa-chevron-right fa-2x"></span><span class="' + color + ' fa fa-chevron-right fa-2x"></span></div>';
return '<div><span class="' + color + ' fa fa-chevron-right"></span><span class="' + color + ' fa fa-chevron-right"></span></div>';
break;
};
return Ext.String.format('<div class="{0}"></div>', icon);
},
renderDescription: function(value, meta, record) {
var desc;
switch (record.get('direction')) {
case 'incoming':
switch(record.get('status')) {
case 'answered':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.received_call_from[localStorage.getItem('languageSelected')];
break;
case 'fax':
desc = Ngcp.csc.locales.conversations.received_fax_from[localStorage.getItem('languageSelected')];
break;
case 'sms':
desc = Ngcp.csc.locales.conversations.received_sms_from[localStorage.getItem('languageSelected')];
break;
case 'chat':
desc = Ngcp.csc.locales.conversations.received_chat_message_from[localStorage.getItem('languageSelected')];
break;
case 'voicemail':
desc = Ngcp.csc.locales.conversations.received_voice_mail_from[localStorage.getItem('languageSelected')];
break;
}
break;
case 'missed':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.missed_call_from[localStorage.getItem('languageSelected')];
break;
// there shouldn't be other missed types
}
break;
}
break;
case 'outgoing':
switch(record.get('status')) {
case 'answered':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.successful_call_to[localStorage.getItem('languageSelected')];
break;
case 'fax':
desc = Ngcp.csc.locales.conversations.successful_fax_to[localStorage.getItem('languageSelected')];
break;
case 'sms':
desc = Ngcp.csc.locales.conversations.successful_sms_to[localStorage.getItem('languageSelected')];
break;
case 'chat':
desc = Ngcp.csc.locales.conversations.sent_chat_message_to[localStorage.getItem('languageSelected')];
break;
}
break;
case 'missed':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.unsuccessful_call_to[localStorage.getItem('languageSelected')];
break;
case 'fax':
desc = Ngcp.csc.locales.conversations.unsuccessful_fax_to[localStorage.getItem('languageSelected')];
break;
// there shouldn't be other missed types
}
break;
}
break;
case 'forwarded':
switch(record.get('status')) {
case 'answered':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.successful_call_forward_to[localStorage.getItem('languageSelected')];
break;
case 'sms':
desc = Ngcp.csc.locales.conversations.successful_sms_forward_to[localStorage.getItem('languageSelected')];
break;
// there shouldn't be other forwarded types
}
break;
case 'missed':
switch(record.get('call_type')) {
case 'call':
desc = Ngcp.csc.locales.conversations.unsuccessful_call_forward_to[localStorage.getItem('languageSelected')];
break;
// there shouldn't be other missed types
}
break;
}
break;
};
return '<div class="conv-description">' + desc + '</div>';
},
renderCaller: function(val) {
return '<div class="caller">' + val + '</div>';
},
@ -169,35 +262,27 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
}
switch (record.get('call_type')) {
case 'call':
icon = 'fa fa-phone green-icon fa-2x pointer';
icon = 'fa fa-phone-square green-icon pointer';
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"';
break;
case 'voicemail':
return '<div id="voicemail-' + record.get('id') + '" class="card-icon play" data-callback="reproduceVoicemail"><i class="fa fa-play green-icon fa-2x pointer" aria-hidden="true"></i></div>'
return '<div id="voicemail-' + record.get('id') + '" class="card-icon play" data-callback="reproduceVoicemail"><i class="fa fa-play green-icon pointer" aria-hidden="true"></i></div>'
break;
case 'fax':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-fax green-icon fa-2x pointer';
icon = 'fa fa-file-text green-icon pointer';
break;
case 'sms':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-comment green-icon fa-2x pointer';
icon = 'fa fa-envelope green-icon pointer';
break;
case 'chat':
meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"';
icon = 'fa fa-wechat green-icon fa-2x pointer';
icon = 'fa fa-comment green-icon pointer';
break;
};
return Ext.String.format('<div class="{0}"></div>', icon);
},
// libphonenumber returns country codes; i did not find yet
// a free library which returns city name from areaCode like
// +43-1-23456 => {country:'AT', city:'Vienna'}
// https://github.com/halt-hammerzeit/libphonenumber-js
renderCity: function(value, meta, record) {
var lookupData = new libphonenumber.parse(record.get('source_cli'));
return lookupData.country;
},
saveSettings: function() {
this.fireEvent('showmessage', true, Ngcp.csc.locales.common.save_success[localStorage.getItem('languageSelected')]);

@ -31,7 +31,9 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
viewConfig: {
stripeRows: false,
columnLines: false
columnLines: false,
// TODO: Added, but does not enable selection inside rowbody
enableTextSelection: true
},
columns: {
@ -45,19 +47,16 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
}, {
dataIndex: 'call_type',
renderer: 'renderCallTypeIcons',
width: 60
width: 40
}, {
dataIndex: 'call_type',
renderer: 'renderDescription',
flex: 2
}, {
text: (this._groupCallsByMonth) ? Ngcp.csc.locales.common.number[localStorage.getItem('languageSelected')] : '',
flex: 1,
dataIndex: 'source_cli',
renderer: 'renderCaller'
}, {
renderer: 'renderCity',
dataIndex: 'city',
flex: 1
}, {
renderer: 'renderShortCut',
width: 40
renderer: 'renderCaller',
flex: 3
}]
},
initComponent: function() {
@ -66,28 +65,24 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
ftype: 'rowbody',
getAdditionalData: function(data, idx, record, orig) {
var content;
var footer = "<div class='pointer' id='card-footer-" + record.get('id') + "'><div><hr class='fade'></div><div>" + Ngcp.csc.formatter.timeSince(record.get('start_time')) + " " + Ngcp.csc.locales.common.ago[localStorage.getItem('languageSelected')] + "</div></div>"
var footer = "<div class='pointer card-footer' id='card-footer-" + record.get('id') + "'><div></div><div>" + Ngcp.csc.formatter.timeSince(record.get('start_time')) + " " + Ngcp.csc.locales.common.ago[localStorage.getItem('languageSelected')] + "</div></div>"
var previewCharNum = Ext.os.is.Desktop ? 110 : me.getWidth() / 7.5;
switch (record.get('call_type')) {
case 'call':
content = '<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.direction[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('direction') + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.filters.status[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('status') + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.cost[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('charges') + record.get('currency') + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.location[localStorage.getItem('languageSelected')] + '</b>: ' + me.up('conversations').getController().renderCity(null, null, record) + ' </div>' +
'<div class="card-icon-row">' +
'<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-envelope green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'</div></div>';
break;
case 'voicemail':
content = '<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.caller[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('number') + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.folder[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('folder') + ' </div>' +
'<div class="card-icon-row">' +
'<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
@ -101,12 +96,11 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
'<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
'<div class="card-data-row ">' + record.get('text') + '</div>' +
'<div class="card-data-row "><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.direction[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('direction') + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.cost[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('charges') + record.get('currency') + ' </div>' +
'<div class="card-icon-row">' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-envelope green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'</div></div>';
break;
case 'chat':
@ -116,17 +110,17 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
'<div class="card-data-row ">' + record.get('text') + '</div>' +
'<div class="card-data-row "><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
'<div class="card-icon-row">' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'</div></div>';
break;
case 'fax':
content = '<div class="card-wrapper hidden" id=' + record.get('id') + '>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.pages[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('pages') + '</div>' +
'<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
'<div class="card-icon-row">' +
'<div id="downloadFax-' + record.get('id') + '" class="card-icon" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.download_fax[localStorage.getItem('languageSelected')] + '"><a href="resources/docs/fax.pdf" target="_blank"><i class="fa fa-file-pdf-o green-icon fa-2x pointer" aria-hidden="true"></i></a></div>' +
'<div id="sendFax-' + record.get('id') + '" class="card-icon" data-callback="sendFax" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"><i class="fa fa-fax green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'<div id="downloadFax-' + record.get('id') + '" class="card-icon" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.download_fax[localStorage.getItem('languageSelected')] + '"><a href="resources/docs/fax.pdf" target="_blank"><i class="fa fa-download green-icon fa-2x pointer" aria-hidden="true"></i></a></div>' +
'<div id="sendFax-' + record.get('id') + '" class="card-icon" data-callback="sendFax" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"><i class="fa fa-file-text green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
'</div></div>';
break;
}

@ -7,7 +7,7 @@
*
* Rowbodies are initially hidden unless you override {@link #getAdditionalData}.
*
* The events fired by RowBody are relayed to the owning
* The events fired by RowBody are relayed to the owning
* {@link Ext.view.Table grid view} (and subsequently the owning grid).
*
* # Example
@ -17,7 +17,7 @@
* extend: 'Ext.data.Model',
* fields: ['name', 'latin', 'desc', 'lifespan']
* });
*
*
* Ext.create('Ext.grid.Panel', {
* width: 400,
* height: 300,
@ -69,7 +69,7 @@
* rowbodyclick: function(view, rowEl, e, eOpts) {
* var itemEl = Ext.get(rowEl).up(view.itemSelector),
* rec = view.getRecord(itemEl);
*
*
* Ext.Msg.alert(rec.get('name') + ' life span', rec.get('lifespan'));
* }
* }
@ -112,7 +112,7 @@ Ext.define('Ext.grid.feature.RowBody', {
rowValues.rowBodyColspan = columns.length;
rowValues.rowBodyCls = me.rowBodyCls;
rowValues.rowIdCls = me.rowIdCls;
if (rowExpanderCol && rowExpanderCol.getView() === view) {
view.grid.removeCls(Ext.baseCSSPrefix + 'grid-hide-row-expander-spacer');
rowValues.addSpacerCell = true;
@ -223,23 +223,23 @@ Ext.define('Ext.grid.feature.RowBody', {
* Provides additional data to the prepareData call within the grid view.
* The rowbody feature adds 3 additional variables into the grid view's template.
* These are `rowBody`, `rowBodyCls`, and `rowBodyColspan`.
*
* - **rowBody:** *{String}* The HTML to display in the row body element. Defaults
*
* - **rowBody:** *{String}* The HTML to display in the row body element. Defaults
* to *undefined*.
* - **rowBodyCls:** *{String}* An optional CSS class (or multiple classes
* separated by spaces) to apply to the row body element. Defaults to
* - **rowBodyCls:** *{String}* An optional CSS class (or multiple classes
* separated by spaces) to apply to the row body element. Defaults to
* {@link #rowBodyCls}.
* - **rowBodyColspan:** *{Number}* The number of columns that the row body element
* - **rowBodyColspan:** *{Number}* The number of columns that the row body element
* should span. Defaults to the number of visible columns.
*
*
* @param {Object} data The data for this particular record.
* @param {Number} idx The row index for this record.
* @param {Ext.data.Model} record The record instance
* @param {Object} orig The original result from the prepareData call to massage.
* @return {Object} An object containing additional variables for use in the grid
* @return {Object} An object containing additional variables for use in the grid
* view's template
*/
/*
* @private
*/
@ -248,17 +248,17 @@ Ext.define('Ext.grid.feature.RowBody', {
Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
}
}
/**
* @event beforerowbodymousedown
* @preventable
* @member Ext.view.Table
* Fires before the mousedown event on a row body element is processed. Return false
* Fires before the mousedown event on a row body element is processed. Return false
* to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @param {Ext.view.View} view The rowbody's owning View
* @param {HTMLElement} rowBodyEl The row body's element
* @param {Ext.event.Event} e The raw event object
@ -268,12 +268,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodymouseup
* @preventable
* @member Ext.view.Table
* Fires before the mouseup event on a row body element is processed. Return false
* Fires before the mouseup event on a row body element is processed. Return false
* to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -281,12 +281,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodyclick
* @preventable
* @member Ext.view.Table
* Fires before the click event on a row body element is processed. Return false to
* Fires before the click event on a row body element is processed. Return false to
* cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -294,12 +294,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodydblclick
* @preventable
* @member Ext.view.Table
* Fires before the dblclick event on a row body element is processed. Return false
* Fires before the dblclick event on a row body element is processed. Return false
* to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -307,25 +307,25 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodycontextmenu
* @preventable
* @member Ext.view.Table
* Fires before the contextmenu event on a row body element is processed. Return
* Fires before the contextmenu event on a row body element is processed. Return
* false to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
/**
* @event beforerowbodylongpress
* @preventable
* @member Ext.view.Table
* Fires before the longpress event on a row body element is processed. Return
* Fires before the longpress event on a row body element is processed. Return
* false to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -333,12 +333,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodykeydown
* @preventable
* @member Ext.view.Table
* Fires before the keydown event on a row body element is processed. Return false
* Fires before the keydown event on a row body element is processed. Return false
* to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -346,12 +346,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodykeyup
* @preventable
* @member Ext.view.Table
* Fires before the keyup event on a row body element is processed. Return false to
* Fires before the keyup event on a row body element is processed. Return false to
* cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -359,12 +359,12 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event beforerowbodykeypress
* @preventable
* @member Ext.view.Table
* Fires before the keypress event on a row body element is processed. Return false
* Fires before the keypress event on a row body element is processed. Return false
* to cancel the default action.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -372,10 +372,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodymousedown
* @member Ext.view.Table
* Fires when there is a mouse down on a row body element
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -383,10 +383,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodymouseup
* @member Ext.view.Table
* Fires when there is a mouse up on a row body element
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -394,10 +394,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodyclick
* @member Ext.view.Table
* Fires when a row body element is clicked
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -405,10 +405,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodydblclick
* @member Ext.view.Table
* Fires when a row body element is double clicked
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -416,21 +416,21 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodycontextmenu
* @member Ext.view.Table
* Fires when a row body element is right clicked
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
/**
* @event rowbodylongpress
* @member Ext.view.Table
* Fires on a row body element longpress event
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -438,10 +438,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodykeydown
* @member Ext.view.Table
* Fires when a key is pressed down while a row body element is currently selected
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -449,10 +449,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodykeyup
* @member Ext.view.Table
* Fires when a key is released while a row body element is currently selected
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
@ -460,10 +460,10 @@ Ext.define('Ext.grid.feature.RowBody', {
* @event rowbodykeypress
* @member Ext.view.Table
* Fires when a key is pressed while a row body element is currently selected.
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
*
* **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is
* used.
*
*
* @inheritdoc #beforerowbodymousedown
*/
});

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta charset="UTF-8">
<title>NgcpCsc Dashboard</title>
<title>Sipwise Customer Portal</title>
<script type="text/javascript">

File diff suppressed because one or more lines are too long

@ -7,8 +7,8 @@
"duration": 19.488,
"charges": 40.112,
"currency": "&euro;",
"status": "missed",
"direction": "outgoing",
"status": "answered",
"direction": "incoming",
"folder": "INBOX",
"start_time": "2017-02-09T12:05:33.384000000+02:00"
}, {
@ -48,6 +48,7 @@
"uid": "840",
"text": "This is a chat message. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"direction": "incoming",
"source_cli": "John Doe",
"status": "answered",
"start_time": "2017-01-30T10:05:33.384000000+02:00"
}, {
@ -58,7 +59,7 @@
"duration": 11.342,
"charges": 0.000,
"currency": "&euro;",
"status": "missed",
"status": "answered",
"direction": "incoming",
"folder": "Old",
"start_time": "2017-01-15T10:05:33.384000000+02:00"

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

@ -28,7 +28,3 @@ body.x-ios.x-webview.x-portrait {
.center-txt {
text-align: center;
}
hr.fade {
border-top: 1px solid lightgray;
}

@ -5,3 +5,16 @@
.circular {
border-radius: 50%;
}
body .x-mask {
background: url(/resources/images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#login-title-body {
text-align: center;
font-size: 1.5em;
}

Loading…
Cancel
Save