* updated 'indicator.views' for front pages

* use 'render' instead of 'render_to_response'
* updated 'indicator/templates/indicator/NewDeleteIndex.html' to
  show all indicators and followed indicators

9 files changed, 681 insertions, 437 deletions

diff --git a/97suifangqa/apps/indicator/models.py b/97suifangqa/apps/indicator/models.py
index f64f3db..615398f 100644
--- a/97suifangqa/apps/indicator/models.py
+++ b/97suifangqa/apps/indicator/models.py
@@ -230,6 +230,8 @@ class Indicator(models.Model):                              # {{{
             'dataType': self.dataType,
             'categories_id': [c.id
                 for c in self.categories.all()],
+            'categories_name': [c.name
+                for c in self.categories.all()],
             'units_id': [u.id
                 for u in self.get_unit(type="all")]
         }
diff --git a/97suifangqa/apps/indicator/static/css/new_delete_index.css b/97suifangqa/apps/indicator/static/css/new_delete_index.css
index aaee1a6..0eb41d1 100644
--- a/97suifangqa/apps/indicator/static/css/new_delete_index.css
+++ b/97suifangqa/apps/indicator/static/css/new_delete_index.css
@@ -61,7 +61,7 @@
 	text-decoration: none;
 }
 .index_navigation #index_all {
-	margin-right: 0;
+	margin-right: 11px;
 }
 .index_navigation .selected {
 	background-color: #99CC33;
@@ -189,4 +189,4 @@
 	color: #4A4A4A;
 	border-bottom: 1px solid #BFBFBF;
 	height: 24px;
-}
\ No newline at end of file
+}
diff --git a/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html b/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
index 29c15d0..8fd3e4c 100644
--- a/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
+++ b/97suifangqa/apps/indicator/templates/indicator/NewDeleteIndex.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static from staticfiles %}
+{% load dict_get %}
 
 {% block title %}
 指标状态 | 随访工具 | 97 随访
