* improved the popup page 'EditHistoryData.html':

  o improvd page styles;
  o updated related view: 'indicator.views.indicator_edithistorydata()';
  o updated related css styles;
  o added styles 'valid' and 'invalid';
  o added 'jquery-ui: datepicker' to select date;
  o added 'reason_input' field to get the reason for modification;
  o implemented validation for 'date' and 'reason' field;

* added testing record data for testing 'detail_card';
* added 'cursor: pointer' for 'ui-datepicker-trigger';
* small style change to the 'see_more_button' of SheetDefault.html;
* added umcompressed 'jquery-1.9.1.js' for backup;
* added param 'type' for 'indicator.tools.format_data()';

TODO:
EditHistoryData.html:
  o to show original record data properly;
  o to add validation for data field
  o to implement ajax POST data and related view

4 files changed, 305 insertions, 102 deletions

diff --git a/97suifangqa/apps/indicator/static/css/edit_history_data.css b/97suifangqa/apps/indicator/static/css/edit_history_data.css
index 12bf73b..9775539 100644
--- a/97suifangqa/apps/indicator/static/css/edit_history_data.css
+++ b/97suifangqa/apps/indicator/static/css/edit_history_data.css
@@ -1,6 +1,6 @@
 #edit_history_data_container {
 	width: 588px;
-	height: 164px;
+	height: 180px;
 	background-color: #FFFFFF;
 	border: 1px solid #94C721;
 	padding: 0 20px 0 20px;
@@ -29,34 +29,141 @@
 	color: #4A4A4A;
 	font-size: 14px;
 }
