*** merged changes of front pages ***

* merged changes from '97suifang-front' by mjymjydark;
    and modified to work with django
* finished 'editing_data' div of 'SheetDefault' for add new record
* added 'indicator.views.ajax_add_record()'

*** search ***
* improved 'search' function of 'NewDeleteIndex' page;
    employ AJAX to load search results;
* added 'indicator.views.search_indicators()'

*** recommend indicator ***
* improved the functions of 'recommend_indicator'
* added 'sciblog.models.UserCollection' to record the collection
    information for each user
* improved 'sciblog.views.add_user_to_m2m()' to work with
    'UserCollection'
* added field 'lastRecommendTime' in 'indicator.models.UserIndicator'
* updated 'indicator.views.indicator_status' against 'recommend_indicator'

*** qtip2 for recommended indicator ***
* added 'qtip2' tooltip for recommended indicator card
* added '97suifang' qtip css (qtip-sf)

* added tooltip for 'add record' when return error (SheetDefault page);
* improved the style of 'collection_btn' and 'go_library_btn' of
    IndexDesc page;

6 files changed, 893 insertions, 310 deletions

diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
index 8398345..75cbf78 100644
--- a/97suifangqa/apps/indicator/static/javascripts/card_chart.js
+++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js
@@ -91,14 +91,14 @@ $(document).ready(function(){
     $(".detail_history").bind("click", function(){
         // update 'detail_card_id'
         detail_card_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
-        // check if this card has data
-        // if has no data, then exists div class="edit_icon_container"
-        if ($("#index_card_"+detail_card_id + " .edit_icon_container").length) {
+        var card = $("#index_card_"+detail_card_id);
+        // check if this card has data (class "record_empty")
+        if (card.hasClass("record_empty")) {
             $(".detail_card_info").hide();
             return false;
         }
         // get the index title and set for the 'detail card'
-        var index_title = $("#index_card_"+detail_card_id + " .card_title").html();
+        var index_title = card.find(".card_title").html();
         $(".detail_card_info .card_title .title").html(index_title);
         // set date for the 'shift_date' buttons
         var date_fmt = 'YYYY-MM-DD';
@@ -116,6 +116,9 @@ $(document).ready(function(){
         // options for chart global var: 'options_chart_<id>'
         // update global var 'detail_chart_options_str'
         detail_chart_options_str = 'options_chart_' + detail_card_id;
+        if (typeof window[detail_chart_options_str] === 'undefined') {
+            return false;
+        }
         // clickable data point
         window[detail_chart_options_str].plotOptions = {
             series: {
diff --git a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
index e0dff4a..b85bced 100644
--- a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
+++ b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js
@@ -74,7 +74,7 @@ $(document).ready(function(){
     });
     // }}}
 
-    // initalize
+    // initialize
     // set datepicker 'date_input' value
     var date_init = $.datepicker.parseDate('yy-mm-dd',
             $(".date_input").attr('value'));
@@ -105,11 +105,10 @@ $(document).ready(function(){
             at: 'top right'
         },
         show: {
-            event: false
+            event: 'mouseenter'
         },
         hide: {
-            //event: 'click'
-            event: false
+            event: 'mouseleave unfocus'
         }
     });
     $(".date_input").focus(function() {
@@ -128,6 +127,8 @@ $(document).ready(function(){
         if (date_mm.isValid() && !date_mm.isAfter(today_mm)) {
             $(this).removeClass("invalid");
             $(this).addClass("valid");
+            var qtip_content = dateinput_help;
+            $(this).qtip('api').set('content.text', qtip_content);
             $(this).qtip('api').hide();
             // update data
             record_data.date = date_str;
@@ -147,11 +148,11 @@ $(document).ready(function(){
     // }}}
 
     // validate data
-    if (data_type == DATA_TYPES.INTEGER_TYPE) {
+    if (data_type == DATA_TYPES_JS.INTEGER_TYPE) {
         // INTEGER_TYPE
         // TODO
     }
-    else if (data_type == DATA_TYPES.FLOAT_TYPE) {          // {{{
+    else if (data_type == DATA_TYPES_JS.FLOAT_TYPE) {          // {{{
         // FLOAT_TYPE
         var datainput_help = '<p>定值型</p><p>数据格式示例：123.7; 1.23e4; 3.5e-2</p>';
         // tooltip
@@ -166,11 +167,10 @@ $(document).ready(function(){
                 at: 'top right'
             },
             show: {
-                event: false
+                event: 'mouseenter'
             },
             hide: {
-                //event: 'click'
-                event: false
+                event: 'mouseleave unfocus'
             }
         });
         $(".data_input").focus(function() {
@@ -200,6 +200,9 @@ $(document).ready(function(){
                     // confine valid
                     $(this).removeClass("invalid");
                     $(this).addClass("valid");
+                    var qtip_content = datainput_help;
+                    $(this).qtip('api').set('content.text',
+                            qtip_content);
                     $(this).qtip('api').hide();
                     // update data
                     record_data.value = value;
@@ -219,7 +222,7 @@ $(document).ready(function(){
             $(this).trigger('validate');
         });
     } // }}}
-    else if (data_type == DATA_TYPES.RANGE_TYPE) {          // {{{
+    else if (data_type == DATA_TYPES_JS.RANGE_TYPE) {          // {{{
         // RANGE_TYPE
         var datainput_help = '<p>范围型</p><p>数据格式示例：&bullet; <123.7; &bullet; >1.3e3; &bullet; 1.5e3 ~ 3.7e3</p>';
         // tooltip
@@ -234,11 +237,10 @@ $(document).ready(function(){
                 at: 'top right'
             },
             show: {
-                event: false
+                event: 'mouseenter'
             },
             hide: {
-                //event: 'click'
-                event: false
+                event: 'mouseleave unfocus'
             }
         });
         $(".data_input").focus(function() {
@@ -302,6 +304,9 @@ $(document).ready(function(){
                 if (confine_valid === true) {
                     $(this).removeClass("invalid");
                     $(this).addClass("valid");
+                    var qtip_content = datainput_help;
+                    $(this).qtip('api').set('content.text',
+                            qtip_content);
                     $(this).qtip('api').hide();
                     // update data
                     record_data.val_min = val_min;
@@ -322,10 +327,10 @@ $(document).ready(function(){
             $(this).trigger('validate');
         });
     } // RANGE_TYPE }}}
-    else if (data_type == DATA_TYPES.FLOAT_RANGE_TYPE) {
+    else if (data_type == DATA_TYPES_JS.FLOAT_RANGE_TYPE) {
         // TODO
     }
-    else if (data_type == DATA_TYPES.PM_TYPE) {             // {{{
+    else if (data_type == DATA_TYPES_JS.PM_TYPE) {             // {{{
         // TODO
         var radioinput_help = '<p>请直接点击选择</p>';
         // tooltip
@@ -356,6 +361,11 @@ $(document).ready(function(){
             }
             else {
                 // valid
+                var qtip_content = radioinput_help;
+                $(this).qtip('api').set('content.text',
+                    qtip_content);
+                $(this).qtip('api').hide();
+                // update data
                 record_data.value = $(".radio_input input:radio:checked").val();
             }
         });
@@ -365,8 +375,8 @@ $(document).ready(function(){
         return false;
     }
 
-    // validate reason
-    var reasoninput_help = '<p><strong>必填</strong></p>';
+    // validate reason {{{
+    var reasoninput_help = '<p>解释修改记录的原因</p><p><strong>必填</strong></p>';
     $(".reason_input").qtip({
         id: 'reasoninput',
         prerender: false,
@@ -378,11 +388,10 @@ $(document).ready(function(){
             at: 'top right'
         },
         show: {
-            event: false
+            event: 'mouseenter'
         },
         hide: {
-            //event: 'click'
-            event: false
+            event: 'mouseleave unfocus'
         }
     });
     $(".reason_input").focus(function() {
@@ -406,6 +415,8 @@ $(document).ready(function(){
             // valid
             $(this).removeClass("invalid");
             $(this).addClass("valid");
+            var qtip_content = reasoninput_help;
+            $(this).qtip('api').set('content.text', qtip_content);
             $(this).qtip('api').hide();
             // update data
             record_data.reason = reason_str;
@@ -415,6 +426,7 @@ $(document).ready(function(){
         $(this).trigger('validate');
     });
     // }}}
+    // }}}
 });
 
 // help functions
diff --git a/97suifangqa/apps/indicator/static/javascripts/index_desc.js b/97suifangqa/apps/indicator/static/javascripts/index_desc.js
deleted file mode 100644
index 49771ea..0000000
--- a/97suifangqa/apps/indicator/static/javascripts/index_desc.js
+++ /dev/null
@@ -1,16 +0,0 @@
-$(document).ready(function(){
-	//点大叉、继续关注按钮，关闭弹层页面
-	$(".index_desc_close").bind("click", function(){
-		parent.TB_remove();
-		return false;
-	});
-	
-	//前往医学知识库
-	$(".go_library_btn").bind("click", function(){
-		parent.delete_card();
-		parent.TB_remove();
-		
-		parent.window.location.href = "http://demo.97suifang.com/blog/1/source";
-		return false;
-	});
-});
\ No newline at end of file
diff --git a/97suifangqa/apps/indicator/static/javascripts/new_delete_index.js b/97suifangqa/apps/indicator/static/javascripts/new_delete_index.js
index 3c1faf7..e216f09 100644
--- a/97suifangqa/apps/indicator/static/javascripts/new_delete_index.js
+++ b/97suifangqa/apps/indicator/static/javascripts/new_delete_index.js
@@ -1,95 +1,245 @@
 // track the indexes already added(/followed)
 var added_indexes_id = new Array();
 
+var select_letter = '';
+var select_index_obj = null;
+
 $(document).ready(function(){
-	$("#search_btn").bind("click", function(){
-		var kw = $("#search_kw").val();
-		window.location.href = '?kw='+kw;
-		return false;
-	});
-	$(".left>.index_line, .index_letter_container>.index_lines>.index_line").each(function(){
-		classHover($(this), "add");
-	});
-	$(".right>.index_line").each(function(){
-		classHover($(this), "minus");
-	});
-	// save the "index_id's of added (type: string)
-	$(".right>.index_line").each(function(){
-		var index_id = $(this).attr("index_id");
-		added_indexes_id.push(index_id);
-	});
-	$(".index_lines").on("click", ".add>.icon", function(){
-		var add_icon = $(this);
-		var index_id = add_icon.closest(".index_line").attr("index_id");
-		var date = new Date();
-		var time = date.getTime();
-		$.ajax({
-			type: 'get',
-			url: indicator_url + 'ajax/act_index',
-			data: 'index_id='+index_id+'&act=add'+'&time='+time,
-			success: function(data){
-				if(data == 'success'){
-					// check if the index exists?
-					if (added_indexes_id.indexOf(index_id) == -1) {
-						var obj = add_icon.parent();
-						var objClone = obj.clone();
-						objClone.removeClass("add")
-						objClone.children(".index_category").remove();
-						$(".right").append(objClone);
-						classHover(objClone, "minus");
-						added_indexes_id.push(index_id);
-					}
-				}
-			}
-		});
-		
-		return false;
-	});
-	$(".index_lines").on("click", ".minus>.icon", function(){
-		var minus_icon = $(this);
-		var index_id = minus_icon.closest(".index_line").attr("index_id");
-		var date = new Date();
-		var time = date.getTime();
-		$.ajax({
-			type: 'get',
-			url: indicator_url + 'ajax/act_index',
-			data: 'index_id='+index_id+'&act=minus'+'&time='+time,
-			success: function(data){
-				var obj = minus_icon.parent();
-				obj.remove();
-				rm_index = added_indexes_id.indexOf(index_id);
-				added_indexes_id.splice(rm_index, 1);
-			}
-		});
-		
-		return false;
-	});
-	$(".all_condition>.index_all_letter>div").bind("click", function(){
-		$(".index_letter_container>.index_lines").hide();
-		var letterClass = $(this).text();
-		$("."+letterClass).show();
-		$("."+letterClass).nextAll().show();
-		return false;
-	});
-	$("#submitIndexBtn").bind("click", function(){
-		var commit_index = '';
-		$(".right>.index_line").each(function(){
-			commit_index += $(this).attr("index_id")+',';
-		});
-		$("#commit_index").val(commit_index);
-		$("#index_form").submit();
-		return false;
-	});
+    $(".index_type").each(function(){
+        if($(this).hasClass("selected")){
+            select_index_obj = $(this);
+            return false;
+        }
+    });
+    $(".index_type").hover(
+        function(){
+            $(this).addClass("selected");
+        },
+        function(){
+            if(!$(this).is(select_index_obj)){
+                $(this).removeClass("selected");
+            }
+        }
+    );
+
+    // login control kit {{{
+    $(".drop-down-area").bind("click", function(){
+        var drop_down_menu = $(".drop-down-menu");
+        if(drop_down_menu.hasClass("open")){
+            drop_down_menu.removeClass("open");
+        }else{
+            drop_down_menu.addClass("open");
+        }
+        return false;
+    });
+    $("body").bind("click", function(){
+        $(".drop-down-menu").removeClass("open");
+    });
+    // login }}}
+
+    // search -> ajax
+    // bind enter key
+    $(".search #search_kw").on('keypress', null, function(e) {
+        var keycode = (e.keyCode ? e.keyCode : e.which);
+        //console.log('keycode: "'+keycode+'"');
+        if (keycode == 13) {
+            //alert('"Enter" key pressed');
+            var kw = $(this).val();
+            //console.log('kw: "'+kw+'"');
+            search_indicators(kw);
+            return false;
+        }
+    });
+    $(".search #search_btn").bind("click", function(){
+        var kw = $("#search_kw").val();
+        //console.log('kw: "'+kw+'"');
+        //window.location.href = '?kw='+kw;
+        search_indicators(kw);
+        return false;
+    });
+
+    // XXX: cannot deal with the dynamically added div's by ajax
+    /*
+    $(".left>.index_line, .index_letter_container>.index_lines>.index_line").each(function(){
+        classHover($(this), "add");
+    });
+    $(".right>.index_line").each(function(){
+        classHover($(this), "minus");
+    });
+    */
+    // updated to work with ajax
+    $(".show_indexes").on('mouseenter mouseleave', '.index_lines>.index_line', function(e) {
+        //console.log("event_type: "+e.type);
+        var line = $(this);
+        var lines_div = line.parent();
+        if (lines_div.hasClass("to_add")) {
+            // left container (unfollowed)
+            var cls_name = "add";
+        }
+        else {
+            // right container (followed)
+            var cls_name = "minus";
+        }
+        // event type
+        if (e.type === 'mouseenter') {
+            $(this).addClass(cls_name);
+        }
+        else {
+            $(this).removeClass(cls_name);
+        }
+    });
+
+    // save the "index_id's of added (type: string)
+    $(".right>.index_line").each(function(){
+        var index_id = $(this).attr("index_id");
+        added_indexes_id.push(index_id);
+    });
+    $(".show_indexes").on("click", ".add>.icon", function(){
+        var add_icon = $(this);
+        var index_id = add_icon.closest(".index_line").attr("index_id");
+        var date = new Date();
+        var time = date.getTime();
+        $.ajax({
+            type: 'get',
+            url: indicator_url + 'ajax/act_index/',
+            data: 'index_id='+index_id + '&act=add' + '&time='+time,
+            success: function(data){
+                if(data == 'success'){
+                    // check if the index exists?
+                    if (added_indexes_id.indexOf(index_id) == -1) {
+                        var obj = add_icon.parent();
+                        var objClone = obj.clone();
+                        objClone.removeClass("add")
+                        objClone.children(".index_category").remove();
+                        $(".right").append(objClone);
+                        classHover(objClone, "minus");
+                        added_indexes_id.push(index_id);
+                    }
+                }
+            }
+        });
+
+        return false;
+    });
+    $(".show_indexes").on("click", ".minus>.icon", function(){
+        var minus_icon = $(this);
+        var index_id = minus_icon.closest(".index_line").attr("index_id");
+        var date = new Date();
+        var time = date.getTime();
+        $.ajax({
+            type: 'get',
+            url: indicator_url + 'ajax/act_index/',
+            data: 'index_id='+index_id + '&act=minus' + '&time='+time,
+            success: function(data){
+                var obj = minus_icon.parent();
+                obj.remove();
+                rm_index = added_indexes_id.indexOf(index_id);
+                added_indexes_id.splice(rm_index, 1);
+            }
+        });
+
+        return false;
+    });
+    $(".all_condition>.index_all_letter>div").bind("click", function(){
+        $(".letter_selected").removeClass("letter_selected");
+        $(this).addClass("letter_selected");
+        var container = $(".index_letter_container");
+        var letterClass = $(this).text();
+        var scrollTo = $("."+letterClass);
+        container.scrollTop(scrollTo.offset().top - container.offset().top + container.scrollTop());
+        select_letter = letterClass;
+        return false;
+    });
+    $(".all_condition>.index_all_letter>div").hover(
+        function(){
+            $(this).addClass("letter_selected");
+        },
+        function(){
+            if(select_letter != $(this).text()){
+                $(this).removeClass("letter_selected");
+            }
+        }
+    );
+    $("#submitIndexBtn").bind("click", function(){
+        var commit_index = '';
+        $(".right>.index_line").each(function(){
+            commit_index += $(this).attr("index_id")+',';
+        });
+        $("#commit_index").val(commit_index);
+        $("#index_form").submit();
+        return false;
+    });
 });
+
+
+// helper functions
 function classHover(obj, c){
-	obj.hover(
-		function(){
-			$(this).addClass(c);
-		},
-		function(){
-			$(this).removeClass(c);
-		}
-	);
+    obj.hover(
+        function(){
+            $(this).addClass(c);
+        },
+        function(){
+            $(this).removeClass(c);
+        }
+    );
+}
+
+// search
+function search_indicators(kw) {
+    if (is_str_blank(kw)) {
+        // 'kw' blank
+        return false;
+    }
+    var time = moment().valueOf();
+    $.ajax({
+        type: 'get',
+        url: indicator_url + 'ajax/search_indicators/',
+        data: 'kw='+kw + '&time='+time,
+        dataType: 'json',
+        success: function(dataJson) {
+            // unselect index_type
+            $(".index_navigation .selected").removeClass("selected");
+            select_index_obj = null;
+            // hide & show
+            $(".all_condition").hide();
+            $(".category_condition").hide();
+            $(".search_condition").show();
+            // clear existing search div's or create
+            if ($(".search_condition > .index_lines").length) {
+                $(".search_condition > .index_lines").html('');
+            }
+            else {
+                // add 'index_lines' div
+                $(".search_condition").append('<div class="index_lines left to_add"></div>');
+            }
+            if (dataJson.failed === true) {
+                if (dataJson.error_code === 10) {
+                    // search keyword blank
+                    $(".search_condition > .index_lines").append('<div class="index_search_error"> <div class="index_error">您未输入搜索关键词</div> <div class="icon"></div> <div style="clear:both"></div> </div>');
+                }
+                if (dataJson.error_code === 20) {
+                    // search result empty
+                    $(".search_condition > .index_lines").append('<div class="index_search_error"> <div class="index_error">未搜索到符合的结果</div> <div class="icon"></div> <div style="clear:both"></div> </div>');
+                }
+            }
+            else {
+                // append search results to page
+                var results_html = '';
+                for (var i=0; i<dataJson.indicators.length; i++) {
+                    var ind = dataJson.indicators[i];
+                    results_html += '<div class="index_line" index_id="'+ind.id + '"> <div class="index_name">'+ind.name + '</div> <div class="index_category"><a href="?tab='+ind.categories_id[0] + '">'+ind.categories_name[0] + '</a></div> <div class="icon"></div> <div style="clear:both"></div> </div> \n';
+                }
+                $(".search_condition > .index_lines").append(results_html);
+            }
+        }
+    });
+    return false;
 }
 
+// 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: //
diff --git a/97suifangqa/apps/indicator/static/javascripts/sheet_default.js b/97suifangqa/apps/indicator/static/javascripts/sheet_default.js
new file mode 100644
index 0000000..e5d9e9e
--- /dev/null
+++ b/97suifangqa/apps/indicator/static/javascripts/sheet_default.js
@@ -0,0 +1,618 @@
+var now_js = new Date();
+// require 'moment.js'
+var curr_moment = moment();
+var today_str = curr_moment.format('YYYY-MM-DD');
+// global var to store the data of record
+var record_data = {
+    id: null,
+    date: null,
+    value: null,
+    val_min: null,
+    val_max: null,
+};
+
+$(document).ready(function(){
+    // login control kit
+    $(".drop-down-area").bind("click", function(){
+        var drop_down_menu = $(".drop-down-menu");
+        if(drop_down_menu.hasClass("open")){
+            drop_down_menu.removeClass("open");
+        }else{
+            drop_down_menu.addClass("open");
+        }
+        return false;
+    });
+    $("body").bind("click", function(){
+        $(".drop-down-menu").removeClass("open");
+    });
+
+    // recommended indicators
+    $("#index_status_container .recommended").each(function() {
+        var this_card = $(this);
+        var id = this_card.attr("id").replace('index_card_', '');
+        var qtip_title = '<strong>为您推荐的指标</strong>';
+        var qtip_help = '若不需要，可以点击卡片右上角的 &times; 关闭';
+        this_card.qtip({
+            id: 'card_help'+id,
+            prerender: false,
+            content: {
+                text: qtip_help,
+                title: qtip_title,
+                button: true
+            },
+            position: {
+                my: 'bottom left',
+                at: 'top center',
+                target: this_card.find('.card_title')
+            },
+            show: {
+                event: false
+            },
+            hide: {
+                event: false
+            },
+            style: {
+                classes: 'qtip-sf'
+            }
+        });
+        this_card.qtip('api').show();
+    });
+
+    //不允许input框复制，减少验证粘帖的交互
+    // $("input[type='text']").bind("paste", function(){
+    //     return false;
+    // });
+
+    //副标题点大叉
+    $("#index_title_closed_icon").bind("click", function(){
+        var closeBtn = $(this);
+        var date = new Date();
+        var time = date.getTime();
+        $.ajax({  //数据库还是cookie，都可以，建议使用cookie，html中是否显示sub_title也由后端读取的cookie决定
+            type: 'get',
+            url: indicator_url + 'ajax/close_sub_title',
+            data: 'time='+time,
+            success: function(data){
+                if(data == 'success'){
+                    closeBtn.parent().remove();
+                }
+            }
+        });
+
+        return false;
+    });
+
+    //卡片大叉删除交互
+    $(".card_delete_icon").hover(
+        function(){
+            $(this).removeClass("card_delete");
+            $(this).addClass("card_delete_hover");
+        },
+        function(){
+            $(this).removeClass("card_delete_hover");
+            $(this).addClass("card_delete");
+        }
+    );
+    $(".card_delete_icon").bind("click", function(){
+        card_2_delete_id = $(this).parent().attr("id").replace('index_card_', '');
+    });
+
+    //点击编辑icon(small) || click 'edit_icon'(big)
+    $(".small_edit_icon, .edit_icon").bind("click", function(){
+        var this_card = $(this).closest(".index_card");
+        var this_edit_data_div = this_card.find(".edit_data");
+        var this_editing_data_div = this_edit_data_div.siblings(".editing_data");
+        var this_edit_icon_container_div = this_edit_data_div.siblings(".edit_icon_container");
+        this_edit_data_div.hide();
+        this_edit_icon_container_div.hide();
+        this_editing_data_div.show();
+        return false;
+    });
+
+    //点击取消icon
+    $(".cancel_edit_icon").bind("click", function(){
+        var id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
+        var this_editing_data_div = $(this).parent();
+        var this_edit_data_div = this_editing_data_div.siblings(".edit_data");
+        var this_edit_icon_container_div = this_editing_data_div.siblings(".edit_icon_container");
+        this_editing_data_div.hide();
+        this_edit_data_div.show();
+        if (recordempty['id'+id]) {
+            // record empty
+            this_edit_icon_container_div.show();
+        }
+        return false;
+    });
+
+    // initialize
+    // empty data input
+    $(".data_input").val('');
+    // unselect radio buttons
+    if ($(".editing_data .radio_input").length) {
+        $(".radio_input input:radio").prop("checked", false);
+    }
+
+    // validate data and qtip2 {{{
+    $(".index_card").each(function() {
+        var this_card = $(this);
+        var id = this_card.attr("id").replace('index_card_', '');
+        var data_type = datatypes['id'+id];
+        //console.log("id: "+id+"; data_type: "+data_type);
+        var confine = confines['id'+id];
+
+        // data {{{
+        if (data_type == DATA_TYPES_JS.INTEGER_TYPE) {
+            // INTEGER_TYPE
+            // TODO
+        }
+        else if (data_type == DATA_TYPES_JS.FLOAT_TYPE) {       // {{{
+            // FLOAT_TYPE
+            var datainput_help = '<p>定值型</p><p>数据格式示例：123.7; 1.23e4; 3.5e-2</p>';
+            // tooltip
+            $(this).find(".data_input").qtip({
+                id: 'datainput_'+id,
+                prerender: false,
+                content: {
+                    text: datainput_help
+                },
+                position: {
+                    my: 'bottom left',
+                    at: 'top right'
+                },
+                show: {
+                    event: 'mouseenter'
+                },
+                hide: {
+                    event: 'mouseleave unfocus'
+                }
+            });
+            this_card.find(".data_input").focus(function() {
+                $(this).removeClass("valid invalid");
+            });
+            // validate
+            this_card.find(".data_input").on('validate', null, function() {
+                var value_str = $(this).val();
+                var value = is_float(value_str);
+                if (value === false) {
+                    // format invalid
+                    $(this).removeClass("valid");
+                    $(this).addClass("invalid");
+                    var qtip_content = '<p>数据格式不符合要求，请检查后重新输入</p>';
+                    $(this).qtip('api').set('content.text', qtip_content);
+                    $(this).qtip('api').show();
+                }
+                else {
+                    // format valid
+                    // check confine
+                    if (value >= confine.math_min &&
+                            value <= confine.math_max) {
+                        // confine valid
+                        $(this).removeClass("invalid");
+                        $(this).addClass("valid");
+                        var qtip_content = datainput_help;
+                        $(this).qtip('api').set('content.text', qtip_content);
+                        $(this).qtip('api').hide();
+                        // update data
+                        record_data.value = value;
+                    }
+                    else {
+                        // confine tooltip
+                        $(this).removeClass("valid");
+                        $(this).addClass("invalid");
+                        var qtip_content = '<p>数值超出范围</p><p>允许数据范围：'+confine.math_range_html+' </p>';
+                        $(this).qtip('api').set('content.text',
+                                qtip_content);
+                        $(this).qtip('api').show();
+                    }
+                }
+            });
+            this_card.find(".data_input").on('blur', null, function() {
+                $(this).trigger('validate');
+            });
+        } // }}}
+        else if (data_type == DATA_TYPES_JS.RANGE_TYPE) {       // {{{
+            // RANGE_TYPE
+            var datainput_help = '<p>范围型</p><p>数据格式示例：&bullet; <123.7; &bullet; >1.3e3; &bullet; 1.5e3 ~ 3.7e3</p>';
+            // tooltip
+            this_card.find(".data_input").qtip({
+                id: 'datainput_'+id,
+                prerender: false,
+                content: {
+                    text: datainput_help
+                },
+                position: {
+                    my: 'bottom left',
+                    at: 'top right'
+                },
+                show: {
+                    event: 'mouseenter'
+                },
+                hide: {
+                    event: 'mouseleave unfocus'
+                }
+            });
+            this_card.find(".data_input").focus(function() {
+                $(this).removeClass("valid invalid");
+            });
+            // validate
+            this_card.find(".data_input").on('validate', null, function() {
+                var value_str = $(this).val();
+                var value = is_range(value_str);
+                if (is_range(value_str) === false) {
+                    // format invalid
+                    $(this).removeClass("valid");
+                    $(this).addClass("invalid");
+                    var qtip_content = '<p>数据格式不符合要求，请检查后重新输入</p>';
+                    $(this).qtip('api').set('content.text', qtip_content);
+                    $(this).qtip('api').show();
+                }
+                else {
+                    // range format valid
+                    // check if within 'confine'
+                    var confine_valid = false;
+                    var val_min = null;
+                    var val_max = null;
+
+                    var operator = value.operator;
+                    if (operator === '<') {
+                        val_max = value.value;
+                        if (val_max > confine.math_min &&
+                                val_max <= confine.math_max) {
+                            // valid
+                            confine_valid = true;
+                            val_min = confine.math_min;
+                        }
+                    }
+                    else if (operator === '>') {
+                        val_min = value.value;
+                        if (val_min >= confine.math_min &&
+                                val_min < confine.math_max) {
+                            // valid
+                            confine_valid = true;
+                            val_max = confine.math_max;
+                        }
+                    }
+                    else if (operator === '~') {
+                        val_min = value.val_min;
+                        val_max = value.val_max;
+                        if (val_min >= confine.math_min &&
+                                val_max < confine.math_max) {
+                            // valid
+                            confine_valid = true;
+                        }
+                    }
+                    else {
+                        confine_valid = false;
+                    }
+
+                    if (confine_valid === true) {
+                        $(this).removeClass("invalid");
+                        $(this).addClass("valid");
+                        var qtip_content = datainput_help;
+                        $(this).qtip('api').set('content.text',
+                                qtip_content);
+                        $(this).qtip('api').hide();
+                        // update data
+                        record_data.val_min = val_min;
+                        record_data.val_max = val_max;
+                    }
+                    else {
+                        // data not within range
+                        $(this).removeClass("valid");
+                        $(this).addClass("invalid");
+                        var qtip_content = '<p>数值超出范围</p><p>允许数据范围：'+confine.math_range_html+' </p>';
+                        $(this).qtip('api').set('content.text',
+                                qtip_content);
+                        $(this).qtip('api').show();
+                    }
+                }
+            });
+            this_card.find(".data_input").on('blur', null, function() {
+                $(this).trigger('validate');
+            });
+        } // RANGE_TYPE }}}
+        else if (data_type == DATA_TYPES_JS.FLOAT_RANGE_TYPE) {
+            // TODO
+        }
+        else if (data_type == DATA_TYPES_JS.PM_TYPE) {          // {{{
+            // TODO
+            var radioinput_help = '<p>请直接点击选择</p>';
+            // tooltip
+            this_card.find(".radio_input").qtip({
+                id: 'radioinput_'+id,
+                prerender: false,
+                content: {
+                    text: radioinput_help
+                },
+                position: {
+                    my: 'bottom left',
+                    at: 'top right'
+                },
+                show: {
+                    event: 'mouseenter'
+                },
+                hide: {
+                    event: 'mouseleave unfocus'
+                }
+            });
+            // validate
+            this_card.find(".radio_input").on('validate', null, function() {
+                if (this_card.find(".radio_input input:radio:checked").length != 1) {
+                    var qtip_content = '<p>请选择化验结果</p>';
+                    $(this).qtip('api').set('content.text',
+                        qtip_content);
+                    $(this).qtip('api').show();
+                }
+                else {
+                    // valid
+                    var qtip_content = radioinput_help;
+                    $(this).qtip('api').set('content.text',
+                        qtip_content);
+                    $(this).qtip('api').hide();
+                    // update data
+                    record_data.value = this_card.find(".radio_input input:radio:checked").val();
+                }
+            });
+        } // }}}
+        else {
+            // unknown
+            return false;
+        }
+        // }}}
+
+        // date {{{
+        // date_input tooltip
+        var dateinput_help = '<p>日期格式：YYYY-MM-DD; 如：2013-08-26</p><p>日期不能晚于<strong>今天</strong></p>';
+        this_card.find(".date_input").qtip({
+            id: 'dateinput_'+id,
+            prerender: false,
+            content: {
+                text: dateinput_help
+            },
+            position: {
+                my: 'left top',
+                at: 'right bottom'
+            },
+            show: {
+                event: 'mouseenter'
+            },
+            hide: {
+                event: 'mouseleave unfocus'
+            }
+        });
+        this_card.find(".date_input").focus(function() {
+            $(this).removeClass("valid invalid");
+            // show help tooltip
+            //var qtip_content = dateinput_help;
+            //$(this).qtip('api').set('content.text', qtip_content);
+            //$(this).qtip('api').show();
+        });
+        // validate
+        this_card.find(".date_input").on('validate', null, 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");
+                var qtip_content = dateinput_help;
+                $(this).qtip('api').set('content.text', qtip_content);
+                $(this).qtip('api').hide();
+                // update data
+                record_data.date = date_str;
+            }
+            else {
+                // date invalid
+                $(this).removeClass("valid");
+                $(this).addClass("invalid");
+                var qtip_content = '<p>请检查输入日期的格式，并且日期不能晚于<strong>今天</strong></p>';
+                $(this).qtip('api').set('content.text', qtip_content);
+                $(this).qtip('api').show();
+            }
+        });
+        this_card.find(".date_input").on('change blur', null, function() {
+            $(this).trigger('validate');
+        });
+        // }}}
+    });
+    // }}}
+
+    //点击提交icon
+    $(".confirm_edit_icon").bind("click", function(){
+        var this_editing_data_div = $(this).closest(".editing_data");
+        var card = $(this).closest(".index_card");
+        var id = card.attr("id").replace('index_card_', '');
+        // validate data before submit
+        this_editing_data_div.find(".to_validate").trigger('validate');
+        if (this_editing_data_div.find(".invalid").length) {
+            // XXX: tooltip/popup
+            return false;
+        }
+
+        // submit data (AJAX) {{{
+        var time = moment().valueOf();
+        $.ajax({
+            type: 'post',
+            url: indicator_url + 'ajax/add_record/',
+            data: {
+                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                indicator_id: id,
+                date: record_data.date,
+                value: record_data.value,
+                val_min: record_data.val_min,
+                val_max: record_data.val_max,
+                time: time
+            },
+            dataType: 'json',
+            success: function(dataJson) {
+                if (dataJson.failed == true) {
+                    // failed: tooltip
+                    if (dataJson.error_code === 20) {
+                        // 'record_exist'; given date has record
+                        var date_input = card.find(".date_input");
+                        date_input.removeClass("valid");
+                        date_input.addClass("invalid");
+                        var qtip_content = '<p>该日期已存在记录，请检查</p>';
+                        date_input.qtip('api').set('content.text', qtip_content);
+                        date_input.qtip('api').show();
+                    }
+                    else {
+                        // XXX: other error
+                        var data_input = card.find(".data_input");
+                        data_input.removeClass("valid");
+                        data_input.addClass("invalid");
+                        var qtip_content = '<p>输入记录不符合要求，请检查</p>';
+                        data_input.qtip('api').set('content.text', qtip_content);
+                        data_input.qtip('api').show();
+                    }
+                }
+                else {
+                    // successfully added record
+                    // remove 'record_empty' class
+                    card.removeClass("record_empty");
+                    var this_edit_data_div = this_editing_data_div.siblings(".edit_data");
+                    this_editing_data_div.hide();
+                    this_edit_data_div.show();
+                    // last_edit_data & last_edit_date (std_unit)
+                    var this_last_edit_data_div = this_edit_data_div.find(".last_edit_data");
+                    var this_last_edit_date_div = this_edit_data_div.find(".last_edit_date");
+                    this_last_edit_data_div.children(".data_value").html(dataJson.value_html);
+                    this_last_edit_date_div.children(".date_value").html(dataJson.date);
+                    this_last_edit_data_div.show();
+                    this_last_edit_date_div.show();
+                    // explain_icon
+                    this_edit_data_div.find(".nodata_icon").hide();
+                    this_edit_data_div.find(".lastdata_icon").show();
+                    // refresh_icon
+                    this_edit_data_div.find(".refresh_icon").show();
+                    // edit_icon_container & chart
+                    this_editing_data_div.siblings(".edit_icon_container").hide();
+                    this_editing_data_div.siblings(".chart").show();
+                }
+            }
+        });
+        // }}}
+
+        return false;
+    });
+
+    //日期控件
+    $(".datepicker_container>.datepicker").datepicker({
+        showOn: "both",
+        buttonImage: static_url + "images/calendar.png",
+        buttonImageOnly: true,
+        maxDate: now_js
+    });
+    $(".datepicker_container>.datepicker").datepicker("setDate", now_js);
+
+    //时间范围控制（开始时间<结束时间）
+    $("#search_begin_date").datepicker({
+        showOn: "both",
+        buttonImage: static_url + "images/calendar.png",
+        buttonImageOnly: true,
+        onClose: function( selectedDate ) {
+            $("#search_end_date").datepicker("option", "minDate", selectedDate);
+        }
+    });
+    $("#search_end_date").datepicker({
+        showOn: "both",
+        buttonImage: static_url + "images/calendar.png",
+        buttonImageOnly: true,
+        onClose: function( selectedDate ) {
+            $("#search_begin_date").datepicker("option", "maxDate", selectedDate);
+        }
+    });
+});
+
+//
+function delete_card(){
+    var card = $("#index_card_"+card_2_delete_id);
+    card.nextAll().each(function(){
+        if($(this).hasClass("index_card_fir")){
+            $(this).removeClass("index_card_fir");
+            $(this).addClass("index_card_sec");
+        }else if($(this).hasClass("index_card_sec")){
+            $(this).removeClass("index_card_sec");
+            $(this).addClass("index_card_fir");
+        }
+    });
+    card.remove();
+}
+
+// check if a string is float number                        // {{{
+function is_float(str) {
+    // regex for fixed notation float number
+    var fix_regex = /^([+-]?)(\d+|\d+(\.\d*)?|\d*\.\d+)$/;
+    // regex for exponential notation float number
+    var exp_regex = /^([+-]?)(\d+|\d+(\.\d*)?|\d*\.\d+)[eE]([+-]?)\d+$/;;
+
+    str = str || "";
+    var str_orig = str;
+    //console.log('str_orig: "'+str_orig+'"');
+    // remove the blank on the head and tail
+    str = str.replace(/(^\s*|\s*$)/g, '');
+    // remove blank between sign and number
+    str = str.replace(/^([+-]?)\s*/, '$1');
+    //console.log('str: "'+str+'"');
+    // valid str can only contains '[\d.]', '[+-]?', and '[eE]?'
+    if (fix_regex.test(str) || exp_regex.test(str)) {
+        // true
+        return parseFloat(str);
+    }
+    else {
+        return false;
+    }
+}
+// }}}
+
+// check if a string is valid range
+// a) '< num'; b) '> num'; c) 'low ~ high' (range_symbol)   // {{{
+function is_range(str) {
+    if (typeof range_symbol === 'undefined') {
+        range_symbol = '~';
+    }
+    str = str || "";
+    var str_orig = str;
+
+    str = str.replace(/(^\s*|\s*$)/g, '');
+    var operator = str.charAt(0);
+    if (operator === '<' || operator === '>') {
+        // strip the first char
+        str = str.replace(/^./, '');
+        var value = is_float(str);
+        if (value === false) {
+            return false;
+        }
+        else {
+            return {'operator': operator, 'value': value};
+        }
+    }
+    else {
+        // not case 'a)' & 'b)'
+        var str_splited = str.split(range_symbol);
+        if (str_splited.length == 2) {
+            var val_min = is_float(str_splited[0]);
+            var val_max = is_float(str_splited[1]);
+            if (val_min !== false && val_max !== false
+                    && val_min < val_max) {
+                // valid
+                operator = range_symbol;
+                return {'operator': operator,
+                        'val_min': val_min,
+                        'val_max': val_max };
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            // invalid
+            return false
+        }
+    }
+}
+// }}}
+
+// vim: set ts=4 sw=4 tw=0 fenc=utf-8 ft=javascript: //
diff --git a/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js b/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js
deleted file mode 100644
index 7148e5e..0000000
--- a/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js
+++ /dev/null
@@ -1,184 +0,0 @@
-$(document).ready(function(){
-	//不允许input框复制，减少验证粘帖的交互
-	$("input[type='text']").bind("paste", function(){
-		return false;
-	});
-	
-	//副标题点大叉
-	$("#index_title_closed_icon").bind("click", function(){
-		var closeBtn = $(this);
-		var date = new Date();
-		var time = date.getTime();
-		$.ajax({  //数据库还是cookie，都可以，建议使用cookie，html中是否显示sub_title也由后端读取的cookie决定
-			type: 'get',
-			url: indicator_url + 'ajax/close_sub_title',
-			data: 'time='+time,
-			success: function(data){
-				if(data == 'success'){
-					closeBtn.parent().remove();
-				}
-			}
-		});
-		
-		return false;
-	});
-	
-	//卡片大叉删除交互
-	$(".card_delete_icon").hover(
-		function(){
-			$(this).removeClass("card_delete");
-			$(this).addClass("card_delete_hover");
-		}, 
-		function(){
-			$(this).removeClass("card_delete_hover");
-			$(this).addClass("card_delete");
-		}
-	);
-	$(".card_delete_icon").bind("click", function(){
-		card_2_delete_id = $(this).parent().attr("id").replace('index_card_', '');
-	});
-	
-	//点击编辑icon
-	$(".small_edit_icon").bind("click", function(){
-		var this_edit_data_div = $(this).parent();
-		var this_select_date_div = this_edit_data_div.siblings(".select_date");
-		var this_refresh_data_div = this_edit_data_div.siblings(".refresh_data");
-		var this_last_edit_data_div = $(this).siblings(".last_edit_data");
-		var this_editing_data_div = this_edit_data_div.siblings(".editing_data");
-		var input_container = this_editing_data_div.children(".input_container");
-		var data_fir = this_last_edit_data_div.children(".data_fir").text();
-		var data_sec = this_last_edit_data_div.children(".data_sec").text();
-		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_select_date_div.show();
-		this_edit_data_div.hide();
-		this_refresh_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;
-	});
-	//点击取消icon
-	$(".cancel_edit_icon").bind("click", function(){
-		var input_container = $(this).siblings(".input_container");
-		input_container.children(".edit_input_main").val('');
-		input_container.children(".edit_input_sub").val('');
-		var this_editing_data_div = $(this).parent();
-		this_editing_data_div.siblings(".edit_data").show();
-		this_editing_data_div.siblings(".refresh_data").show();
-		this_editing_data_div.hide();
-		this_editing_data_div.siblings(".select_date").hide();
-		return false;
-	});
-	//点击提交icon
-	$(".confirm_edit_icon").bind("click", function(){
-		var input_container = $(this).siblings(".input_container");
-		var data_input_fir = input_container.children(".edit_input_main");
-		var data_input_sec = input_container.children(".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;
-		}
-		
-		//TODO ajax
-		data_input_fir.val('');
-		data_input_sec.val('');
-		var this_editing_data_div = $(this).parent();
-		var this_select_date_div = this_editing_data_div.siblings(".select_date");
-		var this_refresh_data_div = this_editing_data_div.siblings(".refresh_data");
-		var this_edit_data_div = this_editing_data_div.siblings(".edit_data");
-		var this_last_edit_div = this_edit_data_div.children(".last_edit_data");
-		this_last_edit_div.show();
-		this_last_edit_div.children(".data_fir").html(data_input_fir_val);
-		this_last_edit_div.children(".data_sec").html(data_input_sec_val);
-		this_editing_data_div.hide();
-		this_select_date_div.hide();
-		this_edit_data_div.show();
-		this_refresh_data_div.show();
-		
-		return false;
-	});
-	
-	//日期控件
-	$(".select_date>.datepicker").datepicker({
-		 showOn: "both",
-		 buttonImage: static_url + "images/calendar.png",
-		 buttonImageOnly: true
-	});
-	
-	//时间范围控制（开始时间<结束时间）
-	$("#search_begin_date").datepicker({
-		showOn: "both",
-		buttonImage: static_url + "images/calendar.png",
-		buttonImageOnly: true,
-		onClose: function( selectedDate ) {
-			$("#search_end_date").datepicker("option", "minDate", selectedDate);
-		}
-	});
-	$("#search_end_date").datepicker({
-		showOn: "both",
-		buttonImage: static_url + "images/calendar.png",
-		buttonImageOnly: true,
-		onClose: function( selectedDate ) {
-			$("#search_begin_date").datepicker("option", "maxDate", selectedDate);
-		}
-	});
-});
-
-function delete_card(){
-	var card = $("#index_card_"+card_2_delete_id);
-	card.nextAll().each(function(){
-		if($(this).hasClass("index_card_fir")){
-			$(this).removeClass("index_card_fir");
-			$(this).addClass("index_card_sec");
-		}else if($(this).hasClass("index_card_sec")){
-			$(this).removeClass("index_card_sec");
-			$(this).addClass("index_card_fir");
-		}
-	});
-	card.remove();
-}
-
-// vim: set ts=4 sw=4 tw=0 fenc=utf-8 ft=javascript: //