Merge pull request #28 from libinsong/master

add jquery

src/main/resources/support/http/resources/css/style.css

@@ -3,6 +3,8 @@ body{
     font-family: 'Microsoft YaHei','Microsoft JhengHei',STHeiti,Georgia,'Times New Roman',Times,serif;
 	font-weight:normal;
 	font-size:12px;
+	padding-top: 60px;
+	padding-bottom: 40px;
 }
 #menu {
 	height:50px;
@@ -52,11 +54,6 @@ table{
 	font-weight:bolder;
  }
  
- a{
-    color: #0082FF;
-    font: 13px 'Microsoft YaHei','Microsoft JhengHei',STHeiti,Georgia,'Times New Roman',Times,serif;
- }
- 
  li{
 	line-height:18px;
  }
@@ -74,4 +71,14 @@ table{
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
+}
+
+.sidebar-nav {
+	padding: 9px 0;
+}
+.footer {
+    background-color: #F5F5F5;
+    border-top: 1px solid #E5E5E5;
+    margin-top: 10px;
+    padding: 20px 0;
 }

src/main/resources/support/http/resources/index.html

@@ -3,42 +3,45 @@
 	<head>
 		<title>Druid Stat Index</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
+		<link href='css/bootstrap.min.css' rel="stylesheet" />
 		<link href="css/style.css" type="text/css" rel="stylesheet"/>
+    	<script type="text/javascript" src="js/jquery.min.js"></script>
 		<script src="js/common.js" type="text/javascript" charset="utf8"></script>
 		<script src="js/basicStat.js" type="text/javascript"></script>
-		<script >
-			function init(){
-				ajaxRequestForBasicInfo();
-				buildMenu();
-				buildFooter();
-			}
-		</script>
 	</head>
-	<body onload="init()">
-		<br />
-		<div id="main">
-			<h2>Stat Index<a href="basic.json" target="_blank">[View JSON API]</a></h2>
-			<table cellspacing="1" cellpadding="5">
-				<tr >
-					<td valign="top" width="100" class="td_lable">
-						Version
-					</td>
-					<td id="DruidVersion" width="95%">
-					</td>
-				</tr>
-				<tr >
-					<td valign="top" class="td_lable"> drivers </td>
-					<td id="DruidDrivers"> </td>
-				</tr>
-				<tr >
-					<td valign="top" class="td_lable"> ResetEnable </td>
-					<td id="ResetEnable"> </td>
-				</tr>
-				<tr >
-					<td valign="top" class="td_lable"> ResetCount </td>
-					<td id="ResetCount"> </td>
-				</tr>
-			</table>
-		</div>
+	<body>
+    	<div class="container-fluid">
+      		<div class="row-fluid">
+        		<div class="span10">
+          			<div class="hero-unit" style="padding: 10px;">
+          				<h2>
+          					Stat Index
+          					<a href="basic.json" class="btn btn-primary" target="_blank">[View JSON API]</a>
+          				</h2>
+						<table class="table table-bordered responsive-utilities">
+							<tr >
+								<td valign="top" width="100" class="td_lable">
+									Version
+								</td>
+								<td id="DruidVersion" width="95%">
+								</td>
+							</tr>
+							<tr >
+								<td valign="top" class="td_lable"> drivers </td>
+								<td id="DruidDrivers"> </td>
+							</tr>
+							<tr >
+								<td valign="top" class="td_lable"> ResetEnable </td>
+								<td id="ResetEnable"></td>
+							</tr>
+							<tr >
+								<td valign="top" class="td_lable"> ResetCount </td>
+								<td id="ResetCount"></td>
+							</tr>
+						</table>
+          			</div>
+        		</div>
+      		</div> 
+    	</div>
 	</body>
 </html>

src/main/resources/support/http/resources/js/basicStat.js

