[pve-devel] r5793 - in pve-manager/pve2/www/new: . form tree

svn-commits at proxmox.com svn-commits at proxmox.com
Thu Apr 7 08:02:47 CEST 2011


Author: dietmar
Date: 2011-04-07 08:02:47 +0200 (Thu, 07 Apr 2011)
New Revision: 5793

Added:
   pve-manager/pve2/www/new/StateProvider.js
Modified:
   pve-manager/pve2/www/new/Makefile.am
   pve-manager/pve2/www/new/Workspace.js
   pve-manager/pve2/www/new/form/ViewSelector.js
   pve-manager/pve2/www/new/index.pl
   pve-manager/pve2/www/new/tree/ResourceTree.js
Log:
impl. local storage state provides, simple history management


Modified: pve-manager/pve2/www/new/Makefile.am
===================================================================
--- pve-manager/pve2/www/new/Makefile.am	2011-04-07 04:27:01 UTC (rev 5792)
+++ pve-manager/pve2/www/new/Makefile.am	2011-04-07 06:02:47 UTC (rev 5793)
@@ -2,6 +2,7 @@
 
 JSSRC= 				                 	\
 	PVEUtils.js					\
+	StateProvider.js				\
 	data/PVEProxy.js				\
 	data/UpdateQueue.js				\
 	data/UpdateStore.js				\

Added: pve-manager/pve2/www/new/StateProvider.js
===================================================================
--- pve-manager/pve2/www/new/StateProvider.js	                        (rev 0)
+++ pve-manager/pve2/www/new/StateProvider.js	2011-04-07 06:02:47 UTC (rev 5793)
@@ -0,0 +1,85 @@
+Ext.define('PVE.StateProvider', {
+    extend: 'Ext.state.Provider',
+
+    constructor: function(config){
+	var self = this;
+
+	self.callParent([config]);
+
+	self.UIState = {};
+
+	// order is important for notifications
+	var list = [
+	    'view',
+	    'rid'
+	];
+
+	var urlstate = Ext.urlDecode(Ext.History.getToken());
+
+	Ext.Array.each(list, function(name) {
+	    if (typeof urlstate[name] != "undefined") {
+		console.log("LOAD URLSTATE " + name);
+		var value = { value: urlstate[name] };
+  		window.localStorage.setItem(name, Ext.encode(value));
+	    }
+	    var text = window.localStorage.getItem(name);
+	    var value = Ext.decode(text);
+	    self.UIState[name] = value ? value.value : null;
+	});
+	console.dir(self.UIState);
+
+	Ext.History.on('change', function(token) {
+	    if (!token) {
+		alert("no more history entries");
+		return;
+	    }
+	    var newstate = Ext.urlDecode(token);
+	    Ext.Array.each(list, function(name) {
+		if (typeof newstate[name] == "undefined")
+		    return;
+
+		var newvalue = { value: newstate[name] };
+ 		var newtext = Ext.encode(newvalue);
+		var oldtext = window.localStorage.getItem(name);
+		if (newtext != oldtext) {
+ 		    window.localStorage.setItem(name, newtext);
+		    self.UIState[name] = newstate[name];
+		    self.fireEvent("statechange", self, name, newvalue);
+		}
+	    });
+	});
+    },
+
+    get: function(name, defaultValue){
+	var self = this;
+	var text = window.localStorage.getItem(name);
+	//console.log("GET " + name + " " + text +  " " + Ext.decode(text));
+        if (typeof text == "undefined")
+	    return defaultValue;
+
+	var value = Ext.decode(text);
+
+	return value;
+    },
+
+    clear: function(name){
+	var self = this;
+
+	window.localStorage.removeItem(name); 
+        self.fireEvent("statechange", self, name, null);
+    },
+
+    set: function(name, value){
+        var self = this;
+
+	if (typeof self.UIState[name] != "undefined") {
+	    var cstate = Ext.clone(self.UIState);
+	    cstate[name] = value ? value.value : null;
+	    var htext = Ext.urlEncode(cstate);
+	    Ext.History.add(htext);
+	} else {
+  	    window.localStorage.setItem(name, Ext.encode(value));
+	    self.fireEvent("statechange", self, name, value);
+	}
+    }
+});
\ No newline at end of file

