XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-04-24 08:41:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize top btn

Browse Source
This commit is contained in:
OttoMao 2015-08-07 14:27:57 +08:00
parent 39ae0f4648
commit ae070c90ab
11 changed files with 214 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/webInterface.js
View File

@ -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{

2
package.json
View File

@ -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": {

67
web/build/index.js
View File

@ -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

12
web/build/mapList.js
View File

@ -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,6 +74,8 @@ function init(React){
dataType : "json",
success :function(res){}
});
self.props.onChange && self.props.onChange(self.state.ruleList);
}
});
@ -78,3 +83,4 @@ function init(React){
}
module.exports.init = init;
module.exports.fetchConfig = fetchConfig;

3
web/build/mapPanel.js
View File

@ -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})
@ -30,3 +30,4 @@ function init(React){
}
module.exports.init = init;
module.exports.fetchConfig = require("./mapList").fetchConfig;

18
web/css/page.css
View File

@ -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{

7
web/index.html
View File

@ -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 class="J_filterSection" style="display:none">
<a href="#"><span class="topBtn J_showMapPanel"><i class="uk-icon-shield"></i>Map Local</span></a>
<span id="J_filterBtnContainer"></span>
<span id="J_filterContainer"></span>
<span class="sep">|</span>
</span>
{@if customMenu.length}
{@each customMenu as item}

82
web/page.js
View File

@ -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(){
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
__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 */

67
web/src/index.js
View File

@ -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

12
web/src/mapList.js
View File

@ -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,6 +74,8 @@ function init(React){
dataType : "json",
success :function(res){}
});
self.props.onChange && self.props.onChange(self.state.ruleList);
}
});
@ -78,3 +83,4 @@ function init(React){
}
module.exports.init = init;
module.exports.fetchConfig = fetchConfig;

3
web/src/mapPanel.js
View File

@ -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}/>
@ -30,3 +30,4 @@ function init(React){
}
module.exports.init = init;
module.exports.fetchConfig = require("./mapList").fetchConfig;