<%inherit file="base.html"/>

<%def name="head()">
<script src="/static/js/bootstrap-datepicker.js"></script>
<script src="/static/js/highcharts.js"></script>
<script src="/static/js/charttheme.js"></script>
<script src="/static/js/exporting.js"></script>
<link rel="stylesheet" href="/static/js/datepicker.css"> 
<script>
//页面初始化

var online_options = {
    credits : {enabled:false},
    chart: {type: 'areaspline',renderTo: 'online-chart'},
    title: {text: '在线用户统计'},
    subtitle: {text: '${"%s 00:00:00 -- %s 23:59:59"%(currdate(),currdate())}'},
    xAxis: {type: 'datetime',tickInterval : 3600*1000},
    yAxis: {
        title: {text: '在线数'},
        labels: {formatter: function() {return this.value + '人';}}            
    },
    tooltip: {shared: true},
    legend: {enabled: false},    
    plotOptions: {areaspline: {
        stacking: 'normal',
        marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},
        fillOpacity: 0.4
    }},            
    series: [{}]
};

$(document).ready(function (){
    Highcharts.setOptions({global: {useUTC: false}});
    $("#day_code").datepicker();   
});

function doQuery()
{
    $.post("/ops/online/statdata", {day_code:$("#day_code").val()} , function (ev) {
        if (ev.code == 0) {
            online_options.series = ev.data;
            var chart = new Highcharts.Chart(online_options);
        }
    }, "json");
}


</script>
</%def>

<%def name="body()">
<div class="panel panel-default">
    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> 在线用户统计</div>
    <div class="panel-body">
        <form id="query_form" class="form-horizontal form-well" role="form" action="/ops/user" method="post">
            <div class="form-group">
                <label for="node_id" class="col-md-2 control-label">区域</label>
                <div class="col-md-3">
                    <select id="node_id" name="node_id" class="form-control" >
                        <option value=""></option>
                        % for node in node_list:
                          <option value="${node.id}" ${str(node.id)==node_id and "selected" or ""}>${node.node_desc}</option>
                        % endfor
                    </select>
                </div>            
                <label for="day_code" class="col-md-2 control-label">日期</label>
                <div class="col-md-3">
                    <input type="text" id="day_code" name="day_code" class="form-control" value="${day_code}">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-5 col-md-7">
                     <button type="button" class="btn btn-primary" onclick="doQuery();">查询</button>
                </div>
            </div>
        </form>

        <div class="container center"  id="online-chart" >
        </div>
    </div>
</div>


</%def>