<style type="text/css">
<%
local dsp = require "luci.dispatcher"
-%>

#display{
    display: flex;
}

table.imagetable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
<!--
table.imagetable th {
    background:#f5f5f5
    border-width: 0px;
    padding: 5px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {
    background:#ffffffff
    border-width: 0px;
    padding: 5px;
    border-style: solid;
    border-color: #999999;
}-->
</style>



<script type="text/javascript" src="<%=resource%>/echarts.min.js"></script>

<script type="text/javascript">//<![CDATA[
    window.onload =function(){
        
    }
    var app_class_data;
    var app_time_data;
    var mac='<%=self.mac%>';
    function get_display_time(total_time){
        var hour=parseInt(total_time / 3600);
        var seconds=total_time % 3600;
        var min=parseInt(seconds / 60)
        var seconds2=seconds % 60;
        var total_time_str;

        if (hour > 0)
            total_time_str=hour + "<%:h%>" + min + "<%:m%>"
        else{
            if (min == 0 && seconds2 != 0)
                min = 1;
            total_time_str=min + "<%:m%>"
        }
        return total_time_str;
    }

    function display_app_visit_view(data){
        var myChart = echarts.init(document.getElementById('main2'));
        var dev_array=new Array();
        var m2R2Data=new Array()
        var total_time=0
        for(var i = 0; i < data.length; i++){
            var dev_obj = data[i];
            var m2_obj={};
            m2_obj.value=dev_obj.visit_time;
            m2_obj.legendname=dev_obj.app_id;

            var tmp_time = get_display_time(dev_obj.visit_time);

            m2_obj.name=dev_obj.app_id + "  " + tmp_time;
            total_time+=dev_obj.visit_time
            m2R2Data.push(m2_obj);
        }
        
        var total_time_str = get_display_time(total_time);
        option = {
        title: [
        {
            text: "<%:App Time Statistics%>",
            textStyle: {
                fontSize: 16,
                color: "black"
            },
            left: "2%"
        },    
        {
            text: '',
            subtext: total_time_str,
            textStyle:{
                fontSize:15,
                color:"black"
            },
            subtextStyle: {
                fontSize: 15,
                color: 'black'
            },
            textAlign:"center",
            x: '34.5%',
            y: '44%',
        }],
        tooltip: {
            trigger: 'item',
            formatter:function (parms){
                var total_time = get_display_time(parms.data.value);
                var str=  parms.seriesName+"</br>"+
                parms.marker+""+parms.data.legendname+"</br>"+
                "<%:Visit Time%>: "+ total_time+"</br>"+
                "<%:Percentage%>: "+ parms.percent+"%";
                return  str ;
            }
        },
        legend: {
            type:"scroll",
            orient: 'vertical',
            left:'70%',
            align:'left',
            top:'middle',
            textStyle: {
                color:'#8C8C8C'
            },
            height:250
        },
        series: [
            {
                name: "<%:Visit Time%>",
                type:'pie',
                center: ['35%', '50%'],
                radius: ['40%', '65%'],
                    clockwise: false,
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'outter',
                            formatter:function (parms){
                                return parms.data.legendname
                            }
                    }
                },
                labelLine: {
                    normal: {
                        length:8,
                        length2:7,
                        smooth:true,
                    }
                },
                data:m2R2Data
            }
        ]
        };
        myChart.setOption(option);
    }

    function display_app_class_view(data){
        console.log("begin display.");
        var myChart = echarts.init(document.getElementById('main'));
        var dev_array=new Array();
        var m2R2Data=new Array()
        var total_time=0
        for(var i = 0; i < data.length; i++){
            var dev_obj = data[i];
            if (dev_obj.visit_time == 0)
                continue;

            var m2_obj={};
            m2_obj.value=dev_obj.visit_time;
            m2_obj.legendname=dev_obj.name;

            var tmp_time = get_display_time(dev_obj.visit_time);

            m2_obj.name=dev_obj.name + "  " + tmp_time;
            total_time+=dev_obj.visit_time
            m2R2Data.push(m2_obj);
        }
        
        var total_time_str = get_display_time(total_time);
            
        option = {
            title: [
            {
                text: "<%:App classification time statistics%>",
                textStyle: {
                    fontSize: 16,
                    color: "black"
                },
                left: "2%"
            },    
            {
                text: '',
                subtext: total_time_str,
                textStyle:{
                    fontSize:15,
                    color:"black"
                },
                subtextStyle: {
                    fontSize: 15,
                    color: 'black'
                },
                textAlign:"center",
                x: '34.5%',
                y: '44%',
            }],
            tooltip: {
                trigger: 'item',
                formatter:function (parms){
                    var total_time = get_display_time(parms.data.value);
                    var str=  parms.seriesName+"</br>"+
                    parms.marker+""+parms.data.legendname+"</br>"+"<%:Visit Time%>: "+ total_time +"</br>" +
                    "<%:Percentage%>: "+ parms.percent+"%";
                    return  str ;
                }
            },
            legend: {
                type:"scroll",
                orient: 'vertical',
                left:'70%',
                align:'left',
                top:'middle',
                textStyle: {
                    color:'#8C8C8C'
                },
                height:250
            },
            series: [
                {
                    name:"<%:Visit Time%>",
                    type:'pie',
                    center: ['35%', '50%'],
                    radius: ['40%', '65%'],
                    clockwise: false, 
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'outter',
                            formatter:function (parms){
                                return parms.data.legendname
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                        length:8,
                        length2:7,
                        smooth:true,
                        }
                    },
                    data:m2R2Data
                }
            ]
        };
        myChart.setOption(option);
    }
	new XHR().get('<%=url('admin/network/app_class_visit_time')%>/' + mac, null,
		function(x, st)
		{
            display_app_class_view(st);
		}
	);

    new XHR().get('<%=url('admin/network/dev_visit_time')%>/' + mac, null,
		function(x, st)
		{
            display_app_visit_view(st);
		}
	);


	new XHR().get('<%=url('admin/network/dev_visit_list')%>/' + mac, null,
		function(x, st)
		{
			var tb = document.getElementById('user_status_table');
			var str=JSON.stringify(st);
			if (st && tb)
			{
				/* clear all rows */
				while(tb.rows.length > 1)
					tb.deleteRow(1);
				for(var i = 0; i < st.length; i++ )
				{
					var action_status=""
					if(st[i].latest_action == 1)
						action_status="<%:Filtered%>"
					else
						action_status="<%:Unfiltered%>"
					var hostname=""
					if(st[i].hostname == "" || st[i].hostname == "*"){
						hostname="--";
					}
					else{
						hostname=st[i].hostname;
					}
					var tr = tb.insertRow(-1);
					//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
					tr.insertCell(-1).innerHTML = st[i].appname;
					tr.insertCell(-1).innerHTML = hostname;
					tr.insertCell(-1).innerHTML = st[i].mac;
					tr.insertCell(-1).innerHTML = st[i].first_time;
					var hour=parseInt(st[i].total_time / 3600);
					var seconds=st[i].total_time % 3600;
					var min=parseInt(seconds / 60)
					var total_time_str;
					if (st[i].latest_action == 1)
						total_time_str="-"
					else {
						if (hour > 0)
							total_time_str=hour + "<%:h%>" + min + "<%:m%>"
						else{
							if (min == 0)
								min = 1;
							total_time_str=min + "<%:m%>"
						}
					}

					tr.insertCell(-1).innerHTML = total_time_str;
					tr.insertCell(-1).innerHTML = action_status;

				}
			}
		}
	);

//]]></script>


<fieldset class="cbi-section">
    <div id="display">
	<div id="main" style="width: 500px;height:300px;"></div>
    <div id="main2" style="width: 400px;height:300px;"></div>
    </div>
	<table class="imagetable" id="user_status_table">
		<tr>
			<th ><%:App Name%></th>
			<th ><%:Hostname%></th>
			<th ><%:Mac%></th>
			<th><%:Start Time%></th>
			<th><%:Visit Time%></th>
			<th><%:Filter Status%></th>
		</tr>
		<tr>
			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>

</fieldset>