From c9da4168874296cf4f5ba71b9a432ceae3c26130 Mon Sep 17 00:00:00 2001
From: Alvin Li <liweitianux@gmail.com>
Date: Fri, 20 Sep 2013 23:52:59 +0800
Subject: *** 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;
---
 .../templates/indicator/NewDeleteIndex.html        |  61 ++++--
 .../templates/indicator/SheetDefault.html          | 220 +++++++++++++--------
 .../indicator/templates/indicator/SideBar.html     |  27 +--
 .../templates/indicator/popup/EditHistoryData.html |  26 +--
 .../templates/indicator/popup/IndexDesc.html       |   3 +
 5 files changed, 198 insertions(+), 139 deletions(-)

(limited to '97suifangqa/apps/indicator/templates')

diff --git a/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html b/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
index 515adcc..24d8078 100644
--- a/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
+++ b/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
@@ -13,6 +13,8 @@
 {% endblock %}
 
 {% block scripts %}
+  <script type="text/javascript" src="{% static "plugins/moment/moment.min.js" %}"></script>
+  <script type="text/javascript" src="{% static "plugins/moment/lang/zh-cn.js" %}"></script>
   <script type="text/javascript" src="{% static "javascripts/new_delete_index.js" %}"></script>
   <script type="text/javascript" src="{% static "plugins/thickbox/thickbox.js" %}"></script>
 
@@ -23,14 +25,36 @@
   <script>
     var static_url = "{{ STATIC_URL }}";
     var indicator_url = "/indicator/";
+
+    // default the language to English
+    moment.lang('en');
+    // default date format
+    var mm_date_fmt = "YYYY-MM-DD";
   </script>
 {% endblock %}
 
 {% block page %}
-  <!--
-  <iframe align="left" width="420" height="720" src="SideBar.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
-  -->
-  <iframe align="left" width="420" height="720" src="{% url indicator_sidebar %}" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
+  <iframe align="left" width="420" height="1020" style="position:fixed;left:0;top:0;z-index:99;" src="{% url indicator_sidebar %}" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
+
+  <!-- TODO -->
+  <div id="login_container">
+    <div class="logged-in" id="login">
+      <img class="user-photo" alt="" src="{% static "images/userPhoto.jpg" %}">
+      <span class="number-block green-block user-level">6</span>
+      <span class="drop-down-area">
+        <span class="user-name">username</span>
+        <img class="drop-down-menu-button" alt="" src="{% static "images/icon_down.png" %}">
+      </span>
+      <div class="drop-down-menu" tabindex="0" onblur="javascript:alert('blur');" onfocus="javascript:alert('focus')">
+        <div class="text-pointer"></div>
+        <ul class="links">
+          <li><a href="javascript:void(0)">修改密码</a></li>
+          <li><a href="javascript:void(0)">完善信息</a></li>
+          <li class="last"><a href="javascript:void(0)">退出</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 
   {% comment %}
     Description:
@@ -42,7 +66,7 @@
     <div class="new_delete_title">
       <div class="content">添加或删除关注指标</div>
       <div class="search">
-        <input type="text" value="" placeholder="直接搜索指标" id="search_kw" autocomplete="off" />
+        <input type="text" value="" placeholder="直接搜索指标" id="search_kw" />
         <img id="search_btn" src="{% static "images/search.png" %}">
       </div>
       <div style="clear: both;"></div>
@@ -50,7 +74,7 @@
 
     <div class="index_navigation">
       <!-- 所有指标 -->
-      <div class="index_type {% if page_condition == "all" %}selected{% endif %}">
+      <div id="index_all" class="index_type {% if page_condition == "all" %}selected{% endif %}">
         <a href="?tab=all">所有指标</a>
       </div>
       <!-- 指标类别，页面只能容纳 7 个 -->
@@ -105,7 +129,7 @@
             {% for l in letters %}
               {% with l_inds=indicators|dict_get:l %}
                 {% if l_inds|length >= 1 %}