@@ -1,26 +1,36 @@
-var xmlHttpForBasicInfo;
-
-function ajaxRequestForBasicInfo() {
-	xmlHttpForBasicInfo =  getRequestObject();
-	sendRequest(xmlHttpForBasicInfo,'basic.json',ajaxResponseForBasicInfo);
-}
-
-function ajaxResponseForBasicInfo() {
-	var jsonContent = getJSONResponseContent(xmlHttpForBasicInfo);
-	if(jsonContent==null) return;
-
-	document.getElementById("DruidVersion").innerHTML = jsonContent.Version;
-
-	var driversList = jsonContent.Drivers;
-	if (driversList) {
-		var driverHtml = '';
-		for ( var i = 0; i < driversList.length; i++) {
-			var driver = driversList[i];
-			driverHtml += driver + ' , ';
+$.namespace("druid.index");
+druid.index = function () {  
+	return  {
+		init : function() {
+			this.ajaxRequestForBasicInfo();
+		},
+		
+		ajaxRequestForBasicInfo : function() {
+			$.ajax({
+				type: 'POST',
+				url: "basic.json",
+				data: $("#loginForm").serialize(),
+				success: function(data) {
+					$("#DruidVersion").text(data.Content.Version)
+					var driversList = data.Content.Drivers;
+					if (driversList) {
+						var driverHtml = '';
+						for ( var i = 0; i < driversList.length; i++) {
+							var driver = driversList[i];
+							driverHtml += driver + ' , ';
+						}
+						$("#DruidDrivers").text(driverHtml);
+					}
+					$("#ResetEnable").text(data.Content.ResetEnable)
+					$("#ResetCount").text(data.Content.ResetCount)
+					console.info(data.Content);
+				},
+				dataType: "json"
+			});
 		}
-		document.getElementById("DruidDrivers").innerHTML = driverHtml;
 	}
+}();
 
-	document.getElementById("ResetEnable").innerHTML = jsonContent.ResetEnable;
-	document.getElementById("ResetCount").innerHTML = jsonContent.ResetCount;
-}
+$(document).ready(function() {
+	druid.index.init();
+});

src/main/resources/support/http/resources/js/common.js

@@ -1,66 +1,75 @@
-function changeInnerHtml(id, divHtml) {
-	var divObj = document.getElementById(id);
-	if (divHtml == undefined)
-		divHtml = '';
-	if (divObj) {
-		divObj.innerHTML = divHtml;
-	}
-}
+$.namespace("druid.common");
+druid.common = function () {  
+	return  {
+		init : function() {
+			this.buildHead();
+			this.buildMenu();
+			this.buildFooter();
+		},
+		
+		buildHead : function() {
+			var html = '<div class="navbar navbar-fixed-top">'+
+				       '	<div class="navbar-inner">'+
+				       ' 		<div class="container-fluid">'+
+				       '   			<a class="brand" href="#">Druid Monitor</a>'+
+				       '   			<div class="pull-right">'+
+				       '   				<a href="javascript:druid.common.ajaxRequestForReset()" class="btn">Reset All</a>'+
+				       '   			</div>'+
+				       ' 		</div>'+
+				       '		</div>'+
+				       '</div>';
+			$(document.body).prepend(html);
+		},
+		
+		buildMenu : function() {
+			var html = '<div class="span2">'+
+				      	'		<div class="well sidebar-nav">'+
+						'	<ul class="nav nav-list">'+
+				  		'		<li class="nav-header"><h3>Menu</h3></li>'+
+				  		'		<li id="configId"><a href="index.html">Index</a></li>'+
+				  		'		<li id="userAddId"><a href="datasource.html">DataSource</a></li>'+
+				  		'		<li id="userAddId"><a href="sql.html">Sql</a></li>'+
+				  		'		<li id="userAddId"><a href="weburi.html">WebURI</a></li>'+
+				  		'		<li id="userAddId"><a href="websession.html">Web Session</a></li>'+
+				  		'		<li id="userAddId"><a href="spring.html">Spring</a></li>'+
+				  		'		<li id="userAddId"><a href="api.html">JSON API</a></li>'+
+						'	</ul>'+
+						'	</div>'+
+					'</div>';
+			$(".row-fluid").prepend(html);
+		},
 
-function checkResoponse(xmlHttpForRequest){
-	if (xmlHttpForRequest.readyState != 4) {
-		return false;
-	}
-	if (xmlHttpForRequest.status != 200) {
-		return false;
-	}
-	return true;
-}
-
-function getJSONResponseContent(xmlHttpForRequest){
-	if(checkResoponse(xmlHttpForRequest)){
-		var jsonResp = eval("(" + xmlHttpForRequest.responseText + ")");
-		if (jsonResp.ResultCode == 1) {
-			return jsonResp.Content;
+		buildFooter : function() {
+			var html = '<footer class="footer">'+
+					  '    		<div class="container">'+
+				  		'	powered by <a href="mailto:sandzhangtoo@gmail.com">sandzhang</a> & <a href="mailto:libinsong1204@gmail.com">melin</a>'+
+				  	'	</div>'+
+					'</footer>';
+			$(document.body).append(html);
+		},
+		
+		ajaxRequestForReset : function() {
+			if(!confirm("Are you sure to reset all stat? It'll clear all stat data !")){
+				return;
+			}
+			
+			$.ajax({
+				type: 'POST',
+				url: "reset-all.json",
+				success: function(data) {
+					if (data.ResultCode == 1) {
+						alert("already reset all stat");
+					}
+				},
+				dataType: "json"
+			});
 		}
 	}
-	return null;
-}
+}();
 
-function sendRequest(requestObject,url,callBack){
-	requestObject.onreadystatechange = callBack;
-	requestObject.open("GET", url, true);
-	requestObject.send(null);
-}
-
-function getRequestObject(){
-	var requestObject;
-	if (window.XMLHttpRequest)
-		requestObject = new XMLHttpRequest();
-	else if (window.ActiveXObject)
-		requestObject = new ActiveXObject("Microsoft.XMLHTTP");
-	return requestObject;
-}
-
-
-function ajaxRequestForReset() {
-	if(!confirm("Are you sure to reset all stat? It'll clear all stat data !")){
-		return;
-	}
-	xmlHttpForReset =  getRequestObject();
-	sendRequest(xmlHttpForReset,'reset-all.json',ajaxResponseForReset)
-}
-
-function ajaxResponseForReset() {
-	if (!checkResoponse(xmlHttpForReset)) {
-		return;
-	}
-	var jsonResp = eval("(" + xmlHttpForReset.responseText + ")");
-	if (jsonResp.ResultCode == 1) {
-		alert("already reset all stat");
-	}
-
-}
+$(document).ready(function() {
+	druid.common.init();
+});
 
 function getUrlVar(name) {
     var vars = {};
@@ -68,31 +77,4 @@ function getUrlVar(name) {
         vars[key] = value;
     });
 		return vars[name];
-}
-
-function $(id) {
-	return document.getElementById(id);
-}
-
-function buildMenu() {
-  var divEle = document.createElement("div"); 
-	divEle.id = "menu"; 
-	divEle.innerHTML = " <a href='index.html'>Index</a> |  " 
-      + "<a href='datasource.html'>DataSource</a> | " 
-      + "<a href='sql.html'>Sql</a> | "
-      + "<a href='weburi.html'>WebURI</a> | "
-      + "<a href='websession.html'>Web Session</a> | "
-      + "<a href='spring.html'>Spring</a> | "
-      + "<a href='api.html'>JSON API</a> "
-      + "<a href='#' style='display:block;margin-right:20px;float:right' onclick='ajaxRequestForReset()'>Reset All</a> ";
-
-	document.body.insertBefore(divEle, document.body.firstChild); 
-	document.body.insertBefore(document.createElement("br"), document.body.firstChild); 
-}
-
-function buildFooter() {
-	var divEle = document.createElement("div"); 
-	divEle.id = "footer"; 
-	divEle.innerHTML = " powered by <a href='mailto:sandzhangtoo@gmail.com'>sandzhang</a>" ;
-	document.body.appendChild(divEle);
-}
+}

src/main/resources/support/http/resources/login.html

@@ -55,10 +55,10 @@
                       	  		用户名或密码不正确
 						  	</div>
                           	<div class="clearfix">
-                              	<input type="text" placeholder="用户名" name="login_username" >
+                              	<input type="text" placeholder="用户名" name="loginUsername" >
                           	</div>
                           	<div class="clearfix">
-                              	<input type="password" placeholder="密码" name="login_password">
+                              	<input type="password" placeholder="密码" name="loginPassword">
                           	</div>
                           	<button id="loginBtn" class="btn btn-primary" type="button">登 录</button>
                           	<button class="btn" type="reset">重 置</button>