Zoraxy/web/components/status.html

<div class="ui stackable grid">
    <div class="ten wide column">
        <div id="serverstatus" class="ui green statustab inverted segment">
            <h1 class="ui header" style="margin-top: 1em; margin-left: 0.4em; padding-bottom: 1em;">
                <i class="power off icon"></i>
                <div class="content">
                    <span id="statusTitle">Offline</span>
                    <div class="sub header" id="statusText">Reverse proxy server is offline</div>
                </div>
            </h1>
            <div class="dot-container">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>
    <div class="six wide column">
        <div class="ui greybackground statustab segment">
            <h5 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>
            </h5>
            <div class="ui divider"></div>
            <h5 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>
            </h5>
            <div class="ui divider"></div>
            <h5 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>
            </h5>
        </div>
    </div>
</div>
<div class="ui divider"></div>
<h4>Basic Settings</h4>
<p>Inbound Port (Port to be proxied)</p>
<div class="ui action fluid notloopbackOnly input">
    <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
    <button class="ui basic green notloopbackOnly button" onclick="handlePortChange();">Apply</button>
</div>
<br>
<div id="tls" class="ui toggle notloopbackOnly checkbox">
    <input type="checkbox">
    <label>Use TLS to serve proxy request</label>
</div>
<br>
<div id="redirect" class="ui toggle notloopbackOnly checkbox" style="margin-top: 0.6em;">
    <input type="checkbox">
    <label>Force redirect HTTP request to HTTPS<br>
        <small>(Only apply when listening port is not 80)</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 notloopbackOnly 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="">
<h4>Statistic Overview</h4>
<div class="ui two column stackable grid">
    <div class="column">
      <p>Visitor Counts</p>
      <table class="ui unstackable inverted 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 inverted 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>
</div>
<br>
<button class="ui right floated basic button" onclick="getDailySummaryDetails();"><i class="green refresh icon"></i> Refresh</button>
<br><br>
<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
            $(".notloopbackOnly").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>
                ${(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");
            }else{
                $("#redirect").addClass('disabled');
            }

            //Initiate the input listener on the checkbox
            $("#tls").find("input").on("change", function(){
                let thisValue = $("#tls").checkbox("is checked");
                if (thisValue){
                    $("#redirect").removeClass('disabled');
                }else{
                    $("#redirect").addClass('disabled');
                }
                $.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>