webui: fix up the connection manager

Partially fix the connection manager so it now displays correctly
on first load. A lot of the functionality needs to be changed
due to the list -> grid migration.

deluge/ui/web/js/deluge-all/ConnectionManager.js

@@ -52,76 +52,60 @@ Ext.define('Deluge.ConnectionManager', {
         deluge.events.on('login', this.onLogin, this);
         deluge.events.on('logout', this.onLogout, this);
 
-        //this.addButton(_('Close'), this.onClose, this);
+        this.addDocked({
-        //this.addButton(_('Connect'), this.onConnect, this);
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Close'), handler: this.onClose, scope: this},
+                {text: _('Connect'), handler: this.onConnect, scope: this}
+            ]
+        });
 
-        this.list = new Ext.list.ListView({
+        this.grid = this.add({
-            store: new Ext.data.ArrayStore({
+            xtype: 'grid',
-                fields: [
+            autoScroll: true,
-                    {name: 'status', mapping: 3},
+            store: new Ext.data.Store({
-                    {name: 'host', mapping: 1},
+                model: 'Deluge.data.Host',
-                    {name: 'port', mapping: 2},
+                proxy: {
-                    {name: 'version', mapping: 4}
+                    type: 'memory',
-                ],
+                    reader: {
-                id: 0
+                        type: 'json',
+                        root: 'hosts'
+                    }
+                }
             }),
             columns: [{
                 header: _('Status'),
-                width: .24,
+                width: 70,
                 sortable: true,
                 dataIndex: 'status'
             }, {
-                id:'host',
+                xtype: 'templatecolumn',
+                flex: 1,
                 header: _('Host'),
-                width: .51,
                 sortable: true,
-                tpl: '{host}:{port}',
+                tpl: '{host}:{port}'
-                dataIndex: 'host'
             }, {
+                xtype: 'templatecolumn',
                 header: _('Version'),
-                width: .25,
+                width: 70,
                 sortable: true,
-                tpl: '<tpl if="version">{version}</tpl>',
+                tpl: '<tpl if="version">{version}</tpl>'
-                dataIndex: 'version'
             }],
             singleSelect: true,
             listeners: {
                 'selectionchange': {fn: this.onSelectionChanged, scope: this}
-            }
+            },
+            bbar: [
+                {xtype: 'button', text: _('Add'), iconCls: 'icon-add', handler: this.onAddClick, scope: this},
+                {xtype: 'button', text: _('Remove'), iconCls: 'icon-remove', handler: this.onRemoveClick, scope: this},
+                '->',
+                {xtype: 'button', text: _('Stop Daemon'), iconCls: 'icon-error', handler: this.onStopClick, scope: this}
+            ]
         });
 
-        this.panel = this.add({
-            autoScroll: true,
-            items: [this.list],
-            bbar: new Ext.Toolbar({
-                buttons: [
-                    {
-                        id: 'cm-add',
-                        cls: 'x-btn-text-icon',
-                        text: _('Add'),
-                        iconCls: 'icon-add',
-                        handler: this.onAddClick,
-                        scope: this
-                    }, {
-                        id: 'cm-remove',
-                        cls: 'x-btn-text-icon',
-                        text: _('Remove'),
-                        iconCls: 'icon-remove',
-                        handler: this.onRemoveClick,
-                        disabled: true,
-                        scope: this
-                    }, '->', {
-                        id: 'cm-stop',
-                        cls: 'x-btn-text-icon',
-                        text: _('Stop Daemon'),
-                        iconCls: 'icon-error',
-                        handler: this.onStopClick,
-                        disabled: true,
-                        scope: this
-                    }
-                ]
-            })
-        });
         this.update = this.update.bind(this);
     },
 
@@ -158,7 +142,7 @@ Ext.define('Deluge.ConnectionManager', {
     },
 
     update: function() {
-        this.list.getStore().each(function(r) {
+        this.grid.getStore().each(function(r) {
             deluge.client.web.get_host_status(r.id, {
                 success: this.onGetHostStatus,
                 scope: this
@@ -220,7 +204,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onConnect: function(e) {
-        var selected = this.list.getSelectedRecords()[0];
+        var selected = this.grid.getSelectedRecords()[0];
         if (!selected) return;
 
         if (selected.get('status') == _('Connected')) {
@@ -247,7 +231,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onGetHosts: function(hosts) {
-        this.list.getStore().loadData(hosts);
+        this.grid.getStore().loadData(hosts);
         Ext.each(hosts, function(host) {
             deluge.client.web.get_host_status(host[0], {
                 success: this.onGetHostStatus,
@@ -258,11 +242,11 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onGetHostStatus: function(host) {
-        var record = this.list.getStore().getById(host[0]);
+        var record = this.grid.getStore().getById(host[0]);
         record.set('status', host[3])
         record.set('version', host[4])
         record.commit();
-        if (this.list.getSelectedRecords()[0] == record) this.updateButtons(record);
+        if (this.grid.getSelectedRecords()[0] == record) this.updateButtons(record);
     },
 
     // private
@@ -299,7 +283,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onRemoveClick: function(button) {
-        var connection = this.list.getSelectedRecords()[0];
+        var connection = this.grid.getSelectedRecords()[0];
         if (!connection) return;
 
         deluge.client.web.remove_host(connection.id, {
@@ -314,7 +298,7 @@ Ext.define('Deluge.ConnectionManager', {
                         iconCls: 'x-deluge-icon-error'
                     });
                 } else {
-                    this.list.getStore().remove(connection);
+                    this.grid.getStore().remove(connection);
                 }
             },
             scope: this
@@ -327,7 +311,7 @@ Ext.define('Deluge.ConnectionManager', {
             this.removeHostButton.enable();
             this.stopHostButton.enable();
             this.stopHostButton.setText(_('Stop Daemon'));
-            this.updateButtons(this.list.getRecord(selections[0]));
+            this.updateButtons(this.grid.getRecord(selections[0]));
         } else {
             this.removeHostButton.disable();
             this.stopHostButton.disable();
@@ -338,7 +322,7 @@ Ext.define('Deluge.ConnectionManager', {
     // private
     onShow: function() {
         if (!this.addHostButton) {
-            var bbar = this.panel.getDockedItems()[0];
+            var bbar = this.grid.getDockedItems()[0];
             this.addHostButton = bbar.items.get('cm-add');
             this.removeHostButton = bbar.items.get('cm-remove');
             this.stopHostButton = bbar.items.get('cm-stop');
@@ -350,7 +334,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onStopClick: function(button, e) {
-        var connection = this.list.getSelectedRecords()[0];
+        var connection = this.grid.getSelectedRecords()[0];
         if (!connection) return;
 
         if (connection.get('status') == 'Offline') {

deluge/ui/web/js/deluge-all/data/HostRecord.js

@@ -0,0 +1,53 @@
+/*!
+ * Deluge.data.Host.js
+ *
+ * Copyright (c) Damien Churchill 2011 <damoxc@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, write to:
+ *     The Free Software Foundation, Inc.,
+ *     51 Franklin Street, Fifth Floor
+ *     Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give
+ * permission to link the code of portions of this program with the OpenSSL
+ * library.
+ * You must obey the GNU General Public License in all respects for all of
+ * the code used other than OpenSSL. If you modify file(s) with this
+ * exception, you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete
+ * this exception statement from your version. If you delete this exception
+ * statement from all source files in the program, then also delete it here.
+ */
+
+/**
+ * Deluge.data.Host
+ *
+ * @author Damien Churchill <damoxc@gmail.com>
+ * @version 1.4
+ *
+ * @class Deluge.data.Host
+ * @extends Ext.data.Model
+ * @constructor
+ * @param {Object} data The peer data
+ */
+Ext.define('Deluge.data.Host', {
+    extend: 'Ext.data.Model',
+    fields: [
+        {name: 'id', type: 'string'},
+        {name: 'host', type: 'string'},
+        {name: 'port', type: 'int'},
+        {name: 'status', type: 'string'},
+        {name: 'version', type: 'string'}
+    ]
+});