Test menu in Openwrt

<%+header%>

<%
local fs   = require "nixio.fs"
%>

<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript">//<![CDATA[
////////////////////////////////////////////////////////////////////////////////////////////////

//https://github.com/nelsonic/stopwatch

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

// global object
T = {} ;

function displayTimer() {

T.timerDiv = document.getElementById("timer");

  // initilized all local variables:
  var hours='00', minutes='00',
  miliseconds=0, seconds='00',
  time = '',
  timeNow = new Date().getTime(); // timestamp (miliseconds)

  T.difference = timeNow - T.timerStarted;

  // milliseconds
  if(T.difference > 10) {
    miliseconds = Math.floor((T.difference % 1000) / 10);
    if(miliseconds < 10) {
      miliseconds = '0'+String(miliseconds);
    }
  }
  // seconds
  if(T.difference > 1000) {
    seconds = Math.floor(T.difference / 1000);
    if (seconds > 60) {
      seconds = seconds % 60;
    }
    if(seconds < 10) {
      seconds = '0'+String(seconds);
    }
  }

  // minutes
  if(T.difference > 60000) {
    minutes = Math.floor(T.difference/60000);
    if (minutes > 60) {
      minutes = minutes % 60;
    }
    if(minutes < 10) {
      minutes = '0'+String(minutes);
    }
  }

  // hours
  if(T.difference > 3600000) {
    hours = Math.floor(T.difference/3600000);
    // if (hours > 24) {
    // 	hours = hours % 24;
    // }
    if(hours < 10) {
      hours = '0'+String(hours);
    }
  }

  time  =  hours   + ':'
  time += minutes + ':'
  time += seconds + ':'
  time += miliseconds;

  T.timerDiv.innerHTML = time;
}

function startTimer() {
  // save start time
  T.timerStarted = new Date().getTime()
  console.log('T.timerStarted: '+T.timerStarted)

  if (T.difference > 0) {
    T.timerStarted = T.timerStarted - T.difference
  }
  // update timer periodically
  T.timerInterval = setInterval(function() {
    displayTimer()
  }, 10);

  // show / hide the relevant buttons:
  //document.getElementById('go').style.display="none";
  //document.getElementById('stop').style.display="inline";
  //document.getElementById('clear').style.display="none";
}

function stopTimer() {
  clearInterval(T.timerInterval); // stop updating the timer

  //document.getElementById('stop').style.display="none";
  //document.getElementById('go').style.display="inline";
  //document.getElementById('clear').style.display="inline";
}

function clearTimer() {

T.timerDiv = document.getElementById("timer");

  clearInterval(T.timerInterval);
  T.timerDiv.innerHTML = "00:00:00:00"; // reset timer to all zeros
  T.difference = 0;

  //document.getElementById('stop').style.display="none";
  //document.getElementById('go').style.display="inline";
  //document.getElementById('clear').style.display="none";
}

////////////////////////////////////////////////////////////////////////////////////////////////

	var stxhr = new XHR();

	function update_status(field)
	{
		var tool = field.name;
		var addr = field.value;

		var legend = document.getElementById('diag-rc-legend');
		var output = document.getElementById('diag-rc-output');

        stopTimer();
        clearTimer();
        startTimer();

		if (legend && output)
		{
			output.innerHTML =
				'<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> ' +
				'<%:Waiting for command to complete...%>'
			;

			legend.parentNode.style.display = 'block';
			legend.style.display = 'inline';

			stxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/diag_' + tool + '/' + addr, null,

				function(x)
				{
					if (x.responseText)
					{
						legend.style.display = 'none';
						output.innerHTML = String.format('<pre>%h</pre>', x.responseText);
                        stopTimer();

					}
					else
					{
						legend.style.display = 'none';
						output.innerHTML = '<span class="error"><%:Bad address specified!%></span>';
					}
				}
			);

		}
	}

//]]></script>

<form method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">

	<div class="cbi-map">
		<h2><a id="content" name="content"><%:REMOTE CLIENT%></a></h2>

		<fieldset class="cbi-section">
			<legend><%:Enter server ID and send request%></legend>

			<br />

            <div style="width:33%; float:left;">
				<input style="margin: 5px 0" type="text" value="enter server ID" name="send" /><br />
				<input type="button" value="<%:Send%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.send)" />
                <br>
                <br>

			</div>

			<br style="clear:both" /><br />

		</fieldset>
	</div>

    <input type="button" name="stop" value="<%:Stop%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.stop)" />

	<fieldset class="cbi-section" style="display:none">
		<legend id="diag-rc-legend"><%:Loading ...%></legend>
        <span id="timer">00:00:00:00</span>
		<span id="diag-rc-output"></span>
	</fieldset>
</form>