* updated 'apps/indicator/templates/indicator/' pages,

  extends "base.html", make use of the django template system
* added 'static_url', 'indicator_url' js variables
* implemented the AJAX function for 'apps/indicator/templates/' pages

TODO:
* finish 'indicator.views': get_card_data_chart(), get_card_data_table()
* link the front pages with the django models, forms and search!

1 files changed, 302 insertions, 300 deletions

diff --git a/97suifangqa/apps/indicator/static/javascripts/load_card.js b/97suifangqa/apps/indicator/static/javascripts/load_card.js
index bea4f29..4db48a4 100644
--- a/97suifangqa/apps/indicator/static/javascripts/load_card.js
+++ b/97suifangqa/apps/indicator/static/javascripts/load_card.js
@@ -1,300 +1,302 @@
-var detail_chart;

-$(document).ready(function(){

-	var startDate = '2013-07-13';

-	startDate = new Date(startDate.replace(/-/g,"/"));

-	var start_date_UTC_time = startDate.getTime() - startDate.getTimezoneOffset() * 60 * 1000;

-	var chart3 = new Highcharts.Chart({

-		chart: {

-			renderTo: 'chart_3',

-			type: 'area',

-			marginLeft: 15,

-    		height: 223,

-    		spacingTop: 10,

-    		spacingBottom: 0,

-    		overflow: false,

-    		zIndex: 5

-		},

-		credits: {

-			enabled: false

-		},

-		title: {

-			text: ' '

-		},

-		colors: ['#31B6AD'],

-		xAxis: {

-			type: 'datetime',

-			dateTimeLabelFormats: {

-				day: '%e/%m'  

-			},

-			lineColor: '#CECECE',

-        	gridLineColor: '#EFECEF',

-        	gridLineWidth: 1,

-        	tickWidth: 0,

-			labels:{

-				step: 2,

-				maxStaggerLines: 1

-			},

-			tickInterval: (4 * 24 * 3600 * 1000),

-			tickColor: '#FFFFFF'

-		},

-		yAxis: {

-			title: {

-            	text: ''

-          	},

-          	allowDecimals: false,

-          	endOnTick: false,

-          	tickInterval: 1,

-          	lineColor: '#CECECE',

-          	lineWidth: 2,

-          	gridLineColor: '#EFECEF',

-          	gridLineWidth: 1,

-          	minPadding: 0.3,

-          	maxPadding: 1.2

-		},

-		legend: {

-			enabled: false

-		},

-		tooltip: {

-			formatter: function() {

-				return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';

-			},

-//			positioner: function (boxWidth, boxHeight, point) {

-//            	return { x: point.plotX+80, y: point.plotY-20 };

-//            },

-			style: {

-				padding: '7px'

-			},

-			borderColor: '#EAEAEA'

-		},

-		plotOptions: {

-			series: {

-				marker: {

-					enabled: true, //false false的时候就不会突出显示点 

-					lineColor: '#31B6AD',  

-					lineWidth: 1,

-					radius: 3,  // 点的大小  

-					fillColor: '#FFFFFF' // 设置点中间填充的颜色 

-				},

-				fillOpacity: 0.12,

-                lineWidth: 1,

-                threshold: null,

-                shadow: false

-			}

-		},

-		series: [{

-			data: [6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5],

-			pointStart: start_date_UTC_time,

-            pointInterval:1 * 24 * 3600 * 1000

-		}]

-	});

-	

-	detail_chart = new Highcharts.Chart({

-		chart: {

-			renderTo: 'detail_chart',

-			type: 'area',

-			marginLeft: 25,

-			width: 562,

-    		height: 303,

-    		spacingTop: 10,

-    		spacingBottom: 0,

-    		overflow: false,

-    		zIndex: 5

-		},

-		credits: {

-			enabled: false

-		},

-		title: {

-			text: ' '

-		},

-		colors: ['#31B6AD'],

-		xAxis: {

-			type: 'datetime',

-			dateTimeLabelFormats: {

-				day: '%e/%m'  

-			},

-			lineColor: '#CECECE',

-        	gridLineColor: '#EFECEF',

-        	gridLineWidth: 1,

-        	tickWidth: 0,

-			labels:{

-				step: 2

-			},

-			tickInterval: (2 * 24 * 3600 * 1000),

-			tickColor: '#FFFFFF'

-		},

-		yAxis: {

-			title: {

-            	text: ''

-          	},

-          	allowDecimals: true,

-          	endOnTick: false,

-          	tickInterval: 0.5,

-          	lineColor: '#CECECE',

-          	lineWidth: 2,

-          	gridLineColor: '#EFECEF',

-          	gridLineWidth: 1,

-          	minPadding: 0.3,

-          	maxPadding: 1.2,

-          	labels: {

-          		formatter: function() {

-          			var originYValue = this.value+'';

-          			if (originYValue.length == 1){

-          				originYValue += '.0';

-          			}

-	                return originYValue;

-	            }

-          	}

-		},

-		legend: {

-			enabled: false

-		},

-		tooltip: {

-			formatter: function() {

-				return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';

-			},

-//			positioner: function (boxWidth, boxHeight, point) {

-//          	return { x: point.plotX+80, y: point.plotY-20 };

-//          },

-			style: {

-				padding: '7px'

-			},

-			borderColor: '#EAEAEA'

-		},

-		plotOptions: {

-			series: {

-				marker: {

-					enabled: true, //false false的时候就不会突出显示点 

-					lineColor: '#31B6AD',  

-					lineWidth: 1,

-					radius: 3,  // 点的大小  

-					fillColor: '#FFFFFF', // 设置点中间填充的颜色

-					symbol: 'circle'

-				},

-				fillOpacity: 0.12,

-                lineWidth: 1,

-                threshold: null,

-                shadow: false,

-                point: {

-	                events: {

-						click: function() {

-							alert(this.x);

-							alert(this.y);

-							TB_show(false, '../pages/popup/EditHistoryData.html?TB_iframe=true&no1_title&transfer_params&height=351&width=630&card_id=3', false);

-						}

-					}

-				}

-			}

-		},

-		series: []

-	});

-	

-	//详细历史记录

-	$(".detail_history").bind("click", function(){

-		card_detail_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');

-		var startDateLog = '2013-08-04';

-		var endDateLog = '2013-08-10';

-		var date = new Date();

-		var time = date.getTime();

-		redraw_chart(detail_chart, startDateLog, endDateLog);

-		$(".act_card_container").addClass("move_div_2_left");

-		return false;

-	});

-	

-	//切换日期

-	$(".shift_week").bind("click", function(){

-		$(".shift_week").addClass("unselected");

-		$(this).removeClass("unselected");

-		var startDateLog = $(this).attr("start_date");

-		var endDateLog = $(this).attr("end_date");

-		redraw_chart(detail_chart, startDateLog, endDateLog);

-		return false;

-	});

-	

-	//根据日期搜索

-	$("#search_start_date, #search_end_date").bind("change", function(){

-		var startDateLog = $("#search_start_date").val();

-		var endDateLog = $("#search_end_date").val();

-		redraw_chart(detail_chart, startDateLog, endDateLog);

-		return false;

-	});

-	

-	//浏览更多

-	$(".see_more_btn").bind("click", function(){

-		var btn = $(".see_more_btn");

-		var end = "2013-08-10";

-		get_card_data_table(null, end, false);

-		return false;

-	});

-	

-	//收起历史记录

-	$(".collapse_btn").bind("click", function(){

-		//删除图表数据

-		var serieses = detail_chart.series;

-        for (series_key in serieses){

-        	serieses[series_key].remove();

-        }

-        //删除表格数据

-        $("tr").not(".first_line").remove();

-        //隐藏div

-        $(".detail_card_info").hide();

-        //初始化详细卡片id

-        card_detail_id = 0;

-        //添加删除div位置初始化

-        $(".act_card_container").removeClass("move_div_2_left");

-        return false;

-	});

-});

