optimize top btn

lib/webInterface.js

@@ -38,7 +38,7 @@ function webInterface(config){
     });
 
     app.get("/lastestLog",function(req,res){
-        recorder.getRecords(null,60,function(err,docs){
+        recorder.getRecords(null,120,function(err,docs){
             if(err){
                 res.end(err.toString());
             }else{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anyproxy",
-  "version": "3.7.3Beta",
+  "version": "3.7.3Beta2",
   "description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
   "main": "proxy.js",
   "bin": {

web/build/index.js

@@ -154,11 +154,6 @@ var recorder;
 //action bar
 (function(){
 
-	//detect whether to show the filter and map btn
-	$.get("/filetree",function(){
-		$(".J_filterSection").show();
-	});
-
 	//clear log
 	function clearLogs(){
 		recordSet = [];
@@ -194,22 +189,66 @@ var recorder;
 		}
 	});
 
-	//filter
+	//preset button
 	(function (){
+		var TopBtn = React.createClass({displayName: "TopBtn",
+			getInitialState: function(){
+				return {
+					inUse : false
+				};
+			},
+			render: function(){
+				var self = this,
+					iconClass = self.state.inUse ? "uk-icon-check"      : self.props.icon,
+					btnClass  = self.state.inUse ? "topBtn topBtnInUse" : "topBtn";
+
+				return React.createElement("a", {href: "#"}, React.createElement("span", {className: btnClass, onClick: self.props.onClick}, React.createElement("i", {className: iconClass}), self.props.title))
+			}
+		});
+
+		// filter
+		var filterBtn,
+		    FilterPanel = PopupContent["filter"],
+			filterPanelEl;
+
+		filterBtn = React.render(React.createElement(TopBtn, {icon: "uk-icon-filter", title: "Filter", onClick: filterBtnClick}), document.getElementById("J_filterBtnContainer"));
+		filterPanelEl = (React.createElement(FilterPanel, {onChangeKeyword: updateKeyword}) );
+
 		function updateKeyword(key){
 			eventCenter.dispatchEvent("filterUpdated",key);
+			filterBtn.setState({inUse : !!key});
+		}
+		function filterBtnClick(){
+			showPop({ left:"60%", content:filterPanelEl });
 		}
 
-		$(".J_showFilter").on("click",function(){
+		// map local
-			showPop({ left:"60%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
+		var mapBtn,
-		});
+			mapPanelEl;
-	})();
+		function onChangeMapConfig(cfg){
+			mapBtn.setState({inUse : cfg && cfg.length});
+		}
 
-	//map local
+		function mapBtnClick(){
-	(function(){
+			showPop({left:"60%", content:mapPanelEl });
-		$(".J_showMapPanel").on("click",function(){
+		}
-			showPop({left:"60%", content:React.createElement(PopupContent["map"],null)});
+
+		//detect whether to show the map btn
+		require("./mapPanel").fetchConfig(function(initConfig){
+			var MapPanel = PopupContent["map"];
+			mapBtn     = React.render(React.createElement(TopBtn, {icon: "uk-icon-shield", title: "Map Local", onClick: mapBtnClick}),document.getElementById("J_filterContainer"));
+			mapPanelEl = (React.createElement(MapPanel, {onChange: onChangeMapConfig}));
+			onChangeMapConfig(initConfig);
 		});
+
+		var t = true;
+		setInterval(function(){
+			t = !t;
+			// mapBtn && mapBtn.setState({inUse : t})
+		},300);
+
+
+
 	})();
 
 	//other button

web/build/mapList.js

@@ -1,3 +1,7 @@
+function fetchConfig(cb){
+	return $.getJSON("/getMapConfig",cb);
+}
+
 function init(React){
 	var MapList = React.createClass({displayName: "MapList",
 		getInitialState:function(){
@@ -19,7 +23,6 @@ function init(React){
 					ruleList: newState
 				});
 		    }
-
 		},
 
 		removeRecord:function(index){
@@ -52,7 +55,7 @@ function init(React){
 		},
 		componentDidMount :function(){
 			var self = this;
-			$.getJSON("/getMapConfig",function(data){
+			fetchConfig(function(data){
 				self.setState({
 					ruleList : data
 				});
@@ -60,8 +63,8 @@ function init(React){
 		},
 		componentDidUpdate:function(){
 			var self = this;
-			//sync config
 
+			//upload config to server
 			var currentList = self.state.ruleList;
 			$.ajax({
 				method      : "POST",
@@ -71,10 +74,13 @@ function init(React){
 				dataType    : "json",
 				success     :function(res){}
 			});
+
+			self.props.onChange && self.props.onChange(self.state.ruleList);
 		}
 	});
 
 	return MapList;
 }
 
-module.exports.init = init;
+module.exports.init = init;
+module.exports.fetchConfig = fetchConfig;

web/build/mapPanel.js

@@ -17,7 +17,7 @@ function init(React){
 			return (
 				React.createElement("div", {className: "mapWrapper"}, 
 					React.createElement("h4", {className: "subTitle"}, "Current Config"), 
-					React.createElement(MapList, {ref: "list"}), 
+					React.createElement(MapList, {ref: "list", onChange: self.props.onChange}), 
 					
 					React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
 					React.createElement(MapForm, {onSubmit: self.appendRecord})
@@ -29,4 +29,5 @@ function init(React){
 	return MapPanel;
 }
 
-module.exports.init = init;
+module.exports.init = init;
+module.exports.fetchConfig = require("./mapList").fetchConfig;

web/css/page.css

@@ -7,7 +7,7 @@ body, html {
 }
 
 .topHead{
-	height: 55px;
+	height: 53px;
 	position: relative;
 	border-bottom: 1px solid #333;
 }
@@ -15,14 +15,14 @@ body, html {
 .topHead .logoWrapper{
 	float: left;
 	width: 220px;
-	height: 55px;
+	height: 53px;
 	overflow: hidden;
 	position: relative;
 }
 
 .topHead .logoWrapper h1{
 	color: #333;
-	line-height: 55px;
+	line-height: 53px;
 	text-align: center;
 	margin: 0;
 }
@@ -63,10 +63,11 @@ body, html {
 
 .topHead .ctrlWrapper{
 	height        : 26px;
-	line-height   : 26px;
+	line-height   : 16px;
 	overflow      : hidden;
 	text-overflow : ellipsis;
 	white-space   : nowrap;
+	margin-top    : 1px;
 }
 
 .topHead .ctrlWrapper .sep{
@@ -76,10 +77,16 @@ body, html {
 }
 
 .topHead .topBtn{
-	margin-right: 8px;
+	margin-right: 4px;
 	transition:0.08s;
 	padding: 4px;
 	border-radius: 2px;
+	min-width: 50px;
+	display: inline-block;
+}
+
+.topHead .topBtn.topBtnInUse{
+	color: #30B630;
 }
 
 .topHead .topBtn:hover:not(.btn_disable){
@@ -94,6 +101,7 @@ body, html {
 
 .topHead i{
 	margin-right: 3px;
+	width: 12px;
 }
 
 .topHead .btn_disable{

web/index.html

@@ -30,12 +30,9 @@
 		</div>
 
 		<div class="ctrlWrapper">
-			<a href="#"><span class="topBtn J_showFilter"><i class="uk-icon-filter"></i>Filter</span></a>
+			<span id="J_filterBtnContainer"></span>
-			<span class="J_filterSection" style="display:none">
+			<span id="J_filterContainer"></span>
-				<a href="#"><span class="topBtn J_showMapPanel"><i class="uk-icon-shield"></i>Map Local</span></a>
+			<span class="sep">|</span>
-
-				<span class="sep">|</span>
-			</span>
 
 			{@if customMenu.length}
 				{@each customMenu as item}

web/page.js

@@ -200,11 +200,6 @@
 	//action bar
 	(function(){
 
-		//detect whether to show the filter and map btn
-		$.get("/filetree",function(){
-			$(".J_filterSection").show();
-		});
-
 		//clear log
 		function clearLogs(){
 			recordSet = [];
@@ -240,22 +235,66 @@
 			}
 		});
 
-		//filter
+		//preset button
 		(function (){
+			var TopBtn = React.createClass({displayName: "TopBtn",
+				getInitialState: function(){
+					return {
+						inUse : false
+					};
+				},
+				render: function(){
+					var self = this,
+						iconClass = self.state.inUse ? "uk-icon-check"      : self.props.icon,
+						btnClass  = self.state.inUse ? "topBtn topBtnInUse" : "topBtn";
+
+					return React.createElement("a", {href: "#"}, React.createElement("span", {className: btnClass, onClick: self.props.onClick}, React.createElement("i", {className: iconClass}), self.props.title))
+				}
+			});
+
+			// filter
+			var filterBtn,
+			    FilterPanel = PopupContent["filter"],
+				filterPanelEl;
+
+			filterBtn = React.render(React.createElement(TopBtn, {icon: "uk-icon-filter", title: "Filter", onClick: filterBtnClick}), document.getElementById("J_filterBtnContainer"));
+			filterPanelEl = (React.createElement(FilterPanel, {onChangeKeyword: updateKeyword}) );
+
 			function updateKeyword(key){
 				eventCenter.dispatchEvent("filterUpdated",key);
+				filterBtn.setState({inUse : !!key});
+			}
+			function filterBtnClick(){
+				showPop({ left:"60%", content:filterPanelEl });
 			}
 
-			$(".J_showFilter").on("click",function(){
+			// map local
-				showPop({ left:"60%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
+			var mapBtn,
-			});
+				mapPanelEl;
-		})();
+			function onChangeMapConfig(cfg){
+				mapBtn.setState({inUse : cfg && cfg.length});
+			}
 
-		//map local
+			function mapBtnClick(){
-		(function(){
+				showPop({left:"60%", content:mapPanelEl });
-			$(".J_showMapPanel").on("click",function(){
+			}
-				showPop({left:"60%", content:React.createElement(PopupContent["map"],null)});
+
+			//detect whether to show the map btn
+			__webpack_require__(1).fetchConfig(function(initConfig){
+				var MapPanel = PopupContent["map"];
+				mapBtn     = React.render(React.createElement(TopBtn, {icon: "uk-icon-shield", title: "Map Local", onClick: mapBtnClick}),document.getElementById("J_filterContainer"));
+				mapPanelEl = (React.createElement(MapPanel, {onChange: onChangeMapConfig}));
+				onChangeMapConfig(initConfig);
 			});
+
+			var t = true;
+			setInterval(function(){
+				t = !t;
+				// mapBtn && mapBtn.setState({inUse : t})
+			},300);
+
+
+
 		})();
 
 		//other button
@@ -298,7 +337,7 @@
 				return (
 					React.createElement("div", {className: "mapWrapper"}, 
 						React.createElement("h4", {className: "subTitle"}, "Current Config"), 
-						React.createElement(MapList, {ref: "list"}), 
+						React.createElement(MapList, {ref: "list", onChange: self.props.onChange}), 
 						
 						React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
 						React.createElement(MapForm, {onSubmit: self.appendRecord})
@@ -311,6 +350,7 @@
 	}
 
 	module.exports.init = init;
+	module.exports.fetchConfig = __webpack_require__(14).fetchConfig;
 
 /***/ },
 /* 2 */
@@ -28057,6 +28097,10 @@
 /* 14 */
 /***/ function(module, exports, __webpack_require__) {
 
+	function fetchConfig(cb){
+		return $.getJSON("/getMapConfig",cb);
+	}
+
 	function init(React){
 		var MapList = React.createClass({displayName: "MapList",
 			getInitialState:function(){
@@ -28078,7 +28122,6 @@
 						ruleList: newState
 					});
 			    }
-
 			},
 
 			removeRecord:function(index){
@@ -28111,7 +28154,7 @@
 			},
 			componentDidMount :function(){
 				var self = this;
-				$.getJSON("/getMapConfig",function(data){
+				fetchConfig(function(data){
 					self.setState({
 						ruleList : data
 					});
@@ -28119,8 +28162,8 @@
 			},
 			componentDidUpdate:function(){
 				var self = this;
-				//sync config
 
+				//upload config to server
 				var currentList = self.state.ruleList;
 				$.ajax({
 					method      : "POST",
@@ -28130,6 +28173,8 @@
 					dataType    : "json",
 					success     :function(res){}
 				});
+
+				self.props.onChange && self.props.onChange(self.state.ruleList);
 			}
 		});
 
@@ -28137,6 +28182,7 @@
 	}
 
 	module.exports.init = init;
+	module.exports.fetchConfig = fetchConfig;
 
 /***/ },
 /* 15 */

web/src/index.js

@@ -154,11 +154,6 @@ var recorder;
 //action bar
 (function(){
 
-	//detect whether to show the filter and map btn
-	$.get("/filetree",function(){
-		$(".J_filterSection").show();
-	});
-
 	//clear log
 	function clearLogs(){
 		recordSet = [];
@@ -194,22 +189,66 @@ var recorder;
 		}
 	});
 
-	//filter
+	//preset button
 	(function (){
+		var TopBtn = React.createClass({
+			getInitialState: function(){
+				return {
+					inUse : false
+				};
+			},
+			render: function(){
+				var self = this,
+					iconClass = self.state.inUse ? "uk-icon-check"      : self.props.icon,
+					btnClass  = self.state.inUse ? "topBtn topBtnInUse" : "topBtn";
+
+				return <a href="#"><span className={btnClass} onClick={self.props.onClick}><i className={iconClass}></i>{self.props.title}</span></a>
+			}
+		});
+
+		// filter
+		var filterBtn,
+		    FilterPanel = PopupContent["filter"],
+			filterPanelEl;
+
+		filterBtn = React.render(<TopBtn icon="uk-icon-filter" title="Filter" onClick={filterBtnClick}/>, document.getElementById("J_filterBtnContainer"));
+		filterPanelEl = (<FilterPanel onChangeKeyword={updateKeyword} /> );
+
 		function updateKeyword(key){
 			eventCenter.dispatchEvent("filterUpdated",key);
+			filterBtn.setState({inUse : !!key});
+		}
+		function filterBtnClick(){
+			showPop({ left:"60%", content:filterPanelEl });
 		}
 
-		$(".J_showFilter").on("click",function(){
+		// map local
-			showPop({ left:"60%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
+		var mapBtn,
-		});
+			mapPanelEl;
-	})();
+		function onChangeMapConfig(cfg){
+			mapBtn.setState({inUse : cfg && cfg.length});
+		}
 
-	//map local
+		function mapBtnClick(){
-	(function(){
+			showPop({left:"60%", content:mapPanelEl });
-		$(".J_showMapPanel").on("click",function(){
+		}
-			showPop({left:"60%", content:React.createElement(PopupContent["map"],null)});
+
+		//detect whether to show the map btn
+		require("./mapPanel").fetchConfig(function(initConfig){
+			var MapPanel = PopupContent["map"];
+			mapBtn     = React.render(<TopBtn icon="uk-icon-shield" title="Map Local" onClick={mapBtnClick} />,document.getElementById("J_filterContainer"));
+			mapPanelEl = (<MapPanel onChange={onChangeMapConfig} />);
+			onChangeMapConfig(initConfig);
 		});
+
+		var t = true;
+		setInterval(function(){
+			t = !t;
+			// mapBtn && mapBtn.setState({inUse : t})
+		},300);
+
+
+
 	})();
 
 	//other button

web/src/mapList.js

@@ -1,3 +1,7 @@
+function fetchConfig(cb){
+	return $.getJSON("/getMapConfig",cb);
+}
+
 function init(React){
 	var MapList = React.createClass({
 		getInitialState:function(){
@@ -19,7 +23,6 @@ function init(React){
 					ruleList: newState
 				});
 		    }
-
 		},
 
 		removeRecord:function(index){
@@ -52,7 +55,7 @@ function init(React){
 		},
 		componentDidMount :function(){
 			var self = this;
-			$.getJSON("/getMapConfig",function(data){
+			fetchConfig(function(data){
 				self.setState({
 					ruleList : data
 				});
@@ -60,8 +63,8 @@ function init(React){
 		},
 		componentDidUpdate:function(){
 			var self = this;
-			//sync config
 
+			//upload config to server
 			var currentList = self.state.ruleList;
 			$.ajax({
 				method      : "POST",
@@ -71,10 +74,13 @@ function init(React){
 				dataType    : "json",
 				success     :function(res){}
 			});
+
+			self.props.onChange && self.props.onChange(self.state.ruleList);
 		}
 	});
 
 	return MapList;
 }
 
-module.exports.init = init;
+module.exports.init = init;
+module.exports.fetchConfig = fetchConfig;

web/src/mapPanel.js

@@ -17,7 +17,7 @@ function init(React){
 			return (
 				<div className="mapWrapper">
 					<h4 className="subTitle">Current Config</h4>
-					<MapList ref="list"/>
+					<MapList ref="list" onChange={self.props.onChange}/>
 					
 					<h4 className="subTitle">Add Map Rule</h4>
 					<MapForm onSubmit={self.appendRecord}/>
@@ -29,4 +29,5 @@ function init(React){
 	return MapPanel;
 }
 
-module.exports.init = init;
+module.exports.init = init;
+module.exports.fetchConfig = require("./mapList").fetchConfig;