{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
<br />
{% if selects|length == 0 %}
	{% include 'include/getstarted.html' %}
{% else %}
<style>

</style>
<form style="padding-left: 5px;" action="viewsttats.py" method="post">
	<input type="hidden" id="service" value="{{service}}" />
	<select autofocus required name="serv" id="serv">
		<option disabled>------</option>
			{% for select in selects %}
				{% if select.2 == serv %}
					<option value="{{ select.2 }}" selected>{{ select.1 }}</option>
				{% else %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endif %}
			{% endfor %}
	</select>		
	<a class="ui-button ui-widget ui-corner-all" id="show" title="Show stats" onclick="{{ onclick }}">Show</a>
	<div id="stats_filter">
		<div id="stats_filter_text">Filter:</div>
		{{ checkbox('stats_active', title='Show active servers', desc='Active', checked='checked') }}
		{{ checkbox('stats_drain', title='Show drain servers', desc='Drain', checked='checked') }}
		{{ checkbox('stats_maintain', title='Show maintain servers', desc='Maintain', checked='checked') }}
		{{ checkbox('stats_down', title='Show DOWN servers', desc='DOWN', checked='checked') }}
		{{ checkbox('stats_not_checked', title='Show not checked servers', desc='Not checked', checked='checked') }}
		{{ checkbox('stats_backup', title='Show backup servers', desc='Backup', checked='checked') }}
		{{ checkbox('stats_frontends', title='Show frontends servers', desc='Frontends', checked='checked') }}
		{{ checkbox('stats_backends', title='Show backends servers', desc='Backends', checked='checked') }}
	</div>
</form>

<div id="ajax" style="margin-left: 5px; margin-right: 5px;"></div>
	<div id="notice" style="padding-left: 15px; font-size: 25px;">
		Select a server
		<br />
	</div>
<script> 
	if (cur_url[1]) {
		showStats();		
	}	
	async function wait() {
		$('form').append('<input type="hidden" name="serv" value='+$("#serv").val()+'>');
		$('form').append('<input type="hidden" name="token" value='+$('#token').val()+'>');
		$( "input[type=submit], button" ).button();
		$('#notice').hide();
		$('li').css('margin-top', '0');
		$('li').css('width', '207px	');
		$('li').css('padding', '0px');
		$('li').css('margin', '0px');
		$('.menu li ul li').css('width', '227px');
		$('.menu li ul li').css('margin-left', '-20px');		
		$('th').css('background-color', '#f5faf4');
		$('table.tbl th.pxname').css('background-color', '#5d9ceb');
		$('.v_menu').css('left', '200px');		
		$('table.tbl th.pxname').css('width', '100%');
		$('a.px:link').css('color', '#fff');
		$('td').css('font-size', '11');
		$('h1').css('display', 'none');
		$('td').css('border-color', '#ddd');
		$('td').css('padding', '3px');
		$('th').css('padding-top', '4px');
		$('th').css('padding-bottom', '4px');
		$('th').css('border-color', '#ddd');
		$('h1').next().css('display', 'none');	  
		$('h1').next().next().css('display', 'none');	  
		$('h1').next().next().next().css('display', 'none');	  
		$('h1').next().next().next().next().css('display', 'none');	  
		$('body').css('font-family', '-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol');
		$( "select" ).selectmenu();
		$('#stats_filter').show();
		var backends = $('.backend').parents('p');
		var backends_form = $('.backend').parents('form');
		var frontends = $('.frontend').parents('p');
		var filter_array = {'#stats_active': '.active_up', '#stats_maintain': '.maintain', '#stats_drain': '.active_draining',
			'#stats_down': '.active_down', '#stats_not_checked': '.active_no_check', '#stats_backup': '.backup_up',
			'#stats_backends': backends, '#stats_backends': backends_form,'#stats_frontends': frontends};
		trigger_filter(filter_array);
		$('#stats_active').click(function() {
			var stats_active = {'#stats_active': '.active_up'};
			trigger_filter(stats_active);
		});
		$('#stats_maintain').click(function() {
			var stats_maintain = {'#stats_maintain': '.maintain'};
			trigger_filter(stats_maintain);
		});
		$('#stats_drain').click(function() {
			var stats_drain = {'#stats_drain': '.active_draining'};
			trigger_filter(stats_drain);
		});
		$('#stats_down').click(function() {
			var stats_down = {'#stats_down': '.active_down'};
			trigger_filter(stats_down);
		});
		$('#stats_not_checked').click(function() {
			var stats_not_checked = {'#stats_not_checked': '.active_no_check'};
			trigger_filter(stats_not_checked);
		});
		$('#stats_backup').click(function() {
			var stats_backup = {'#stats_backup': '.backup_up'};
			trigger_filter(stats_backup);
		});
		$('#stats_backends').click(function() {
			var stats_backends = {'#stats_backends': backends};
			trigger_filter(stats_backends);
			var stats_backends = {'#stats_backends': backends_form};
			trigger_filter(stats_backends);
		});
		$('#stats_frontends').click(function() {
			var stats_frontends = {'#stats_frontends': frontends};
			trigger_filter(stats_frontends);
		});
		function trigger_filter(filter_array) {
			for (var filter_id in filter_array) {
				if ($(filter_id).prop('checked')) {
					if (filter_id == '#stats_backends' || filter_id == '#stats_frontends' || filter_id == '#stats_listens') {
						$(filter_array[filter_id]).css('display', 'block');
						$(filter_array[filter_id]).css('addClass', 'tbl');
					} else {
						$(filter_array[filter_id]).css('display', 'table-row');
					}
				} else {
					$(filter_array[filter_id]).css('display', 'none');
				}
			}
		}
		{% if role == 4 %}
			$('input[type=checkbox]').remove()
		{% endif %}
		await sleep(2000);
	  
	  $("form").submit(function() {
		$.ajax({
			type: "get",
			url: "options.py",
			dataType: "text",
			data: $(this).serialize(),
			success: function( data ) {
				showStats();
				}
			});
		return false;
		});		
	}
	$('#serv').on('selectmenuchange',function() {
		showStats();		
	});
</script>
<link href="/inc/style.css" rel="stylesheet">
{% endif %}
{% endblock %}