Untitled

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ping example</title>
    <script src="{{ url_for('static', filename='js/jq.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
  </head>
  <body bgcolor="cccccc">
    <div id="form-with-button">
      <form>
	      <input id="start" type="button" value="Запуск диагностики"></input>

      </form>
    </div>
    <div id="result-start"></div>
	<HR>
	<table>
	<tr><td>PING: (0 - no error, 1 - no ping)<HR></td></tr>
	<tr><td><div id='ping'></div></td></tr>
	<tr><td><HR>IPERF:  (Mbit/sec)<HR></td></tr>
	<tr><td><div id='iperf3'></div></td></tr>
	</table>
	<script>
//преформ, генератор интерфейсов:

	let iperf_list = ['WAN', 'LAN'];
	let iface_list = [];
	let iface = 'eth1.1';
	for (let i = 1; i <= 4; i+=1) {
		iface_list.push('eth1.1'+i);
//		$('#ping').append(`<tr><td><div>Интерфейс  ${iface + i}:</div></td><td><center><div id='ping-ind-${iface + i}'>не запущен</div></center></td><td><div id='ping-rez-${iface + i}'></div></td></tr>`)
	};

	iface_list.map(iface => $('#ping').append(`<tr><td><div>Интерфейс  ${iface}:</div></td><td><center><div id='ping-ind-${iface}'>не запущен</div></center></td><td><div id='ping-rez-${iface}'></div></td></tr>`));
	iperf_list.map(iperf => $('#iperf3').append(`<tr><td><div>Интерфейс  ${iperf}:</div></td><td><center><div id='iperf-ind-${iperf}'>не запущен</div></center></td><td><div id='iperf-rez-${iperf}'></div></td></tr>`));

// начальные данные:
	var wan = '192.168.114.13';
	var lan = '192.168.114.15';
	var cable_treshold = 40;
	var wifi_treshold = 40;
	var ping = '192.168.1.2';
	var ping1 = '127.0.0.1';
	var ping2 = '192.168.114.100';
	var ping3 = '192.168.114.101';
	var ips = [ping, ping1, ping2, ping3]

// то что относится к счётчикам:
	var c = {};
	ips.map(function(ip) { c[ip] = 0 } );
	console.log(c)
	let iface_counter = [];
	let iface_counter1 = [];
	let iface_counter2 = [];
	let iface_counter3 = [];

// определение namespace
    namespace = '/ping';
// переменная коннекта
    var sio = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

    $('#start').bind('click', function(go) {
		sio.emit('click-start', {'test': 'Hello!'});
    });

    $('#start').bind('click', function() {
        sio.emit('click-ping', {'test': 'Hello!'});
    });

	sio.on('receive-start', function (response) {
		let text = document.getElementById('result-start').innerHTML=' ';
        document.getElementById('result-start').innerHTML=text + response;
		iface_list.map(iface => clear_ping(`ping-ind-${iface}`, `ping-rez-${iface}`));
		iperf_list.map(iperf => clear_iperf(`iperf-ind-${iperf}`, `iperf-rez-${iperf}`));
    });

	function result_ping(a,response) {
		let text = document.getElementById(a).innerHTML;
		document.getElementById(a).innerHTML=text + ' ' + response.i;
	}

	function result_iperf(a,b,response) {
		let text = document.getElementById(a).innerHTML=' ';
		document.getElementById(a).innerHTML=text + response.speed;
		if (response.speed > cable_treshold) { indicate_ok(b); }
		else { indicate_fail(b); }
	};

	function indicate_ok(b) {
		document.getElementById(b).style.backgroundColor='green';
		document.getElementById(b).innerHTML='__OK__';
	}

	function indicate_fail(b) {
		document.getElementById(b).style.backgroundColor='red';
		document.getElementById(b).innerHTML='FAIL';
	}

	function clear_ping(ping_ind,ping_rez) {
		document.getElementById(ping_ind).style.backgroundColor='yellow';
		document.getElementById(ping_ind).innerHTML='Работаем';
		document.getElementById(ping_rez).innerHTML='';
		let iface_counter = [];
		let iface_counter1 = [];
		let iface_counter2 = [];
		let iface_counter3 = [];
		var c = {};
	}

	function clear_iperf(iperf_ind,iperf_rez) {
		document.getElementById(iperf_ind).style.backgroundColor='yellow';
		document.getElementById(iperf_ind).innerHTML='Работаем';
		document.getElementById(iperf_rez).innerHTML='';
	}


	function too_big(b,d) {
		if (d.filter(x => x > 0).length > 3) { indicate_fail(b); } else { indicate_ok(b); }
	}
//регистрация и обработка входных данных пинговки
    sio.on('receive-ping', function (response) {
		if (response.ip == ping) {
			let a = 'ping-rez-'+iface_list.slice().shift();
			let b = 'ping-ind-'+iface_list.slice().shift();
			result_ping(a,response);
			iface_counter.push(response.i);
			c[response.ip] += 1;
			if (c[response.ip]>3) { too_big(b,iface_counter); }
		} else if (response.ip == ping1) {
			let a = 'ping-rez-'+iface_list.slice(1).shift();
			let b = 'ping-ind-'+iface_list.slice(1).shift();
			result_ping(a,response);
			iface_counter1.push(response.i);
			c[response.ip] += 1;
			if (c[response.ip]>3) { too_big(b,iface_counter1); }
		} else if (response.ip == ping2) {
			let a = 'ping-rez-'+iface_list.slice(2).shift();
			let b = 'ping-ind-'+iface_list.slice(2).shift();
			result_ping(a,response);
			iface_counter2.push(response.i);
			c[response.ip] += 1;
			if (c[response.ip]>3) { too_big(b,iface_counter2); }
		} else if (response.ip == ping3){
			let a = 'ping-rez-'+iface_list.slice(3).shift();
			let b = 'ping-ind-'+iface_list.slice(3).shift();
			result_ping(a,response);
			iface_counter3.push(response.i);
			c[response.ip] += 1;
			if (c[response.ip]>3) { too_big(b,iface_counter3); }
		}
    });

//регистрация и обработка входных данных iperf
	sio.on('receive-iperf', function (response) {
		if (response.ip == wan) {
			let a = 'iperf-rez-'+iperf_list.slice().shift();
			let b = 'iperf-ind-'+iperf_list.slice().shift();
			result_iperf(a,b,response);
		} else if (response.ip == lan) {
			let a = 'iperf-rez-'+iperf_list.slice(1).shift();
			let b = 'iperf-ind-'+iperf_list.slice(1).shift();
			result_iperf(a,b,response);
		}
    });
    </script>
  </body>
</html>