luci/applications/luci-app-commands/ucode/template/commands.ut

{#
 Copyright 2012-2022 Jo-Philipp Wich <jo@mein.io>
 Licensed to the public under the Apache License 2.0.
-#}

{%
	include('header', { css: `
		.commands {
			display: flex;
			flex-wrap: wrap;
		}

		.commandbox {
			flex: 0 0 30%;
			margin: .5em;
			display: flex;
			flex-direction: column;
		}

		.commandbox > p,
		.commandbox > p > * {
			display: block;
		}

		.commandbox div {
			margin-top: auto;
		}
	` });
-%}

<script>
	function command_run(ev, id)
	{
		var field = document.getElementById(id);
		var legend = document.getElementById('command-rc-legend');
		var output = document.getElementById('command-rc-output');

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

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

			var options = field ? { query: { args: field.value } } : null;
			L.Request.get(L.url('admin/system/commands/run', id), options).then(function(reply) {
				var st = reply.json();

				if (st.binary)
					st.stdout = '[' + _('Binary data not displayed, download instead.') + ']';

				output.innerHTML = String.format(
					'<pre><strong># %h\n</strong>%h<span style="color:red">%h</span></pre>' +
					'<div class="alert-message warning">%h (%h %d)</div>',
					st.command, st.stdout, st.stderr,
					(st.exitcode == 0) ? _('Command successful') : _('Command failed'),
					_('Code:'), st.exitcode);
			}).catch(function() {
				output.innerHTML = '<span class="error">%h</span>'.format(_('Failed to execute command!'));
			}).finally(function() {
				legend.style.display = 'none';
				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 = L.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 + L.url('command') + '/';
			var suffix = (args ? '?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>%h <a href="%s">%s</a></p><p>%h <a href="%s">%s</a></p></div>',
				_('Download execution result'), link, link,
				_('Or display result'), link_nodownload, link_nodownload
			);

			location.hash = '#output';
		}

		ev.preventDefault();
	}

</script>

{%
	const commands = [];

	uci.foreach('luci', 'command', s => push(commands, s));
-%}

<form method="get" action="{{ entityencode(FULL_REQUEST_URI) }}">
	<div class="cbi-map">
		<h2 name="content">{{ _('Custom Commands') }}</h2>

		{% if (length(commands) == 0): %}
			<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 %}
			<div class="commands">
				{% for (let command in commands): %}
				<div class="commandbox">
					<h3>{{ entityencode(command.name) }}</h3>
					<p>{{ _('Command:') }} <code>{{ entityencode(command.command) }}</code></p>
					{% if (command.param == "1"): %}
						<p>{{ _('Arguments:') }} <input type="text" id="{{ command['.name'] }}" /></p>
					{% endif %}
					<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"): %}
							<button class="cbi-button cbi-button-link" onclick="command_link(event, '{{ command['.name'] }}')">{{ _('Link') }}</button>
						{% endif %}
					</div>
				</div>
				{% endfor %}

				<a name="output"></a>
			</div>
		{% endif %}
	</div>

	<fieldset class="cbi-section" style="display:none">
		<legend id="command-rc-legend">{{ _('Collecting data...') }}</legend>
		<span id="command-rc-output"></span>
	</fieldset>
</form>

{% include('footer') %}