mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-08-09 14:47:47 +02:00
Removed alpha prototype source
This commit is contained in:
Toby Chui
@@ -1,369 +0,0 @@
|
||||
<div class="ui stackable four column grid">
|
||||
<div class="column">
|
||||
<div id="serverstatus" class="ui green statustab inverted segment">
|
||||
<h4 class="ui header">
|
||||
<i class="power off icon"></i>
|
||||
<div class="content">
|
||||
<span id="statusTitle">Offline</span>
|
||||
<div style="color: white;" class="sub header" id="statusText">Reverse proxy server is offline</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui statustab summary segment">
|
||||
<h4 class="ui header">
|
||||
<i class="exchange icon"></i>
|
||||
<div class="content">
|
||||
<span id="summaryTotalCount"></span> <small>Req. Today</small>
|
||||
<div class="sub header" style="margin-top: 0.4em;">
|
||||
<i class="green circle check icon"></i> <span id="summarySuccCount"></span>
|
||||
/ <i class="red red exclamation circle icon"></i> <span id="summaryErrCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui statustab segment" style="background-color: #f0ece1; border: 0px solid transparent;">
|
||||
<h4 class="ui header">
|
||||
<i class="arrows alternate horizontal icon"></i>
|
||||
<div class="content">
|
||||
<span id="forwardtype"></span>
|
||||
<div class="sub header" id="forwardtypeList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="connections" class="ui statustab inverted segment" style="background-color: #7d8e88;">
|
||||
<h4 class="ui header">
|
||||
<i class="map marker alternate icon"></i>
|
||||
<div class="content">
|
||||
<span id="country"></span>
|
||||
<div class="sub header" id="countryList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
<p>Inbound Port (Port to be proxied)</p>
|
||||
<div class="ui action fluid input">
|
||||
<input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
|
||||
<button class="ui button" onclick="handlePortChange();">Apply</button>
|
||||
</div>
|
||||
<br>
|
||||
<div id="tls" class="ui toggle checkbox">
|
||||
<input type="checkbox">
|
||||
<label>Use TLS to serve proxy request</label>
|
||||
</div>
|
||||
<br>
|
||||
<div id="redirect" class="ui toggle checkbox" style="margin-top: 0.6em;">
|
||||
<input type="checkbox">
|
||||
<label>Force redirect HTTP request to HTTPS<br>
|
||||
<small>(Only apply when listening port is 443)</small></label>
|
||||
</div>
|
||||
<br>
|
||||
<div id="portUpdateSucc" class="ui green message" style="display:none;">
|
||||
<i class="ui green checkmark icon"></i> Setting Updated
|
||||
</div>
|
||||
<Br>
|
||||
<button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
|
||||
<button id="stopbtn" class="ui red disabled button" onclick="stopService();">Stop Service</button>
|
||||
<div id="rploopbackWarning" class="ui segment" style="display:none;">
|
||||
<b><i class="yellow warning icon"></i> Loopback Routing Warning</b><br>
|
||||
<small>This management interface is a loopback proxied service. <br>If you want to shutdown the reverse proxy server, please remove the proxy rule for the management interface and refresh.</small>
|
||||
</div>
|
||||
<div id="statusErrmsg" class="ui red message" style="display: none;"></div>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui two column stackable grid">
|
||||
<div class="column">
|
||||
<p>Visitor Counts</p>
|
||||
<table class="ui unstackable celled table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Country ISO Code</th>
|
||||
<th>Unique Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="countryCodetable">
|
||||
<tr>
|
||||
<td colspan="2">No Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>Proxy Request Types</p>
|
||||
<table class="ui unstackable celled table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Proxy Type</th>
|
||||
<th>Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="forwardTypeTable">
|
||||
<tr>
|
||||
<td colspan="2">No Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="ui basic green button" onclick="getDailySummaryDetails();"><i class="refresh icon"></i> Refresh</button>
|
||||
<script>
|
||||
let loopbackProxiedInterface = false;
|
||||
//Initial the start stop button if this is reverse proxied
|
||||
$.get("/api/proxy/requestIsProxied", function(data){
|
||||
if (data == true){
|
||||
//This management interface is reverse proxied by itself
|
||||
//do not allow turning off the proxy
|
||||
$("#stopbtn").addClass("disabled");
|
||||
loopbackProxiedInterface = true;
|
||||
$("#rploopbackWarning").show();
|
||||
}
|
||||
});
|
||||
|
||||
//Get the latest server status from proxy server
|
||||
function initRPStaste(){
|
||||
$.get("/api/proxy/status", function(data){
|
||||
if (data.Running == true){
|
||||
$("#startbtn").addClass("disabled");
|
||||
if (!loopbackProxiedInterface){
|
||||
$("#stopbtn").removeClass("disabled");
|
||||
}
|
||||
$("#serverstatus").addClass("green");
|
||||
$("#statusTitle").text("Online");
|
||||
$("#statusText").text("Serving request on port: " + data.Option.Port);
|
||||
}else{
|
||||
$("#startbtn").removeClass("disabled");
|
||||
$("#stopbtn").addClass("disabled");
|
||||
$("#statusTitle").text("Offline");
|
||||
$("#statusText").text("Reverse proxy server is offline");
|
||||
$("#serverstatus").removeClass("green");
|
||||
}
|
||||
$("#incomingPort").val(data.Option.Port);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function abbreviateNumber(value) {
|
||||
var newValue = value;
|
||||
var suffixes = ["", "k", "m", "b", "t"];
|
||||
var suffixNum = 0;
|
||||
while (newValue >= 1000 && suffixNum < suffixes.length - 1) {
|
||||
newValue /= 1000;
|
||||
suffixNum++;
|
||||
}
|
||||
if (value > 1000){
|
||||
newValue = newValue.toFixed(2);
|
||||
}
|
||||
|
||||
return newValue + suffixes[suffixNum];
|
||||
}
|
||||
|
||||
function getDailySummaryDetails(){
|
||||
function sortObjectByValue(obj) {
|
||||
// Convert object to array of [key, value] pairs
|
||||
const entries = Object.entries(obj);
|
||||
|
||||
// Sort array based on value of each pair
|
||||
entries.sort((a, b) => {
|
||||
return b[1] - a[1];
|
||||
});
|
||||
|
||||
// Convert sorted array back to object
|
||||
const sortedObj = {};
|
||||
for (const [key, value] of entries) {
|
||||
sortedObj[key] = value;
|
||||
}
|
||||
|
||||
return sortedObj;
|
||||
}
|
||||
|
||||
$.get("/api/stats/countries", function(data){
|
||||
data = sortObjectByValue(data);
|
||||
$("#country").html((Object.keys(data)[0])?Object.keys(data)[0]:"No Data");
|
||||
$("#countryList").html(`
|
||||
<div style="color: white;">
|
||||
${(Object.keys(data)[1])?Object.keys(data)[1]:"No Data"}<br>
|
||||
${(Object.keys(data)[2])?Object.keys(data)[2]:"No Data"}
|
||||
</div>
|
||||
`);
|
||||
|
||||
//populate the table
|
||||
$("#countryCodetable").html("");
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
$("#countryCodetable").append(`<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value}</td>
|
||||
</tr>`);
|
||||
}
|
||||
|
||||
if (Object.keys(data).length == 0){
|
||||
$("#countryCodetable").append(`<tr>
|
||||
<td colspan="2">No Data</td>
|
||||
</tr>`);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//Filter forward type
|
||||
function fft(ft){
|
||||
if (ft.indexOf("-") >= 0){
|
||||
ft = ft.replace("-", " (");
|
||||
ft = ft + ")";
|
||||
}
|
||||
|
||||
ft = ft.charAt(0).toUpperCase() + ft.slice(1);
|
||||
return ft;
|
||||
}
|
||||
|
||||
$.get("/api/stats/summary", function(data){
|
||||
data = sortObjectByValue(data.ForwardTypes);
|
||||
$("#forwardtype").html((Object.keys(data)[0])?fft(Object.keys(data)[0]) + ": " + abbreviateNumber(data[Object.keys(data)[0]]):"No Data");
|
||||
$("#forwardtypeList").html(`
|
||||
<div>
|
||||
${(Object.keys(data)[1])?fft(Object.keys(data)[1]) + ": " + abbreviateNumber(data[Object.keys(data)[1]]):"No Data"}<br>
|
||||
${(Object.keys(data)[2])?fft(Object.keys(data)[2]) + ": " + abbreviateNumber(data[Object.keys(data)[2]]):"No Data"}
|
||||
</div>
|
||||
`);
|
||||
|
||||
$("#forwardTypeTable").html("");
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
$("#forwardTypeTable").append(`<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value}</td>
|
||||
</tr>`);
|
||||
}
|
||||
|
||||
if (Object.keys(data).length == 0){
|
||||
$("#forwardTypeTable").append(`<tr>
|
||||
<td colspan="2">No Data</td>
|
||||
</tr>`);
|
||||
}
|
||||
});
|
||||
}
|
||||
getDailySummaryDetails();
|
||||
|
||||
|
||||
function getDailySummary(){
|
||||
$.get("/api/stats/summary?fast=true", function(data){
|
||||
console.log(data);
|
||||
|
||||
$("#summaryTotalCount").text(abbreviateNumber(data.TotalRequest));
|
||||
$("#summarySuccCount").text(abbreviateNumber(data.ValidRequest));
|
||||
$("#summaryErrCount").text(abbreviateNumber(data.ErrorRequest));
|
||||
});
|
||||
}
|
||||
setInterval(function(){
|
||||
getDailySummary();
|
||||
}, 10000);
|
||||
getDailySummary();
|
||||
|
||||
//Start and stop service button
|
||||
function startService(){
|
||||
$.post("/api/proxy/enable", {enable: true}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
function stopService(){
|
||||
$.post("/api/proxy/enable", {enable: false}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
//Show error message
|
||||
function statusErrmsg(message){
|
||||
$("#statusErrmsg").html(`<i class="red remove icon"></i> ${message}`);
|
||||
$("#statusErrmsg").slideDown('fast').delay(5000).slideUp('fast');
|
||||
}
|
||||
|
||||
function handlePortChange(){
|
||||
var newPortValue = $("#incomingPort").val();
|
||||
if (isNaN(newPortValue - 1)){
|
||||
alert("Invalid incoming port value");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post("/api/proxy/setIncoming", {incoming: newPortValue}, function(data){
|
||||
if (data.error != undefined){
|
||||
statusErrmsg(data.error);
|
||||
}
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
});
|
||||
}
|
||||
|
||||
function initHTTPtoHTTPSRedirectSetting(){
|
||||
$.get("/api/proxy/useHttpsRedirect", function(data){
|
||||
if (data == true){
|
||||
$("#redirect").checkbox("set checked");
|
||||
}
|
||||
|
||||
//Initiate the input listener on the checkbox
|
||||
$("#redirect").find("input").on("change", function(){
|
||||
let thisValue = $("#redirect").checkbox("is checked");
|
||||
$.ajax({
|
||||
url: "/api/proxy/useHttpsRedirect",
|
||||
data: {set: thisValue},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
alert(data.error);
|
||||
}else{
|
||||
//Updated
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
initHTTPtoHTTPSRedirectSetting();
|
||||
|
||||
function initTlsSetting(){
|
||||
$.get("/api/cert/tls", function(data){
|
||||
if (data == true){
|
||||
$("#tls").checkbox("set checked");
|
||||
}
|
||||
|
||||
//Initiate the input listener on the checkbox
|
||||
$("#tls").find("input").on("change", function(){
|
||||
let thisValue = $("#tls").checkbox("is checked");
|
||||
$.ajax({
|
||||
url: "/api/cert/tls",
|
||||
data: {set: thisValue},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
alert(data.error);
|
||||
}else{
|
||||
//Updated
|
||||
$("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
|
||||
initRPStaste();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
initTlsSetting();
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user