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

reconstruct map local

Browse Source
This commit is contained in:
OttoMao
2015-07-07 17:31:56 +08:00
parent b595e3aa9c
commit 8a146f7373
36 changed files with 56684 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
web/build/detailPanel.js
View File

@@ -1,88 +1,25 @@
function init(React){
function dragableBar(initX,cb){
var self = this,
dragging = true;
var ghostbar = $('<div class="ghostbar"></div>').css("left",initX).prependTo('body');
$(document).mousemove(function(e){
e.preventDefault();
ghostbar.css("left",e.pageX + "px");
});
$(document).mouseup(function(e){
if(!dragging) return;
dragging = false;
var deltaPageX = e.pageX - initX;
cb && cb.call(null,{
delta : deltaPageX,
finalX : e.pageX
});
ghostbar.remove();
$(document).unbind('mousemove');
});
}
var DetailPanel = React.createClass({displayName: "DetailPanel",
getInitialState : function(){
return {
show : false,
data : {},
body : {id : -1, content : null},
left : "35%"
};
},
componentDidMount:function(){
var self = this;
$(document).on("keyup",function(e){
if(e.keyCode == 27){ //ESC
self.setState({
show : false
});
}
});
},
setHide:function(){
this.setState({
show : false
});
},
setShow:function(ifShow){
this.setState({
show : true
});
},
loadBody:function(){
var self = this,
id = self.state.data.id;
id = self.props.data.id;
if(!id) return;
ws.reqBody(id,function(content){
if(content.id == self.state.data.id){
if(content.id == self.props.data.id){
self.setState({
body : content
});
}
});
},
dealDrag:function(){
var self = this,
leftVal = $(React.findDOMNode(this.refs.mainOverlay)).css("left");
dragableBar(leftVal, function(data){
if(data && data.finalX){
if(window.innerWidth - data.finalX < 200){
data.finalX = window.innerWidth - 200;
}
self.setState({
left : data.finalX + "px"
});
}
});
},
render : function(){
var reqHeaderSection = [],
resHeaderSection = [],
@@ -90,9 +27,9 @@ function init(React){
detailSection,
bodyContent;
if(this.state.data.reqHeader){
for(var key in this.state.data.reqHeader){
reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.state.data.reqHeader[key]))
if(this.props.data.reqHeader){
for(var key in this.props.data.reqHeader){
reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.reqHeader[key]))
}
}
@@ -102,7 +39,7 @@ function init(React){
React.createElement("h4", {className: "subTitle"}, "request"),
React.createElement("div", {className: "detail"},
React.createElement("ul", {className: "uk-list"},
React.createElement("li", null, this.state.data.method, " ", React.createElement("span", {title: "{this.state.data.path}"}, this.state.data.path), " HTTP/1.1"),
React.createElement("li", null, this.props.data.method, " ", React.createElement("span", {title: "{this.props.data.path}"}, this.props.data.path), " HTTP/1.1"),
reqHeaderSection
)
)
@@ -111,24 +48,24 @@ function init(React){
React.createElement("section", {className: "reqBody"},
React.createElement("h4", {className: "subTitle"}, "request body"),
React.createElement("div", {className: "detail"},
React.createElement("p", null, this.state.data.reqBody)
React.createElement("p", null, this.props.data.reqBody)
)
)
)
);
if(this.state.data.statusCode){
if(this.props.data.statusCode){
if(this.state.body.id == this.state.data.id){
if(this.state.body.id == this.props.data.id){
bodyContent = (React.createElement("pre", {className: "resBodyContent"}, this.state.body.body));
}else{
bodyContent = null;
this.loadBody();
}
if(this.state.data.resHeader){
for(var key in this.state.data.resHeader){
resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.state.data.resHeader[key]))
if(this.props.data.resHeader){
for(var key in this.props.data.resHeader){
resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.resHeader[key]))
}
}
@@ -138,7 +75,7 @@ function init(React){
React.createElement("h4", {className: "subTitle"}, "response header"),
React.createElement("div", {className: "detail"},
React.createElement("ul", {className: "uk-list"},
React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.state.data.statusCode}, this.state.data.statusCode)),
React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode)),
resHeaderSection
)
)
@@ -153,16 +90,9 @@ function init(React){
}
return (
React.createElement("div", {style: {display:this.state.show ? "block" :"none"}},
React.createElement("div", {className: "overlay_mask", onClick: this.setHide}),
React.createElement("div", {className: "recordDetailOverlay", ref: "mainOverlay", style: {left: this.state.left}},
React.createElement("div", {className: "dragbar", onMouseDown: this.dealDrag}),
React.createElement("span", {className: "escBtn", onClick: this.setHide}, "Close (ESC)"),
React.createElement("div", null,
summarySection,
detailSection
)
)
React.createElement("div", null,
summarySection,
detailSection
)
);
}