optimize top btn

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(){
-			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(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;