outsource the channel viewer class into its own file

htdocs/js/channelviewer.js

@@ -0,0 +1,76 @@
+// kate: space-indent on; indent-width 4; replace-tabs on;
+
+Ext.namespace('Ext.ux');
+
+Ext.ux.MumbleChannelViewer = function( config ){
+    Ext.apply( this, config );
+
+    Ext.applyIf( this, {
+        title: gettext("Channel Viewer"),
+        root: {
+            text: gettext("Loading..."),
+            leaf: true
+        },
+        buttons: [{
+            text:    gettext("Refresh"),
+            handler: this.refresh,
+            scope:   this
+        }],
+    } );
+
+    Ext.ux.MumbleChannelViewer.superclass.constructor.call( this );
+    this.refresh();
+}
+
+Ext.extend( Ext.ux.MumbleChannelViewer, Ext.tree.TreePanel, {
+    refresh: function(){
+        var conn = new Ext.data.Connection();
+        conn.request({
+            url:    this.source_url,
+            scope:  this,
+            success: function( resp, opt ){
+                respdata = Ext.decode( resp.responseText );
+                root = {
+                    text: respdata.name,
+                    id:   "mumbroot",
+                    leaf: false,
+                    icon: '/static/mumble/mumble.16x16.png',
+                    children: [],
+                };
+                function populateNode( node, json ){
+                    subchan_users = 0;
+                    for( var i = 0; i < json.channels.length; i++ ){
+                        child = {
+                            text: json.channels[i].name,
+                            id:   ("channel_" + json.channels[i].id),
+                            leaf: false,
+                            icon: '/static/mumble/channel.png',
+                            children: [],
+                        };
+                        node.children.push( child );
+                        subchan_users += populateNode( child, json.channels[i] );
+                    }
+                    for( var i = 0; i < json.users.length; i++ ){
+                        child = {
+                            text: json.users[i].name,
+                            id:   ("user_" + json.users[i].id),
+                            leaf: true,
+                            icon: '/static/mumble/talking_off.png',
+                        };
+                        node.children.push( child );
+                    }
+                    if( json.id == 0 || json.users.length > 0 || subchan_users )
+                        node.expanded = true;
+                    return subchan_users + json.users.length;
+                }
+                populateNode( root, respdata.root );
+                this.setRootNode( root );
+            },
+            failure: function( resp, opt ){
+                alert("fail");
+            },
+        });
+    },
+} );
+
+Ext.reg( 'mumblechannelviewer', Ext.ux.MumbleChannelViewer );

htdocs/js/mumble.js

@@ -1,80 +1,5 @@
 // kate: space-indent on; indent-width 4; replace-tabs on;
 