-.edit_history_data_content .date_time {
-	height: 55px;
-	line-height: 55px;
+.edit_history_data_content .refer_range {
+	height: 26px;
+	line-height: 26px;
+	margin-top: 6px;
+	margin-bottom: 10px;
 }
-.edit_history_data_content .date_time .time {
-	margin-left: 27px;
+.edit_history_data_content .refer_range .refer_text {
+	margin-right: 8px;
 }
-.edit_history_data_content .refer_range {
-	height: 38px;
-	line-height: 38px;
-	margin-top: -6px;
+.edit_history_data_content .refer_range .refer_value {
+	margin-right: 8px;
+}
+.edit_history_data_content .edit_data {
+	line-height: 26px;
+}
+.edit_history_data_content .edit_data .date {
+	height: 26px;
+	line-height: 26px;
+}
+.edit_history_data_content .edit_data .date .date_text {
+	margin-right: 8px;
+}
+.edit_history_data_content .edit_data .data {
+	height: 26px;
+	line-height: 26px;
+}
+.edit_history_data_content .edit_data .data .prompt {
+	margin-right: 8px;
+}
+.edit_history_data_content .edit_data .state {
+	height: 26px;
+	line-height: 26px;
+	float: left;
+}
+.edit_history_data_content .edit_data .state .prompt {
+	margin-right: 8px;
+}
+.edit_history_data_content .edit_data .state .text {
+	font-weight: bold;
+}
+.edit_history_data_content .edit_data .state .normal {
+	background-color: #B8DB70;
+}
+.edit_history_data_content .edit_data .state .abnormal {
+	background-color: #FFB3B3;
+}
+.edit_history_data_content .edit_data .state .unknown {
+	background-color: #B3D9FF;
 }
 .edit_history_data_content .edit_data #edit_btn, .edit_history_data_content .editing_data #save_btn {
 	float: right;
-	height: 24px;
+	height: 26px;
 	line-height: 22px;
 	padding: 1px 26px;
 }
 .edit_history_data_content .editing_data {
-	height: 25px;
+	line-height: 26px;
 	display: none;
 }
-.edit_history_data_content .editing_data .input_container {
+.edit_history_data_content .editing_data .date {
+	height: 26px;
+	line-height: 26px;
+	position: relative;
+	margin-bottom: 2px;
+}
+.edit_history_data_content .editing_data .date .date_text {
+	margin-right: 8px;
 	float: left;
 }
-.edit_history_data_content .editing_data .input_container label {
+.edit_history_data_content .editing_data .date .datepicker_container {
+	width: 148px;
+	float: left;
 	position: relative;
-	top: -1px;
+}
+.edit_history_data_content .editing_data .date .datepicker_container .valid {
+	border: 2px solid green;
+}
+.edit_history_data_content .editing_data .date .datepicker_container .invalid {
+	border: 2px solid red;
+}
+.edit_history_data_content .editing_data .date .datepicker {
+	background: #FFFFFF;
+	border: 1px solid #9C9C9C;
+	color: #B9B9B9;
+	width: 131px;
+	height: 17px;
+	line-height: 17px;
+	position: relative;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+.edit_history_data_content .editing_data .date .ui-datepicker-trigger {
+	position: absolute;
+	top: 4px;
+	right: 8px;
+	cursor: pointer;
+}
+.edit_history_data_content .editing_data .data  {
+	height: 26px;
+	line-height: 26px;
+	float: left;
+	top: 1px;
+}
+.edit_history_data_content .editing_data .data .prompt {
+	margin-right: 8px;
+	float: left;
+}
+.edit_history_data_content .editing_data .data input {
+	color: #5C5C5C;
+	background-color: #FFFFFF;
+	border: 1px solid #9C9C9C;
+}
+.edit_history_data_content .editing_data .data .valid {
+	border: 2px solid green;
+}
+.edit_history_data_content .editing_data .data .invalid {
+	border: 2px solid red;
+}
+.edit_history_data_content .editing_data .data .data_input {
+	width: 200px;
+	height: 17px;
+	line-height: 17px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	margin-right: 8px;
+}
+.edit_history_data_content .editing_data .input_container {
+	height: 26px;
+	line-height: 26px;
+	float: left;
+	top: 1px;
+}
+.edit_history_data_content .editing_data .input_container .prompt {
+	margin-right: 8px;
+	float: left;
 }
 .edit_history_data_content .editing_data .input_container input {
 	color: #5C5C5C;
@@ -64,7 +171,7 @@
 	border: 1px solid #9C9C9C;
 }
 .edit_history_data_content .editing_data .input_container .error {
-	border: 1px solid red;
+	border: 2px solid red;
 }
 .edit_history_data_content .editing_data .input_container .edit_input_main {
 	width: 42px;
@@ -81,7 +188,11 @@
 	padding-bottom: 2px;
 }
 .edit_history_data_content .editing_data .add_minus_icon {
+	height: 26px;
+	line-height: 26px;
 	float: left;
+	padding-top: 1px;
+	padding-bottom: 1px;
 	margin-right: 8px;
 }
 .edit_history_data_content .editing_data .add_minus_icon .add_icon {
@@ -100,3 +211,35 @@
 	margin-top: 1px;
 	cursor: pointer;
 }
+.edit_history_data_content .editing_data .data_unit {
+	height: 26px;
+	line-height: 26px;
+	margin-right: 8px;
+}
+.edit_history_data_content .editing_data .reason {
+	height: 26px;
+	line-height: 26px;
+	float: left;
+}
+.edit_history_data_content .editing_data .reason .prompt {
+	margin-right: 8px;
+	float: left;
+}
+.edit_history_data_content .editing_data .reason input {
+	color: #5C5C5C;
+	background-color: #FFFFFF;
+	border: 1px solid #9C9C9C;
+}
+.edit_history_data_content .editing_data .reason .valid {
+	border: 2px solid green;
+}
+.edit_history_data_content .editing_data .reason .invalid {
+	border: 2px solid red;
+}
+.edit_history_data_content .editing_data .reason .reason_input {
+	width: 330px;
+	height: 17px;
+	line-height: 17px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
diff --git a/97suifangqa/apps/indicator/static/css/sheet_default.css b/97suifangqa/apps/indicator/static/css/sheet_default.css
index 2edf8dc..44fa6f5 100644
--- a/97suifangqa/apps/indicator/static/css/sheet_default.css
+++ b/97suifangqa/apps/indicator/static/css/sheet_default.css
@@ -105,6 +105,7 @@
 	position: absolute;
 	top: 2px;
 	right: 8px;
+	cursor: pointer;
 }
 .detail_card_info .chart {
 	height: 400px;
@@ -287,6 +288,7 @@
 	position: absolute;
 	top: 2px;
 	right: 8px;
+	cursor: pointer;
 }
 .index_card .edit_icon_container .edit_icon {
 	background: url("../images/pen_large.png") no-repeat;
diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
index a8fe9f1..8398345 100644
--- a/97suifangqa/apps/indicator/static/javascripts/card_chart.js
+++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
@@ -362,12 +362,14 @@ function get_card_data_table(type, num, begin, end, append){
                 $("#detail_card_table tr").not(".first_line").remove();
                 // reset to enable button
                 $(".see_more_btn").removeAttr('disabled');
+                $(".see_more_btn").attr('value', '浏览更多记录');
             }
             //console.log('data_html: ', data_html);
             $("#detail_card_table").append(data_html);
             // disable button if has no more data
             if (! dataJson.has_earlier) {
                 $(".see_more_btn").attr('disabled', 'disabled');
+                $(".see_more_btn").attr('value', '无更多记录');
             }
         }
     });
diff --git a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
index 204f404..83a87e2 100644
--- a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
+++ b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
@@ -1,90 +1,146 @@
 $(document).ready(function(){
-	//点大叉，关闭弹层页面
-	$(".edit_history_data_close").bind("click", function(){
-		parent.TB_remove();
-		return false;
-	});
-	$("#edit_btn").bind("click", function(){
-		var this_edit_data_div = $(this).parent();
-		var data_fir = $(this).siblings(".data_fir").text();
-		var data_sec = $(this).siblings(".data_sec").text();
-		var this_editing_data_div = this_edit_data_div.siblings(".editing_data");
-		var input_container = this_editing_data_div.children(".input_container");
-		input_container.children(".edit_input_main").val(parseInt(data_fir));
-		input_container.children(".edit_input_sub").val(parseInt(data_sec));
-		this_editing_data_div.show();
-		this_edit_data_div.hide();
-		return false;
-	});
-	//点击指数+1 icon
-	$(".add_icon").bind("click", function(){
-		var this_edit_input_sub = $(this).closest(".editing_data").children(".input_container").children(".edit_input_sub");
-		var origin_value = parseInt(this_edit_input_sub.val());
-		this_edit_input_sub.val(origin_value+1);
-		return false;
-	});
-	//点击 指数-1 icon
-	$(".minus_icon").bind("click", function(){
-		var this_edit_input_sub = $(this).closest(".editing_data").children(".input_container").children(".edit_input_sub");
-		var origin_value = parseInt(this_edit_input_sub.val());
-		var after_value = origin_value-1;
-		if(after_value >= 0){
-			this_edit_input_sub.val(origin_value-1);
-		}
-		return false;
-	});
-	//编辑数据的底数验证：只允许两位小数，非空
-	$(".edit_input_main").bind("keyup", function(){
-		var val = $(this).val();
-		val = val.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
-		val = val.replace(/^\./g,"");//验证第一个字符是数字而不是..
-		val = val.replace(/\.{2,}/g,".");//只保留第一个. 清除多余的
-		val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
-		val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
-		$(this).val(val);
-		return false;
-	});
-	//编辑数据的指数验证：只允许整数
-	$(".edit_input_sub").bind("keyup", function(){
-		$(this).val($(this).val().replace(/[^\d]/g, ''));
-		return false;
-	});
-	$("#save_btn").bind("click", function(){
-		var data_input_fir = $(".edit_input_main");
-		var data_input_sec = $(".edit_input_sub");
-		var data_input_fir_val = data_input_fir.val();
-		var data_input_sec_val = data_input_sec.val();
-		
-		if(data_input_fir_val == '' || data_input_fir_val == 0){
-			data_input_fir.addClass("error");
-		}else{
-			data_input_fir.removeClass("error");
-		}
-		if(data_input_sec_val == ''){
-			data_input_sec.addClass("error");
-		}else{
-			data_input_sec.removeClass("error");
-		}
-		if($(".error").length > 0){
-			return false;
-		}
-		
-		var date = new Date();
-		var time = date.getTime();
-		$.ajax({
-			type: 'get',
-			url: indicator_url + 'ajax/edit_history_data',
-			data: 'time='+time,
-			success: function(data){
-				if(data == 'success'){
-					parent.TB_remove();
-					parent.redraw_chart(parent.detail_chart, "2013-08-04", "2013-08-10"); //这边需要穿过来起始，结束时间，以便刷新图表和表格
-				}
-			}
-		});
-		
-		return false;
-	});
+    //点大叉，关闭弹层页面
+    $(".edit_history_data_close").bind("click", function(){
+        parent.TB_remove();
+        return false;
+    });
+    // jquery-ui: datepicker
+    $("#editing_date_picker").datepicker({
+        showOn: "both",
+        buttonImage: static_url + "images/calendar.png",
+        buttonImageOnly: true
+    });
+    // edit button
+    $("#edit_btn").bind("click", function(){
+        var this_edit_data_div = $(this).closest(".edit_data");
+        //var data_fir = $(this).siblings(".data_fir").text();
+        //var data_sec = $(this).siblings(".data_sec").text();
+        var data_fir = 0;
+        var data_sec = 0;
+        var this_editing_data_div = this_edit_data_div.siblings(".editing_data");
+        var input_container = this_editing_data_div.children(".input_container");
+        input_container.children(".edit_input_main").val(parseInt(data_fir));
+        input_container.children(".edit_input_sub").val(parseInt(data_sec));
+        this_editing_data_div.show();
+        this_edit_data_div.hide();
+        return false;
+    });
+    // save botton
+    $("#save_btn").bind("click", function(){
+        var data_input_fir = $(".edit_input_main");
+        var data_input_sec = $(".edit_input_sub");
+        var data_input_fir_val = data_input_fir.val();
+        var data_input_sec_val = data_input_sec.val();
+
+        if(data_input_fir_val == '' || data_input_fir_val == 0){
+            data_input_fir.addClass("error");
+        }else{
+            data_input_fir.removeClass("error");
+        }
+        if(data_input_sec_val == ''){
+            data_input_sec.addClass("error");
+        }else{
+            data_input_sec.removeClass("error");
+        }
+        if($(".error").length > 0){
+            return false;
+        }
+
+        var time = moment().valueOf();
+        $.ajax({
+            type: 'get',
+            url: indicator_url + 'ajax/edit_history_data',
+            data: 'time='+time,
+            success: function(data){
+                if(data == 'success'){
+                    parent.TB_remove();
+                    //parent.redraw_chart(parent.detail_chart, "2013-08-04", "2013-08-10"); //这边需要穿过来起始，结束时间，以便刷新图表和表格
+                }
+            }
+        });
+        return false;
+    });
+
+    // set datepicker 'date_input' value
+    var date_init = $.datepicker.parseDate('yy-mm-dd',
+            $(".date_input").attr('value'));
+    $(".date_input").datepicker("setDate", date_init);
+
+    // data validate {{{
+    // validate date
+    $(".date_input").focus(function() {
+        $(this).removeClass("valid invalid");
+    });
+    $(".date_input").change(function() {
+        var date_str = $(this).val();
+        var date_mm = moment(date_str, 'YYYY-MM-DD');
+        var today_mm = moment();
+        //console.log('date_str: ', date_str);
+        // date cannot beyond today
+        if (date_mm.isValid() && !date_mm.isAfter(today_mm)) {
+            $(this).removeClass("invalid");
+            $(this).addClass("valid");
+        }
+        else {
+            // date invalid
+            $(this).removeClass("valid");
+            $(this).addClass("invalid");
+        }
+    });
+    // validate data
+    $(".data_input").focus(function() {
+        $(this).removeClass("valid invalid");
+    });
+    $(".data_input").change(function() {
+        //$(this).removeClass("valid invalid");
+    });
+    // validate reason
+    $(".reason_input").focus(function() {
+        $(this).removeClass("valid invalid");
+    });
+    $(".reason_input").blur(function() {
+        var reason_str = $(this).val();
+        if (is_str_blank(reason_str)) {
+            // reason not given or blank
+            $(this).removeClass("valid");
+            $(this).addClass("invalid");
+        }
+        else {
+            // reason given and not blank
+            $(this).removeClass("invalid");
+            $(this).addClass("valid");
+        }
+    });
+    // }}}
+
+    //编辑数据的底数验证：只允许两位小数，非空
+    $(".edit_input_main").bind("keyup", function(){
+        var val = $(this).val();
+        val = val.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
+        val = val.replace(/^\./g,""); //验证第一个字符是数字而不是..
+        val = val.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
+        val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
+        val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
+        $(this).val(val);
+        return false;
+    });
+    //编辑数据的指数验证：只允许整数
+    $(".edit_input_sub").bind("keyup", function(){
+        var val = $(this).val().replace(/[^\d]/g, '');
+        $(this).val(val);
+        return false;
+    });
 });
 
+// help functions
+// check if a string is empty, null or undefined
+function is_str_empty(str) {
+    return (!str || 0 === str.length);
+}
+
+// check if a string is blank, null or undefined
+function is_str_blank(str) {
+    return (!str || /^\s*$/.test(str));
+}
+
 // vim: set ts=4 sw=4 tw=0 fenc=utf-8 ft=javascript: //