<%  @calendar_view_disable=1    %>

<% 
	$page_calendar_select_oper=""
	$page_calendar_check_count_of_selected_day_action=1
	$page_calendar_after_action=0
	$page_calendar_without_multiple_days=0

%>

<div id="stat_oper_calendar_container">
				<%= render "shared/calendar" %>
</div>

<div id="stat_oper_filter_container">
	<div id="stat_oper_filter_search" style="background:<%= $white %>">
				<%= 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="text_m" id="stat_oper_filter_head_text"><%= t('.compare_parameters')%></div>
	<%
		@check_boxes=[]
		@check_boxes.push({:name => 'user', :text => t('.unique_logins'), :color => [$purple], :param => 'time'})
		@check_boxes.push({:name => 'perfomance', :text => t('.perfomance'), :color => [$red,$yellow,$green], :param => 'time'})
		@check_boxes.push({:name => 'systime', :text => t('.avg_sys_time'), :color => [$yellow], :param => 'count'})
		@check_boxes.push({:name => 'usertime', :text => t('.avg_user_time'), :color => [$blue], :param => 'count'})
	%>
	<div id="stat_oper_filter_cb_container">
	<% @check_boxes.each do |cb|%>
		<div class="stat_oper_filter_cb_container" style="width:100%;height:40px;position:relative">
				<%= render partial: "shared/check_box_v2", locals: {
					id_name:cb[:name],
					class_name:'',
					style_custom:'',
					top:'0px',
					left:'5px',
					width:'20px',
					click_action:"cb_action_#{cb[:name]}()",
					hover_action:'',
					text:''
				}%>
				<div class="stat_oper_filter_cb_text">
				 	 	<%= cb[:text] %>
				 		<% cb[:color].each do |color| %>
							<div style="position:relative;top:10px;width:<%= 30 / cb[:color].length %>px;height:10px;float:right;background:<%= color %>"></div>
						<% end %>
				</div>
		</div>
	<% end %>
	</div>
	
	<div class="button" id="stat_compare_update_button" style="background:<%= $gray %>" onclick="stat_compare_get_graph_data()"><%= t(:update) %></div>
	<div id="stat_compare_update_button_hider" style="display:none"></div>
	<div id="stat_compare_parameters_hider" class="text_b" align="center"><%= t('.select_days_for_compare')%></div>
</div>

<div id="stat_compare_main_graph" ></div>

<div id="stat_compare_main_table" >
	<%
		#	gt - Глобальная таблица
			@container=''
			@gt_structure=[]	
			@gt_structure.push({:onclick => "", :row_name => t(:date), :value => "'+data.data[i].date+'", :width => "", :filter => 'date' })
			@gt_structure.push({:onclick => "", :row_name => t(:count), :value => "'+data.data[i].count+'", :width => "width:180px", :filter => 'count' })
			@gt_structure.push({:onclick => "", :row_name => t(:login_s), :value => "'+data.data[i].uniq_user+'", :width => "width:180px", :filter => 'uniq_user' })
			@gt_structure.push({:onclick => "", :row_name => t(:perfomance), :value => "'+build_status_view(data.data[i])+'", :width => "width:200px", :filter => 'red' })
			@gt_structure.push({:onclick => "", :row_name => t(:user_time), :value => "'+second_to_hour_converter(data.data[i].user_time)+'", :width => "width:250px", :filter => 'user_time' })
			@gt_structure.push({:onclick => "", :row_name => t(:sys_time), :value => "'+second_to_hour_converter(data.data[i].sys_time)+'", :width => "width:180px", :filter => 'sys_time' })

	%>
	<%= render partial: "shared/table", locals: {
		name:"stat_compare_table",
		header:@gt_structure,
		query:"get_oper_stat_graph_by_date",
		action_after:1,
		time:1,
		add_params:', foid:stat_compare_absolute_foid,string:stat_compare_absolute_string',
		offset:50,
		first_sort:'date;DESC',
		additional_field:@container
	} %>
	
	
