openwrt_helloworld/luci-app-openclash/luasrc/view/openclash/debug.htm

<%#
 Copyright 2010 Jo-Philipp Wich <jow@openwrt.org>
 Licensed to the public under the Apache License 2.0.
-%>

<%
local diag_host = "www.instagram.com"
local dns_host = "www.instagram.com"
%>

<style>
:root[data-darkmode="true"] .diag-style {
    background-color: #404040;
}

:root[data-darkmode="true"] #diag-rc-output > pre {
	background-color: #404040;
	color: #ffffff;
}

:root[data-darkmode="true"] #dns-rc-output > pre {
	background-color: #404040;
	color: #ffffff;
}

.diag-style {
	background-color: #f5f5f5;
}

#diag-rc-output > pre {
    background-color: #ffffff;
    display: block;
    padding: 8.5px;
    margin: 0 0 18px;
    line-height: 1.5rem;
    -moz-border-radius: 3px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1.4rem;
    color: #404040;
}

#dns-rc-output > pre {
    background-color: #ffffff;
    display: block;
    padding: 8.5px;
    margin: 0 0 18px;
    line-height: 1.5rem;
    -moz-border-radius: 3px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1.4rem;
    color: #404040;
}

</style>


<script type="text/javascript">//<![CDATA[

	function isDarkBackground(element) {
		var style = window.getComputedStyle(element);
		var bgColor = style.backgroundColor;
		let r, g, b;
		if (/rgb\(/.test(bgColor)) {
			var rgb = bgColor.match(/\d+/g);
			r = parseInt(rgb);
			g = parseInt(rgb);
			b = parseInt(rgb);
		} else if (/#/.test(bgColor)) {
			if (bgColor.length === 4) {
			r = parseInt(bgColor + bgColor, 16);
			g = parseInt(bgColor + bgColor, 16);
			b = parseInt(bgColor + bgColor, 16);
			} else {
			r = parseInt(bgColor.slice(1, 3), 16);
			g = parseInt(bgColor.slice(3, 5), 16);
			b = parseInt(bgColor.slice(5, 7), 16);
			}
		} else {
			return false;
		}
		var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
		return luminance < 128;
	};

	if (isDarkBackground(document.body)) {
		document.documentElement.setAttribute('data-darkmode', 'true');
	};

	function show_diag_info(addr)
	{
		var addr = addr;
		var legend = document.getElementById('diag-rc-legend');
		var output = document.getElementById('diag-rc-output');

		if (legend && output)
		{
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "diag_connection")%>', {addr: addr}, function(x, status) {
				if (x && x.status == 200 && x.responseText != "")
				{
					legend.style.display = 'none';
					output.innerHTML = String.format('<pre>%h</pre>', x.responseText);
				}
				else if (x.status == 500)
				{
					legend.style.display = 'none';
					output.innerHTML = '<span class="error"><%:Bad address specified!%></span>';
				}
				else
				{
					legend.style.display = 'none';
					output.innerHTML = '<span class="error"><%:Could not find any connection logs!%></br></br><%:1. It may be that the plugin is not running%></br></br><%:2. It may be that the cache causes the browser to directly use the IP for access%></br></br><%:3. It may be that DNS hijacking did not take effect, so clash unable to reverse the domain name%></br></br><%:4. It may be that the filled address cannot be resolved and connected%></span>';
				}
			});
		}
	}

	function update_status(field)
	{
		var addr = field.value;
		var legend = document.getElementById('diag-rc-legend');
		var output = document.getElementById('diag-rc-output');
		
		if (legend && output)
		{
			output.innerHTML =
				'<img src="<%=resource%>/icons/loading.svg" onerror="this.onerror=null;this.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';
		}
		
		let HTTP = {
			checker: (domain) => {
			let img = new Image;
			let timeout = setTimeout(() => {
				img.onerror = img.onload = null;
				show_diag_info(addr);
				}, 10000);

				img.onerror = () => {
			  	clearTimeout(timeout);
  		  		show_diag_info(addr);
  			}

				img.onload = () => {
					clearTimeout(timeout);
					show_diag_info(addr);
				}

				img.src = `https://${domain}/favicon.ico?${+(new Date)}`
			},
			runcheck: () => {
				HTTP.checker(addr);
			}
			};
		HTTP.runcheck();
	}
	
	function diag_dns(field)
	{
		var addr = field.value;
		var legend = document.getElementById('dns-rc-legend');
		var output = document.getElementById('dns-rc-output');
		
		if (legend && output)
		{
			output.innerHTML =
				'<img src="<%=resource%>/icons/loading.svg" onerror="this.onerror=null;this.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';
		}
		
		if (legend && output)
		{
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "diag_dns")%>', {addr: addr}, function(x, status) {
				if (x && x.status == 200 && x.responseText != "")
				{
					legend.style.display = 'none';
					output.innerHTML = String.format('<pre>%h</pre>', x.responseText);
				}
				else if (x.status == 500)
				{
					legend.style.display = 'none';
					output.innerHTML = '<span class="error"><%:Bad address specified!%></span>';
				}
				else
				{
					legend.style.display = 'none';
					output.innerHTML = '<span class="error"><%:No Response Found!%></span>';
				}
			});
		}
	}
	
	function gen_debug_logs()
	{
		var legend = document.getElementById('debug-rc-legend');
		var output = document.getElementById('debug-rc-output');

		if (legend && output)
		{
			output.innerHTML =
				'<img src="<%=resource%>/icons/loading.svg" onerror="this.onerror=null;this.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';
			
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "gen_debug_logs")%>', null, function(x, status) {
				if (x && x.status == 200 && x.responseText != "")
				{
					legend.style.display = 'none';
					output.innerHTML = '<textarea class="cbi-input-textarea" style="width: 100%;display:inline" data-update="change" rows="30" cols="60" readonly="readonly" >'+x.responseText+'</textarea>';
				}
				else
				{
					legend.style.display = 'none';
					output.innerHTML = '<span class="error"><%:Some error occurred!%></span>';
				}
			}
			);
		}
	}
//]]></script>

<form>
	<fieldset class="diag-style">
		<div style="width:33%; float: left; text-align: center;">
			<%:Connection Test (Current Browser)%>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" value="<%=diag_host%>" name="diag" />
			<input type="button" value="<%:Click to Test%>" class="btn cbi-button cbi-button-apply" onclick="update_status(this.form.diag)" />
		</div>
		<div style="width:33%; float: left; text-align: center;">
			<%:DNS Test (Clash Response)%>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" value="<%=dns_host%>" name="dns_host" />
			<input type="button" value="<%:Click to Test%>" class="btn cbi-button cbi-button-apply" onclick="diag_dns(this.form.dns_host)" />
		</div>
		<div style="width:33%; float: left; text-align: center;">
			<%:Generate Logs%>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" value="<%:Click to Generate%>" class="btn cbi-button cbi-button-apply" onclick="gen_debug_logs(this)" />
		</div>
	</fieldset>

	<fieldset class="diag-style" style="display:none">
		<legend id="diag-rc-legend"><%:Collecting data...%></legend>
		<br />
		<span id="diag-rc-output"></span>
	</fieldset>

	<fieldset class="diag-style" style="display:none">
		<legend id="dns-rc-legend"><%:Collecting data...%></legend>
		<br />
		<span id="dns-rc-output"></span>
	</fieldset>
	
	<fieldset class="diag-style" style="display:none">
		<legend id="debug-rc-legend"><%:Collecting data...%></legend>
		<br />
		<span id="debug-rc-output"></span>
	</fieldset>
</form>