Modified: pve-manager/pve2/www/new/Workspace.js
===================================================================
--- pve-manager/pve2/www/new/Workspace.js	2011-04-07 04:27:01 UTC (rev 5792)
+++ pve-manager/pve2/www/new/Workspace.js	2011-04-07 06:02:47 UTC (rev 5793)
@@ -1,6 +1,8 @@
 Ext.define('PVE.Workspace', {
     extend: 'Ext.container.Viewport',
-    requires: ['PVE.window.LoginWindow', 'PVE.Utils', 'PVE.tree.ResourceTree'],
+    requires: ['PVE.window.LoginWindow', 
+	       'PVE.Utils', 
+	       'PVE.tree.ResourceTree'],
 
     // private
     defaultView: {
@@ -66,11 +68,6 @@
 	    }
 	});
 
-	Ext.tip.QuickTips.init();
-
-	Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', 
-						 { secure: true }));
-
 	Ext.apply(self, {
  	    layout: 'border',
 	    border: false,
@@ -139,7 +136,6 @@
 				    title: "NODE ID " + n.data.id,
 				    pveSelNode: n 
 				};
-
 				self.setView(comp);
 			    }
 			}
@@ -168,7 +164,7 @@
 	});
 
 	PVE.Workspace.superclass.initComponent.call(self);
-
+ 
         if (!PVE.Utils.authOK())
 	    self.showLogin();
 	else 

Modified: pve-manager/pve2/www/new/form/ViewSelector.js
===================================================================
--- pve-manager/pve2/www/new/form/ViewSelector.js	2011-04-07 04:27:01 UTC (rev 5792)
+++ pve-manager/pve2/www/new/form/ViewSelector.js	2011-04-07 06:02:47 UTC (rev 5793)
@@ -50,23 +50,44 @@
 	    displayField: 'value',
 
 	    getViewSettings: function() {
-		var view = this.getValue();
-		return Ext.clone(default_views[view] || default_views.server);
+		var view = self.getValue();
+		return Ext.apply({ id: view }, default_views[view] || default_views.server);
 	    },
 
 	    getState: function() {
-		return { value: this.getValue() };
+		return { value: self.getValue() };
 	    },
-	    applyState : function(state) {
-		if (state && state.value) {
-		    this.setValue(state.value);
+
+	    applyState : function(state, doSelect) {
+		var view = self.getValue();
+		if (state && state.value && (view != state.value)) {
+		    var record = store.findRecord('key', state.value);
+		    if (record) {
+			self.setValue(state.value, true);
+			if (doSelect) {
+			    self.fireEvent('select', self, [record]);
+ 			}
+		    }
 		}
 	    },
 	    stateEvents: [ 'select' ],
 	    stateful: true,
-	    stateId: 'pveviewselection'        
+	    stateId: 'view'        
 	});
 
-	PVE.form.ViewSelector.superclass.initComponent.call(self);
+	self.callParent([]);
+
+	var statechange = function(sp, key, value) {
+	    if (key === self.stateId) {
+		self.applyState(value, true);
+	    }
+	};
+
+	var sp = Ext.state.Manager.getProvider();
+
+	sp.on('statechange', statechange);
+	self.on('destroy', function() {
+	    sp.un('statechange', statechange);		    
+	});
     }
 });
\ No newline at end of file

Modified: pve-manager/pve2/www/new/index.pl
===================================================================
--- pve-manager/pve2/www/new/index.pl	2011-04-07 04:27:01 UTC (rev 5792)
+++ pve-manager/pve2/www/new/index.pl	2011-04-07 06:02:47 UTC (rev 5793)
@@ -57,8 +57,19 @@
 PVE.UserName = '$username';
 PVE.CSRFPreventionToken = '$token';
 
