105 lines
4.3 KiB
HTML
105 lines
4.3 KiB
HTML
<%+cbi/valueheader%>
|
|
<style>
|
|
.sub_tab{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
margin: 0 auto;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sub_tab_show{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
margin: 0 auto;
|
|
-webkit-transition: all 1.5s;
|
|
-moz-transition: all 1.5s;
|
|
-ms-transition: all 1.5s;
|
|
-o-transition: all 1.5s;
|
|
transition: all 1s;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<%
|
|
local fs = require "luci.openclash"
|
|
local val = self:cfgvalue(section)
|
|
local filename = fs.filename(val)
|
|
local idname = math.random(1000)..(string.match(filename, "[%w_]+") or "")
|
|
%>
|
|
<div id='<%=idname%>' class="sub_tab"></div>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
|
|
var retry_<%=idname%> = 0;
|
|
var s_<%=idname%>;
|
|
sub_info_get_<%=idname%>();
|
|
|
|
function progressbar_<%=idname%>(v, m, pc, np, f, t, tr) {
|
|
return String.format(
|
|
'<div style="width:250px; max-width:500px; position:relative; border:1px solid #999999; border-radius: 6px">' +
|
|
(pc >= 50 ? '<div style="background-color:#9edd9e; width:%d%%; height:36px; border-radius: 6px">' : (pc < 50 && pc >= 20 ? '<div style="background-color:#ffc99f; width:%d%%; height:35px">' : '<div style="background-color:#ffb9b9; width:%d%%; height:35px">')) +
|
|
'<div style="position:absolute; left:0;' + (tr == "null" ? 'top:12px;' : 'top:0;') + 'text-align:center; width:100%%">' +
|
|
'<small>%s '+ (f ? f : '/') +' %s ' + (np ? "" : '(%s%%)') + (tr == "null" ? '<div style="visibility: hidden;">' : '<div style="visibility: visible;">') + '%s (<%:Remaining%> %s <%:days%>)</small>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>', pc, v, m, pc, t, tr
|
|
);
|
|
};
|
|
|
|
|
|
function sub_info_get_<%=idname%>()
|
|
{
|
|
|
|
if (localStorage.getItem("<%=filename%>")) {
|
|
var save_info = JSON.parse(localStorage.getItem("<%=filename%>"));
|
|
document.getElementById('<%=idname%>').className = "sub_tab_show";
|
|
if (save_info.sub_info == "No Sub Info Found") {
|
|
document.getElementById('<%=idname%>').innerHTML = "<span><%:No Sub Info Found%></span>";
|
|
}
|
|
else {
|
|
//document.getElementById('<%=idname%>').innerHTML = "<%:Plan Traffic%>" + ": " + "<span style=color:green>" + save_info.used + "</span> | <span style=color:green>" + save_info.total + "</span> <br/> <%:Plan Expiration Time%>: " + "<span style=color:green>" + save_info.expire + "</span>";
|
|
document.getElementById('<%=idname%>').innerHTML = progressbar_<%=idname%>((save_info.used), (save_info.total), (save_info.percent ? save_info.percent : 0), false, false, (save_info.expire), (save_info.day_left ? save_info.day_left : 0));
|
|
}
|
|
};
|
|
|
|
if (s_<%=idname%>) { clearTimeout(s_<%=idname%>);};
|
|
|
|
XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "sub_info_get")%>', {filename: "<%=filename%>"}, function(x, status) {
|
|
if (x && x.status == 200 && status.sub_info != "" && status.sub_info != "No Sub Info Found") {
|
|
retry_<%=idname%> = 0;
|
|
localStorage.setItem("<%=filename%>",JSON.stringify(status));
|
|
document.getElementById('<%=idname%>').className = "sub_tab_show";
|
|
document.getElementById('<%=idname%>').innerHTML = progressbar_<%=idname%>((status.used), (status.total), (status.percent), false, false, (status.expire), (status.day_left));
|
|
//document.getElementById('<%=idname%>').innerHTML = "<%:Plan Traffic%>" + ": " + "<span style=color:green>" + status.used + "</span> | <span style=color:green>" + status.total + "</span> <br/> <%:Plan Expiration Time%>: " + "<span style=color:green>" + status.expire + "</span>";
|
|
}
|
|
else if ( x && x.status == 200 && status.sub_info == "No Sub Info Found" ) {
|
|
retry_<%=idname%> = 0;
|
|
localStorage.setItem("<%=filename%>",JSON.stringify(status));
|
|
document.getElementById('<%=idname%>').className = "sub_tab_show";
|
|
document.getElementById('<%=idname%>').innerHTML = "<span><%:No Sub Info Found%></span>";
|
|
}
|
|
else {
|
|
if (document.getElementById('<%=idname%>').innerHTML == "" || retry_<%=idname%> > 2) {
|
|
document.getElementById('<%=idname%>').className = "sub_tab_show";
|
|
document.getElementById('<%=idname%>').innerHTML = "<span style=color:red><%:Sub Info Get Error%></span>";
|
|
}
|
|
if (retry_<%=idname%> > 2) {
|
|
retry_<%=idname%> = 0;
|
|
localStorage.removeItem("<%=filename%>");
|
|
}
|
|
else {
|
|
retry_<%=idname%> ++;
|
|
s_<%=idname%> = setTimeout("sub_info_get_<%=idname%>()",1000*120);
|
|
return
|
|
}
|
|
|
|
};
|
|
s_<%=idname%> = setTimeout("sub_info_get_<%=idname%>()",1000*1800);
|
|
});
|
|
};
|
|
|
|
//]]></script>
|
|
<%+cbi/valuefooter%>
|