mirror of https://github.com/sipwise/ngcp-csc.git
Change-Id: I12d7cec5f238c78ca6f300bbc017c3d31e5f3e6dchanges/81/12481/9
Carlo
9 years ago
parent
1f64b97a60
commit
4f3b4207ef
@ -0,0 +1,60 @@
|
||||
.devices {
|
||||
.x-panel-body {
|
||||
background: white;
|
||||
}
|
||||
.device-img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.circle-number {
|
||||
position:absolute;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px #fff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.assigned-button {
|
||||
@extend .circle-number;
|
||||
background: red;
|
||||
}
|
||||
.free-button {
|
||||
@extend .circle-number;
|
||||
background: yellow;
|
||||
}
|
||||
.button-info {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px solid red;
|
||||
padding: 0px 5px 0 5px;
|
||||
z-index: 1;
|
||||
min-width: 60px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.connection-left-right {
|
||||
margin-top: 5px;
|
||||
position: absolute;
|
||||
border-top: 1px solid red;
|
||||
background-color:rgba(255,0,0,0);
|
||||
}
|
||||
.connection-top-bottom {
|
||||
position: absolute;
|
||||
border-left: 1px solid red;
|
||||
background-color:rgba(255,0,0,0);
|
||||
}
|
||||
.edit-panel {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
.seat-name {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.x-btn-group-default-framed {
|
||||
border-color: #F6F6F6;
|
||||
border-width: 0px;
|
||||
}
|
||||
.devices-seat-fieldset {
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
|
||||
extend: 'NgcpCsc.view.pages.pbxconfig.PbxConfigController',
|
||||
alias: 'controller.devices',
|
||||
onIconClicked: function(event, el) {
|
||||
// override onIconClicked of PbxConfigController
|
||||
if (el.dataset.onseatclick) {
|
||||
Ext.Function.defer(eval('this.' + el.dataset.onseatclick), 1, this, [el]);
|
||||
return;
|
||||
};
|
||||
if (el.dataset.callback) {
|
||||
Ext.Function.defer(eval('this.' + el.dataset.callback), 1, this, [el]);
|
||||
};
|
||||
},
|
||||
onMouseEntered: function(event, el) {
|
||||
if (el.dataset.onseathovered) {
|
||||
Ext.Function.defer(eval('this.' + el.dataset.onseathovered), 1, this, [el]);
|
||||
}
|
||||
},
|
||||
seatHovered: function(el) {
|
||||
this.setShowEditPanelFields(el);
|
||||
},
|
||||
seatClick: function(el) {
|
||||
this.setShowEditPanelFields(el, true);
|
||||
},
|
||||
setShowEditPanelFields: function(el, showBtns) {
|
||||
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;
|
||||
|
||||
Ext.each(selectedRec.get('seats'), function(seat) {
|
||||
if (order == seat.order) {
|
||||
seatData = seat;
|
||||
return;
|
||||
}
|
||||
});
|
||||
showPanel.down('[name=editBtns]').hide();
|
||||
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();
|
||||
},
|
||||
deviceSelected: function(combo, rec) {
|
||||
var grid = this.lookupReference('devicesGrid');
|
||||
var devicesListStore = Ext.getStore('DevicesList');
|
||||
var selectedRec = this.getSelectedRec();
|
||||
var selectedRecFromList = devicesListStore.findRecord('name', combo.getValue());
|
||||
var nameField = Ext.ComponentQuery.query('#devices-textfield-name-' + selectedRec.get('id'))[0];
|
||||
var showPanel = Ext.ComponentQuery.query('#seat-show-panel-' + selectedRec.get('id'))[0];
|
||||
var editPanel = Ext.ComponentQuery.query('#seat-edit-panel-' + selectedRec.get('id'))[0];
|
||||
|
||||
if (selectedRec) {
|
||||
selectedRec.set('seats', selectedRecFromList.get('seats'))
|
||||
selectedRec.set('image', selectedRecFromList.get('image'));
|
||||
selectedRec.set('device', combo.getValue());
|
||||
}
|
||||
this.keepRowExpanded(grid, selectedRec);
|
||||
showPanel.hide();
|
||||
Ext.Function.defer(function() {
|
||||
grid.getView().refresh();
|
||||
nameField.focus();
|
||||
}, 50)
|
||||
},
|
||||
editSeat: function() {
|
||||
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;
|
||||
editPanel.down('[name=typeValue]').setValue(type);
|
||||
editPanel.down('[name=seat]').setValue(seatName);
|
||||
showPanel.hide();
|
||||
editPanel.show();
|
||||
},
|
||||
deleteSeat: function() {
|
||||
var me = this;
|
||||
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];
|
||||
|
||||
Ext.each(selectedRec.get('seats'), function(seat) {
|
||||
if (seat.order == editPanel._order) {
|
||||
Ext.Msg.show({
|
||||
message: Ext.String.format(Ngcp.csc.locales.pbxconfig.devices.delete_assignment[localStorage.getItem('languageSelected')], seat.order),
|
||||
buttons: Ext.Msg.YESNO,
|
||||
icon: Ext.Msg.QUESTION,
|
||||
fn: function(btn) {
|
||||
if (btn === 'yes') {
|
||||
seat.name = null;
|
||||
seat.type = null;
|
||||
me.commitUnsavedChanges();
|
||||
me.fireEvent('showmessage', true, Ngcp.csc.locales.pbxconfig.changes_saved[localStorage.getItem('languageSelected')])
|
||||
showPanel.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
saveSeat: function() {
|
||||
var me = this;
|
||||
var grid = this.lookupReference('devicesGrid');
|
||||
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.down('[name=typeValue]').getValue();
|
||||
var user = editPanel.down('[name=seat]').getValue();
|
||||
Ext.each(selectedRec.get('seats'), function(seat) {
|
||||
if (seat.order == editPanel._order) {
|
||||
// workaround; TODO improve with binding in next iterations
|
||||
seat.name = user;
|
||||
seat.type = type;
|
||||
editPanel._user = user;
|
||||
editPanel._type = type;
|
||||
showPanel.down('[name=typeValue]').setHtml(type + ": " + user);
|
||||
me.fireEvent('showmessage', true, Ngcp.csc.locales.pbxconfig.changes_saved[localStorage.getItem('languageSelected')])
|
||||
return;
|
||||
}
|
||||
});
|
||||
me.commitUnsavedChanges();
|
||||
showPanel.show();
|
||||
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});
|
||||
grid.getStore().commitChanges();
|
||||
this.keepRowExpanded(grid, selectedRec);
|
||||
Ext.Function.defer(function() {
|
||||
grid.getView().refresh();
|
||||
}, 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() {
|
||||
var grid = this.lookupReference('devicesGrid');
|
||||
var selectedRec = grid.getSelectionModel().getSelection()[0];
|
||||
return selectedRec;
|
||||
}
|
||||
});
|
||||
@ -1,39 +0,0 @@
|
||||
Ext.define('NgcpCsc.view.pages.devices.DestinationsGrid', {
|
||||
|
||||
extend: 'Ext.grid.Panel',
|
||||
|
||||
xtype: 'destinations-grid',
|
||||
|
||||
reference: 'destinationsGrid',
|
||||
|
||||
store: 'Destinations',
|
||||
|
||||
rowLines: false,
|
||||
|
||||
viewConfig: {
|
||||
stripeRows: false,
|
||||
columnLines: false
|
||||
},
|
||||
|
||||
plugins: {
|
||||
ptype: 'cellediting',
|
||||
clicksToEdit: 1
|
||||
},
|
||||
|
||||
columns: {
|
||||
defaults: {
|
||||
menuDisabled: true,
|
||||
resizable: false
|
||||
},
|
||||
items: [{
|
||||
flex: 1,
|
||||
dataIndex: 'position',
|
||||
text: '#'
|
||||
},{
|
||||
flex: 5,
|
||||
dataIndex: 'destination',
|
||||
editor: 'textfield',
|
||||
text: Ngcp.csc.locales.pbxconfig.destination[localStorage.getItem('languageSelected')]
|
||||
}]
|
||||
}
|
||||
})
|
||||
Loading…
Reference in new issue