-Ext.require(['*']);
+Ext.require([
+    '*', 
+    'Ext.state.*', 
+    'PVE.StateProvider', 
+    'PVE.Workspace']);
+
+Ext.History.fieldid = 'x-history-field';
+Ext.History.iframeId = 'x-history-frame';
+
 Ext.onReady(function() {
+    Ext.History.init();
+    Ext.tip.QuickTips.init();
+    Ext.state.Manager.setProvider(Ext.create('PVE.StateProvider'));
     Ext.create('PVE.Workspace');
 });
 _EOJS

Modified: pve-manager/pve2/www/new/tree/ResourceTree.js
===================================================================
--- pve-manager/pve2/www/new/tree/ResourceTree.js	2011-04-07 04:27:01 UTC (rev 5792)
+++ pve-manager/pve2/www/new/tree/ResourceTree.js	2011-04-07 06:02:47 UTC (rev 5793)
@@ -1,6 +1,8 @@
 Ext.define('PVE.tree.ResourceTree', {
     extend: 'Ext.tree.TreePanel',
-    requires: ['Ext.tree.*', 'PVE.Utils', 
+    requires: ['Ext.tree.*', 
+	       'Ext.state.Manager',
+	       'PVE.Utils', 
 	       'PVE.form.ViewSelector', 
 	       'PVE.data.ResourceStore'],
     alias: ['widget.pveResourceTree'],
@@ -163,6 +165,7 @@
 	var self = this;
 
 	var rstore = PVE.data.ResourceStore;
+	var sp = Ext.state.Manager.getProvider();
 
 	var pdata = {
 	    view: {},
@@ -246,6 +249,7 @@
 	    if (!pdata.updateCount) {
 		rootnode.collapse();
 		rootnode.expand();
+		self.applyState(sp.get(self.stateId));
 	    }
 
 	    pdata.updateCount++;
@@ -264,6 +268,15 @@
 
 	pdata.view = selview.getViewSettings();
 
+	var statechange = function(sp, key, value) {
+	    if (key === self.stateId) {
+		self.applyState(value);
+	    }
+	};
+
+
+	sp.on('statechange', statechange);
+
 	Ext.apply(self, {
 	    store: store,
 	    //useArrows: true,
@@ -275,22 +288,48 @@
 		    rstore.un("load", updateTree)
 		}
 	    },
+	    
+	    getViewID: function() {
+		return pdata.view.id;
+	    },
 	    setView: function(view) {
-		var self = this;
-	
 		pdata.view = view;
 
+		pdata.updateCount = 0;
 		var rootnode = self.store.node;
 		rootnode.collapse();
 		rootnode.removeAll(true);
 		pdata.dataIndex = {};
 		updateTree();
-		rootnode.expand();
-	    }
+	    },
+	    applyState : function(state) {
+		if (state && state.value) {
+		    var rootnode = self.store.node;
+		    var node = rootnode.findChild('id', state.value, true);
+		    if (node) {
+			var sm = self.getSelectionModel();
+			if (!sm.isSelected(node)) {
+			    sm.select(node);
+			    var cn = node;
+			    while ((cn = cn.parentNode)) {
+				if (!cn.isExpanded())
+				    cn.expand();
+			    }
+			}
+		    }
+		}
+	    },
+	    stateful: false, // we impl. our own state load/save
+	    stateId: 'rid'
 	});
 
 	self.callParent();
 
+	var sm = self.getSelectionModel();
+	sm.on('select', function(sm, n) {		    
+	    sp.set(self.stateId, { value: n.data.id});
+	});
+
 	rstore.on("load", updateTree);
 	rstore.startUpdate();
 	//rstore.stopUpdate();



More information about the pve-devel mailing list