</div>
<script>
var calendar_from_date=new Date()
var calendar_to_date=new Date()
stat_compare_absolute_foid=0
function oper_select_search(foid){
		show_loading(1)
		if (foid>0){
			stat_compare_absolute_foid=foid
			stat_compare_build_calendar()
			_last_id=''
			$.getJSON('get_oper_stat_days' ,{foid:stat_compare_absolute_foid}, function(data) {
				for (i=0;i<data.length;i++){
					if (data[i].date !== null){
						dd=parseInt(data[i].date.split('-')[2])
						mm=parseInt(data[i].date.split('-')[1])-1
						yy=parseInt(data[i].date.split('-')[0])
						day=document.getElementById('day_selected_'+dd+'_'+mm+'_'+yy)
						if (day != null){
							document.getElementById('day_selected_'+dd+'_'+mm+'_'+yy).innerHTML=dd+'<div style="width:15px;height:2px;bottom:3px;left:5px;position:absolute;background:<%= $blue %>"></div>'
							last_id='#day_selected_'+dd+'_'+mm+'_'+yy
							
						}
					}
				}
				show_loading(0)
				document.getElementById('stat_compare_calendar_body').scrollTop=0
				document.getElementById('stat_compare_calendar_body').scrollTop=$(last_id).position().top
				console.log(document.getElementById('stat_compare_calendar_body').scrollTop)
				document.getElementById('stat_compare_calendar_hider').style.left='-330px'
			})
		}else{
			stat_compare_remove_all_oper()
			show_loading(0)
			document.getElementById('stat_compare_calendar_hider').style.left='0px'
			
			stat_compare_deselect('count')
			stat_compare_deselect('time')
			stat_compare_get_graph_data()
			gt_build_table_stat_compare_table(gt_last_sort_stat_compare_table)
		}
}

stat_compare_select_parameter=0
<% @check_boxes.each do |cb|%>
function cb_action_<%= cb[:name] %>(){
	if (cb_<%= cb[:name] %>_value==1){
		stat_compare_select_parameter++
		stat_compare_deselect('<%= cb[:param] %>')
	}else{
		stat_compare_select_parameter--
	}
stat_compare_show_hide_button()
}
<% end %>

