<%  @calendar_select_interval = 2    %>
<div id="user_activity_table" >
	<%
		#	gt - Глобальная таблица
			@container=""
			@gt_structure=[]
						@gt_structure.push({:onclick => "", :row_name => t(:login), :value => "'+data.data[i].login_name+'", :width => "", :filter => 'login_name' })
						@gt_structure.push({:onclick => "user_activity_select_one_office('+data.data[i].office_id+')", :row_name => t(:offices), :value => "'+data.data[i].office_name+'", :width => "", :filter => 'office_name' })
						@gt_structure.push({:onclick => "", :row_name => t(:status), :value => "'+build_status_view(data.data[i])+'", :width => "width:150px", :filter => 'red' })
						@gt_structure.push({:onclick => "user_activity_build_user_graph('+data.data[i].login_id+')", :row_name => t(:count), :value => "'+data.data[i].count+'", :width => "width:120px", :filter => 'count' })
						@gt_structure.push({:onclick => "", :row_name => "", :value => "'+link_login_map(data.data[i].login_id)+'", :width => "width:80px", :filter => 'none' })
	%>
	<%= render partial: "shared/table", locals: {
		name:"user_table",
		header:@gt_structure,
		query:"get_user_activity",
		action_after:1,
		time:1,
		add_params:', foid:user_activity_selected_foid, officeid:user_activity_selected_officeid',
		offset:50,
		first_sort:'count;DESC',
		additional_field:@container
	} %>
</div>
<div id="user_activity_graph">
	<div id="user_activity_graph_text" class="text_header_red_line" ><%= t('.activity_per_day')%></div>
	<div id="user_activity_graph_max_user"></div>
</div>
<div id="user_activity_info">
	<div    class="text_header_red_line" style=";left:10px;width:200px"><%= t(:filters_s)%></div>
	
	<div id="user_activity_filter_container" align="center">
		<div id="user_activity_filter_container_inside">
			<div class="logins_activ_search_filter">
				<%= render partial: "shared/search_list", locals: {
					select_id:'oper',
					select_name:t(:oper_search),
					search_command:'operation_sort',
					drop_direction:'down',
					delete_function:0
				} %>
			</div>
			<div class="logins_activ_search_filter">
				<%= render partial: "shared/search_list", locals: {
					select_id:'office',
					select_name:t(:office_search),
					search_command:'office_sort',
					drop_direction:'down',
					delete_function:0
				} %>
			</div>
		</div>
	</div>
	<div id="user_activity_top_container">
		<div class="login_activ_top_graph_container" style="top:0px;border-bottom:1px solid <%= $gray %>">
			<div    class="text_header_red_line" style=";left:10px;;width:200px;top:0px" ><%= t('.top_10_oper')%></div>
			<!-- <div onclick="user_active_reset_filter(0)" class="button" style="top:5px;right:10px;width:80px;height:30px;line-height:30px;font-size:12px">Сброс</div> -->
			<div id="user_activity_top_10_oper_graph" class="login_activ_top_graphs"></div>
		</div>
		<div class="login_activ_top_graph_container" style="top:50%;">
			<div    class="text_header_red_line" style=";left:10px;;width:200px;top:0px" ><%= t('.top_10_office')%></div>
			<!-- <div onclick="user_active_reset_filter(1)" class="button" style="top:5px;right:10px;width:80px;height:30px;line-height:30px;font-size:12px">Сброс</div> -->
			<div id="user_activity_top_10_office_graph" class="login_activ_top_graphs"></div>
		</div>
	</div>
</div>

