diff --git a/web/css/page.css b/web/css/page.css new file mode 100644 index 0000000..7472f1f --- /dev/null +++ b/web/css/page.css @@ -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; +} \ No newline at end of file diff --git a/web/index.html b/web/index.html index 64421dc..5bcb3dc 100644 --- a/web/index.html +++ b/web/index.html @@ -3,10 +3,12 @@ Anyproxy +

Anyproxy

+ Clear Logs(Command/Ctrl+X)
@@ -74,272 +76,7 @@ - - $(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); - } - - }); - - }); - - - - - - \ No newline at end of file diff --git a/web/page.js b/web/page.js new file mode 100644 index 0000000..05d365a --- /dev/null +++ b/web/page.js @@ -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 = $("
").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); + } + + }); + +}); \ No newline at end of file