improve the layout of the deluge-torrents module

delegate updating stats to the individual tabs in the details panel

deluge/ui/web/js/deluge-details.js

@@ -15,19 +15,19 @@ Deluge.Details.Status = {
 			border: false,
 			listeners: {'render': Deluge.Details.Status.onStatusRender}
 		});
+		this.panel.update = this.update.bind(this);
 	},
 	
 	onStatusRender: function(panel) {
 		this.status = panel;
 		this.status.load({
 			url: "/render/tab_statistics.html",
-			text: _("Loading") + "...",
+			text: _("Loading") + "..."
-			callback: this.onStatusLoaded
 		});
 	},
 	
-	onStatusLoaded: function() {
+	update: function(torrentId) {
-		alert("loaded");
+		alert(torrentId);
 	}
 }
 
@@ -41,8 +41,14 @@ Deluge.Details.Details = {
 
 $extend(Deluge.Details, {
 
-	update: function(torrentId) {
+	update: function() {		
+		var torrent = Deluge.Torrents.getSelected();
+		if (!torrent) return;
 		
+		var tab = this.Panel.getActiveTab();
+		if (tab.update) {
+			tab.update(torrent.id);
+		}
 	},
 	
 	Panel: new Ext.TabPanel({
@@ -56,11 +62,11 @@ $extend(Deluge.Details, {
 		items: [{
 			id: 'status',
 			title: _('Status'),
-			listeners: {'render': Deluge.Details.Status.onRender}
+			listeners: {'render': {fn: Deluge.Details.Status.onRender, scope: Deluge.Details.Status}}
 		},{
 			id: 'details',
 			title: _('Details'),
-			listeners: {'render': Deluge.Details.Details.onRender}
+			listeners: {'render': {fn: Deluge.Details.Details.onRender, scope: Deluge.Details.Status}}
 		},{
 			id: 'files',
 			title: _('Files')
@@ -73,31 +79,3 @@ $extend(Deluge.Details, {
 		}]
 	})
 });
-
-/*Deluge.Details.Status = {
-	onShow: function(panel) {
-		this.panel = panel;
-	},
-	
-	initialize: function() {
-		this.Panel = Deluge.Details.Panel.items.get('status');
-		this.ProgressBar = new Ext.ProgressBar({
-			text: "0% Stopped",
-			id: "pbar-status",
-			cls: 'deluge-status-progressbar'
-		});
-		this.Panel.add(this.ProgressBar);
-		
-		
-		this.Panel.add({
-			id: 'status-details',
-			cls: 'deluge-status',
-			border: false
-		});
-		
-		//this.Details = Deluge.Details.Status.Panel.items.get("status-details").load({
-		//	url: "/render/tab_statistics.html"
-		//});
-		
-	}
-}*/

deluge/ui/web/js/deluge-torrents.js

@@ -22,7 +22,8 @@ function avail(value) {
 	return value.toFixed(3);
 }
 
-var torrentStore = new Ext.data.SimpleStore({
+Deluge.Torrents = {
+	Store: new Ext.data.SimpleStore({
 		fields: [
 			{name: 'queue'},
 			{name: 'name'},
@@ -40,12 +41,21 @@ var torrentStore = new Ext.data.SimpleStore({
 			{name: 'avail', type: 'float'}
 		],
 		id: 14
-});
+	}),
-torrentStore.setDefaultSort("queue");
 	
-Deluge.Torrents = new Ext.grid.GridPanel({
+	getSelected: function() {
+		return this.Grid.getSelectionModel().getSelected();
+	},
+	
+	getSelection: function() {
+		return this.Grid.getSelectionModel().getSelection();
+	}
+}
+Deluge.Torrents.Store.setDefaultSort("queue");
+
+Deluge.Torrents.Grid = new Ext.grid.GridPanel({
 	region: 'center',
-	store: torrentStore,
+	store: Deluge.Torrents.Store,
 	cls: 'deluge-torrents',
 	columns: [
 		{id:'queue',header: "#", width: 30, sortable: true, renderer: queue, dataIndex: 'queue'},

deluge/ui/web/js/deluge-ui.js

@@ -7,7 +7,7 @@ Deluge.Ui = {
 			title: 'Deluge',
 			layout: 'border',
 			tbar: Deluge.ToolBar.Bar,
-			items: [Deluge.SideBar, Deluge.Details.Panel,  Deluge.Torrents],
+			items: [Deluge.SideBar, Deluge.Details.Panel,  Deluge.Torrents.Grid],
 			bbar: Deluge.StatusBar.Bar
 		});
 
@@ -29,6 +29,7 @@ Deluge.Ui = {
 			onSuccess: this.onUpdate.bindWithEvent(this),
 			onFailure: this.onUpdateError.bindWithEvent(this)
 		});
+		Deluge.Details.update();
 		Deluge.Client.web.connected({
 			onSuccess: this.onConnectedCheck.bindWithEvent(this)
 		});
@@ -73,7 +74,7 @@ Deluge.Ui = {
 				id
 			]);
 		});
-		Deluge.Torrents.store.loadData(torrents);
+		Deluge.Torrents.Store.loadData(torrents);
 		Deluge.StatusBar.update(data['stats']);
 		this.errorCount = 0;
 	},