Form and Navigation work in modern

singhmukesh · Nov 12, 2015 · eb9f486 · eb9f486
1 parent a0fc721
commit eb9f486
Show file tree

Hide file tree

Showing 19 changed files with 294 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,12 @@
 # Created by .ignore support plugin (hsz.mobi)
-.idea
-/build
-node_modules/
-local-*
-WebRTC/classic.json
-WebRTC/modern.json
-WebRTC/material-classic.json
-WebRTC/material-modern.json
-WebRTC/bootstrap.css
-WebRTC/bootstrap.js
-WebRTC/cache.appcache
+                     .idea
+                     /build
+                     node_modules/
+                     local-*
+                     WebRTC/classic.json
+                     WebRTC/modern.json
+                     WebRTC/material-classic.json
+                     WebRTC/material-modern.json
+                     WebRTC/bootstrap.css
+                     WebRTC/bootstrap.js
+                     WebRTC/cache.appcache
diff --git a/WebRTC/app/controller/GlobalRoutes.js b/WebRTC/app/controller/GlobalRoutes.js
@@ -20,14 +20,17 @@ Ext.define('WebRTC.controller.GlobalRoutes', {
                 ':id': '(.*)'
             }
         },
+        'user': {
+            action: 'onRouteUser'
+        },
         'logout': {
             action: 'onRouteLogout'
         },
         'settings': {
             before: 'onRouteBeforeSettings',
             action: 'onRouteSettings'
-        },
-        ':node': 'onRouteChange'
+        }
+        //,':node': 'onRouteChange'
     },
 
     //These are routes that are handled by their own packages and should be ignored

