luci/applications/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">//<![CDATA[
	var stxhr = new XHR();

	function command_run(ev, 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';
				}
			);
		}

		ev.preventDefault();
	}

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

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

		ev.preventDefault();
	}

	function command_link(ev, 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 prefix = location.protocol + '//' + location.host + '<%=url('command')%>/';
			var suffix = (args ? '/' + args : '');

			var link = prefix + id + suffix;
			var link_nodownload = prefix + id + "s" + suffix;

			legend.style.display = 'none';
			output.parentNode.style.display = 'block';
			output.innerHTML = String.format(
				'<div class="alert-message"><p><%:Download execution result%> <a href="%s">%s</a></p><p><%:Or display result%> <a href="%s">%s</a></p></div>',
				link, link, link_nodownload, link_nodownload
			);

			location.hash = '#output';
		}

		ev.preventDefault();
	}

//]]></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(FULL_REQUEST_URI)%>">
	<div class="cbi-map">
		<h2 name="content"><%:Custom Commands%></h2>
		<% if #commands == 0 then %>
			<div class="cbi-section">
				<div class="table cbi-section-table">
					<div class="tr cbi-section-table-row">
						<p>
							<em><%:This section contains no values yet%></em>
						</p>
					</div>
				</div>
			</div>
		<% else %>
			<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>
						<button class="cbi-button cbi-button-apply" onclick="command_run(event, '<%=command['.name']%>')"><%:Run%></button>
						<button class="cbi-button cbi-button-download" onclick="command_download(event, '<%=command['.name']%>')"><%:Download%></button>
						<% if command.public == "1" then %>
							<button class="cbi-button cbi-button-link" onclick="command_link(event, '<%=command['.name']%>')"><%:Link%></button>
						<% end %>
					</div>
				</div>
				<% end %>

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

	</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%>