optimize top btn

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(){
-			showPop({ left:"60%", content:React.createElement(PopupContent["filter"], {onChangeKeyword : updateKeyword})});
-		});
-	})();
+		// map local
+		var mapBtn,
+			mapPanelEl;
+		function onChangeMapConfig(cfg){
+			mapBtn.setState({inUse : cfg && cfg.length});
+		}
 
-	//map local
-	(function(){
-		$(".J_showMapPanel").on("click",function(){
-			showPop({left:"60%", content:React.createElement(PopupContent["map"],null)});
+		function mapBtnClick(){
+			showPop({left:"60%", content:mapPanelEl });
+		}
+
+		//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;