-

-//重画历史记录图表

-function redraw_chart(detail_chart, start, end){

-	var date = new Date();

-	var time = date.getTime();

-	$.ajax({

-		type: 'get',

-		url: '../ajax/getCardDataChart',

-		data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,

-		dataType: 'json',

-		success: function(dataJson){  //每一天都要有数据，否则x轴刻度时间对不上

-			var startDateLogFormat = new Date(start.replace(/-/g,"/"));

-			var start_date_log_UTC_time = startDateLogFormat.getTime() - startDateLogFormat.getTimezoneOffset() * 60 * 1000;

-			var pointStart = start_date_log_UTC_time;

-	        var pointInterval = 1 * 24 * 3600 * 1000;

-	        

-	        //设置默认起始结束时间

-	        $("#search_start_date").datepicker( "setDate", start);

-	        $("#search_end_date").datepicker( "setDate", end);

-	        

-	        //删除chart已有数据

-	        var serieses = detail_chart.series;

-	        for (series_key in serieses){

-	        	serieses[series_key].remove();

-	        }

-	        //更新chart数据

-	        detail_chart.addSeries({

-		        data: dataJson,

-		        pointStart: start_date_log_UTC_time,

-		        pointInterval: pointInterval

-		    });

-	        //更新table数据

-	        get_card_data_table(start, end, true);

-	        //显示

-			$(".detail_card_info").show();

-		}

-	});

-}