-                  <div class="index_lines {{ l|upper }}">
+                  <div class="index_lines {{ l|upper }} to_add">
                     <div class="letter_title">{{ l|upper }}</div>
                     {% for ind in l_inds %}
                       <div class="index_line" index_id="{{ ind|dict_get:"id" }}">
@@ -129,12 +153,14 @@
         <div class="category_condition" style="display: {% if page_condition == "category" %}block{% else %}none{% endif %};">
           <div class="index_title_container">
             <div class="index_title">{{ selected_category.name }}</div>
-            <div class="example_sheet">仿真化验单</div>
+            <div class="example_sheet">
+              <a href="javascript:void(0)">仿真化验单</a>
+            </div>
             <div style="clear:both;"></div>
           </div>
           <!-- list of indicators of the category -->
           {% if page_condition == "category" %}
-          <div class="index_lines left">
+          <div class="index_lines left to_add">
             {% for ind in indicators %}
               <div class="index_line" index_id="{{ ind.id }}">
                 <div class="index_name">{{ ind.name }}</div>
@@ -158,7 +184,7 @@
           </div>
           <!-- list of indicators returned by search -->
           {% if page_condition == "search" %}
-          <div class="index_lines left">
+          <div class="index_lines left to_add">
             {# 'indicators': list made up by the dumps of indicator #}
             {# check if search keyword empty & if search result empty #}
             {% if search_kw_empty %}
@@ -188,7 +214,7 @@
               {% endfor %}
             {% endif %}
           </div> <!-- end: index_lines left -->
-          {% endif %} {# end: page_condition == "search" #}
+          {% endif %} {# end: page_condition #}
         </div> <!-- end: search_condition -->
       </div> <!-- end: index_container -->
 
@@ -196,6 +222,7 @@
       <div class="index_container">
         <div class="index_title_container">
           <div class="index_title">已关注指标</div>
+          {% comment %}
           <div class="index_btn">
             <form id="index_form" method="post" action="">
               {% csrf_token %}
@@ -203,9 +230,10 @@
               <input type="hidden" id="commit_index" name="commit_index" value="" />
             </form>
           </div>
+          {% endcomment %}
           <div style="clear:both;"></div>
         </div>
-        <div class="index_lines right">
+        <div class="index_lines right to_minus">
           <!-- followed indicators for logged in user -->
           {% for fi in followed_indicators %}
             <div class="index_line" index_id="{{ fi|dict_get:"id" }}">
@@ -218,13 +246,12 @@
       </div> <!-- end: index_container -->
       <div style="clear:both;"></div>
     </div> <!-- end: show_indexes -->
+  </div> <!-- end: new_delete_container -->
 
-    <div class="link_container">
-      <div class="status_link">
-        <a href="{% url indicator_status %}">查看指标状态</a>
-      </div>
+  <div class="link_container">
+    <div class="status_link">
+      <a href="{% url indicator_status %}">查看指标状态</a>
     </div>
-
   </div>
 {% endblock page %}
 
diff --git a/97suifangqa/apps/indicator/templates/indicator/SheetDefault.html b/97suifangqa/apps/indicator/templates/indicator/SheetDefault.html
index 97f2d62..653fde3 100644
--- a/97suifangqa/apps/indicator/templates/indicator/SheetDefault.html
+++ b/97suifangqa/apps/indicator/templates/indicator/SheetDefault.html
@@ -8,17 +8,19 @@
 {% endblock %}
 
 {% block css %}
-  <link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}"/>
+  <link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}" />
   <!--
-  <link rel="stylesheet" type="text/css" href="{% static "plugins/datepicker/datepicker.css" %}"/>
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/datepicker/datepicker.css" %}" />
   -->
   <!--
-  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/base/minified/jquery.ui.core.min.css" %}"/>
-  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/base/minified/jquery.ui.datepicker.min.css" %}"/>
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/base/minified/jquery.ui.core.min.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/base/minified/jquery.ui.datepicker.min.css" %}" />
   -->
-  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/smoothness/jquery-ui.min.css" %}"/>
-  <link rel="stylesheet" type="text/css" href="{% static "plugins/thickbox/thickbox.css" %}"/>
-  <link rel="stylesheet" type="text/css" href="{% static "css/sheet_default.css" %}"/>
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/97suifang/jquery-ui.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/thickbox/thickbox.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/qtip2/jquery.qtip.min.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "plugins/qtip2/qtip.97suifang.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "css/sheet_default.css" %}" />
 {% endblock %}
 
 {% block scripts %}
@@ -35,7 +37,8 @@
   <!-- library for parsing, validating, manipulating, and formatting dates -->
   <script type="text/javascript" src="{% static "plugins/moment/moment.min.js" %}"></script>
   <script type="text/javascript" src="{% static "plugins/moment/lang/zh-cn.js" %}"></script>
-  <script type="text/javascript" src="{% static "javascripts/sheetdefault.js" %}"></script>
+  <script type="text/javascript" src="{% static "plugins/qtip2/jquery.qtip.min.js" %}"></script>
+  <script type="text/javascript" src="{% static "javascripts/sheet_default.js" %}"></script>
   <script type="text/javascript" src="{% static "javascripts/card_chart.js" %}"></script>
 
   <!-- global variables
@@ -79,6 +82,17 @@
     var card_2_delete_id = "-1"; // track the id of card to be deleted (string)
     // regex to match float number in expoential notation
     var exp_regex = /^([+-]?)(\d\.\d+)[eE]\+?(-?)0*([1-9]+)$/;
+    // range symbol: <low_num> <symbol> <high_num>
+    var range_symbol = '~';
+
+    // indicator DATA_TYPES
+    var DATA_TYPES_JS = $.parseJSON('{{ DATA_TYPES_json|safe }}');
+    // dataTypes of indicators
+    var datatypes = $.parseJSON('{{ datatypes_json|safe }}');
+    // recordempty of indicators
+    var recordempty = $.parseJSON('{{ recordempty_json|safe }}');
+    // confines of indicators
+    var confines = $.parseJSON('{{ confines_json|safe }}');
 
     // get indicator records data and 
     // draw the chart {{{
@@ -259,12 +273,35 @@
 {% endblock %}
 
 {% block page %}
-  <iframe align="left" width="420" height="720" src="{% url indicator_sidebar %}" style="position:fixed;left:0;top:0" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
+  {% csrf_token %}
+
+  <iframe align="left" width="420" height="1020" src="{% url indicator_sidebar %}" style="position:fixed;left:0;top:0;z-index:99;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
+
+  <!-- TODO -->
+  <div id="login_container">
+    <div class="logged-in" id="login">
+      <img class="user-photo" alt="" src="{% static "images/userPhoto.jpg" %}" />
+      <span class="number-block green-block user-level">6</span>
+      <span class="drop-down-area">
+        <span class="user-name">username</span>
+        <img class="drop-down-menu-button" alt="" src="{% static "images/icon_down.png" %}" />
+      </span>
+      <div class="drop-down-menu" tabindex="0" onblur="javascript:alert('blur');" onfocus="javascript:alert('focus')">
+        <div class="text-pointer"></div>
+        <ul class="links">
+          <li><a href="javascript:void(0)">修改密码</a></li>
+          <li><a href="javascript:void(0)">完善信息</a></li>
+          <li class="last"><a href="javascript:void(0)">退出</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 
   <div id="right_container">
     <div id="index_status_container">
       <div class="index_title">指标状态</div>
 
+      {% comment %}
       <!-- 这里需要后端读取cookie，来判断用户是否已经点击大叉。
            若否，则显示；若是，则隐藏
       -->
@@ -272,93 +309,120 @@
         <div class="content">以下可能是您感兴趣的指标，您可以点击卡片右上角“X”，取消关注。</div>
         <div class="close_icon" id="index_title_closed_icon"></div>
       </div>
+      {% endcomment %}
 
       <!-- 左边的卡片加一个class "index_card_fir"，
            右边的卡片加一个class "index_card_sec"
       -->
       <!-- 卡片div的id为 "index_card_卡片id"，方便后续操作 -->
       {% for ind in indicators %}
-        <div class="index_card {% cycle 'index_card_fir' 'index_card_sec' %}" id="index_card_{{ ind|dict_get:"id" }}">
+        <div class="index_card {% cycle 'index_card_fir' 'index_card_sec' %} {% if ind|dict_get:"recommended" %}recommended{% endif %} {% if ind|dict_get:"record_empty" %}record_empty{% endif %}" id="index_card_{{ ind|dict_get:"id" }}">
           <div class="card_title">{{ ind|dict_get:"name" }}</div>
           <div class="refer_range">
             <span class="refer_text">{{ ind|dict_get:"ref_text" }}</span>
             <span class="refer_value">{{ ind|dict_get:"ref_value"|safe }}</span>
             <span class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</span>
           </div>
-          {% if ind|dict_get:"record_empty" %} {# vim: {{{ #}
-            {# if no record, then hide 'last_edit_data' #}
-            <!-- "record_empty": True -->
-            <div class="edit_data">
-                <div class="last_edit_data" style="display: none;">
-                  <span class="last_data">Null</span>
-                  <span class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</span>
-                </div>
-                <img class="small_edit_icon" src="{% static "images/pen.png" %}" />
-                <img class="explain_icon" src="{% static "images/nodata.png" %}" />
-            </div> <!-- end: edit_data -->
-            <div class="editing_data">
-              <div class="input_container">
-                <input class="edit_input_main" type="text" value="0" />
-                x 10^
-                <input class="edit_input_sub" type="text" value="0" />
-              </div>
-              <div class="add_minus_icon">
-                <div class="add_icon"></div>
-                <div class="minus_icon"></div>
-              </div>
-              <div class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</div>
-              <div class="confirm_edit_icon"></div>
-              <div class="cancel_edit_icon"></div>
-            </div> <!-- end: editing_data -->
-            <!-- hints to get started, display when has no record -->
-            <div class="edit_icon_container">
-              <div class="edit_icon"></div>
-              <div class="curve_icon"></div>
-              <div style="clear:both;"></div>
-            </div>
-            <div class="edit_text">点击右上角的按钮开始添加数据</div>
-          {# vim: }}} #}
-          {% else %} {# record_empty == False; vim: {{{ #}
+
+          <div class="edit_data">
+            {% if ind|dict_get:"record_empty" %}
+            {# record_empty==True, hide 'last_edit_data' #}
+            <div class="last_edit_data" style="display: none;">
+            {% else %}
             {# indicator has records #}
-            <!-- "record_empty": False -->
-            <div class="edit_data">
-                <div class="last_edit_data" style="display: block;">
-                  <span class="last_data">{{ ind|dict_get:"last_record"|dict_get:"value_str"|safe }}</span>
-                  <span class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</span>
-                </div>
-                <img class="small_edit_icon" src="{% static "images/pen.png" %}" />
-                <img class="explain_icon" src="{% static "images/last_edit_data.png" %}" />
-            </div> <!-- end: edit_data -->
-            <div class="editing_data">
-              <div class="input_container">
-                <input class="edit_input_main" type="text" value="" autocomplete="off" />
-                x 10^
-                <input class="edit_input_sub" type="text" value="" autocomplete="off" />
-              </div>
-              <div class="add_minus_icon">
-                <div class="add_icon"></div>
-                <div class="minus_icon"></div>
-              </div>
-              <div class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</div>
-              <div class="confirm_edit_icon"></div>
-              <div class="cancel_edit_icon"></div>
-            </div> <!-- end: editing_data -->
-            <div class="refresh_data">
-              <div class="refresh_text">
-                记录日期: {{ ind|dict_get:"last_record"|dict_get:"date" }}
+            <div class="last_edit_data" style="display: block;">
+            {% endif %}
+              <span class="data_value">{{ ind|dict_get:"last_record"|dict_get:"value_html"|safe }}</span>
+              <span class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</span>
+            </div>
+            <img class="small_edit_icon" src="{% static "images/pen.png" %}" />
+            <!-- explain_icon -->
+            {% if ind|dict_get:"record_empty" %}
+            <img class="explain_icon nodata_icon" src="{% static "images/nodata.png" %}" style="display: block;" />
+            <img class="explain_icon lastdata_icon" src="{% static "images/last_edit_data.png" %}" style="display: none;" />
+            {% else %}
+            <img class="explain_icon nodata_icon" src="{% static "images/nodata.png" %}" style="display: none;" />
+            <img class="explain_icon lastdata_icon" src="{% static "images/last_edit_data.png" %}" style="display: block;" />
+            {% endif %}
+            <div style="clear:both;"></div>
+            <!-- last edit date -->
+            {% if ind|dict_get:"record_empty" %}
+            <div class="last_edit_date" style="display: none;">
+            {% else %}
+            <div class="last_edit_date" style="display: block;">
+            {% endif %}
+              <span class="date_prompt">记录日期</span>
+              <span class="date_value">{{ ind|dict_get:"last_record"|dict_get:"date" }}</span>
+            </div>
+            <!-- refresh icon -->
+            {% if ind|dict_get:"record_empty" %}
+            <div class="refresh_icon" style="display: none;"></div>
+            {% else %}
+            <div class="refresh_icon" style="display: block;"></div>
+            {% endif %}
+            <div style="clear:both;"></div>
+          </div> <!-- end: edit_data -->
+
+          <div class="editing_data">
+            <div class="data data_type_{{ ind|dict_get:"dataType" }}">
+              <!-- <div class="prompt">记录</div> -->
+              {% if ind|dict_get:"dataType" == DATA_TYPES|dict_get:"INTEGER_TYPE" %}
+              {# INTEGER_TYPE #}
+              TODO
+              {% elif ind|dict_get:"dataType" == DATA_TYPES|dict_get:"FLOAT_TYPE" %}
+              {# FLOAT_TYPE #}
+              <input class="data_input to_validate" type="text" value="" autocomplete="off" />
+              {% elif ind|dict_get:"dataType" == DATA_TYPES|dict_get:"RANGE_TYPE" %}
+              {# RANGE_TYPE #}
+              <input class="data_input to_validate" type="text" value="" autocomplete="off" />
+              {% elif ind|dict_get:"dataType" == DATA_TYPES|dict_get:"FLOAT_RANGE_TYPE" %}
+              {# FLOAT_RANGE_TYPE #}
+              <input class="data_input to_validate" type="text" value="" autocomplete="off" />
+              {% elif ind|dict_get:"dataType" == DATA_TYPES|dict_get:"PM_TYPE" %}
+              {# PM_TYPE #}
+              <div class="radio_input to_validate">
+                <input type="radio" id="minus_r" name="pm_data" value="-" />
+                <label for="minus_r">阴性(-)</label>
+                <input type="radio" id="plus_r" name="pm_data" value="+" />
+                <label for="plus_r">阳性(+)</label>
               </div>
-              <div class="refresh_icon"></div>
-              <div style="clear:both;"></div>
+              {% else %}
+              {# UNKNOWN TYPE #}
+              ERROR: unknown data type
+              {% endif %}
             </div>
-            <div class="select_date">
-              <input class="datepicker" type="text" autocomplete="off" />
+            <div class="data_unit">{% if ind|dict_get:"std_unit_symbol" %}({{ ind|dict_get:"std_unit_symbol" }}){% endif %}</div>
+            <div class="confirm_edit_icon"></div>
+            <div class="cancel_edit_icon"></div>
+            <div style="clear:both;"></div>
+            <div class="date">
+              <div class="datepicker_container">
+                <input class="datepicker date_input to_validate" type="text" autocomplete="off" />
+              </div>
             </div>
-            <!-- chart rendered by Highcharts -->
-            <div class="chart" id="chart_{{ ind|dict_get:"id" }}"></div>
-          {% endif %} {# end: record_empty; vim: }}} #}
+          </div> <!-- end: editing_data -->
+
+          <!-- edit_hint -->
+          {% if ind|dict_get:"record_empty" %}
+          <div class="edit_icon_container" style="display: block;">
+          {% else %}
+          <div class="edit_icon_container" style="display: none;">
+          {% endif %}
+            <div class="edit_icon"></div>
+            <div class="curve_icon"></div>
+            <div style="clear:both;"></div>
+            <div class="edit_text">点击右上角的按钮开始添加数据</div>
+            <div style="clear:both;"></div>
+          </div>
+          <!-- chart rendered by Highcharts -->
+          {% if ind|dict_get:"record_empty" %}
+          <div class="chart" id="chart_{{ ind|dict_get:"id" }}" style="display: none;"></div>
+          {% else %}
+          <div class="chart" id="chart_{{ ind|dict_get:"id" }}" style="display: block;"></div>
+          {% endif %}
 
           <div class="card_bottom">
-            <div class="understand_index"><a class="thickbox" href="{% url indicator_indexdesc %}?card_id={{ ind|dict_get:"id" }}&url_type=html&no_title=true&TB_iframe=true&height=351&width=630">了解该指标</a></div>
+            <div class="understand_index"><a class="thickbox" href="{% url indicator_indexdesc %}?card_id={{ ind|dict_get:"id" }}&url_type=html&no_title=true&TB_iframe=true&height=367&width=630">了解该指标</a></div>
             <!-- TODO -->
             <div class="simulation_sheet"><a href="{% static "images/demo_sheet.png" %}" class="thickbox">仿真化验单</a></div>
             <div class="detail_history">
diff --git a/97suifangqa/apps/indicator/templates/indicator/SideBar.html b/97suifangqa/apps/indicator/templates/indicator/SideBar.html
index b1e3b34..95ad4e9 100644
--- a/97suifangqa/apps/indicator/templates/indicator/SideBar.html
+++ b/97suifangqa/apps/indicator/templates/indicator/SideBar.html
@@ -44,28 +44,15 @@
         </form>
       </div>
       <div class="similar_container">
-        <div class="vertical_bar_component">
-          <div class="v_b_c_top"></div>
-          <div class="v_b_c_middle">
-            <div class="v_b_c_middle_top"></div>
-            <div class="v_b_c_middle_middle"></div>
-            <div class="v_b_c_middle_bottom"></div>
-          </div>
-          <div class="v_b_c_bottom"></div>
-          <div class="cycle1">
-            <div class="cycle1_out"></div>
-            <div class="cycle1_in"></div>
-          </div>
-          <div class="cycle2"></div>
-          <div class="cycle3"></div>
-          <div class="cycle4"></div>
-        </div>
+	<div class="vertical_bar_component">
+	  <img src="{% static "images/gradient_bar.png" %}" />
+	</div>
         <div class="similar_content">
           <div class="similar_title">经比对，下文中的被研究患者与您很像：</div>
-          <div class="specifix_content"><div class="specifix_text">有 80% 的患者有感到头疼</div></div>
-          <div class="specifix_content"><div class="specifix_text">有 10% 的患者有感到头疼并且也感觉到肌疼</div></div>
-          <div class="specifix_content"><div class="specifix_text">有 20% 的患者ALT到达过正常值</div></div>
-          <div class="specifix_content"><div class="specifix_text">有 3% 的患者有感到肌疼</div></div>
+          <div class="specifix_content" id="specifix_content1"><div class="specifix_text">有 80% 的患者有感到头疼</div></div>
+          <div class="specifix_content" id="specifix_content2"><div class="specifix_text">有 10% 的患者有感到头疼并且也感觉到肌疼</div></div>
+          <div class="specifix_content" id="specifix_content3"><div class="specifix_text">有 20% 的患者ALT到达过正常值</div></div>
+          <div class="specifix_content" id="specifix_content4"><div class="specifix_text">有 3% 的患者有感到肌疼</div></div>
         </div>
       </div>
       <div class="clear"></div>
diff --git a/97suifangqa/apps/indicator/templates/indicator/popup/EditHistoryData.html b/97suifangqa/apps/indicator/templates/indicator/popup/EditHistoryData.html
index 340057b..7c530ea 100644
--- a/97suifangqa/apps/indicator/templates/indicator/popup/EditHistoryData.html
+++ b/97suifangqa/apps/indicator/templates/indicator/popup/EditHistoryData.html
@@ -8,7 +8,7 @@
 
 {% block css %}
 	<link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}" />
-	<link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/smoothness/jquery-ui.min.css" %}" />
+	<link rel="stylesheet" type="text/css" href="{% static "plugins/jquery-ui/themes/97suifang/jquery-ui.css" %}" />
 	<link rel="stylesheet" type="text/css" href="{% static "plugins/qtip2/jquery.qtip.min.css" %}" />
 	<link rel="stylesheet" type="text/css" href="{% static "css/edit_history_data.css" %}" />
 {% endblock %}
@@ -36,7 +36,7 @@
     // record id
     var record_id = {{ record_obj.id }};
     // indicator DATA_TYPES
-    var DATA_TYPES = {
+    var DATA_TYPES_JS = {
         'INTEGER_TYPE': '{{ indicator_obj.INTEGER_TYPE }}',
         'FLOAT_TYPE': '{{ indicator_obj.FLOAT_TYPE }}',
         'RANGE_TYPE': '{{ indicator_obj.RANGE_TYPE }}',
@@ -100,18 +100,6 @@
             <input class="datepicker date_input to_validate" id="editing_date_picker" type="text" value="{{ record_dict|dict_get:"date" }}" />
           </div>
         </div>
-        <!--
-        <div class="input_container">
-          <div class="prompt">修改记录</div>
-          <input class="edit_input_main" type="text" value="" autocomplete="off" />
-          x10^
-          <input class="edit_input_sub" type="text" value="" autocomplete="off" />
-        </div>
-        <div class="add_minus_icon">
-          <div class="add_icon"></div>
-          <div class="minus_icon"></div>
-        </div>
-        -->
         <div class="data data_type_{{ indicator_obj.dataType }}">
           <div class="prompt">修改记录</div>
           {% if indicator_obj.dataType == indicator_obj.INTEGER_TYPE %}
@@ -134,16 +122,6 @@
             <input type="radio" id="plus_r" name="pm_data" value="+" />
             <label for="plus_r">阳性(+)</label>
           </div>
-          <!--
-          <div class="radio_input">
-            <span class="radio_s"><input class="to_validate" type="radio" name="pm_data" value="minus" /></span>
-            <span class="radio_text">阴性(-)</span>
-          </div>
-          <div class="radio_input">
-            <span class="radio_s"><input class="to_validate" type="radio" name="pm_data" value="plus" /></span>
-            <span class="radio_text">阳性(+)</span>
-          </div>
-          -->
           {% else %}
           {# UNKNOWN TYPE #}
           ERROR: unknown data type
diff --git a/97suifangqa/apps/indicator/templates/indicator/popup/IndexDesc.html b/97suifangqa/apps/indicator/templates/indicator/popup/IndexDesc.html
index 181c678..0d3f62c 100644
--- a/97suifangqa/apps/indicator/templates/indicator/popup/IndexDesc.html
+++ b/97suifangqa/apps/indicator/templates/indicator/popup/IndexDesc.html
@@ -23,6 +23,9 @@
       {% if annotation_not_found %}
       {# change cursor style #}
       $("#collection_btn").css('cursor', 'auto');
+      $("#collection_btn").html('');
+      $("#collection_btn").removeClass('collection');
+      $("#collection_btn").addClass('collection_no_annotation');
       {% else %}
       {# annotation found #}
       $("#collection_btn").bind("update", function(e) {
-- 
cgit v1.2.2