function stat_compare_deselect(type){
	
	if (type=='count'){
		if (cb_user_value == 1){
			stat_compare_deselect_cb(document.getElementById('cb_user'))
			cb_user_value = 0
		}
		if (cb_perfomance_value == 1){
			stat_compare_deselect_cb(document.getElementById('cb_perfomance'))
			cb_perfomance_value = 0
		}	
	}else{
		if (cb_systime_value == 1){
			stat_compare_deselect_cb(document.getElementById('cb_systime'))
			cb_systime_value = 0
		}
		if (cb_usertime_value == 1){
			stat_compare_deselect_cb(document.getElementById('cb_usertime'))
			cb_usertime_value = 0
		}	
	}
}
function stat_compare_deselect_cb(element){
			element.style.width='0px'
			element.style.height='0px'
			element.style.top='9px'
			element.style.left='9px'
			stat_compare_select_parameter--
}
function stat_compare_show_hide_button(){
	if(stat_compare_data_graph_temp.length > 0){
		stat_compare_update_graph(stat_compare_data_graph_temp)
	}
	console.log(stat_compare_select_parameter)
	if (stat_compare_select_parameter>0){
		document.getElementById('stat_compare_update_button_hider').style.display='none'
		document.getElementById('stat_compare_update_button').style.background=''
	}else{
		document.getElementById('stat_compare_update_button_hider').style.display=''
		document.getElementById('stat_compare_update_button').style.background='<%= $gray %>'
	}
}
var stat_compare_graph_data=[]
function stat_compare_main_graph(){
	$("#stat_compare_main_graph").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				argumentType: 'datetime',
				label: {format: 'dd.MM' },
				tickInterval: { days: 1 },
				grid:{visible: true}
			},
			//equalBarWidth: false,
			series:[
				{axis: 'Time', valueField: 'red', type: 'stackedBar',color: '<%= $red %>' },
				{axis: 'Time', valueField: 'yellow', type: 'stackedBar',color: '<%= $yellow %>' },
				{axis: 'Time', valueField: 'green', type: 'stackedBar',color: '<%= $green %>' },
				{axis: 'Time', valueField: 'SysTime', type: 'stackedBar',color: '<%= $yellow %>' },
				{axis: 'Time', valueField: 'UserTime', type: 'stackedBar',color: '<%= $blue %>' },
				{axis: 'Time', valueField: 'Users', type: 'spline',color: '<%= $purple %>' }
			],

			valueAxis: [
				//{placeholderSize:80,title:{text: 'Количество операций' , font: { size: 12 }}, name: 'Count'},
				{placeholderSize:80,title:{font: { size: 12 }}, name: 'Time'}
			],

			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: stat_compare_graph_data,
			tooltip: {enabled: true},
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1},width:5},argumentField:'Date'}
	});
}
window.onload = function(){	
	stat_compare_build_calendar()
	stat_compare_main_graph()
}
stat_compare_absolute_string=''
stat_compare_check_update=0
function stat_compare_get_graph_data(){
	show_loading(1)
	class_group=document.getElementsByClassName('stat_compare_calendar_body')
	stat_compare_absolute_string=','
	for (i=0;i<class_group.length;i++){
		if (class_group[i].value == 1){
			d=parseInt(class_group[i].name.split('.')[0])
			m=parseInt(class_group[i].name.split('.')[1])+1
			y=parseInt(class_group[i].name.split('.')[2])
			if (d<10){d='0'+d}
			if (m<10){m='0'+m}
			stat_compare_absolute_string+=y+'-'+m+'-'+d+','
		}
	}
	stat_compare_check_update=0
	stat_compare_graph_data.length=0
	gt_build_table_stat_compare_table(gt_last_sort_stat_compare_table)
	//$.getJSON('/sensor/SensorStatisticCompareGetDataByFOID' ,{foid:stat_compare_absolute_foid,string:stat_compare_absolute_string}, function(data) {
	//				stat_compare_data_graph_temp=data[0].data
	//				stat_compare_update_graph(data[0].data)
	//})
}
function gt_action_after_build_stat_compare_table(data){
	if (stat_compare_check_update == 0){
		stat_compare_data_graph_temp=data.data
		stat_compare_update_graph(data.data)
		stat_compare_check_update=1
	}
}
stat_compare_data_graph_temp=[]
function stat_compare_update_graph(data){
				stat_compare_graph_data.length=0
				var chart = $("#stat_compare_main_graph").dxChart('instance');
				axis_time={valueAxis: [{placeholderSize:120,title:{text: '<%= t(:full_time_min)%>' , font: { size: 12 }}, name: 'Time',label: {customizeText: function (e) {return second_to_hour_converter(e.value);}}}]}
				tooltip_time={tooltip: {enabled: true,location:'edge',customizeText: function (e) {return second_to_hour_converter(e.value);}}}
				axis_count={valueAxis: [{placeholderSize:80,title:{text: '<%= t(:count)%>' , font: { size: 12 }}, name: 'Time'}]}
				tooltip_count={tooltip: {enabled: true,location:'edge',customizeText: function (e) {return e.value;}}}
				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])
						if (cb_perfomance_value== 1){
							element['green']=data[i].green
							element['yellow']=data[i].yellow
							element['red']=data[i].red
						}
						if (cb_systime_value == 1){
							element['SysTime']=data[i].sys_time
						}
						if (cb_usertime_value == 1){
							element['UserTime']=data[i].user_time
						}
						if (cb_user_value == 1){
							element['Users']=data[i].uniq_user
						}
					stat_compare_graph_data.push(element)
				}
						if (cb_perfomance_value == 1){
							chart.option(axis_count);
							chart.option(tooltip_count);
						}
						if (cb_systime_value == 1){
							chart.option(axis_time);
							chart.option(tooltip_time);
						}
						if (cb_usertime_value == 1){
							chart.option(axis_time);
							chart.option(tooltip_time);
						}
						if (cb_user_value == 1){
							chart.option(axis_count);
							chart.option(tooltip_count);
						}
				var renderOptions = {force: true};
				chart.option({dataSource: stat_compare_graph_data });
				chart.render(renderOptions);
				show_loading(0)
}

function page_calendar_compare_count_days(){
	if (stat_compare_absolute_count_day > 1){
		document.getElementById('stat_compare_parameters_hider').style.top='-500px'
	}else{
		document.getElementById('stat_compare_parameters_hider').style.top='51px'
	}	
}


</script>
