sipwise
/
ngcp-csc
mirror of https://github.com/sipwise/ngcp-csc.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#10972 Cosmetic changes to conversation view

Browse Source 
Change-Id: I2454f6bba5b05030c4e25990bc385928ba95eff2
changes/82/11282/3
Andreas Granig 8 years ago committed by Robert Axelsen
parent c2fa8ce2b6
commit 034dd09d13
16 changed files with 442 additions and 238 deletions
Show Stats Download Patch File Download Diff File

3
app.json
Unescape View File

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

243
app/locales.js
Unescape View File

@ -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
classic/sass/src/view/core/Container.scss
Unescape View File

@ -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 {

5
classic/sass/src/view/core/GridCards.scss
Unescape View File

@ -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 {

38
classic/sass/src/view/pages/conversations/Conversations.scss
Unescape View File

@ -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;
}
}

21
classic/src/view/login/Login.js
Unescape View File

@ -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',

6
classic/src/view/pages/conversations/Conversations.js
Unescape View File

@ -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')]
}]
}]

129
classic/src/view/pages/conversations/ConversationsController.js
Unescape View File

@ -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')]);

46
classic/src/view/pages/conversations/ConversationsGrid.js
Unescape View File

@ -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;
}

2
index.html
Unescape View File

@ -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">

5
libs/libphonenumber-js.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
resources/data/conversations.json
Unescape View File

@ -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"

BIN
resources/images/background.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

4
sass/src/Application.scss
Unescape View File

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

13
sass/src/view/main/Main.scss
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save