SmartAudio/package/luci/luci-app-commands/luasrc/view/commands.htm

<%#
 Copyright 2012 Jo-Philipp Wich <jow@openwrt.org>
 Licensed to the public under the Apache License 2.0.
-%>

<% css = [[

.commandbox {
	height: 12em;
	width: 30%;
	float: left;
	height: 12em;
	margin: 5px;
	position: relative;
}

.commandbox h3 {
	font-size: 1.5em !important;
	line-height: 2em !important;
	margin: 0 !important;
}

.commandbox input[type="text"] {
	width: 50% !important;
}

.commandbox div {
	position: absolute;
	left: 0;
	bottom: 1.5em;
}

]] -%>

<%+header%>

<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript">//<![CDATA[
	var stxhr = new XHR();

	function command_run(id)
	{
		var args;
		var field = document.getElementById(id);
		if (field)
			args = encodeURIComponent(field.value);

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

		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('<%=url('admin/system/commands/run')%>/' + id + (args ? '/' + args : ''), null,
				function(x, st)
				{
					if (st)
					{
						if (st.binary)
							st.stdout = '[<%:Binary data not displayed, download instead.%>]';

						legend.style.display = 'none';
						output.innerHTML = String.format(
							'<pre><strong># %h\n</strong>%h<span style="color:red">%h</span></pre>' +
							'<div class="alert-message warning">%s (<%:Code:%> %d)</div>',
							st.command, st.stdout, st.stderr,
							(st.exitcode == 0) ? '<%:Command successful%>' : '<%:Command failed%>',
							st.exitcode);
					}
					else
					{
						legend.style.display = 'none';
						output.innerHTML = '<span class="error"><%:Failed to execute command!%></span>';
					}

					location.hash = '#output';
				}
			);
		}
	}

	function command_download(id)
	{
		var args;
		var field = document.getElementById(id);
		if (field)
			args = encodeURIComponent(field.value);

		location.href = '<%=url('admin/system/commands/download')%>/' + id + (args ? '/' + args : '');
	}

	function command_link(id)
	{
		var legend = document.getElementById('command-rc-legend');
		var output = document.getElementById('command-rc-output');

		var args;
		var field = document.getElementById(id);
		if (field)
			args = encodeURIComponent(field.value);

		if (legend && output)
		{
			var link = location.protocol + '//' + location.hostname +
			           (location.port ? ':' + location.port : '') +
					   location.pathname.split(';')[0] + 'command/' +
					   id + (args ? '/' + args : '');

			legend.style.display = 'none';
			output.parentNode.style.display = 'block';
			output.innerHTML = String.format(
				'<div class="alert-message"><%:Access command with%> <a href="%s">%s</a></div>',
				link, link
			);

			location.hash = '#output';
		}
	}

//]]></script>

<%
	local uci = require "luci.model.uci".cursor()
	local commands = { }

	uci:foreach("luci", "command", function(s) commands[#commands+1] = s end)
%>

<form method="get" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
	<div class="cbi-map">
		<h2 name="content"><%:Custom Commands%></h2>

		<fieldset class="cbi-section">
			<% local _, command; for _, command in ipairs(commands) do %>
			<div class="commandbox">
				<h3><%=pcdata(command.name)%></h3>
				<p><%:Command:%> <code><%=pcdata(command.command)%></code></p>
				<% if command.param == "1" then %>
					<p><%:Arguments:%> <input type="text" id="<%=command['.name']%>" /></p>
				<% end %>
				<div>
					<input type="button" value="<%:Run%>" class="cbi-button cbi-button-apply" onclick="command_run('<%=command['.name']%>')" />
					<input type="button" value="<%:Download%>" class="cbi-button cbi-button-download" onclick="command_download('<%=command['.name']%>')" />
					<% if command.public == "1" then %>
						<input type="button" value="<%:Link%>" class="cbi-button cbi-button-link" onclick="command_link('<%=command['.name']%>')" />
					<% end %>
				</div>
			</div>
			<% end %>

			<br style="clear:both" /><br />
			<a name="output"></a>
		</fieldset>
	</div>

	<fieldset class="cbi-section" style="display:none">
		<legend id="command-rc-legend"><%:Collecting data...%></legend>
		<span id="command-rc-output"></span>
	</fieldset>
</form>

<%+footer%>