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

TT#14574 ngcp-csc Pbx Devices followup

Browse Source 
Change-Id: I3c5a2dd1ef828bb191f3195263b0a411cd5af6f9
changes/61/12761/2
Carlo 8 years ago
parent 4f3b4207ef
commit 86dfeee013
7 changed files with 197 additions and 121 deletions
Show Stats Download Patch File Download Diff File

100
app/model/Device.js
Unescape View File

@ -16,10 +16,10 @@ Ext.define('NgcpCsc.model.Device', {
}, {
name: 'image',
type: 'string'
},{
}, {
name: 'image',
type: 'string'
},{
}, {
name: 'seats',
type: 'auto'
}, {
@ -30,58 +30,52 @@ Ext.define('NgcpCsc.model.Device', {
var retVal = "<div><img width=500 height=500 src='" + rec.get('image') + "'></div>";
var shiftPosition = false;
Ext.each(rec.get('seats'), function(seat) {
if (seat.name) {
var buttonCls = 'assigned-button';
var btnPos = "top:" + seat.position.top + ";left:" + seat.position.left;
var rectPos,
top = seat.position.top,
left = seat.position.left,
lineWidth = shiftPosition ? "35%" : "20%",
lineHeight = shiftPosition ? "18%" : "10%",
lineTop = top,
lineLeft = seat.position.left,
lineCls = seat.position.anchor == 'left' || seat.position.anchor == 'right' ? 'connection-left-right' : 'connection-top-bottom';
switch (seat.position.anchor) {
case "left":
lineHeight = "1%";
left = (parseInt(seat.position.left.split('%')[0]) + (shiftPosition ? 30 : 10)).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - 1).toString() + "%";
break;
case "right":
left = (parseInt(seat.position.left.split('%')[0]) - (shiftPosition ? 35 : 20)).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - 1).toString() + "%";
lineLeft = left;
lineHeight = "1%";
break;
case "top":
lineLeft = (parseInt(seat.position.left.split('%')[0]) + 1).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) + (shiftPosition ? 14 : 7)).toString() + "%";
break;
case "bottom":
lineLeft = (parseInt(seat.position.left.split('%')[0]) + 1).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - (shiftPosition ? 14 : 7)).toString() + "%";
break;
}
retVal += '<div><span data-qtip="'+Ngcp.csc.locales.pbxconfig.devices.tooltip.click[localStorage.getItem('languageSelected')]+'" data-onseathovered="seatHovered" data-onseatclick="seatClick" class="button-info pointer card-icon" style="top:' +
top + ';left:' + left + ';" id="seat-info' +
rec.get('id') + "-" + seat.order + '">' +
seat.order + ' | ' + seat.name + '</span><span class="' +
lineCls + '" style="height:' + lineHeight + ';width:' +
lineWidth + ';top:' + lineTop + ';left:' +
lineLeft + ';"></span><span id="seat-"' +
rec.get('id') + "-" + seat.order + '" class="' +
buttonCls + '" style="' +
btnPos + '"></span></div>';
} else {
var top = (parseInt(seat.position.top.split('%')[0]) - 0.5).toString() + "%";
var btnPos = "top:" + top + ";left:" + seat.position.left;
var buttonCls = 'free-button';
retVal += '<div data-qtip="'+Ngcp.csc.locales.pbxconfig.devices.tooltip.clicktoassign[localStorage.getItem('languageSelected')]+'" data-onseathovered="seatHovered" data-onseatclick="seatClick" id="seat-' +rec.get('id') + '-' + seat.order + '" class="' +
buttonCls + ' pointer card-icon" style="' +
btnPos + '"></div>';
var buttonCls = seat.name ? 'assigned-button' : 'free-button';
var buttonInfoCls = seat.name ? 'button-info-assigned' : 'button-info-unassigned';
var lineHorizontalCls = seat.name ? 'connection-left-right-assigned' : 'connection-left-right-unassigned';
var lineVerticalCls = seat.name ? 'connection-top-bottom-assigned' : 'connection-top-bottom-unassigned';
var btnPos = "top:" + seat.position.top + ";left:" + seat.position.left;
var rectPos,
top = seat.position.top,
left = seat.position.left,
lineWidth = shiftPosition ? "35%" : "20%",
lineHeight = shiftPosition ? "18%" : "10%",
lineTop = top,
lineLeft = seat.position.left,
lineCls = seat.position.anchor == 'left' || seat.position.anchor == 'right' ? lineHorizontalCls : lineVerticalCls,
orderClsPrefix = (!seat.name || !seat.type) ? 'un' : ''
switch (seat.position.anchor) {
case "left":
lineHeight = "1%";
left = (parseInt(seat.position.left.split('%')[0]) + (shiftPosition ? 30 : 10)).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - 1).toString() + "%";
break;
case "right":
left = (parseInt(seat.position.left.split('%')[0]) - (shiftPosition ? 35 : 20)).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - 1).toString() + "%";
lineLeft = left;
lineHeight = "1%";
break;
case "top":
lineLeft = (parseInt(seat.position.left.split('%')[0]) + 1).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) + (shiftPosition ? 14 : 7)).toString() + "%";
break;
case "bottom":
lineLeft = (parseInt(seat.position.left.split('%')[0]) + 1).toString() + "%";
top = (parseInt(seat.position.top.split('%')[0]) - (shiftPosition ? 14 : 7)).toString() + "%";
break;
}
retVal += '<div><span data-qtip="' + Ngcp.csc.locales.pbxconfig.devices.tooltip.click[localStorage.getItem('languageSelected')] + '" data-onseathovered="seatHovered" data-onseatclick="editSeat" class="' + buttonInfoCls + ' pointer card-icon" style="top:' +
top + ';left:' + left + ';" id="seat-info' +
rec.get('id') + "-" + seat.order + '">' +
'<span class="button-info-order-' + orderClsPrefix + 'assigned">' + seat.order + '</span>' + (seat.name || '') + '</span><span class="' +
lineCls + '" style="height:' + lineHeight + ';width:' +
lineWidth + ';top:' + lineTop + ';left:' +
lineLeft + ';"></span><span id="seat-"' +
rec.get('id') + "-" + seat.order + '" class="' +
buttonCls + '" style="' +
btnPos + '"></span></div>';
shiftPosition = !shiftPosition;
});
return retVal;

