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

<%+cbi/valueheader%>
<style>
.sub_tab{
	display: inline-block;
	white-space: nowrap;
	font-size: 12px;
	margin: 0 auto;
	opacity: 0;
	vertical-align: middle;
}

.sub_tab_show{
	display: inline-block;
	white-space: nowrap;
	color: var(--gray-dark);
	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;
	vertical-align: middle;
}

.sub_setting{
	display: inline-block;
	white-space: nowrap;
	margin: 0 auto;
	opacity: 1;
	vertical-align: middle;
}

.sub_div{
	white-space: nowrap;
}

</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 class="sub_div"><span id='<%=idname%>' class="sub_tab"></span>&nbsp;&nbsp;&nbsp;<span class="sub_setting"><img src='/luci-static/resources/openclash/img/arrow-clockwise-light.svg' height="20px" title='<%:Refresh%>' alt='<%:Refresh%>' onclick='return sub_info_refresh_<%=idname%>(this)'></span>&nbsp;<span class="sub_setting"><img src='/luci-static/resources/openclash/img/wrench-light.svg' height="20px" title='<%:Specify URL%>' alt='<%:Specify URL%>' onclick='return set_subinfo_url_<%=idname%>(this,"<%=filename%>")'></span></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_refresh_<%=idname%>()
{
	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.surplus ? status.surplus : status.used), (status.total), (status.percent), false, false, (status.expire), (status.day_left));
		}
		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_refresh_<%=idname%>()",1000*120);
				return
			}
			
		};
		s_<%=idname%> = setTimeout("sub_info_refresh_<%=idname%>()",1000*1800);
	});
};

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 = progressbar_<%=idname%>((save_info.surplus ? save_info.surplus : 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));
		}
	}
	else {
		sub_info_refresh_<%=idname%>();
	};
	s_<%=idname%> = setTimeout("sub_info_refresh_<%=idname%>()",1000*30);
};

function set_subinfo_url_<%=idname%>(btn, filename) {
	var new_url = prompt("<%:Paste the new url of subscribe infos sources here:%>", "");
	if (filename == null || filename == "") {
		return false;
	}
	if (new_url == null) {
		return false;
	}
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "set_subinfo_url")%>', {filename: filename, url: new_url}, function(x, status) {
		if (x && x.status == 200 && status.info == "Success")
		{
			sub_info_refresh_<%=idname%>();
			alert("<%:Specify subscribe infos sources url successfully!%>");
		}
		else if (x && x.status == 200 && status.info == "Delete success")
		{
			sub_info_refresh_<%=idname%>();
			alert("<%:Delete Specify Subscribe infos sources url successfully!%>");
		}
		else
		{
			alert("<%:Specify subscribe infos sources url failed:%>\n" + status.info);
		}
	});
};

//]]></script>
<%+cbi/valuefooter%>