-Ext.namespace('Ext.ux');
-
-Ext.ux.MumbleChannelViewer = function( config ){
-    Ext.apply( this, config );
-
-    Ext.applyIf( this, {
-        title: gettext("Channel Viewer"),
-        root: {
-            text: gettext("Loading..."),
-            leaf: true
-        },
-        buttons: [{
-            text:    gettext("Refresh"),
-            handler: this.refresh,
-            scope:   this
-        }],
-    } );
-
-    Ext.ux.MumbleChannelViewer.superclass.constructor.call( this );
-    this.refresh();
-}
-
-Ext.extend( Ext.ux.MumbleChannelViewer, Ext.tree.TreePanel, {
-    refresh: function(){
-        var conn = new Ext.data.Connection();
-        conn.request({
-            url:    this.source_url,
-            scope:  this,
-            success: function( resp, opt ){
-                respdata = Ext.decode( resp.responseText );
-                root = {
-                    text: respdata.name,
-                    id:   "mumbroot",
-                    leaf: false,
-                    icon: '/static/mumble/mumble.16x16.png',
-                    children: [],
-                };
-                function populateNode( node, json ){
-                    subchan_users = 0;
-                    for( var i = 0; i < json.channels.length; i++ ){
-                        child = {
-                            text: json.channels[i].name,
-                            id:   ("channel_" + json.channels[i].id),
-                            leaf: false,
-                            icon: '/static/mumble/channel.png',
-                            children: [],
-                        };
-                        node.children.push( child );
-                        subchan_users += populateNode( child, json.channels[i] );
-                    }
-                    for( var i = 0; i < json.users.length; i++ ){
-                        child = {
-                            text: json.users[i].name,
-                            id:   ("user_" + json.users[i].id),
-                            leaf: true,
-                            icon: '/static/mumble/talking_off.png',
-                        };
-                        node.children.push( child );
-                    }
-                    if( json.id == 0 || json.users.length > 0 || subchan_users )
-                        node.expanded = true;
-                    return subchan_users + json.users.length;
-                }
-                populateNode( root, respdata.root );
-                this.setRootNode( root );
-            },
-            failure: function( resp, opt ){
-                alert("fail");
-            },
-        });
-    },
-} );
-
-Ext.reg( 'mumblechannelviewer', Ext.ux.MumbleChannelViewer );
-
 function render_mumble( divname, urls ){
     var mainpanel = new Ext.Panel({
         renderTo: divname,
@@ -117,15 +42,17 @@ function render_mumble( divname, urls ){
                 items: [{
                     region: "north",
                     layout: "hbox",
-                    height: 200,
+                    height: 220,
                     items: [{
                         flex: 1,
+                        height: 200,
                         title: gettext("Texture"),
-                        html: "texture!"
+                        html: String.format('<img src="{0}" alt="Avatar" />', urls.myavatar),
                     }, {
                         flex: 1,
+                        height: 200,
                         title: gettext("Gravatar"),
-                        html: "gravatar!",
+                        html: String.format('<img src="{0}" alt="grAvatar" />', urls.gravatar),
                     }],
                 }, {
                     region: "center",

htdocs/js/usereditor.js

@@ -18,12 +18,10 @@ Ext.ux.UserEditorPanel = function( config ){
     { name: 'delete',   type: 'bool'   }
     ]);
 
-  userAdminStore = new Ext.data.Store({
-    url:    config.mumble_users_url,
-    reader: new Ext.data.JsonReader({
-      root:    'objects',
-      fields:  userRecord
-      }),
+  userAdminStore = new Ext.data.DirectStore({
+    baseParams: { server: 1 },
+    directFn: Mumble.users,
+    fields:   userRecord,
     autoLoad: true,
     remoteSort: false
     });
@@ -47,12 +45,9 @@ Ext.ux.UserEditorPanel = function( config ){
     triggerAction:  'all',
     valueField:     'uid',
     displayField:   'uname',
-    store: new Ext.data.Store({
-      url:    config.django_users_url,
-      reader: new Ext.data.JsonReader({
-        fields:  [ 'uid', 'uname' ],
-        root:    'objects'
-        }),
+    store: new Ext.data.DirectStore({
+      directFn: Mumble.djangousers,
+      fields:   [ 'uid', 'uname' ],
       autoLoad: true
       })
     });

pyweb/mumble/templates/mumble/mumble.html

@@ -12,6 +12,8 @@
 {% endblock %}
 {% block HeadTag %}
   <script type="text/javascript" src="/jsi18n/"></script>
+  <script type="text/javascript" src="/mumble/api/api.js"></script>
+  <script type="text/javascript" src="{{ MEDIA_URL }}/js/channelviewer.js"></script>
   <script type="text/javascript" src="{{ MEDIA_URL }}/js/usereditor.js"></script>
   <script type="text/javascript" src="{{ MEDIA_URL }}/js/mumble.js"></script>
   <script type="text/javascript">
@@ -19,7 +21,9 @@
       render_mumble( "ext_container", {
         data:         "{% url mumble.views.cvp_json DBaseObject.id %}",
         django_users: '{% url mumble.views.djangousers %}',
-        mumble_users: '{% url mumble.views.users DBaseObject.id %}'
+        mumble_users: '{% url mumble.views.users DBaseObject.id %}',
+        gravatar:     "{{ MumbleAccount.gravatar }}",
+        myavatar:     "{% url mumble.views.showTexture DBaseObject.id MumbleAccount.id %}",
         } );
       } );
   </script>