add stop btn to web interface

web/css/page.css

@@ -13,6 +13,10 @@
 	margin: 0 5px;
 }
 
+.topHead .btn_disable{
+	color: #777;
+}
+
 .mainTableWrapper{
 	margin-top: 0;
 }

web/index.html

@@ -9,6 +9,8 @@
 	<div class="topHead">
 		<h1>Anyproxy</h1>
 		<a href="#" class="J_clearBtn"><span class="topBtn">Clear Logs(Ctrl+X)</span></a>
+		<a href="#" class="J_statusBtn"><span class="topBtn">Stop</span></a>
+		<a href="#" class="J_statusBtn btn_disable"><span class="topBtn">Resume</span></a>
 	</div>
 
 	<div class="mainTableWrapper J_mainTable">

web/page.js

@@ -13,7 +13,6 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
 	$(function(){
 
 		//record detail
-		//backbone太麻烦了，这里手写拉倒..
 		var DetailView = function(){
 			var self      = this,
 				$detailEl = $(".J_recordDetailOverlay"),
@@ -153,6 +152,25 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
 			recList.reset();
 		}
 
+		//pause btn
+		var ifPause = false;
+		(function(){
+			var statusBtn = $(".J_statusBtn");
+			statusBtn.on("click",function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+				$(".J_statusBtn").removeClass("btn_disable");
+				$(this).addClass("btn_disable");
+
+				if(/stop/i.test($(this).html()) ){
+					ifPause = true;
+				}else{
+					ifPause = false;
+				}
+			});
+		})();
+
 		//data via web socket
 		if(!WebSocket){
 			alert("WebSocket is required. Please use a modern browser.");
@@ -162,6 +180,7 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
 		dataSocket.onopen = function(){}
 
 		dataSocket.onmessage = function(event){
+			if(ifPause) return;
 			var data = JSON.parse(event.data);
 
 			var reqDate = new Date(data.startTime);