TT#21016 Call: Create common ExtJS component for all Call states

Change-Id: If555df8a5b5e9bb4e2da155b53db84019533f58b

classic/src/view/common/rtc/CallPanel.js

@@ -0,0 +1,20 @@
+
+Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
+    extend: 'Ext.form.Panel',
+    alias: 'widget.call-panel',
+    layout: 'center',
+    bind: {
+        hidden: '{!callPanel}'
+    },
+    items: [
+        {
+            bind: {
+                hidden: '{!outgoingCallPending}'
+            },
+            xtype: 'label',
+            text: 'Start call ...'
+        }
+    ]
+});
+
+

classic/src/view/common/rtc/RtcController.js

@@ -458,31 +458,32 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
     },
 
     outgoingPending: function() {
-        console.log('outgoingPending');
+        console.log('outgoingCallPending');
+        this.showOutgoingCallPendingState();
     },
 
     outgoingAccepted: function() {
-        console.log('outgoingAccepted');
+        console.log('outgoingCallAccepted');
     },
 
     outgoingRingingStart: function() {
-        console.log('outgoingRingingStart');
+        console.log('outgoingCallRingingStart');
     },
 
     outgoingRingingStop: function() {
-        console.log('outgoingRingingStop');
+        console.log('outgoingCallRingingStop');
     },
 
     outgoingRemoteMedia: function(stream) {
-        console.log('outgoingRemoteMedia');
+        console.log('outgoingCallRemoteMedia');
     },
 
     outgoingRemoteMediaEnded: function() {
-        console.log('outgoingRemoteMediaEnded');
+        console.log('outgoingCallRemoteMediaEnded');
     },
 
     outgoingEnded: function() {
-        console.log('outgoingEnded');
+        console.log('outgoingCallEnded');
         this.callEnded();
     },
 
@@ -513,6 +514,12 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
         }
     },
 
+    showOutgoingCallPendingState: function() {
+        this.getViewModel().set('callPanel', true);
+        this.getViewModel().set('outgoingCallPending', true);
+        this.getViewModel().set('phoneComposerHidden', true);
+    },
+
     // parameter state true causes the class for the background color change to
     // be added, and parameter state false causes the class to be removed
     setRtcpanelTitleColor: function (state) {

classic/src/view/common/rtc/RtcModel.js

@@ -33,7 +33,9 @@ Ext.define('NgcpCsc.view.rtc.RtcModel', {
         rtcEngineCall: null,
         rtcEngineNetwork: null,
         rtcEngineClient: null,
-        rtcEngineSession: null
+        rtcEngineSession: null,
+        callPanel: true,
+        outgoingCallPending: false
     },
     formulas: {
         disableSubmit: function(get) {

classic/src/view/common/rtc/RtcPanel.js

@@ -38,96 +38,12 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', {
     },
 
     items: [{
-        flex: 4,
-        reference: 'callpanel',
-        bind: {
-            hidden: '{callPanelHidden}'
-        },
-        layout: {
-            type: 'vbox',
-            align: 'stretch',
-            pack: 'center'
-        },
-        defaults: {
-            cls: 'rtc-container'
-        },
-        items: [{
-            margin: 20,
-            hidden: true,
-            width: '100%',
-            reference: 'videoObj',
-            html: "<video width=100% id=videoTag height=240></video>"
-        }, {
-            cls: 'rtc-avatar-container',
-            reference: 'avatar',
-            items: {
-                xtype: 'image',
-                cls: 'rtc-avatar',
-                bind: {
-                    src: '{thumbnail}'
-                }
-            }
-        }, {
-            xtype: 'label',
-            margin: '20 0 20 0',
-            bind: '{status}'
-        }, {
-            xtype: 'container',
-            cls: 'rtc-btns-container',
-            layout: {
-                type: 'hbox',
-                align: 'stretch',
-                pack: 'center'
-            },
-            defaults: {
-                xtype: 'button',
-                cls: 'rtc-icons',
-                enableToggle: true
-            },
-            items: [{
-                iconCls: Ngcp.csc.icons.phone,
-                bind: {
-                    pressed: '{callEnabled}',
-                    userCls: '{setuserCls}'
-                },
-                handler: 'toggleCall'
-            }, {
-                iconCls: Ngcp.csc.icons.microphone,
-                bind: {
-                    pressed: '{micEnabled}',
-                    disabled: '{!connected}',
-                    hidden: '{!micEnabled}'
-                },
-                handler: 'toggleAudioVideo'
-            }, {
-                iconCls: Ngcp.csc.icons.microphone_slash,
-                bind: {
-                    pressed: '{micEnabled}',
-                    disabled: '{!connected}',
-                    hidden: '{micEnabled}'
-                },
-                handler: 'toggleAudioVideo'
-            }, {
-                iconCls: Ngcp.csc.icons.video,
-                bind: {
-                    pressed: '{videoEnabled}',
-                    disabled: '{!connected}'
-                },
-                handler: 'toggleAudioVideo'
-            }, {
-                iconCls: Ngcp.csc.icons.comment,
-                bind: {
-                    pressed: '{chatEnabled}',
-                    disabled: '{!connected}'
-                },
-                handler: 'toogleChat'
-            }]
-        }]
-    }, {
         xtype: 'phone-composer'
     }, {
         xtype: 'sms-composer'
     }, {
         xtype: 'fax-composer'
+    }, {
+        xtype: 'call-panel'
     }]
 });

classic/src/view/common/rtc/composer/Fax.js

@@ -1,4 +1,4 @@
-Ext.define('NgcpCsc.view.common.composer.Fax', {
+Ext.define('NgcpCsc.view.common.rtc.composer.Fax', {
     extend: 'Ext.form.Panel',
 
     alias: 'widget.fax-composer',

classic/src/view/common/rtc/composer/Phone.js

@@ -1,4 +1,4 @@
-Ext.define('NgcpCsc.view.common.composer.Phone', {
+Ext.define('NgcpCsc.view.common.rtc.composer.Phone', {
     extend: 'Ext.panel.Panel',
 
     alias: 'widget.phone-composer',

classic/src/view/common/rtc/composer/PhoneKeys.js

@@ -1,4 +1,4 @@
-Ext.define('NgcpCsc.view.common.composer.PhoneKeys', {
+Ext.define('NgcpCsc.view.common.rtc.composer.PhoneKeys', {
     extend: 'Ext.panel.Panel',
 
     alias: 'widget.phonekeys',

classic/src/view/common/rtc/composer/Sms.js

@@ -1,4 +1,4 @@
-Ext.define('NgcpCsc.view.common.composer.Sms', {
+Ext.define('NgcpCsc.view.common.rtc.composer.Sms', {
     extend: 'Ext.form.Panel',
 
     alias: 'widget.sms-composer',