10
app/utils/locales.js
Unescape View File

@ -1823,9 +1823,8 @@ Ext.define('Ngcp.csc.locales', {
de: 'Click to assign',
fr: 'Click to assign',
sp: 'Click to assign'
},
}
}
}
},
common: {
@ -1934,6 +1933,13 @@ Ext.define('Ngcp.csc.locales', {
fr: 'Successfully removed.',
sp: 'Successfully removed.'
},
remove_confirm: {
en: 'Do you really want to delete this item?',
it: 'Do you really want to delete this item?',
de: 'Do you really want to delete this item?',
fr: 'Do you really want to delete this item?',
sp: 'Do you really want to delete this item?'
},
submit: {
en: 'submit',
it: 'submit',

58
classic/sass/src/view/pages/pbxconfig/devices/Devices.scss
Unescape View File

@ -18,32 +18,68 @@
}
.assigned-button {
@extend .circle-number;
background: red;
background: $assigned_color;
}
.free-button {
@extend .circle-number;
background: yellow;
background: $unassigned_color;
}
.button-info {
position: absolute;
background: white;
border: 1px solid red;
padding: 0px 5px 0 5px;
padding: 0px 5px 0 0px;
z-index: 1;
min-width: 60px;
font-size: 11px;
}
.button-info-order {
padding: 1px 8px 2px 5px;
margin-right: 10px;
font-size: 14px;
}
.button-info-order-assigned {
@extend .button-info-order;
color:white;
background-color: $assigned_color;
}
.button-info-order-unassigned {
@extend .button-info-order;
color: black;
background-color: $unassigned_color;
}
.button-info-assigned {
@extend .button-info;
border: 1px solid $assigned_color;
}
.button-info-unassigned {
@extend .button-info;
border: 1px solid $unassigned_color;
}
.connection-left-right {
margin-top: 5px;
position: absolute;
border-top: 1px solid red;
background-color:rgba(255,0,0,0);
}
.connection-left-right-assigned {
@extend .connection-left-right;
border-top: 1px solid $assigned_color;
}
.connection-left-right-unassigned {
@extend .connection-left-right;
border-top: 1px solid $unassigned_color;
}
.connection-top-bottom {
position: absolute;
border-left: 1px solid red;
background-color:rgba(255,0,0,0);
}
.connection-top-bottom-assigned {
@extend .connection-top-bottom;
border-left: 1px solid $assigned_color;
}
.connection-top-bottom-unassigned {
@extend .connection-top-bottom;
border-left: 1px solid $unassigned_color;
}
.edit-panel {
background: #F6F6F6;
}
@ -55,6 +91,14 @@
border-width: 0px;
}
.devices-seat-fieldset {
border: 1px solid red !important;
z-index: 1;
}
.devices-seat-fieldset-assigned {
@extend .devices-seat-fieldset;
border: 1px solid $assigned_color !important;
}
.devices-seat-fieldset-unassigned {
@extend .devices-seat-fieldset;
border: 1px solid $unassigned_color !important;
}
}

