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

add key binding

Browse Source
This commit is contained in:
加里 2014-08-28 09:52:31 +08:00
parent 80c4352827
commit c056a65960
3 changed files with 332 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
web/css/page.css Normal file
View File

@ -0,0 +1,150 @@
.topHead{
background: #000;
height: 42px;
position: relative;
}
.topHead h1{
color: rgb(204,204,204);
display: inline-block;
}
.topHead .topBtn{
margin: 0 5px;
}
.mainTableWrapper{
margin-top: 0;
}
.mainTableWrapper table{
table-layout: fixed;
}
.mainTableWrapper td,
.mainTableWrapper th{
padding: 4px 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mainTableWrapper tbody tr{
color: #AAA;
}
.mainTableWrapper tbody tr.record_status_done{
color: #000;
}
.mainTableWrapper .col_id{
width: 25px;
padding-right: 20px;
}
.mainTableWrapper .col_code{
width: 40px;
}
.mainTableWrapper .col_method{
width: 60px;
}
.mainTableWrapper .col_host{
width: 180px;
}
.mainTableWrapper tr.row_odd{
background: #f5f5f5;
}
.mainTableWrapper tr.row_even{
background: #FFFFFF;
}
.uk-table-hover tbody tr:hover{
cursor: pointer;
background: #CCC;
}
.resHeader{
width: 400px;
}
.resBody textarea{
width: 400px;
height: 280px;
}
.subTitle{
padding-left: 6px;
border-left: 3px solid #1FA2D6;
font-size: 16px;
line-height: 16px;
}
.detail{
padding-left: 12px;
}
.overlay_mask{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: #EEE;
opacity: 0.85;
}
.recordDetailOverlay{
z-index: 1;
width: 61.8%;
height: 100%;
position: fixed;
right: 0;
background: #FFF;
border-left: 1px solid #CCC;
top: 0;
padding: 10px 10px 20px 10px;
overflow-y:scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recordDetailOverlay .escBtn{
position: absolute;
right: 10px;
top: 8px;
color: #777;
cursor: pointer;
text-decoration: underline;
}
.recordDetailOverlay li{
white-space: nowrap;
word-wrap: break-word;
}
.data_id{
color: #777;
}
.http_status{
font-weight: 700;
}
.http_status_200{
color: #408E2F;
}
.http_status_404,
.http_status_500,
.http_status_501,
.http_status_502,
.http_status_503,
.http_status_504
{
color: #910A0A;
}

269
web/index.html
View File

@ -3,10 +3,12 @@
<head> <head>
<title>Anyproxy</title> <title>Anyproxy</title>
<link rel="stylesheet" href="/css/uikit.gradient.min.css" /> <link rel="stylesheet" href="/css/uikit.gradient.min.css" />
<link rel="stylesheet" href="/css/page.css" />
</head> </head>
<body> <body>
<div class="topHead"> <div class="topHead">
<h1>Anyproxy</h1> <h1>Anyproxy</h1>
<a href="#" class="J_clearBtn"><span class="topBtn">Clear Logs(Command/Ctrl+X)</span></a>
</div> </div>
<div class="mainTableWrapper J_mainTable"> <div class="mainTableWrapper J_mainTable">
@ -74,272 +76,7 @@
</script> </script>
<script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script> <script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
<script> <script src="/page.js"></script>
seajs.config({
base: 'http://static.alipayobjects.com/',
alias: {
'$' : 'jquery/jquery/1.7.2/jquery',
'Backbone' : 'gallery/backbone/1.1.2/backbone.js',
'Underscore': 'gallery/underscore/1.6.0/underscore.js'
}
});
seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
Backbone.$ = $;
$(function(){
//record detail
//backbone太麻烦了，这里手写拉倒..
var DetailView = function(){
var self = this,
$detailEl = $(".J_recordDetailOverlay");
$(document).on("keyup",function(e){
if(e.keyCode == 27){ //ESC
self.hideDetail();
}
});
$detailEl.on("click",function(e){
e.stopPropagation();
});
$(".J_escBtn",$detailEl).on("click",function(e){
self.hideDetail();
});
self.showDetail = function(data){
var tpl = _.template($("#detail_tpl").html() , data);
$(".J_recordDetailOverlayContent",$detailEl).html(tpl);
$detailEl.show();
if(data.statusCode){ //if finished
$.ajax({
url:"/body?id=" + data._id,
headers:{
anyproxy_web_req : true
},
type : "GET",
success:function(data){
$(".J_responseBody", $detailEl).html(data);
}
});
}
}
self.hideDetail = function(){
$detailEl.hide();
}
};
var detailPanel = new DetailView();
//record list
var RecordModel = Backbone.Model.extend({});
var RecordList = Backbone.Collection.extend({
initialize:function(){
var self = this;
self.on("add",function(data){
new RecordRowView({
model:data,
detailPanel : detailPanel
});
});
}
});
var RecordRowView = Backbone.View.extend({
tagName : "tr",
className:function(){
return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
},
tpl : $("#main_table_row").html(),
initialize:function(data){
var self = this;
self.model.on("change",self.render,self);
self.addNewRecord();
self.detailPanel = data.detailPanel;
},
events: {
click: function(){
var self = this;
var detailData = self.model.toJSON();
self.detailPanel.showDetail(detailData);
}
},
render: function(){
var data = this.model.toJSON();
if(!data.statusCode){
data.statusCode = "-";
}
if(!data.mime){
data.mime = "-";
}
var html = _.template(this.tpl, data);
this.$el.attr("recordId",data.id).empty().html(html);
return this;
},
addNewRecord:function(){
$(".J_tableBody").prepend(this.render().$el);
}
});
var recList = new RecordList();
var dataSocket = new WebSocket("ws://127.0.0.1:8003");
dataSocket.onmessage = function(event){
var data = JSON.parse(event.data);
var previous;
if(previous = recList.get(data.id)){
previous.set(data);
}else{
recList.add(new RecordModel(data),{merge: true});
}
}
dataSocket.onerror = function(e){
alert("socket err, please refresh");
console.log(e);
}
});
});
</script>
<style type="text/css">
.topHead{
background: #000;
color: rgb(204,204,204);
height: 42px;
position: relative;
}
.mainTableWrapper{
margin-top: 0;
}
.mainTableWrapper table{
table-layout: fixed;
}
.mainTableWrapper td,
.mainTableWrapper th{
padding: 4px 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mainTableWrapper .col_id{
width: 25px;
padding-right: 20px;
}
.mainTableWrapper .col_code{
width: 40px;
}
.mainTableWrapper .col_method{
width: 60px;
}
.mainTableWrapper .col_host{
width: 180px;
}
.mainTableWrapper tr.row_odd{
background: #f5f5f5;
}
.mainTableWrapper tr.row_even{
background: #FFFFFF;
}
.uk-table-hover tbody tr:hover{
cursor: pointer;
background: #CCC;
}
.resHeader{
width: 400px;
}
.resBody textarea{
width: 400px;
height: 280px;
}
.subTitle{
padding-left: 6px;
border-left: 3px solid #1FA2D6;
font-size: 16px;
line-height: 16px;
}
.detail{
padding-left: 12px;
}
.recordDetailOverlay{
width: 61.8%;
height: 100%;
position: fixed;
right: 0;
background: #FFF;
border-left: 1px solid #CCC;
top: 0;
padding: 10px 10px 20px 10px;
overflow-y:scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recordDetailOverlay .escBtn{
position: absolute;
right: 10px;
top: 8px;
color: #777;
cursor: pointer;
text-decoration: underline;
}
.recordDetailOverlay li{
white-space: nowrap;
word-wrap: break-word;
}
.data_id{
color: #777;
}
.http_status{
font-weight: 700;
}
.http_status_200{
color: #408E2F;
}
.http_status_404,
.http_status_500,
.http_status_501,
.http_status_502,
.http_status_503,
.http_status_504
{
color: #910A0A;
}
</style>
</body> </body>
</html> </html>

179
web/page.js Normal file
View File

@ -0,0 +1,179 @@
seajs.config({
base: 'http://static.alipayobjects.com/',
alias: {
'$' : 'jquery/jquery/1.7.2/jquery',
'Backbone' : 'gallery/backbone/1.1.2/backbone.js',
'Underscore': 'gallery/underscore/1.6.0/underscore.js'
}
});
seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
Backbone.$ = $;
$(function(){
//record detail
//backbone太麻烦了，这里手写拉倒..
var DetailView = function(){
var self = this,
$detailEl = $(".J_recordDetailOverlay"),
$mask;
//init mask
$mask = $("<div></div>").addClass("overlay_mask").hide();
$("body").append($mask);
//bind events
$(document).on("keyup",function(e){
if(e.keyCode == 27){ //ESC
self.hideDetail();
}
});
$mask.on("click",function(e){
self.hideDetail();
});
$(".J_escBtn",$detailEl).on("click",function(e){
self.hideDetail();
});
self.addMask = function(){
}
self.showDetail = function(data){
var tpl = _.template($("#detail_tpl").html() , data);
$(".J_recordDetailOverlayContent",$detailEl).html(tpl);
$detailEl.show();
$mask.show();
if(data.statusCode){ //if finished
$.ajax({
url:"/body?id=" + data._id,
headers:{
anyproxy_web_req : true
},
type : "GET",
success:function(data){
$(".J_responseBody", $detailEl).html(data);
}
});
}
};
self.hideDetail = function(){
$detailEl.hide();
$mask.hide();
};
};
var detailPanel = new DetailView();
//record list
var RecordModel = Backbone.Model.extend({});
var RecordList = Backbone.Collection.extend({
initialize:function(){
var self = this;
self.on("add",function(data){
new RecordRowView({
model:data,
detailPanel : detailPanel
});
});
self.on("reset",function(){
$(".J_tableBody").empty();
});
}
});
var RecordRowView = Backbone.View.extend({
tagName : "tr",
className:function(){
return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
},
tpl : $("#main_table_row").html(),
initialize:function(data){
var self = this;
self.model.on("change",self.render,self);
self.addNewRecord();
self.detailPanel = data.detailPanel;
},
events: {
click: function(e){
e.stopPropagation();
var self = this;
var detailData = self.model.toJSON();
self.detailPanel.showDetail(detailData);
}
},
render: function(){
var self = this,
data = self.model.toJSON();
if(!data.statusCode){
data.statusCode = "-";
}else{
self.$el.addClass("record_status_done")
}
if(!data.mime){
data.mime = "-";
}
var html = _.template(self.tpl, data);
self.$el.attr("recordId",data.id).empty().html(html);
return self;
},
addNewRecord:function(){
$(".J_tableBody").prepend(this.render().$el);
}
});
var recList = new RecordList();
//other controllers
$(".J_clearBtn").on("click",function(e){
e.stopPropagation();
e.preventDefault();
clearLogs();
});
$(document).on("keyup",function(e){
if(e.keyCode == 88 && e.ctrlKey){ //ctrl x
clearLogs();
}else{
console.log("key up");
console.log(e);
}
});
function clearLogs(){
recList.reset();
}
//data via web socket
var dataSocket = new WebSocket("ws://127.0.0.1:8003");
dataSocket.onmessage = function(event){
var data = JSON.parse(event.data);
var previous;
if(previous = recList.get(data.id)){
previous.set(data);
}else{
recList.add(new RecordModel(data),{merge: true});
}
}
dataSocket.onerror = function(e){
alert("socket err, please refresh");
console.log(e);
}
});
});