diff --git a/WebRTC/app/store/Settings.js b/WebRTC/app/store/Settings.js
@@ -26,6 +26,7 @@ Ext.define('WebRTC.store.Settings', {
         var me = this;
         me.callParent(arguments);
         me.on('load', me.applyDefaultSettings, me);
+        me.load();
     },
 
     applyDefaultSettings: function () {

diff --git a/WebRTC/bootstrap.js b/WebRTC/bootstrap.js
diff --git a/WebRTC/classic.json b/WebRTC/classic.json
diff --git a/WebRTC/classic/src/view/settings/UserController.js b/WebRTC/classic/src/view/settings/UserController.js
@@ -8,23 +8,26 @@ Ext.define('WebRTC.view.settings.UserController', {
 
     init: function () {
         var view = this.getView(),
-            settings = Ext.getStore('Settings'),
-            currentChatSound = settings.getById('chat-sound').get('value'),
-            soundChatCombo = view.down('combo[name=chat-sound]'),
-            currentEnterSound = settings.getById('enter-sound').get('value'),
-            soundEnterCombo = view.down('combo[name=enter-sound]'),
-            currentLeaveSound = settings.getById('leave-sound').get('value'),
-            soundLeaveCombo = view.down('combo[name=leave-sound]'),
-            currentLaunchRoom = settings.getById('launchroom').get('value'),
-            LaunchCombo = view.down('combo[name=launchroom]'),
-            currentVideoLayout = settings.getById('videolayout').get('value'),
-            videoLayout = this.lookupReference('videoLayout');
-
-        soundChatCombo.setValue(currentChatSound);
-        soundEnterCombo.setValue(currentEnterSound);
-        soundLeaveCombo.setValue(currentLeaveSound);
-        LaunchCombo.setValue(currentLaunchRoom);
-        videoLayout.setValue({ videolayout: currentVideoLayout });
+            settings = Ext.getStore('Settings');
+        if(settings){
+            var currentChatSound = settings.getById('chat-sound').get('value'),
+                soundChatCombo = view.down('combo[name=chat-sound]'),
+                currentEnterSound = settings.getById('enter-sound').get('value'),
+                soundEnterCombo = view.down('combo[name=enter-sound]'),
+                currentLeaveSound = settings.getById('leave-sound').get('value'),
+                soundLeaveCombo = view.down('combo[name=leave-sound]'),
+                currentLaunchRoom = settings.getById('launchroom').get('value'),
+                LaunchCombo = view.down('combo[name=launchroom]'),
+                currentVideoLayout = settings.getById('videolayout').get('value'),
+                videoLayout = this.lookupReference('videoLayout');
+
+            soundChatCombo.setValue(currentChatSound);
+            soundEnterCombo.setValue(currentEnterSound);
+            soundLeaveCombo.setValue(currentLeaveSound);
+            LaunchCombo.setValue(currentLaunchRoom);
+            videoLayout.setValue({ videolayout: currentVideoLayout });
+        }
+
     },
 
     signOut: function () {

diff --git a/WebRTC/material-classic.json b/WebRTC/material-classic.json
diff --git a/WebRTC/material-modern.json b/WebRTC/material-modern.json
diff --git a/WebRTC/modern.json b/WebRTC/modern.json
diff --git a/WebRTC/modern/src/controller/Routes.js b/WebRTC/modern/src/controller/Routes.js
@@ -3,6 +3,21 @@ Ext.define('WebRTC.controller.Routes', {
     extend: 'WebRTC.controller.GlobalRoutes',
     alias: 'controller.Routes',
 
+    //Hide everything on the viewport except our route.
+    clearNavPanel: function (doRemove) {
+        var nav = Ext.ComponentQuery.query('navigationview[reference=mainCard]')[0];
+        nav.removeAll(false,false);
+        nav.pop();
+
+        /*Ext.each(nav.items.items, function (childPanel) {
+            if (!!doRemove) {
+                // nav.pop();
+                 nav.remove(childPanel, true);
+            } else {
+                childPanel.hide();
+            }
+        });*/
+    },
 
     //any change in route that isn't specifically fired defaults to this
     onRouteChange: function (hashTag) {
@@ -15,6 +30,7 @@ Ext.define('WebRTC.controller.Routes', {
             return false;
         }
 
+        this.clearNavPanel();
         this.setCurrentView(hashTag);
     },
 
@@ -39,7 +55,7 @@ Ext.define('WebRTC.controller.Routes', {
         }
 
         if (!item) {
-            item = mainCard.add({
+            item = mainCard.push({
                 xtype: node.get('viewType'),
                 routeId: hashTag
             });
@@ -61,7 +77,7 @@ Ext.define('WebRTC.controller.Routes', {
             item = mainCard.child('component[routeId=' + (params.routeId || hashTag) + ']');
 
         if (!item) {
-            item = mainCard.add(params);
+            item = mainCard.push(params);
         }
 
         mainCard.setActiveItem(item);
@@ -72,11 +88,15 @@ Ext.define('WebRTC.controller.Routes', {
     onRouteRoom: function(id){
         var me = this;
 
+        WebRTC.util.Logger.log('Routing Modern Room');
+        this.clearNavPanel();
+
         //we will need this rooms list loaded no matter what room
         this.onRouteViewportComponent('room',{
             xtype:'chatroomscontainer',
             reference: 'roomtabs',
             flex: 1,
+            title: 'Rooms',
             routeId: 'room'
         });
 
@@ -86,6 +106,20 @@ Ext.define('WebRTC.controller.Routes', {
         }
     },
 
+    onRouteUser: function(){
+        var navView = Ext.ComponentQuery.query('navigationview[reference=mainCard]')[0];
+
+        this.clearNavPanel();
+
+        navView.push({
+            xtype: 'settingsuser',
+            bind: {
+                title: 'Settings {user.name}'
+            },
+            flex: 1
+        });
+    },
+
     checkStoreAndDisplayRoom: function(){
         var me = this,
             id = me.id,

diff --git a/WebRTC/modern/src/view/chat/RoomController.js b/WebRTC/modern/src/view/chat/RoomController.js
@@ -16,6 +16,10 @@ Ext.define('WebRTC.view.chat.RoomController', {
         }
     },
 
+    onBackTap: function(button){
+        button.up('navigationview').pop();
+    },
+
     roomMemberAdd: function(member){
         var store = this.getViewModel().getStore('members');
         store.add(member);

diff --git a/WebRTC/modern/src/view/chat/RoomForm.js b/WebRTC/modern/src/view/chat/RoomForm.js
@@ -2,6 +2,8 @@ Ext.define('WebRTC.view.chat.RoomForm', {
     extend: 'Ext.form.Panel',
     xtype: 'chatroomform',
 
+    controller: 'chatroomform',
+
     bodyPadding: 10,
     autoScroll: true,
 
@@ -29,6 +31,11 @@ Ext.define('WebRTC.view.chat.RoomForm', {
                     label: 'Room Name',
                     name: 'name',
                     bind: '{theRoom.name}'
+                },{
+                    xtype:'textfield',
+                    label: 'Topic',
+                    name: 'topic',
+                    bind: '{theRoom.topic}'
                 },
                 {
                     xtype:'checkboxfield',
@@ -40,26 +47,27 @@ Ext.define('WebRTC.view.chat.RoomForm', {
             ]
         },{
             xtype:'textfield',
-            label: 'OpenTok SessionId',
+            fieldLabel: 'OpenTok SessionId',
             name: 'sessionId',
-            hidden: true,
             disabled: true,
-            bind: '{theRoom.id}'
+            bind: {
+                value: '{theRoom.id}',
+                hidden: '{!theRoom.id}'
+            }
         },{
             xtype: 'toolbar',
             docked: 'bottom',
             items: [{
                 iconCls: 'x-fa fa-thumbs-o-down',
-                action:'cancel',
-                hidden: true,
+                action:'onCancelTap',
                 text:'Cancel'
             },
                 {
                     xtype: 'spacer'
                 },{
                     iconCls: 'x-fa fa-thumbs-o-up',
                     reference: 'okButton',
-                    action:'ok',
+                    action:'onOkTap',
                     formBind: true,
                     text:'OK'
                 }]

diff --git a/WebRTC/modern/src/view/chat/RoomFormController.js b/WebRTC/modern/src/view/chat/RoomFormController.js
@@ -0,0 +1,26 @@
+Ext.define('WebRTC.view.chat.RoomFormController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.chatroomform',
+
+    onOkTap: function(button) {
+
+    },
+
+    onCancelTap: function(button) {
+
+    },
+
+
+    onComplete: function() {
+    var title = Ext.Msg.getTitle();
+    Ext.Msg.hide();
+
+    Ext.toast({
+        title: title,
+        html:  'Finished successfully',
+        align: 't',
+        bodyPadding: 10
+    });
+}
+
+});
diff --git a/WebRTC/modern/src/view/chat/RoomsContainer.js b/WebRTC/modern/src/view/chat/RoomsContainer.js
@@ -1,5 +1,5 @@
 Ext.define('WebRTC.view.chat.RoomsContainer', {
-    extend: 'Ext.Container',
+    extend: 'Ext.panel.Panel',
     xtype: 'chatroomscontainer',
 
     requires: ['WebRTC.ux.ListSlideActions'],
@@ -11,6 +11,7 @@ Ext.define('WebRTC.view.chat.RoomsContainer', {
 
     layout: 'fit',
 
+
     items: [
         {
             xtype: 'button',
@@ -58,6 +59,7 @@ Ext.define('WebRTC.view.chat.RoomsContainer', {
                itemtap: 'onRoomSelect'
             },
             plugins:{
+                //NOTE: These buttons are added outside the component chain and so the controller scope needs to be a component lookup until a better method is worked out.
                 xclass: 'WebRTC.ux.ListSlideActions',
                 buttons: [
                     {
@@ -66,8 +68,22 @@ Ext.define('WebRTC.view.chat.RoomsContainer', {
                         ui: 'action',
                         listeners: {
                             tap: function(button, e){
-                                console.log(button.getRecord());
-                                console.log('clicked on share button of record '+button.getRecord().getId());
+                                var controller = Ext.ComponentQuery.query('chatroomscontainer')[0].getController();
+                                controller.onRoomEdit( button ); //send the record to the controller : button.getRecord()
+                                e.stopPropagation();
+                                return false;
+                            },
+                            scope: this
+                        }
+                    },
+                    {
+                        xtype: 'button',
+                        iconCls:'x-fa fa-share',
+                        ui: 'confirm',
+                        listeners: {
+                            tap: function(button, e){
+                                var controller = Ext.ComponentQuery.query('chatroomscontainer')[0].getController();
+                                controller.onRoomShare( button );
                                 e.stopPropagation();
                                 return false;
                             },
@@ -80,8 +96,8 @@ Ext.define('WebRTC.view.chat.RoomsContainer', {
                         ui: 'decline',
                         listeners: {
                             tap: function(button, e){
-                                console.log(button.getRecord());
-                                console.log('clicked on delete button of record '+button.getRecord().getId());
+                                var controller = Ext.ComponentQuery.query('chatroomscontainer')[0].getController();
+                                controller.onRoomRemove( button );
                                 e.stopPropagation();
                                 return false;
                             },