Zoraxy/web/components/status.html

<div class="ui stackable four column grid">
        <div class="column">
            <div id="serverstatus" class="ui green inverted segment">
                <h4 class="ui header">
                    <i class="exchange 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 blue inverted segment">
                <h4 class="ui header">
                    <i class="exchange icon"></i>
                    <div class="content">
                      <span></span>
                      <div class="sub header"></div>
                    </div>
                </h4>
            </div>
        </div>
        <div class="column">
            <div id="connections" class="ui yellow inverted segment">
                <h4 class="ui header">
                    <i class="exchange icon"></i>
                    <div class="content">
                      <span></span>
                      <div class="sub header"></div>
                    </div>
                </h4>
            </div>
        </div>
        <div class="column">
            <div id="connections" class="ui pink inverted segment">
                <h4 class="ui header">
                    <i class="exchange icon"></i>
                    <div class="content">
                      <span></span>
                      <div class="sub header"></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="statusErrmsg" class="ui red message" style="display: none;"></div>
<script>
    //Get the latest server status from proxy server
    function initRPStaste(){
        $.get("/api/proxy/status", function(data){
            if (data.Running == true){
                $("#startbtn").addClass("disabled");
                $("#stopbtn").removeClass("disabled");
                $("#serverstatus").addClass("green");
                $("#statusTitle").text("Online");
                $("#statusText").text("Reverse proxying 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);
        });
    }

    //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>