2
classic/sass/var/view/pages/pbxconfig/devices/Devices.scss
Unescape View File

@ -0,0 +1,2 @@
$assigned_color : red;
$unassigned_color : #CCCC00;

24
classic/src/view/pages/pbxconfig/PbxConfigController.js
Unescape View File

@ -82,9 +82,9 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
var nodes = plugin.view.getNodes();
grid.getSelectionModel().select(record);
store.each(function(rec, index){
store.each(function(rec, index) {
var node = Ext.fly(nodes[index]);
if(rec.get('id') !== record.get('id') && node.getHeight() > 50){
if (rec.get('id') !== record.get('id') && node.getHeight() > 100) {
plugin.toggleRow(index, store.getAt(index)); // collapse all cards but the active one
}
});
@ -215,8 +215,8 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
"device": "",
"mac": "",
"status": "",
"extension":"",
"extension2":""
"extension": "",
"extension2": ""
});
break;
}
@ -253,7 +253,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
var storeName = this.getStoreFromRoute(currentRoute);
var store = Ext.getStore(storeName);
var rec = store.findRecord('id', recId);
if (!cmp.getValue()) {
if (!cmp.getValue() || cmp.getValue().length == 0) {
cmp.setValue(rec.get(recKey));
}
},
@ -360,13 +360,23 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
},
removeCard: function(el) {
var me = this;
var currentRoute = window.location.hash;
var storeName = this.getStoreFromRoute(currentRoute);
var store = Ext.getStore(storeName);
var recId = el.id.split("-")[1];
var selectedRow = store.findRecord('id', recId);
store.remove(selectedRow);
this.fireEvent('showmessage', true, Ngcp.csc.locales.common.remove_success[localStorage.getItem('languageSelected')]);
Ext.Msg.show({
message: Ext.String.format(Ngcp.csc.locales.common.remove_confirm[localStorage.getItem('languageSelected')]),
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn) {
if (btn === 'yes') {
store.remove(selectedRow);
me.fireEvent('showmessage', true, Ngcp.csc.locales.common.remove_success[localStorage.getItem('languageSelected')]);
}
}
});
},
toggleCancelCard: function(el, state) {

78
classic/src/view/pages/pbxconfig/devices/DevicesController.js
Unescape View File

@ -2,7 +2,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
extend: 'NgcpCsc.view.pages.pbxconfig.PbxConfigController',
alias: 'controller.devices',
onIconClicked: function(event, el) {
// override onIconClicked of PbxConfigController
// overrides onIconClicked of PbxConfigController
if (el.dataset.onseatclick) {
Ext.Function.defer(eval('this.' + el.dataset.onseatclick), 1, this, [el]);
return;
@ -12,22 +12,27 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
};
},
onMouseEntered: function(event, el) {
if (el.dataset.onseathovered) {
var selectedRec = this.getSelectedRec();
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
if (el.dataset.onseathovered && !editPanel.isVisible()) {
Ext.Function.defer(eval('this.' + el.dataset.onseathovered), 1, this, [el]);
}
},
onMouseLeave: function() {
var selectedRec = this.getSelectedRec();
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
showPanel.hide();
},
seatHovered: function(el) {
this.setShowEditPanelFields(el);
},
seatClick: function(el) {
this.setShowEditPanelFields(el, true);
},
setShowEditPanelFields: function(el, showBtns) {
setShowEditPanelFields: function(el) {
var selectedRec = this.getSelectedRec();
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
var order = el.id.split('-')[2];
var seatData;
var labelPositioning = Ext.fly(el.id).getPositioning();
var seatData, offset;
Ext.each(selectedRec.get('seats'), function(seat) {
if (order == seat.order) {
@ -35,21 +40,15 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
return;
}
});
showPanel.down('[name=editBtns]').hide();
offset = (seatData.position.anchor == "right") ? Ext.fly(el.id).getWidth() + 18 : -184;
showPanel.down('[name=typeValue]').setHtml((seatData && seatData.type && seatData.name) ? seatData.type + ": " + seatData.name : "Unassigned");
editPanel._user = seatData.name || null;
editPanel._type = seatData.type || null;
editPanel._order = seatData.order;
showPanel.setTitle(seatData.order);
editPanel.setTitle('Edit ' + seatData.order);
if (showBtns) {
showPanel.down('[name=editBtns]').show();
showPanel.addCls('devices-seat-fieldset');
}else{
showPanel.removeCls('devices-seat-fieldset');
}
editPanel.hide();
showPanel.show();
showPanel.getEl().setLeft(parseInt(labelPositioning.left.split('px')[0]) + offset);
showPanel.getEl().setTop(parseInt(labelPositioning.top.split('px')[0]) + 20);
},
deviceSelected: function(combo, rec) {
var grid = this.lookupReference('devicesGrid');
@ -72,20 +71,41 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
nameField.focus();
}, 50)
},
editSeat: function() {
editSeat: function(el) {
var selectedRec = this.getSelectedRec();
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
var type = editPanel._type;
var seatName = editPanel._user;
var labelPositioning = Ext.fly(el.id).getPositioning();
var order = el.id.split('-')[2];
var type, seatName, offset;
Ext.each(selectedRec.get('seats'), function(seat) {
if (order == seat.order) {
seatData = seat;
return;
}
});
type = seatData.type || null;
seatName = seatData.name || null;
offset = (seatData.position.anchor == "right") ? Ext.fly(el.id).getWidth() + 18 : -184;
if (!type || !seatName) {
editPanel.removeCls('devices-seat-fieldset-assigned');
editPanel.addCls('devices-seat-fieldset-unassigned');
} else {
editPanel.addCls('devices-seat-fieldset-assigned');
editPanel.removeCls('devices-seat-fieldset-unassigned');
}
editPanel.down('[name=typeValue]').setValue(type);
editPanel.down('[name=seat]').setValue(seatName);
showPanel.hide();
editPanel.show();
editPanel.getEl().setLeft(parseInt(labelPositioning.left.split('px')[0]) + offset);
editPanel.getEl().setTop(parseInt(labelPositioning.top.split('px')[0]) + 20);
},
deleteSeat: function() {
var me = this;
var selectedRec = this.getSelectedRec();
var grid = me.lookupReference('devicesGrid');
var selectedRec = me.getSelectedRec();
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
@ -101,7 +121,8 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
seat.type = null;
me.commitUnsavedChanges();
me.fireEvent('showmessage', true, Ngcp.csc.locales.pbxconfig.changes_saved[localStorage.getItem('languageSelected')])
showPanel.hide();
editPanel.hide();
grid.focus();
}
}
});
@ -118,6 +139,10 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
var type = editPanel.down('[name=typeValue]').getValue();
var user = editPanel.down('[name=seat]').getValue();
if (!type || !user) {
me.fireEvent('showmessage', false, Ngcp.csc.locales.common.fields_required[localStorage.getItem('languageSelected')]);
return;
}
Ext.each(selectedRec.get('seats'), function(seat) {
if (seat.order == editPanel._order) {
// workaround; TODO improve with binding in next iterations
@ -130,15 +155,16 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
return;
}
});
me.commitUnsavedChanges();
showPanel.show();
editPanel.hide();
me.commitUnsavedChanges();
editPanel.hide();
},
commitUnsavedChanges: function() {
var grid = this.lookupReference('devicesGrid');
var selectedRec = this.getSelectedRec();
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
selectedRec.set('imageWithButtons', null, {silent: true});
selectedRec.set('imageWithButtons', null, {
silent: true
});
grid.getStore().commitChanges();
this.keepRowExpanded(grid, selectedRec);
Ext.Function.defer(function() {
@ -146,9 +172,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
}, 50);
},
discardChanges: function() {
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + this.getSelectedRec().get('id'))[0];
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + this.getSelectedRec().get('id'))[0];
showPanel.show();
editPanel.hide();
},
getSelectedRec: function() {

46
classic/src/view/pages/pbxconfig/devices/DevicesGrid.js
Unescape View File

@ -26,8 +26,17 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
element: 'el',
delegate: '.card-icon'
},
mouseleave: {
fn: 'onMouseLeave',
element: 'el',
delegate: '.card-icon'
},
cellclick: 'expandRow',
rowbodyclick: 'expandRow'
rowbodyclick: 'expandRow',
focus: function() {
var scrollPosition = grid.getEl().down('.x-grid-view').getScroll();
grid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition.top, false);
}
},
columns: {
@ -144,6 +153,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
required: true,
autoSelect: false,
hidden: true,
editable: false,
emptyText: Ngcp.csc.locales.pbxconfig.enter_new_device[localStorage.getItem('languageSelected')],
bind: {
id: 'devices-textfield-device-{record.id}'
@ -251,47 +261,28 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
margin: '200 0 0 0',
collapsible: false,
hidden: true,
cls: 'devices-seat-fieldset',
defaults: {
xtype: 'label',
labelWidth: 50,
anchor: '100%',
anchor: '100%'
},
bind: {
id: 'seat-show-panel-{record.id}'
},
items: [{
name: 'typeValue'
}, {
xtype: 'buttongroup',
name: 'editBtns',
columns: 3,
hidden: true,
cls: 'edit-panel',
border: 0,
defaults: {
width: 75
},
items: [{
iconCls: Ngcp.csc.icons.edit,
handler: 'editSeat',
tooltip: Ngcp.csc.locales.common.edit[localStorage.getItem('languageSelected')]
}, {
iconCls: Ngcp.csc.icons.trash,
handler: 'deleteSeat',
name: 'deleteBtn',
tooltip: Ngcp.csc.locales.common.delete[localStorage.getItem('languageSelected')]
}]
}]
}, {
xtype: 'fieldset',
margin: '200 0 0 0',
cls: 'devices-seat-fieldset',
padding: '20 10 10 10',
width: 200,
collapsible: false,
hidden: true,
defaults: {
labelWidth: 40,
anchor: '100%',
anchor: '100%'
},
bind: {
id: 'seat-edit-panel-{record.id}'
@ -319,7 +310,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
cls: 'edit-panel',
border: 0,
defaults: {
width: 75
width: 50
},
items: [{
iconCls: Ngcp.csc.icons.floppy,
@ -329,6 +320,11 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
iconCls: Ngcp.csc.icons.block,
handler: 'discardChanges',
tooltip: Ngcp.csc.locales.common.reset[localStorage.getItem('languageSelected')]
}, {
iconCls: Ngcp.csc.icons.trash,
handler: 'deleteSeat',
name: 'deleteBtn',
tooltip: Ngcp.csc.locales.common.delete[localStorage.getItem('languageSelected')]
}]
}]
}]

Write Preview
Loading…
Cancel
Save