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

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

<%+adblock/adblock_css%>
<script type="text/javascript">
//<![CDATA[
	function format(number)
	{
		var string = number.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
		return string;
	}

	function status_update(json)
	{
		var btn1         = document.getElementById("btn1");
		var btn1_running = document.getElementById("btn1_running");
		var btn2         = document.getElementById("btn2");
		var btn2_running = document.getElementById("btn2_running");
		var input        = json.data.adblock_status || "-";

		document.getElementById("value_1").innerHTML = input;
		if (input === "enabled")
		{
			btn1.value = "<%:Suspend%>";
			btn1.name  = "do_suspend";
			btn2.value = "<%:Refresh%>";
			btn2.name  = "do_refresh";
			btn1.disabled = false;
			running(btn1_running, 0);
			btn2.disabled = false;
			running(btn2_running, 0);
		}
		else if (input === "paused")
		{
			btn1.value = "<%:Resume%>";
			btn1.name  = "do_resume";
			btn2.value = "<%:Refresh%>";
			btn2.name  = "do_refresh";
			btn1.disabled = false;
			running(btn1_running, 0);
			btn2.disabled = false;
			running(btn2_running, 0);
		}
		else
		{
			btn1.value = "<%:Suspend%>";
			btn1.name  = "do_suspend";
			btn2.value = "<%:Refresh%>";
			btn2.name  = "do_refresh";
			btn1.disabled = true;
			btn2.disabled = true;
		}

		document.getElementById("value_2").innerHTML = json.data.adblock_version || "-";
		document.getElementById("value_3").innerHTML = json.data.fetch_utility || "-";
		document.getElementById("value_4").innerHTML = json.data.dns_backend || "-";
		document.getElementById("value_5").innerHTML = json.data.dns_variant || "-";
		document.getElementById("value_6").innerHTML = json.data.backup_dir || "-";
		document.getElementById("value_7").innerHTML = format(json.data.overall_domains) || "-";
		document.getElementById("value_8").innerHTML = json.data.last_rundate || "-";
	}

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

		btn1.disabled = true;
		btn2.disabled = true;

		if (action.name === "do_refresh")
		{
			running(btn2_running, 1);
		}
		else
		{
			running(btn1_running, 1);
		}

		new XHR.get('<%=luci.dispatcher.build_url("admin", "services", "adblock")%>/action/' + action.name, null,
		function(x)
		{
			if (!x)
			{
				return;
			}
		});
	}

	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 = '';
		}
	}

	function reset_view()
	{
		document.getElementById("btn1").value        = "<%:Suspend%>";
		document.getElementById("btn1").name         = "do_suspend";
		document.getElementById("btn2").value        = "<%:Refresh%>";
		document.getElementById("btn2").name         = "do_refresh";
		document.getElementById("btn1").disabled     = true;
		document.getElementById("btn2").disabled     = true;
		document.getElementById("value_1").innerHTML = "-";
		document.getElementById("value_2").innerHTML = "-";
		document.getElementById("value_3").innerHTML = "-";
		document.getElementById("value_4").innerHTML = "-";
		document.getElementById("value_5").innerHTML = "-";
		document.getElementById("value_6").innerHTML = "-";
		document.getElementById("value_7").innerHTML = "-";
		document.getElementById("value_8").innerHTML = "-";
	}

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

	XHR.poll(-1, '<%=luci.dispatcher.build_url("admin", "services", "adblock", "status_update")%>', null,
	function(x, json_info)
	{
		if (!x || !json_info || !json_info.data)
		{
			reset_view();
			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"><%:Adblock Status%></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"><%:Adblock 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"><%:Download Utility (SSL Library)%></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"><%:DNS Backend, DNS Directory%></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"><%:DNS Variant, DNS File Reset%></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"><%:Backup Directory%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_6">-</span>
	</div>
</div>
<div class="cbi-value" id="status_7">
	<label class="cbi-value-title" for="status_7"><%:Overall Domains%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_7">-</span>
	</div>
</div>
<div class="cbi-value" id="status_8">
	<label class="cbi-value-title" for="status_8"><%:Last Run%></label>
	<div class="cbi-value-field">
		<span class="runtime" id="value_8">-</span>
	</div>
</div>
<hr />
<div class="cbi-value" id="button_1">
	<label class="cbi-value-title" for="button_1"><%:Suspend / Resume Adblock%></label>
	<div class="cbi-value-field">
		<input class="cbi-button cbi-button-reset" id="btn1" type="button" value="" onclick="btn_action(this)" />
		<span id="btn1_running" class="btn_running"></span>
	</div>
</div>
<p />
<div class="cbi-value" id="button_2">
	<label class="cbi-value-title" for="button_2"><%:Refresh Blocklist Sources%></label>
	<div class="cbi-value-field">
		<input class="cbi-button cbi-button-apply" id="btn2" type="button" value="" onclick="btn_action(this)" />
		<span id="btn2_running" class="btn_running"></span>
	</div>
</div>