luci/applications/luci-app-travelmate/luasrc/view/travelmate/runtime.htm

<%#
Copyright 2017-2018 Dirk Brenken (dev@brenken.org)
This is free software, licensed under the Apache License, Version 2.0
-%>

<style type="text/css">
	.runtime
	{
		color: #37c;
		font-weight: bold;
		display: inline-block;
		width: 100%;
		padding-top: 0.5rem;
	}
</style>

<script type="text/javascript">
//<![CDATA[
	function status_update(json)
	{
			var btn1  = document.getElementById("btn1");
			var view  = document.getElementById("value_1");
			var input = json.data.travelmate_status;

			btn1.value = "<%:Restart%>";
			btn1.name  = "do_restart";
			view.innerHTML = input || "-";
			view = document.getElementById("value_2");
			input = json.data.travelmate_version;
			view.innerHTML = input || "-";
			view = document.getElementById("value_3");
			input = json.data.station_id;
			view.innerHTML = input || "-";
			view = document.getElementById("value_4");
			input = json.data.station_interface;
			view.innerHTML = input || "-";
			view = document.getElementById("value_5");
			input = json.data.faulty_stations;
			view.innerHTML = input || "-";
			view = document.getElementById("value_6");
			input = json.data.last_rundate;
			view.innerHTML = input || "-";
	}

	function btn_action(action)
	{
		var btn1 = document.getElementById("btn1");
		var btn1_running = document.getElementById("btn1_running");

		btn1.disabled = true;
		running(btn1_running, 1);

		new XHR.get('<%=luci.dispatcher.build_url("admin", "services", "travelmate")%>/action/' + action.name, null,
		function(x)
		{
			if (!x)
			{
				return;
			}
			btn1.disabled = false;
			running(btn1_running, 0);
		});
	}

	function running(element, state)
	{
		if (state === 1)
		{
			var running_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" />';
			element.innerHTML = running_html;
		}
		else
		{
			element.innerHTML = '';
		}
	}

	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "travelmate", "status")%>', null,
	function(x, json_info)
	{
		if (!x || !json_info)
		{
			return;
		}
		status_update(json_info)
	});

	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "travelmate", "status")%>', null,
	function(x, json_info)
	{
		if (!x || !json_info)
		{
			return;
		}
		status_update(json_info)
	});
//]]>
</script>

<h3><%:Runtime Information%></h3>
<div class="cbi-value" id="status_1">
	<label class="cbi-value-title" for="status_1"><%:Travelmate Status (Quality)%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_1">-</span>
	</div>
</div>
<div class="cbi-value" id="status_2">
	<label class="cbi-value-title" for="status_2"><%:Travelmate Version%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_2">-</span>
	</div>
</div>
<div class="cbi-value" id="status_3">
	<label class="cbi-value-title" for="status_3"><%:Station ID (RADIO/SSID/BSSID)%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_3">-</span>
	</div>
</div>
<div class="cbi-value" id="status_4">
	<label class="cbi-value-title" for="status_4"><%:Station Interface%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_4">-</span>
	</div>
</div>
<div class="cbi-value" id="status_5">
	<label class="cbi-value-title" for="status_5"><%:Faulty Stations%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_5">-</span>
	</div>
</div>
<div class="cbi-value" id="status_6">
	<label class="cbi-value-title" for="status_6"><%:Last Run%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_6">-</span>
	</div>
</div>
<hr />
<div class="cbi-value" id="button_1">
	<label class="cbi-value-title" for="button_1"><%:Restart Travelmate%></label>
	<div class="cbi-value-field">
		<input class="cbi-button cbi-button-reset" id="btn1" type="button" name="do_restart" value="<%:Restart%>" onclick="btn_action(this)" />
		<span id="btn1_running" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
	</div>
</div>