@@ -31,416 +32,473 @@
 
 {% 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="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>
-	<div id="new_delete_container">
-		<div class="new_delete_title">
-			<div class="content">添加或删除关注指标</div>
-			<div class="search">
-				<input type="text" value="" placeholder="直接搜索指标" id="search_kw" autocomplete="off" />
+
+  {% comment %}
+    Description:
+    index -> Indicator
+    tab   -> IndicatorCategory
+  {% endcomment %}
+
+  <div id="new_delete_container">
+    <div class="new_delete_title">
+      <div class="content">添加或删除关注指标</div>
+      <div class="search">
+        <input type="text" value="" placeholder="直接搜索指标" id="search_kw" autocomplete="off" />
         <img id="search_btn" src="{% static "images/search.png" %}">
-			</div>
-			<div style="clear: both;"></div>
-		</div>
-		<div class="index_navigation">
-			<!-- 根据url的参数tab，给对应div的class加 selected 样式 -->
-			<div class="index_type selected"><a href="?tab=1">血常规</a></div>
-			<div class="index_type"><a href="?tab=2">两对半</a></div>
-			<div class="index_type"><a href="?tab=3">肝功能</a></div>
-			<div class="index_type"><a href="?tab=4">肝穿刺</a></div>
-			<div class="index_type"><a href="?tab=5">血常规</a></div>
-			<div class="index_type"><a href="?tab=6">两对半</a></div>
-			<div class="index_type"><a href="?tab=7">肝功能</a></div>
-			<div class="index_type" id="index_all"><a href="?tab=all">所有指标</a></div>
-			<div style="clear:both;"></div>
-		</div>
-		<div class="show_indexes">
-			<div class="index_container">
-				<!-- 所有的展示 -->
-				<!-- 若url的参数tab 为 all， 则把该div的 display style 设为block； 不然，则设为none -->
-				<div class="all_condition" style="display: block;">
-					<div class="index_all_title">所有指标</div>
-					<div class="index_all_letter">
-						<div>A</div>
-						<div>B</div>
-						<div>C</div>
-						<div>D</div>
-						<div>E</div>
-						<div>F</div>
-						<div>G</div>
-						<div>H</div>
-						<div>I</div>
-						<div>J</div>
-						<div>K</div>
-						<div>L</div>
-						<div>M</div>
-						<div>N</div>
-						<div>O</div>
-						<div>P</div>
-						<div>Q</div>
-						<div>R</div>
-						<div>S</div>
-						<div>T</div>
-						<div>U</div>
-						<div>V</div>
-						<div>W</div>
-						<div>X</div>
-						<div>Y</div>
-						<div>Z</div>
-					</div>
-					<div style="clear:both;"></div>
-					<div class="index_letter_container">
-						<div class="index_lines A">
-							<div class="letter_title">A</div>
-							<div class="index_line" index_id="1">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines B">
-							<div class="letter_title">B</div>
-							<div class="index_line" index_id="2">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines C">
-							<div class="letter_title">C</div>
-							<div class="index_line" index_id="3">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines D">
-							<div class="letter_title">D</div>
-							<div class="index_line" index_id="4">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines E">
-							<div class="letter_title">E</div>
-							<div class="index_line" index_id="5">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines F">
-							<div class="letter_title">F</div>
-							<div class="index_line" index_id="6">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines G">
-							<div class="letter_title">G</div>
-							<div class="index_line" index_id="7">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines H">
-							<div class="letter_title">H</div>
-							<div class="index_line" index_id="8">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines I">
-							<div class="letter_title">I</div>
-							<div class="index_line" index_id="9">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines J">
-							<div class="letter_title">J</div>
-							<div class="index_line" index_id="10">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines K">
-							<div class="letter_title">K</div>
-							<div class="index_line" index_id="11">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines L">
-							<div class="letter_title">L</div>
-							<div class="index_line" index_id="12">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines M">
-							<div class="letter_title">M</div>
-							<div class="index_line" index_id="13">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines N">
-							<div class="letter_title">N</div>
-							<div class="index_line" index_id="14">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines O">
-							<div class="letter_title">O</div>
-							<div class="index_line" index_id="15">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines P">
-							<div class="letter_title">P</div>
-							<div class="index_line" index_id="16">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines Q">
-							<div class="letter_title">Q</div>
-							<div class="index_line" index_id="17">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines R">
-							<div class="letter_title">R</div>
-							<div class="index_line" index_id="18">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines S">
-							<div class="letter_title">S</div>
-							<div class="index_line" index_id="19">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines T">
-							<div class="letter_title">T</div>
-							<div class="index_line" index_id="20">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines U">
-							<div class="letter_title">U</div>
-							<div class="index_line" index_id="21">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines V">
-							<div class="letter_title">V</div>
-							<div class="index_line" index_id="22">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines W">
-							<div class="letter_title">W</div>
-							<div class="index_line" index_id="23">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines X">
-							<div class="letter_title">X</div>
-							<div class="index_line" index_id="24">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines Y">
-							<div class="letter_title">Y</div>
-							<div class="index_line" index_id="25">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-						<div class="index_lines Z">
-							<div class="letter_title">Z</div>
-							<div class="index_line" index_id="26">
-								<div class="index_name">乙肝病毒表面抗原</div>
-								<div class="index_category">两对半</div>
-								<div class="icon"></div>
-								<div style="clear:both"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-				
-				<!-- 搜索后左边的展示 -->
-				<!-- 若url的参数tab 不等于 all，或者 url的参数 kw 不为空，则把该div的 display设置为block；不然，则设为none -->
-				<div class="search_condition" style="display: none;">
-					<div class="index_title_container">
-						<div class="index_title">搜索指标</div>
-						<div class="example_sheet">仿真化验单</div>
-						<div style="clear:both;"></div>
-					</div>
-					<div class="index_lines left">
-						<!-- 如若kw参数为空，且tab不等于all（即点击指标类型后的页面），则把 <div class="index_category">XXXX</div> 隐藏掉即可 -->
-						<div class="index_line" index_id="1">
-							<div class="index_name">乙肝病毒表面抗原</div>
-							<div class="index_category">两对半</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="2">
-							<div class="index_name">乙肝病毒S蛋白定量</div>
-							<div class="index_category">血常规</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="3">
-							<div class="index_name">乙肝病毒表面抗体</div>
-							<div class="index_category">血常规</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="4">
-							<div class="index_name">乙肝病毒e抗原</div>
-							<div class="index_category">两对半</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="5">
-							<div class="index_name">乙肝病毒e抗体</div>
-							<div class="index_category">两对半</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="6">
-							<div class="index_name">乙肝病毒核心抗体IaM</div>
-							<div class="index_category">两对半</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-						<div class="index_line" index_id="7">
-							<div class="index_name">乙肝病毒核算定量（PCR）</div>
-							<div class="index_category">血常规</div>
-							<div class="icon"></div>
-							<div style="clear:both"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="add_concerned_icon"></div>
-			<div class="index_container">
-				<div class="index_title_container">
-					<div class="index_title">已关注指标</div>
-					<div class="index_btn">
-						<form id="index_form" method="post" action="">
-							<input type="button" id="submitIndexBtn" value="提交" />
-							<input type="hidden" id="commit_index" name="commit_index" value="" />
-						</form>
-					</div>
-					<div style="clear:both;"></div>
-				</div>
-				<div class="index_lines right">
-					<div class="index_line" index_id="1">
-						<div class="index_name">V-谷丙氨酰转氨酶</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="2">
-						<div class="index_name">总胆红素</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="3">
-						<div class="index_name">乙肝病毒表面抗原</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="4">
-						<div class="index_name">乙肝病毒表面抗体</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="5">
-						<div class="index_name">乙肝病毒e抗体</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="6">
-						<div class="index_name">乙肝病毒核算定量（PCR）</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="7">
-						<div class="index_name">乙肝病毒基因型C型</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-					<div class="index_line" index_id="8">
-						<div class="index_name">乙肝病毒型混合型</div>
-						<div class="icon"></div>
-						<div style="clear:both"></div>
-					</div>
-				</div>
-			</div>
-			<div style="clear:both;"></div>
-		</div>
-	</div>
+      </div>
+      <div style="clear: both;"></div>
+    </div>
+    <div class="index_navigation">
+      <!-- 根据url的参数tab，给对应div的class加 selected 样式 -->
+      <!--
+      <div class="index_type selected" id="index_all"><a href="?tab=all">所有指标</a></div>
+      <div class="index_type"><a href="?tab=1">血常规</a></div>
+      <div class="index_type"><a href="?tab=2">两对半</a></div>
+      <div class="index_type"><a href="?tab=3">肝功能</a></div>
+      <div class="index_type"><a href="?tab=4">肝穿刺</a></div>
+      <div class="index_type"><a href="?tab=5">血常规</a></div>
+      <div class="index_type"><a href="?tab=6">两对半</a></div>
+      <div class="index_type"><a href="?tab=7">肝功能</a></div>
+      -->
+      <!-- 所有指标 -->
+      <div class="index_type {% if selected_catid == "all" %}selected{% endif %}">
+        <a href="?tab=all">所有指标</a>
+      </div>
+      <!-- 指标类别，页面只能容纳 7 个 -->
+      {% for cat in categories %}
+      <div class="index_type {% if selected_catid == cat.id %}selected{% endif %}">
+        <a href="?tab={{ cat.id }}">{{ cat.name }}</a>
+      </div>
+      {% endfor %}
+      <div style="clear:both;"></div>
+    </div>
+    <div class="show_indexes">
+      <div class="index_container">
+        <!-- 所有的展示 -->
+        <!-- 若url的参数tab 为 all， 则把该div的 display style 设为block； 不然，则设为none -->
+        <div class="all_condition" style="display: block;">
+          <div class="index_all_title">所有指标</div>
+          <div class="index_all_letter">
+            <div>A</div>
+            <div>B</div>
+            <div>C</div>
+            <div>D</div>
+            <div>E</div>
+            <div>F</div>
+            <div>G</div>
+            <div>H</div>
+            <div>I</div>
+            <div>J</div>
+            <div>K</div>
+            <div>L</div>
+            <div>M</div>
+            <div>N</div>
+            <div>O</div>
+            <div>P</div>
+            <div>Q</div>
+            <div>R</div>
+            <div>S</div>
+            <div>T</div>
+            <div>U</div>
+            <div>V</div>
+            <div>W</div>
+            <div>X</div>
+            <div>Y</div>
+            <div>Z</div>
+          </div> <!-- end: index_all_letter -->
+          <div style="clear:both;"></div>
+          <div class="index_letter_container">
+            {# display all indicator by letter index #}
+            {% for l in letters %}
+              {% with l_inds=indicators_pdict|dict_get:l %}
+                {% if l_inds|length >= 1 %}
+                  <div class="index_lines {{ l|upper }}">
+                    <div class="letter_title">{{ l|upper }}</div>
+                    {% for ind in l_inds %}
+                      <div class="index_line" index_id="{{ ind|dict_get:"id" }}">
+                        <div class="index_name">{{ ind|dict_get:"name" }}</div>
+                        <div class="index_category"></div>
+                        <div class="icon"></div>
+                        <div style="clear:both"></div>
+                      </div>
+                    {% endfor %}
+                  </div>
+                {% endif %}
+              {% endwith %}
+            {% endfor %}
+            {# end: display all indicator #}
+
+            {% comment %}{# vim: {{{ #}
+            <!-- begin: index_lines: [A-Z] -->
+            <div class="index_lines A">
+              <div class="letter_title">A</div>
+              <div class="index_line" index_id="1">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines B">
+              <div class="letter_title">B</div>
+              <div class="index_line" index_id="2">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines C">
+              <div class="letter_title">C</div>
+              <div class="index_line" index_id="3">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines D">
+              <div class="letter_title">D</div>
+              <div class="index_line" index_id="4">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines E">
+              <div class="letter_title">E</div>
+              <div class="index_line" index_id="5">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines F">
+              <div class="letter_title">F</div>
+              <div class="index_line" index_id="6">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines G">
+              <div class="letter_title">G</div>
+              <div class="index_line" index_id="7">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines H">
+              <div class="letter_title">H</div>
+              <div class="index_line" index_id="8">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines I">
+              <div class="letter_title">I</div>
+              <div class="index_line" index_id="9">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines J">
+              <div class="letter_title">J</div>
+              <div class="index_line" index_id="10">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines K">
+              <div class="letter_title">K</div>
+              <div class="index_line" index_id="11">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines L">
+              <div class="letter_title">L</div>
+              <div class="index_line" index_id="12">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines M">
+              <div class="letter_title">M</div>
+              <div class="index_line" index_id="13">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines N">
+              <div class="letter_title">N</div>
+              <div class="index_line" index_id="14">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines O">
+              <div class="letter_title">O</div>
+              <div class="index_line" index_id="15">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines P">
+              <div class="letter_title">P</div>
+              <div class="index_line" index_id="16">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines Q">
+              <div class="letter_title">Q</div>
+              <div class="index_line" index_id="17">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines R">
+              <div class="letter_title">R</div>
+              <div class="index_line" index_id="18">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines S">
+              <div class="letter_title">S</div>
+              <div class="index_line" index_id="19">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines T">
+              <div class="letter_title">T</div>
+              <div class="index_line" index_id="20">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines U">
+              <div class="letter_title">U</div>
+              <div class="index_line" index_id="21">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines V">
+              <div class="letter_title">V</div>
+              <div class="index_line" index_id="22">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines W">
+              <div class="letter_title">W</div>
+              <div class="index_line" index_id="23">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines X">
+              <div class="letter_title">X</div>
+              <div class="index_line" index_id="24">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines Y">
+              <div class="letter_title">Y</div>
+              <div class="index_line" index_id="25">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <div class="index_lines Z">
+              <div class="letter_title">Z</div>
+              <div class="index_line" index_id="26">
+                <div class="index_name">乙肝病毒表面抗原</div>
+                <div class="index_category">两对半</div>
+                <div class="icon"></div>
+                <div style="clear:both"></div>
+              </div>
+            </div>
+            <!-- end: index_lines: [A-Z] -->
+            {% endcomment %}{# vim: }}} #}
+
+          </div> <!-- end: index_letter_container -->
+        </div> <!-- end: all_condition -->
+        
+        <!-- 搜索后左边的展示 -->
+        <!-- 若url的参数tab 不等于 all，或者 url的参数 kw 不为空，则把该div的 display设置为block；不然，则设为none -->
+        <div class="search_condition" style="display: none;">
+          <div class="index_title_container">
+            <div class="index_title">搜索指标</div>
+            <div class="example_sheet">仿真化验单</div>
+            <div style="clear:both;"></div>
+          </div>
+          <div class="index_lines left">
+            <!-- 如若kw参数为空，且tab不等于all（即点击指标类型后的页面），则把 <div class="index_category">XXXX</div> 隐藏掉即可 -->
+            <div class="index_line" index_id="1">
+              <div class="index_name">乙肝病毒表面抗原</div>
+              <div class="index_category">两对半</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="2">
+              <div class="index_name">乙肝病毒S蛋白定量</div>
+              <div class="index_category">血常规</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="3">
+              <div class="index_name">乙肝病毒表面抗体</div>
+              <div class="index_category">血常规</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="4">
+              <div class="index_name">乙肝病毒e抗原</div>
+              <div class="index_category">两对半</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="5">
+              <div class="index_name">乙肝病毒e抗体</div>
+              <div class="index_category">两对半</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="6">
+              <div class="index_name">乙肝病毒核心抗体IaM</div>
+              <div class="index_category">两对半</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+            <div class="index_line" index_id="7">
+              <div class="index_name">乙肝病毒核算定量（PCR）</div>
+              <div class="index_category">血常规</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="add_concerned_icon"></div>
+      <div class="index_container">
+        <div class="index_title_container">
+          <div class="index_title">已关注指标</div>
+          <div class="index_btn">
+            <form id="index_form" method="post" action="">
+              {% csrf_token %}
+              <input type="button" id="submitIndexBtn" value="提交" />
+              <input type="hidden" id="commit_index" name="commit_index" value="" />
+            </form>
+          </div>
+          <div style="clear:both;"></div>
+        </div>
+        <div class="index_lines right">
+          <!-- followed indicators for logged in user -->
+          {% for fi in followed_indicators %}
+            <div class="index_line" index_id="{{ fi|dict_get:"id" }}">
+              <div class="index_name">{{ fi|dict_get:"name" }}</div>
+              <div class="icon"></div>
+              <div style="clear:both"></div>
+            </div>
+          {% endfor %}
+
+          {% comment %}{# vim: {{{ #}
+          <div class="index_line" index_id="1">
+            <div class="index_name">V-谷丙氨酰转氨酶</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="2">
+            <div class="index_name">总胆红素</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="3">
+            <div class="index_name">乙肝病毒表面抗原</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="4">
+            <div class="index_name">乙肝病毒表面抗体</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="5">
+            <div class="index_name">乙肝病毒e抗体</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="6">
+            <div class="index_name">乙肝病毒核算定量（PCR）</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="7">
+            <div class="index_name">乙肝病毒基因型C型</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          <div class="index_line" index_id="8">
+            <div class="index_name">乙肝病毒型混合型</div>
+            <div class="icon"></div>
+            <div style="clear:both"></div>
+          </div>
+          {% endcomment %}{# vim: }}} #}
+        </div> <!-- end: index_lines right -->
+
+      </div>
+      <div style="clear:both;"></div>
+    </div>
+  </div>
 {% endblock page %}
 
 {# vim: set ts=2 sw=2 tw=0 fenc=utf-8 ft=htmldjango.html: #}
diff --git a/97suifangqa/apps/indicator/templates/indicator/test.html b/97suifangqa/apps/indicator/templates/indicator/test.html
new file mode 100644
index 0000000..65340b9
--- /dev/null
+++ b/97suifangqa/apps/indicator/templates/indicator/test.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+{% load dict_get %}
+<html>
+<head>
+  <title>Test</title>
+</head>
+<body>
+  <h3>ul 1</h3>
+  <ul>
+  {% for l in all_letters %}
+    {% with indicators=all_indicators|dict_get:l %}
+      {% if indicators|length >= 1 %}
+        <li>{{ l }}</li>
+        <ul>
+        {% for i in indicators %}
+          <li>id: {{ i|dict_get:"id" }}; name: {{ i|dict_get:"name" }}</li>
+        {% endfor %}
+        </ul>
+      {% endif %}
+    {% endwith %}
+  {% endfor %}
+  </ul>
+
+  <h3>ul 2</h3>
+  <ul>
+  {% for fi in followed_indicators %}
+    <li>id: {{ fi|dict_get:"id" }}; name: {{ fi|dict_get:"name" }}</li>
+  {% endfor %}
+  </ul>
+</body>
+</html>
+
+<!-- vim: set ts=8 sw=2 tw=0 fenc= ft=htmldjango.html: -->
diff --git a/97suifangqa/apps/indicator/templatetags/__init__.py b/97suifangqa/apps/indicator/templatetags/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/97suifangqa/apps/indicator/templatetags/__init__.py
diff --git a/97suifangqa/apps/indicator/templatetags/dict_get.py b/97suifangqa/apps/indicator/templatetags/dict_get.py
new file mode 100644
index 0000000..49de3cd
--- /dev/null
+++ b/97suifangqa/apps/indicator/templatetags/dict_get.py
@@ -0,0 +1,14 @@
+# -*- coding: utf-8 -*-
+
+from django import template
+
+register = template.Library()
+
+@register.filter
+def dict_get(dict, key):
+    """
+    filter to get the value of key in the dict:
+    return dict[key]
+    """
+    return dict.get(key)
+
diff --git a/97suifangqa/apps/indicator/urls.py b/97suifangqa/apps/indicator/urls.py
index 0a9532b..5818616 100644
--- a/97suifangqa/apps/indicator/urls.py
+++ b/97suifangqa/apps/indicator/urls.py
@@ -38,35 +38,35 @@ urlpatterns = patterns('indicator.views',
 )
 
 ## UI pages
-urlpatterns += patterns('',
+urlpatterns += patterns('indicator.views',
     # indicator_index
     url(r'^$',
-        direct_to_template, {'template': 'indicator/index.html'},
+        'indicator_index',
         name='indicator_index'),
     # indicator_sidebar
     url(r'^sidebar/$',
-        direct_to_template, {'template': 'indicator/SideBar.html'},
+        'indicator_sidebar',
         name='indicator_sidebar'),
     # indicator_status, 指标状态
     url(r'^status/$',
-        direct_to_template, {'template': 'indicator/SheetDefault.html'},
+        'indicator_status',
         name='indicator_status'),
     # follow_indicator, 关注指标
     url(r'^follow/$',
-        direct_to_template, {'template': 'indicator/NewDeleteIndex.html'},
+        'follow_indicator',
         name='follow_indicator'),
     ## indicator: popup
     # DeleteCardTip
     url(r'^popup/deletecardtip/$',
-        direct_to_template, {'template': 'indicator/popup/DeleteCardTip.html'},
+        'indicator_deletecardtip',
         name='indicator_deletecardtip'),
     # EditHistoryData
     url(r'^popup/edithistorydata/$',
-        direct_to_template, {'template': 'indicator/popup/EditHistoryData.html'},
+        'indicator_edithistorydata',
         name='indicator_edithistorydata'),
     # IndexDesc
     url(r'^popup/indexdesc/$',
-        direct_to_template, {'template': 'indicator/popup/IndexDesc.html'},
+        'indicator_indexdesc',
         name='indicator_indexdesc'),
 )
 
diff --git a/97suifangqa/apps/indicator/views.py b/97suifangqa/apps/indicator/views.py
index 73e1189..8f2cf88 100644
--- a/97suifangqa/apps/indicator/views.py
+++ b/97suifangqa/apps/indicator/views.py
@@ -7,9 +7,7 @@ apps/indicator views
 
 from django.contrib.auth.decorators import login_required
 from django.http import HttpResponse, HttpResponseRedirect, HttpResponseForbidden, Http404
-from django.shortcuts import render_to_response, get_object_or_404
-# json
-from django.utils import simplejson as json
+from django.shortcuts import render, get_object_or_404
 # CRSF
 from django.template import RequestContext
 
@@ -20,6 +18,14 @@ from indicator.tools import *
 import re
 import datetime
 
+## json
+# Django 1.5 deprecates 'django.utils.simplejson'
+# in favor of Python 2.6's bulti-in 'json' module
+try:
+    import json
+except ImportError:
+    from django.utils import simplejson as json
+
 
 
 def get_indicator_view(request, **kwargs):
@@ -146,11 +152,11 @@ def add_edit_category(request, category_id=None, template='indicator/simple.html
         # form with data of the specified instance
         form = IndicatorCategoryForm(instance=category)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'IndicatorCategory',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 # }}}
 
 
@@ -187,11 +193,11 @@ def add_edit_indicator(request, indicator_id=None, template='indicator/simple.ht
         # form with instance
         form = IndicatorForm(instance=indicator)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'Indicator',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 # }}}
 
 
@@ -226,11 +232,11 @@ def add_edit_unit(request, unit_id=None, template='indicator/simple.html'):
         # form with instance
         form = UnitForm(instance=unit)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'Unit',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 # }}}
 
 
@@ -266,11 +272,11 @@ def add_edit_confine(request, confine_id=None, template='indicator/simple.html')
         # form with instance
         form = InnateConfineForm(instance=confine)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'InnateConfine',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 # }}}
 
 
@@ -318,11 +324,11 @@ def add_edit_record(request, record_id=None, template='indicator/simple.html'):
         # form with instance
         form = IndicatorRecordForm(instance=record)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'IndicatorRecord',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 # }}}
 
 
@@ -366,11 +372,11 @@ def modify_record(request, record_id=None, template='indicator/simple.html'):
         # form with instance
         form = IndicatorRecordForm(instance=record)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'IndicatorRecord',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
 ## }}}
 
 
@@ -401,16 +407,128 @@ def add_recordhistory(request, record_id, template='indicator/simple.html'):
         # form with instance
         form = RecordHistoryForm(instance=recordhistory)
 
-    return render_to_response(template, {
+    return render(request, template, {
         'object': 'RecordHistory',
         'action': action,
         'form': form,
-    }, context_instance=RequestContext(request))
+    })
+# }}}
+
+
+###########################################################
+###### indicator UI pages ######
+# indicator/index.html {{{
+@login_required
+def indicator_index(request):
+    """
+    index page for indicator
+    """
+    template = 'indicator/index.html'
+    return render(request, template)
+# }}}
+
+
+# indicator/SideBar.html {{{
+@login_required
+def indicator_sidebar(request):
+    """
+    sidebar page for indicator
+    """
+    template = 'indicator/SideBar.html'
+    return render(request, template)
+# }}}
+
+
+# indicator/SheetDefault.html {{{
+@login_required
+def indicator_status(request):
+    """
+    status page for indicator
+    add/edit/view indicator data
+    """
+    template = 'indicator/SheetDefault.html'
+    return render(request, template)
+# }}}
+
+
+# indicator/NewDeleteIndex.html {{{
+@login_required
+def follow_indicator(request):
+    """
+    follow/unfollow indicator
+    """
+    template = 'indicator/NewDeleteIndex.html'
+    letters = map(chr, range(ord('a'), ord('z')+1))
+
+    # get 7 categories (page can only contains 1+7 categories)
+    categories = im.IndicatorCategory.objects.all().\
+            order_by('id')[:7]
+    # get indicators, P[inyin] dict format
+    indicators_pdict = get_indicator()
+    # get followed indicator, P[inyin] dict format
+    followed_indicators_pdict = get_followed_indicator(request.user.id)
+    # convert to list
+    followed_indicators = []
+    for l in letters:
+        followed_indicators += followed_indicators_pdict[l]
+
+    # selected category, default "all"
+    if request.GET.get('tab'):
+        selected_catid = request.GET.get('tab')
+        if selected_catid != "all":
+            selected_catid = int(selected_catid)
+    else:
+        selected_catid = "all"
+
+    data = {
+        'categories': categories,
+        'selected_catid': selected_catid,
+        'letters': letters,
+        'indicators_pdict': indicators_pdict,
+        'followed_indicators': followed_indicators,
+    }
+
+    return render(request, template, data)
+# }}}
+
+
+## popup pages
+# indicator/popup/DeleteCardTip.html {{{
+@login_required
+def indicator_deletecardtip(request):
+    """
+    prompted tip for deleting a card
+    """
+    template = 'indicator/popup/DeleteCardTip.html'
+    return render_to_response(template)
+# }}}
+
+
+# indicator/popup/EditHistoryData.html {{{
+@login_required
+def indicator_edithistorydata(request):
+    """
+    popup page to edit history data for an indicator
+    """
+    template = 'indicator/popup/EditHistoryData.html'
+    return render_to_response(template)
+# }}}
+
+
+# indicator/popup/IndexDesc.html {{{
+@login_required
+def indicator_indexdesc(request):
+    """
+    description for an indicator
+    """
+    template = 'indicator/popup/IndexDesc.html'
+    return render_to_response(template)
 # }}}
 
 
 ###########################################################
 ###### ajax ######
+@login_required
 def ajax_act_index(request):
     """
     index action (add/minus)
@@ -442,6 +560,7 @@ def ajax_close_sub_title(request):
     return HttpResponse(result)
 
 
+@login_required
 def ajax_edit_history_data(request):
     """
     edit history data
@@ -455,6 +574,7 @@ def ajax_edit_history_data(request):
     return HttpResponse(result)
 
 
+@login_required
 def ajax_get_card_data_chart(request):
     """
     'indicator/static/javascripts/load_card.js'
@@ -479,6 +599,7 @@ def ajax_get_card_data_chart(request):
             mimetype='application/json')
 
 
+@login_required
 def ajax_get_card_data_table(request):
     """
     get card data
@@ -513,7 +634,23 @@ def ajax_get_card_data_table(request):
 
 ### test_view ###
 def test_view(request, **kwargs):
-    html = '<html><body>%s</body></html>' % u"正文测试内容"
-    text = u"中文测试"
-    return HttpResponse("%s" % request)
+    """
+    test view
+    'indicator/templates/indicator/test.html'
+    """
+    template = 'indicator/test.html'
+    all_letters = map(chr, range(ord('a'), ord('z')+1))
+    all_indicators = get_indicator()
+    followed_indicators_pdict = get_followed_indicator(request.user.id)
+    # convert to list
+    followed_indicators = []
+    for l in letters:
+        followed_indicators += followed_indicators_pdict[l]
+
+    data = {
+        'all_letters': all_letters,
+        'all_indicators': all_indicators,
+        'followed_indicators': followed_indicators,
+    }
+    return render(request, template, data)
 
diff --git a/97suifangqa/isuifangqa.db b/97suifangqa/isuifangqa.db
index 2de1756..85205ae 100644
--- a/97suifangqa/isuifangqa.db
+++ b/97suifangqa/isuifangqa.db