-

-function get_card_data_table(start, end, redraw){

-	var date = new Date();

-	var time = date.getTime();

-	$.ajax({

-		type: 'get',

-		url: '../ajax/getCardDataTable',

-		data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,

-		success: function(data){

-			if(redraw){

-				$("tr").not(".first_line").remove();

-			}

-			$("table").append(data);

-		}

-	});

-}
\ No newline at end of file
+var detail_chart;
+$(document).ready(function(){
+    var startDate = '2013-07-13';
+    startDate = new Date(startDate.replace(/-/g,"/"));
+    var start_date_UTC_time = startDate.getTime() - startDate.getTimezoneOffset() * 60 * 1000;
+    var chart3 = new Highcharts.Chart({
+        chart: {
+            renderTo: 'chart_3',
+            type: 'area',
+            marginLeft: 15,
+            height: 223,
+            spacingTop: 10,
+            spacingBottom: 0,
+            overflow: false,
+            zIndex: 5
+        },
+        credits: {
+            enabled: false
+        },
+        title: {
+            text: ' '
+        },
+        colors: ['#31B6AD'],
+        xAxis: {
+            type: 'datetime',
+            dateTimeLabelFormats: {
+                day: '%e/%m'
+            },
+            lineColor: '#CECECE',
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            tickWidth: 0,
+            labels:{
+                step: 2,
+                maxStaggerLines: 1
+            },
+            tickInterval: (4 * 24 * 3600 * 1000),
+            tickColor: '#FFFFFF'
+        },
+        yAxis: {
+            title: {
+                text: ''
+            },
+            allowDecimals: false,
+            endOnTick: false,
+            tickInterval: 1,
+            lineColor: '#CECECE',
+            lineWidth: 2,
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            minPadding: 0.3,
+            maxPadding: 1.2
+        },
+        legend: {
+            enabled: false
+        },
+        tooltip: {
+            formatter: function() {
+                return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
+            },
+            // positioner: function (boxWidth, boxHeight, point) {
+            //     return { x: point.plotX+80, y: point.plotY-20 };
+            // },
+            style: {
+                padding: '7px'
+            },
+            borderColor: '#EAEAEA'
+        },
+        plotOptions: {
+            series: {
+                marker: {
+                    enabled: true, //false false的时候就不会突出显示点
+                    lineColor: '#31B6AD',
+                    lineWidth: 1,
+                    radius: 3,  // 点的大小
+                    fillColor: '#FFFFFF' // 设置点中间填充的颜色
+                },
+                fillOpacity: 0.12,
+                lineWidth: 1,
+                threshold: null,
+                shadow: false
+            }
+        },
+        series: [{
+            data: [6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5],
+            pointStart: start_date_UTC_time,
+            pointInterval:1 * 24 * 3600 * 1000
+        }]
+    });
+
+    detail_chart = new Highcharts.Chart({
+        chart: {
+            renderTo: 'detail_chart',
+            type: 'area',
+            marginLeft: 25,
+            width: 562,
+            height: 303,
+            spacingTop: 10,
+            spacingBottom: 0,
+            overflow: false,
+            zIndex: 5
+        },
+        credits: {
+            enabled: false
+        },
+        title: {
+            text: ' '
+        },
+        colors: ['#31B6AD'],
+        xAxis: {
+            type: 'datetime',
+            dateTimeLabelFormats: {
+                day: '%e/%m'  
+            },
+            lineColor: '#CECECE',
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            tickWidth: 0,
+            labels:{
+                step: 2
+            },
+            tickInterval: (2 * 24 * 3600 * 1000),
+            tickColor: '#FFFFFF'
+        },
+        yAxis: {
+            title: {
+                text: ''
+            },
+            allowDecimals: true,
+            endOnTick: false,
+            tickInterval: 0.5,
+            lineColor: '#CECECE',
+            lineWidth: 2,
+            gridLineColor: '#EFECEF',
+            gridLineWidth: 1,
+            minPadding: 0.3,
+            maxPadding: 1.2,
+            labels: {
+                formatter: function() {
+                    var originYValue = this.value+'';
+                    if (originYValue.length == 1){
+                        originYValue += '.0';
+                    }
+                    return originYValue;
+                }
+            }
+        },
+        legend: {
+            enabled: false
+        },
+        tooltip: {
+            formatter: function() {
+                return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
+            },
+            // positioner: function (boxWidth, boxHeight, point) {
+            //     return { x: point.plotX+80, y: point.plotY-20 };
+            // },
+            style: {
+                padding: '7px'
+            },
+            borderColor: '#EAEAEA'
+        },
+        plotOptions: {
+            series: {
+                marker: {
+                    enabled: true, //false false的时候就不会突出显示点 
+                    lineColor: '#31B6AD',  
+                    lineWidth: 1,
+                    radius: 3,  // 点的大小  
+                    fillColor: '#FFFFFF', // 设置点中间填充的颜色
+                    symbol: 'circle'
+                },
+                fillOpacity: 0.12,
+                lineWidth: 1,
+                threshold: null,
+                shadow: false,
+                point: {
+                    events: {
+                        click: function() {
+                            alert(this.x);
+                            alert(this.y);
+                            TB_show(false, indicator_url + 'popup/edithistorydata?TB_iframe=true&no1_title&transfer_params&height=351&width=630&card_id=3', false);
+                        }
+                    }
+                }
+            }
+        },
+        series: []
+    });
+
+    //详细历史记录
+    $(".detail_history").bind("click", function(){
+        card_detail_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
+        var startDateLog = '2013-08-04';
+        var endDateLog = '2013-08-10';
+        var date = new Date();
+        var time = date.getTime();
+        redraw_chart(detail_chart, startDateLog, endDateLog);
+        $(".act_card_container").addClass("move_div_2_left");
+        return false;
+    });
+
+    //切换日期
+    $(".shift_week").bind("click", function(){
+        $(".shift_week").addClass("unselected");
+        $(this).removeClass("unselected");
+        var startDateLog = $(this).attr("start_date");
+        var endDateLog = $(this).attr("end_date");
+        redraw_chart(detail_chart, startDateLog, endDateLog);
+        return false;
+    });
+
+    //根据日期搜索
+    $("#search_start_date, #search_end_date").bind("change", function(){
+        var startDateLog = $("#search_start_date").val();
+        var endDateLog = $("#search_end_date").val();
+        redraw_chart(detail_chart, startDateLog, endDateLog);
+        return false;
+    });
+
+    //浏览更多
+    $(".see_more_btn").bind("click", function(){
+        var btn = $(".see_more_btn");
+        var end = "2013-08-10";
+        get_card_data_table(null, end, false);
+        return false;
+    });
+
+    //收起历史记录
+    $(".collapse_btn").bind("click", function(){
+        //删除图表数据
+        var serieses = detail_chart.series;
+        for (series_key in serieses){
+            serieses[series_key].remove();
+        }
+        //删除表格数据
+        $("tr").not(".first_line").remove();
+        //隐藏div
+        $(".detail_card_info").hide();
+        //初始化详细卡片id
+        card_detail_id = 0;
+        //添加删除div位置初始化
+        $(".act_card_container").removeClass("move_div_2_left");
+        return false;
+    });
+});
+
+//重画历史记录图表
+function redraw_chart(detail_chart, start, end){
+    var date = new Date();
+    var time = date.getTime();
+    $.ajax({
+        type: 'get',
+        url: indicator_url + 'ajax/get_card_data_chart',
+        data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
+        dataType: 'json',
+        success: function(dataJson) {  //每一天都要有数据，否则x轴刻度时间对不上
+            var startDateLogFormat = new Date(start.replace(/-/g,"/"));
+            var start_date_log_UTC_time = startDateLogFormat.getTime() - startDateLogFormat.getTimezoneOffset() * 60 * 1000;
+            var pointStart = start_date_log_UTC_time;
+            var pointInterval = 1 * 24 * 3600 * 1000;
+
+            //设置默认起始结束时间
+            $("#search_start_date").datepicker( "setDate", start);
+            $("#search_end_date").datepicker( "setDate", end);
+
+            //删除chart已有数据
+            var serieses = detail_chart.series;
+            for (series_key in serieses){
+                serieses[series_key].remove();
+            }
+            //更新chart数据
+            detail_chart.addSeries({
+                data: dataJson,
+                pointStart: start_date_log_UTC_time,
+                pointInterval: pointInterval
+            });
+            //更新table数据
+            get_card_data_table(start, end, true);
+            //显示
+            $(".detail_card_info").show();
+        }
+    });
+}
+
+function get_card_data_table(start, end, redraw){
+    var date = new Date();
+    var time = date.getTime();
+    $.ajax({
+        type: 'get',
+        url: indicator_url + 'ajax/get_card_data_table',
+        data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
+        success: function(data){
+            if(redraw){
+                $("tr").not(".first_line").remove();
+            }
+            $("table").append(data);
+        }
+    });
+}
+
+// vim: set ts=8 sw=4 tw=0 fenc=utf-8 ft=javascript: //