Zoraxy/web/components/status.html

<div id="serverstatus" class="ui message">
    <h3 class="ui header">
        <i class="exchange icon"></i>
        <div class="content">
          <span id="statusTitle">Offline</span>
          <div class="sub header" id="statusText">Reverse proxy server is offline</div>
        </div>
    </h3>
</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="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>

<script>
    //Get the latest server status from proxy server
    function initRPStaste(){
        $.get("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.ListenPort);
            }else{
                $("#startbtn").removeClass("disabled");
                $("#stopbtn").addClass("disabled");
                $("#statusTitle").text("Offline");
                $("#statusText").text("Reverse proxy server is offline");
                $("#serverstatus").removeClass("green");
            }
            $("#incomingPort").val(data.ListenPort);
        });
    }

    //Start and stop service button
    function startService(){
        $.post("enable", {enable: true}, function(data){
            if (data.error != undefined){
                errmsg(data.error);
            }
            initRPStaste();
        });
    }   

    function stopService(){
        $.post("enable", {enable: false}, function(data){
            if (data.error != undefined){
                errmsg(data.error);
            }
            initRPStaste();
        });
    }

    function handlePortChange(){
        var newPortValue = $("#incomingPort").val();
        if (isNaN(newPortValue - 1)){
            alert("Invalid incoming port value");
            return;
        }

        $.post("setIncoming", {incoming: newPortValue}, function(data){
            if (data.error != undefined){
                errmsg(data.error);
            }
            $("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
            initRPStaste();
        });
    }

    function initTlsSetting(){
        $.get("/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: "/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>