<script>
	user_activity_selected_foid=0
	function oper_select_search(foid){
		//if (foid>0){
			user_activity_selected_foid=foid
			gt_build_table_user_table(gt_last_sort_user_table)
			//user_activity_build_user_graph(user_activity_last_loginid)
			//}
	}
	function user_activity_select_one_oper(foid){
		oper_select_sort_field(foid)
	}
	user_activity_selected_officeid=0
	function office_select_search(foid){
	//	if (foid>0){
			user_activity_selected_officeid=foid
			gt_build_table_user_table(gt_last_sort_user_table)
			//user_activity_build_user_graph(user_activity_last_loginid)
	//	}
	}
	function user_activity_select_one_office(foid){
		office_select_sort_field(foid)
	}
	function user_activity_rebuild_graphs(){
				var chart = $('#user_activity_top_10_oper_graph').dxChart('instance');
				var renderOptions = {force: true};
				chart.option({dataSource: user_active_top10_oper_data});
				chart.render(renderOptions);
				var chart = $('#user_activity_top_10_office_graph').dxChart('instance');
				var renderOptions = {force: true};
				chart.option({dataSource: user_active_top10_office_data});
				chart.render(renderOptions);
	}
	function calendar_update(){
		user_active_top10_office_data.length=0
		user_active_top10_oper_data.length=0
		if (calendar_from_date !== calendar_to_date){
			document.getElementById('user_activity_table').style.width='calc(40% - 1px)'
			document.getElementById('user_activity_graph').style.width='calc(30% - 1px)'
			document.getElementById('user_activity_graph').style.left='40%'
			document.getElementById('user_activity_info').style.left='70%'
			document.getElementById('user_activity_info').style.width='30%'
			document.getElementById('user_activity_filter_container').style.height='100px'
			document.getElementById('user_activity_filter_container_inside').style.height='100px'
			document.getElementById('user_activity_filter_container_inside').style.width='350px'
			document.getElementById('user_activity_top_container').style.top='131px'
			document.getElementById('user_activity_top_container').style.height='calc(100% - 131px)'
			setTimeout(function() {
				user_activity_rebuild_graphs()
			}, 1000)
		}else{
			document.getElementById('user_activity_table').style.width='calc(50% - 1px)'
			document.getElementById('user_activity_graph').style.width='0%'
			document.getElementById('user_activity_graph').style.left='calc(50% - 1px)'
			document.getElementById('user_activity_info').style.left='50%'
			document.getElementById('user_activity_info').style.width='50%'
			setTimeout(function() {
				document.getElementById('user_activity_filter_container').style.height='50px'
				document.getElementById('user_activity_filter_container_inside').style.height='50px'
				document.getElementById('user_activity_filter_container_inside').style.width='700px'
				document.getElementById('user_activity_top_container').style.top='81px'
				document.getElementById('user_activity_top_container').style.height='calc(100% - 81px)'
				user_activity_rebuild_graphs()	
			},1000)	
			
			/*user_activity_max_graph_array_data_sort=[]
			var chart = $('#user_activity_graph_max_user').dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: user_activity_max_graph_array_data_sort});
			chart.render(renderOptions);*/
		}
		user_active_top10_oper_load()
		user_active_top10_office_load()
		gt_build_table_user_table(gt_last_sort_user_table)
	}
	
	var user_activity_max_graph_array_data_sort = []
	window.onload = function(){
		$("#user_activity_graph_max_user").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				argumentType: 'datetime',
				label: {format: 'dd.MM' },
				grid:{visible: true},
				tickInterval: { days: 1 }
			},
			rotated: true,
			tooltip: {
					enabled: true,
					location: "edge",
					customizeText: function () { return  'Количество: '+(this.value).toFixed(0); }
			},
			//title: { text:'Активность пользователя по дням',font: {color: '<%= $d_blue %>',size:16}},
			equalBarWidth: false,
			series:[
					{axis:'user',name:'test',valueField:'count',type:'bar',color: '<%= $blue %>'}
				],
			valueAxis: [
				{title:{text: 'Количество' , font: { size: 12 }}, name: 'valueAxis' }
			],
			resolveLabelOverlapping: "hide",
			legend: {visible:false},
			dataSource: user_activity_max_graph_array_data_sort,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'date',
			label: {
				visible: true,
				connector: {
					visible: true,
					width: 1
				}/*,
				customizeText: function(arg) {
					return arg.point.tag + " - " + arg.value;
				}*/
			}
				
			}
		});
		$("#user_activity_top_10_oper_graph").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				grid:{visible: true},
			},
			tooltip: {
					enabled: true,
					location: "edge",
					customizeText: function () { return  this.point.tag.split(';')[0]; }
			},
			//title: { text:'Активность пользователя по дням',font: {color: '<%= $d_blue %>',size:16}},
			equalBarWidth: false,
			series:[
					{axis:'user',name:'test',valueField:'count',type:'bar',color: '<%= $red %>'}
				],
			valueAxis: [
				{title:{text: '<%= t(:count) %>' , font: { size: 12 }}, name: 'valueAxis' }
			],
			onPointClick: function (info) {
				var clickedPoint = info.target;
				user_activity_select_one_oper(parseInt(clickedPoint.tag.split(';')[1]))
			},
			resolveLabelOverlapping: "hide",
			legend: {visible:false},
			dataSource: user_active_top10_oper_data,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'name',
			label: {
				visible: true,
				connector: {
					visible: true,
					width: 1
				}/*,
				customizeText: function(arg) {
					return arg.point.tag + " - " + arg.value;
				}*/
			}
				
			}
		});
		$("#user_activity_top_10_office_graph").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				grid:{visible: true},
			},
			tooltip: {
					enabled: true,
					location: "edge",
					customizeText: function () { return  this.point.tag.split(';')[0]; }
			},
			//title: { text:'Активность пользователя по дням',font: {color: '<%= $d_blue %>',size:16}},
			equalBarWidth: false,
			series:[
					{axis:'user',name:'test',valueField:'count',type:'bar',color: '<%= $green %>'}
				],
			valueAxis: [
				{title:{text: '<%= t(:count) %>' , font: { size: 12 }}, name: 'valueAxis' }
			],
			onPointClick: function (info) {
				var clickedPoint = info.target;
				user_activity_select_one_office(parseInt(clickedPoint.tag.split(';')[1]))
			},
			resolveLabelOverlapping: "hide",
			legend: {visible:false},
			dataSource: user_active_top10_office_data,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'name',
			label: {
				visible: true,
				connector: {
					visible: true,
					width: 1
				}/*,
				customizeText: function(arg) {
					return arg.point.tag + " - " + arg.value;
				}*/
			}
				
			}
		});
		//gt_build_table_user_table(gt_last_sort_user_table)
		user_active_top10_oper_load()
		user_active_top10_office_load()
	}
	var user_list= <%= raw Login.select(:id, :name).to_json  %>
	var user_activity_last_loginid = 0
	function user_activity_build_user_graph(id){
		user_activity_last_loginid = id
		user_activity_max_graph_array_data_sort.length=0
		
		if (calendar_from_date !== calendar_to_date){
			for(n=0;n<user_list.length;n++){
				if(user_list[n].id == id){
					document.getElementById('user_activity_graph_text').innerHTML=<%= raw t('.user_name_activity_per_day')%>
				}
			}
			$.getJSON('get_user_activity_graph_by_date' ,{loginid:id, start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format(), foid:user_activity_selected_foid, officeid:user_activity_selected_officeid}, function(data) {
				for (i=0;i<data.length;i++){	
					var element = {}
						element['date']=new Date(data[i].date.split('-')[0],parseInt(data[i].date.split('-')[1]-1),data[i].date.split('-')[2])
						element['count']=data[i].count
					user_activity_max_graph_array_data_sort.push(element)
				}
				var chart = $('#user_activity_graph_max_user').dxChart('instance');
				var renderOptions = {force: true};
				chart.option({dataSource: user_activity_max_graph_array_data_sort});
				chart.render(renderOptions);
			}).fail(function(error) {
				show_loading(0)
				error_show(error.statusText,error.status)
  			})
		}
	}
	var user_active_top10_oper_data=[]
	function user_active_top10_oper_load(){
		user_active_top10_oper_data.lenght=0
		$.getJSON('get_user_activity_oper_top10' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
			for (q=0;q<data.length;q++){
				var element = {}
					full_name=data[q].oper_name+' ('+data[q].type_name+')'
					if (full_name.length > 10){short_name=full_name.substring(0,15)+'...'}else{short_name=full_name}
					element['name']=short_name
					element['tag']=full_name+';'+data[q].operation_id
					element['count']=data[q].count
				user_active_top10_oper_data.push(element)
			}
			var chart = $('#user_activity_top_10_oper_graph').dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: user_active_top10_oper_data});
			chart.render(renderOptions);
		}).fail(function(error) {
			show_loading(0)
			error_show(error.statusText,error.status)
  	  	})
	}
	var user_active_top10_office_data=[]
	function user_active_top10_office_load(){
		user_active_top10_office_data.lenght=0
		$.getJSON('get_user_activity_office_top10' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
			for (w=0;w<data.length;w++){
				var element = {}
					full_name=data[w].office_name
					if (full_name.length > 10){short_name=full_name.substring(0,15)+'...'}else{short_name=full_name}
					element['name']=short_name
					element['tag']=full_name+';'+data[w].office_id
					element['count']=data[w].count
				user_active_top10_office_data.push(element)
			}
			var chart = $('#user_activity_top_10_office_graph').dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: user_active_top10_office_data});
			chart.render(renderOptions);
		}).fail(function(error) {
			show_loading(0)
			error_show(error.statusText,error.status)
  		})
	}
	function gt_action_after_build_user_table(data){
		//console.log(data[0].data[0].Login_ID)
		if (data.data.length > 0){
			user_activity_build_user_graph(data.data[0].login_id)
		}
	}
	function user_perf_open_map_window(foid){
		console.log(foid)
		get_to_page_with_parametr('map','loginid='+foid)
	}
</script>