op-packages/luci-app-xclient/luasrc/view/xclient/version.htm

<%local fs=require"nixio.fs"%> 
<fieldset class="cbi-section"> 
	<table width="100%" cellspacing="10">
	<thead align="center">
		<tr>
			<th align="center">Name</th>
			<th align="center">Version</th>
			<th align="center">Latest</th> 
											   
		</tr>
	</thead>
	<tbody> 
		<tr>
			<td align="center" width="30%">Xray-Core</td> <td align="center" width="35%" id="_core">Checkin...</td> <td width="35%" align="center" id="_newcore"><font color="red">Checkin...</font> </td> 
		</tr>	
		<tr><td></td><td></td><td></td></tr>
	</tbody>
	</table>
</fieldset>

<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
	<thead align="center">
		<tr>
			<th align="center">Name</th>
			<th align="center">Version</th>
			<th align="center">Update</th> 
											   
		</tr>
	</thead>
	<tbody> 
		<tr>
			<td align="center" width="30%">geoip file</td> <td align="center" width="35%" id="_geoip">Checkin...</td> <td width="35%" align="center" id="_newgeoip"><font color="red">Checkin...</font> </td> 
		</tr>	
		<tr>
			<td align="center" width="30%">geosite file</td> <td align="center" width="35%" id="_geosite">Checkin...</td> <td width="35%" align="center" id="_newgeosite"><font color="red">Checkin...</font> </td> 
		</tr>	
		<tr><td></td><td></td><td></td></tr>
	</tbody>
	</table>
	<textarea id="geoip_download" class="cbi-input-textarea" style="width: 100%;display:none" data-update="change" rows="20" cols="100" readonly="readonly" > </textarea>
    <textarea id="geosite_download" class="cbi-input-textarea" style="width: 100%;display:none" data-update="change" rows="20" cols="100" readonly="readonly" > </textarea>
</fieldset>

<script type="text/javascript">//<![CDATA[
	var _core = document.getElementById('_core');
	var _geoip = document.getElementById('_geoip');
	var _geosite = document.getElementById('_geosite');
    var _newcore = document.getElementById('_newcore');

	XHR.get('<%=url([[admin]], [[services]], [[xclient]], [[version]])%>', null, function(x, status) {
		if ( x && x.status == 200) {		
			_core.innerHTML = status.core_version ? '<b><font color="green">' + status.core_version + '</font></b>' : '<b><font color="red">X</font> </b>';
			_geoip.innerHTML = status.geoip_version ? '<b><font color="green">' + status.geoip_version + '</font></b>' : '<b><font color="red">X</font> </b>';
			_geosite.innerHTML = status.geosite_version ? '<b><font color="green">' + status.geosite_version + '</font></b>' : '<b><font color="red">X</font> </b>';			
			_newcore.innerHTML = status.latest_core ? '<b><font color="red"><a href="https://github.com/XTLS/Xray-core/releases/tag/' + status.latest_core + '" target="_blank">' + status.latest_core + '</a></font></b>' : '<b>--</b>';
		}
	});
	
	XHR.poll(1,'<%=url([[admin]], [[services]], [[xclient]], [[check_latest]])%>', null, function(x, status) {});
	
	
	XHR.poll(3,'<%=url([[admin]], [[services]], [[xclient]], [[version]])%>', null, function(x, status) {
		if ( x && x.status == 200) {		
			_core.innerHTML = status.core_version ? '<b><font color="green">' + status.core_version + '</font></b>' : '<b><font color="red">X</font> </b>';
			_geoip.innerHTML = status.geoip_version ? '<b><font color="green">' + status.geoip_version + '</font></b>' : '<b><font color="red">X</font> </b>';
			_geosite.innerHTML = status.geosite_version ? '<b><font color="green">' + status.geosite_version + '</font></b>' : '<b><font color="red">X</font> </b>';			
			_newcore.innerHTML = status.latest_core ? '<b><font color="red"><a href="https://github.com/XTLS/Xray-core/releases/tag/' + status.latest_core + '" target="_blank">' + status.latest_core + '</a></font></b>' : '<b>--</b>';
		}
	});
	
	
	document.getElementById('_newgeoip').innerHTML = '<input type="button" class="cbi-button cbi-button-apply" id="apply_update_geoip" value="Manually Update" onclick=" return update_geoip() "/>';
	document.getElementById('_newgeosite').innerHTML = '<input type="button" class="cbi-button cbi-button-apply" id="apply_update_geosite" value="Manually Update" onclick=" return update_geosite() "/>';
	

<% if not fs.access("/var/lock/xclient.lock") then %>
function update_geoip(){
	XHR.get('<%=url([[admin]], [[services]], [[xclient]], [[geoipupdate]])%>',null,function(x, data){});
	geoip_poll_check();
	return
}
<%end%>

function geoip_poll_check(){
	var lv = document.getElementById('geoip_download');
	lv.style.display="inline"
	XHR.poll(2, '<%=url([[admin]], [[services]], [[xclient]], [[check_geoip]])%>', null,
		function(x, data) {
			var lv = document.getElementById('geoip_download');
			if (x.responseText && lv) {
				lv.innerHTML += x.responseText;
				lv.scrollTop = lv.scrollHeight; 
			}
		}
	);
}

XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "xclient", "geoip")%>', null, function(x, status) {
	if ( x && x.status == 200 ) {			
		if(status.geoipcheck == 0||status.geoipcheck == 2){
			hide_ip();	
		}
		if(status.geoipcheck == 1){
			var btn = document.getElementById('apply_update_geoip');
			btn.disabled = false;
			btn.value    = 'Manually Update';
			geoip_poll_check();
		}
	}
});


<% if not fs.access("/var/lock/xclient.lock") then %>
function update_geosite(){
	XHR.get('<%=url([[admin]], [[services]], [[xclient]], [[geositeupdate]])%>',null,function(x, data){});
	geosite_poll_check();
	return
}
<%end%>

function geosite_poll_check(){
	var lv = document.getElementById('geosite_download');
	lv.style.display="inline"
	XHR.poll(2, '<%=url([[admin]], [[services]], [[xclient]], [[check_geosite]])%>', null,
		function(x, data) {
			var lv = document.getElementById('geosite_download');
			if (x.responseText && lv) {
				lv.innerHTML += x.responseText;
				lv.scrollTop = lv.scrollHeight; 
			}
		}
	);
}


XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "xclient", "geosite")%>', null, function(x, status) {
	if ( x && x.status == 200 ) {			
		if(status.geositecheck == 0||status.geositecheck == 2){
			hide_site();	
		}
		if(status.geositecheck == 1){
			var btn = document.getElementById('apply_update_geosite');
			btn.disabled = false;
			btn.value    = 'Manually Update';
			geosite_poll_check();
		}
	}
});


function hide_ip(){
   $('#geoip_download').hide();
   var btn = document.getElementById('apply_update_geoip');
   btn.disabled = false;
   btn.value    = 'Manually Update';
}


function hide_site(){
   $('#geosite_download').hide();
   var btn = document.getElementById('apply_update_geosite');
   btn.disabled = false;
   btn.value    = 'Manually Update';
}



<% if fs.access("/var/run/geo_ip_update") then %>
    var	btn = document.getElementById('apply_update_geoip');
    btn.disabled = true;
    btn.value    = 'Downloading...';
    geoip_poll_check();
<%end%>


<% if fs.access("/var/run/geo_site_update") then %>
    var	btn = document.getElementById('apply_update_geosite');
    btn.disabled = true;
    btn.value    = 'Downloading...';
    geosite_poll_check();
<%end%>

//]]></script>