reworked ui (310fad7e) · Commits · Oleg Dzhimiev / rclnodejs-testing

public/index.html

+93 −82

Original line number	Diff line number	Diff line
		@@ -13,13 +13,10 @@
		</head>

		<body>
		<div>
		<button id='listmasters'>List masters</button>
		<!--<button id='testbutton1'>List slaves</button>-->
		<button id='testbutton2'>Get states</button>
		<button id='testbutton3'>Test wget</button>
		</div>
		<hr/>

		<table id='container'>
		<tr>
		<td valign='top'>
		<div id='controls'>
		<table>
		<tr>
		@@ -40,19 +37,19 @@
		<tr id="set_format" title='Set image format'>
		<td>Format:</td>
		<td>
		<input type='text'/>
		<input type='text' class='input-par' value='-'/>
		</td>
		</tr>
		<tr id="set_quality" title='Set compression quality'>
		<td>Quality:</td>
		<td>
		<input type='text'/>
		<input type='text' class='input-par' value='-'/>
		</td>
		</tr>
		<tr id="set_fps" title='Set fps'>
		<td>FPS:</td>
		<td>
		<input type='text'/>
		<input type='text' class='input-par' value='-'/>
		</td>
		</tr>
		<tr id="toggle_awb" title='Auto White Balance'>
		@@ -75,25 +72,39 @@
		</tr>
		</table>
		</div>
		<hr/>
		<div>
		<table>
		</td>

		<td valign='top'>
		<div id='somebuttons'>
		<button id='listmasters'>List masters</button>
		<!--<button id='testbutton1'>List slaves</button>-->
		<button id='testbutton2'>Get states</button>
		<button id='testbutton3'>Test wget</button>
		</div>
		<div id='mstable'>
		<table class='slave_table'>
		<tr>
		<td>Master:</td>
		<td id='masternode'></td>
		<th colspan='2' style='text-align:center;'>Master</th>
		<td colspan='10'>
		<div id='masternode'></div>
		</td>
		</tr>
		<tr valign='top'>
		<td>Slaves:</td>
		<td id='slavenodes'></td>
		<th colspan='2' style='text-align:center;'>Slave</th>
		<th style='text-align:center;'>IP</th>
		<th style='text-align:center;'>State</th>
		</tr>
		</table>
		</div>
		<hr/>
		<div id='previews'>
		<table>
		</table>
		</div>
		<div id='nodelist'></div>
		</body>
		</td>

		</tr>
		</table>

		</body>
		</html>

public/javascripts/index.js

+35 −21

Original line number	Diff line number	Diff line
		@@ -23,9 +23,9 @@ function init(){
		padding:'10px 0px'
		});

		$("#masternode").css({
		'font-weight': 'bold'
		});
		//$("#masternode").css({
		// 'font-weight': 'bold'
		//});

		update_master_node();
		parse_url();
		@@ -127,7 +127,10 @@ function parse_cmd_testing(res){

		if ($(xmlstate).find("error").length!=0){
		console.log(name+" is not 10393");
		$("."+name).append(" <b style='color:DarkOrange;'>not 10393</b>");

		$("tr."+name+" .slave_state").html("<b style='color:DarkOrange;'>not 10393</b>");

		//$("."+name).append();
		}else{

		appData.nc10393[name] = {
		@@ -216,26 +219,14 @@ function refresh_histograms(){

		function parse_cmd_state(res){

		let rtab = [
		'<table class="slave_table">',
		' <tr>',
		' <th>Slave</th>',
		' <th>State</th>',
		' </tr>'
		];

		$(res).find('response').each(function(){

		const name = $(this).find('node').text();
		const state = $(this).find('state').text();
		rtab = rtab.concat([
		'<tr>',
		' <td class="name">'+name+'</td>',
		' <td class="state">'+state+'</td>',
		'</tr>',
		]);
		$("tr."+name+" .slave_state").html(state);

		});
		rtab.push('</table>');
		$("#nodelist").empty().append(rtab.join('\n'));

		}

		function parse_cmd_ifconfig_init(res){
		@@ -249,6 +240,7 @@ function parse_cmd_ifconfig_init(res){
		update_slave_list(name);
		update_ip_list(ip);

		/*
		let html = [
		'<div class=\''+name+'\'>',
		'<input class=\'slave_checkbox\' type=\'checkbox\' checked />',
		@@ -256,7 +248,29 @@ function parse_cmd_ifconfig_init(res){
		'(<label class=\'lbl_ip\'>'+ip+'</label>)',
		'</div>'
		].join('\n');
		$("#slavenodes").append(html);
		*/
		//$("#slavenodes").append(html);

		let html = [
		'<tr class=\'slaverow '+name+'\'>',
		' <td>',
		' <input class=\'slave_checkbox\' type=\'checkbox\' checked />',
		' </td>',
		' <td>',
		' <div class=\'lbl_name\'>'+name+'</div>',
		' </td>',
		' <td>',
		' <div class=\'lbl_ip\'>'+ip+'</div>',
		' </td>',
		' <td>',
		' <div class=\'slave_state\'>-</div>',
		' </td>',
		'</tr>'
		].join('\n');

		console.log(html);

		$("#mstable .slave_table tbody").append(html);

		});

public/stylesheets/style.css

+47 −4

Original line number	Diff line number	Diff line
		body {
		padding: 10px;
		padding: 10px 5px;
		font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
		}

		@@ -13,12 +13,12 @@ div.inline{
		}

		table td {
		padding-right:10px;
		padding:0px 5px;
		}

		hr{
		margin-top:5px;
		margin-bottom:5px;
		margin-bottom:1px;
		}

		input[type="text"]{
		@@ -30,7 +30,8 @@ input[type="checkbox"], input[type="radio"] {
		height: 18px;
		vertical-align: middle;
		position: relative;
		bottom: 3px;
		bottom: 0px;
		margin-top:1px;
		}

		.btn.active:focus, .btn:focus{
		@@ -126,3 +127,45 @@ input[type="checkbox"], input[type="radio"] {
		.snap_inner:active{
		background: rgb(166,14,14);
		}

		.input-par{
		width:64px;
		text-align:right;
		}

		#container{
		border-collapse:collapse;
		}

		#controls{
		background: rgba(200,220,220,0.5);
		padding: 5px;
		}

		#mstable{
		background: rgba(200,220,220,0.5);
		padding: 5px;
		}

		#somebuttons{
		background: rgba(200,220,220,0.5);
		padding: 5px;
		}

		#previews{
		background: rgba(200,220,220,0.5);
		padding: 5px;
		}

		#nodelist{
		background: rgba(200,220,220,0.5);
		padding: 5px;
		}

		.slaverow td {
		padding: 0px 10px;
		}

		.slave_state{
		text-align:center;
		}

Admin message