small-package/luci-app-passwall/luasrc/view/passwall/global/status2.htm

<%
local api = require "luci.model.cbi.passwall.api.api"
local status = api.uci_get_type("global_other", "status", "")
-%>

<style>
/* @media screen and (min-width: 1600px) {
	#_passwall_status_fieldset > fieldset {
		padding: 0px;
	}

	#_passwall_status_fieldset > fieldset > div {
		width: 200px;
		height: 60px;
		background: #f7fafd;
		float: left;
		margin: 5px;
		padding: 0.3rem 1rem;
		border-radius: 10px;
		display: flex;
		align-items: center;
		clear: unset;
	}

	#_passwall_status_fieldset > fieldset > div > .cbi-value-title {
		text-align: left;
		width: unset;
		padding-top: unset;
	}

	#_passwall_status_fieldset > fieldset > div > .cbi-value-field {
		padding-top: unset;
	}

	#_passwall_status_fieldset > fieldset > div > .cbi-value-field > font {
		padding-top: unset;
	}

	#_node_status > font {
		display: block;
	}
}
*/
</style>

<fieldset id="_passwall_status_fieldset" class="cbi-section">
	<legend>
		<%:Running Status%>
	</legend>
	<fieldset class="cbi-section">
		<div class="cbi-value">
			<label class="cbi-value-title">TCP
				<%:Status%>
			</label>
			<div class="cbi-value-field" id="_tcp_node_status">
				<%:Collecting data...%>
			</div>
		</div>
		
		<div class="cbi-value">
			<label class="cbi-value-title">UDP
				<%:Status%>
			</label>
			<div class="cbi-value-field" id="_udp_node_status">
				<%:Collecting data...%>
			</div>
		</div>
		
		<% if api.is_finded("haproxy") then %>
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:Load Balancing%>
			</label>
			<div class="cbi-value-field" id="_haproxy_status">
				<%:Collecting data...%>
			</div>
		</div>
		<% end %>
		
		<div class="cbi-value">
			<label class="cbi-value-title">DNS
				<%:Status%>
			</label>
			<div class="cbi-value-field" id="_dns_mode_status">
				<%:Collecting data...%>
			</div>
		</div>
		
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:Baidu Connection%>
			</label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Check%>" onclick="return check_connect(this, 'baidu', 'https://www.baidu.com')" />
				<font id="_baidu_status"></font>
			</div>
		</div>
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:Google Connection%>
			</label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Check%>" onclick="return check_connect(this, 'google', 'https://www.google.com/generate_204')" />
				<font id="_google_status"></font>
			</div>
		</div>
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:GitHub Connection%>
			</label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Check%>" onclick="return check_connect(this, 'github', 'https://github.com')" />
				<font id="_github_status"></font>
			</div>
		</div>
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:Instagram Connection%>
			</label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Check%>" onclick="return check_connect(this, 'instagram', 'https://www.instagram.com')" />
				<font id="_instagram_status"></font>
			</div>
		</div>
		<% if status:find("show_check_port") then %>
		<div class="cbi-value">
			<label class="cbi-value-title">
				<%:Node Check%>
			</label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Check%>" onclick="return check_port(this)" />
				<font id="_node_status"></font>
				<input id="clear_check_port_btn" type="button" class="btn cbi-button cbi-button-remove" style="display:none" value="<%:Clear%>" onclick="return clear_check_port(this)" />
			</div>
		</div>
		<% end %>
		<% if status:find("show_ip111") then %>
		<div class="cbi-value">
			<label class="cbi-value-title"></label>
			<div class="cbi-value-field">
				<input type="button" class="btn cbi-button cbi-button-reload" value="IP111.cn" onclick="javascript:window.open('http://www.ip111.cn/','target');" />
			</div>
		</div>
		<% end %>
	</fieldset>
</fieldset>

<script type="text/javascript">
	//<![CDATA[
	var dns_mode_status = document.getElementById('_dns_mode_status');
	var haproxy_status = document.getElementById('_haproxy_status');
	XHR.poll(3, '<%=api.url("status")%>', null,
		function(x, json) {
			if (x && x.status == 200) {
				var tcp_node_status = document.getElementById('_tcp_node_status');
				if (tcp_node_status) {
					if (true) {
						var text = '';
						if (json["tcp_node_status"])
							text += '<font color="green"><%:RUNNING%> ✓</font>';
						else
							text += '<font color="red"><%:NOT RUNNING%> X</font>';
						tcp_node_status.innerHTML = text;
					}
				}
				
				var udp_node_status = document.getElementById('_udp_node_status');
				if (udp_node_status) {
					if (true) {
						var text = '';
						if (json["udp_node_status"])
							text += '<font color="green"><%:RUNNING%> ✓</font>';
						else
							text += '<font color="red"><%:NOT RUNNING%> X</font>';
						udp_node_status.innerHTML = text;
					}
				}
				if (haproxy_status)
					haproxy_status.innerHTML = json.haproxy_status ? '<font color="green"><%:RUNNING%> ✓</font>' : '<font color="red"><%:NOT RUNNING%> X</font>';
				if (dns_mode_status)
					dns_mode_status.innerHTML = json.dns_mode_status ? '<font color="green"><%:RUNNING%> ✓</font>' : '<font color="red"><%:NOT RUNNING%> X</font>';
			}
		});

	function check_connect(btn, type, url) {
		btn.disabled = true;
		btn.value = '<%:Check...%>';
		var sendDate = (new Date()).getTime();
		XHR.get('<%=api.url("connect_status")%>', {
				type: type,
				url: url
			},
			function(x, rv) {
				var s = document.getElementById('_' + type + '_status');
				if (s) {
					if (rv.ping_type && rv.ping_type == "curl") {
						var use_time = rv.use_time;
						var color="red";
						if (use_time < 1000) {
							color = "green";
						} else if (use_time < 2000) {
							color = "#b9b90b";
						} else {
							color = "red";
						}
						s.setAttribute("color", color);
						s.innerHTML = use_time + " ms";
					} else if (rv.status) {
						s.setAttribute("color", "green");
						s.innerHTML = "<%:Working...%>";
					} else {
						s.setAttribute("color", "red");
						s.innerHTML = '<%:Problem detected!%> X';
					}
				}
				btn.disabled = false;
				btn.value = '<%:Check%>';
			}
		);
		return false;
	}

	function check_port(btn) {
		btn.disabled = true;
		btn.value = '<%:Check...%>';
		XHR.get('<%=api.url("check_port")%>', null,
			function(x, rv) {
				if (x && x.status == 200) {
					var str = '<br />';
					for (var i = 0; i < rv.length; i++) {
						var obj = rv[i];
						if (obj.flag) {
							str += '<font color="green">' + obj.remark + '   OK.</font>';
						} else {
							str += '<font color="red">' + obj.remark + '   Error.</font>';
						}
						str += '<br />';
					}
					document.getElementById('_node_status').innerHTML = str;
					var clear_btn = document.getElementById('clear_check_port_btn');
					clear_btn.style.display = "inline-block";
					btn.disabled = false;
					btn.value = '<%:Check%>';
				}
			}
		);
		return false;
	}

	function clear_check_port(btn) {
		btn.style.display = 'none';
		var s = document.getElementById('_node_status');
		s.innerHTML = "";
		return false;
	}
	//]]>
</script>