258 lines
7.2 KiB
HTML
258 lines
7.2 KiB
HTML
<%
|
|
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>
|