TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <title>UPnP Port Forward</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
     
    </style>
</head>
<body>
    <br>
    <div class="ui container">
        <div class="ui header">
            Port Forwarding
            <div class="sub header">Manual UPnP Port Forwarding / Virtual Server</div>
        </div>
        <div class="ui divider"></div>
        <div id="errormessagedialog" class="ui red message" style="display:none;">
            <h4 class="ui header">
                <i class="remove icon"></i>
                <div class="content">
                    <span id="errmsg"></span>
                    <div class="sub header"><p>If you are sure you have enabled UPnP services in your startup parameter, it might cause by the ArozOS was unable to discover your UPnP router in the local area network. <br>Please restart your router and ArozOS system and try again.</p></div>
                </div>
            </h4>
            
        </div>
        <div>
            <button class="ui green basic small button" onclick="toggleNewRule();"><i class="add icon"></i> Add</button>
            <button class="ui red basic small button" onclick="deleteSelected();"><i class="trash icon"></i> Remove</button>
        </div>
        <div id="addRule" class="ui segment" style="display: none;">
            <h4>Add New Port Forward Rule</h4>

            <form class="ui form" onsubmit="handleNewRule(event)">
                <div class="field">
                  <label>Port Number</label>
                  <input type="number" id="portnum" name="port" placeholder="8081" min="1" max="65535">
                </div>
                <div class="field">
                  <label>Forward Rule Name</label>
                  <input type="text" id="polyname" name="polcyname" placeholder="Unnamed Forwarding Rule">
                  <small>An unique name that register to the router UPnP client list for administration purposes. Usually a short sentence that describe the reason you forward this port.</small>
                </div>
                <button class="ui right floated button" onclick="toggleNewRule(event);">Cancel</button>
                <button class="ui green right floated button" type="submit"><i class="add icon"></i> Add Rule</button>
                <br><br>
              </form>
              
        </div>
        <table class="ui celled table">
            <thead>
                <tr>
                    <th></th>
                    <th>Service</th>
                    <th>External Port</th>
                    <th>Protocol</th>
                    <th>Modify</th>
                </tr>
            </thead>
            <tbody id="pfwlist">
             
            </tbody>
          </table>
    </div>
    <script>

        initPortForwardList();

        //Submit the new rule
        function handleNewRule(e){
            e.preventDefault();
            var portNumber = $("#portnum").val();
            var polyname = $("#polyname").val();

            //Create port forward rule
            $.ajax({
                url: "../../system/network/portforward",
                data: {opr: "add", port: portNumber, name: polyname},
                success: function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        //Refresh list
                        initPortForwardList();

                        //Hide add new interface
                        $("#addRule").slideUp();
                    }
                }
                   
            })
        }

        function toggleNewRule(event){
            if (event != undefined){
                event.preventDefault();
            }
            $("#addRule").stop().finish().slideToggle();
        }

        function initPortForwardList(){
            $.ajax({
                url: "../../system/network/portforward",
                data: {},
                success: function(data){
                    $("#pfwlist").html("");
                    if (data.error !== undefined){
                        $('button').addClass("disabled");
                        $("#errmsg").text(data.error);
                        $("#errormessagedialog").show();
                        return
                    }else{
                        data.forEach(rule => {
                            $("#pfwlist").append(`<tr>`);
                            if (rule.ReadOnly == false){
                                $("#pfwlist").append(`
                                <td class="collapsing" data-label="">
                                    <div class="ui fitted checkbox">
                                        <input class="multi" port="${rule.Port}" type="checkbox">
                                        <label></label>
                                    </div>
                                </td>`);
                            }else{
                                $("#pfwlist").append(`<td class="collapsing" data-label=""> <i class="square full icon"></i> </td>`);
                            }

                            var deleteButton = `<a href="#" onclick="deleteForwardRule(this);" port="${rule.Port}"><i class="trash large icon"></i></a>`;
                            if (rule.ReadOnly == true){
                                deleteButton = `READ ONLY`;
                            }

                            $("#pfwlist").append(`
                                <td data-label="">${rule.Name}</td>
                                <td data-label="">${rule.Port}</td>
                                <td data-label="">ALL</td>
                                <td data-label="">
                                    ${deleteButton}
                                </td>
                            </tr>`);
                        })
                    }
                },
                error: function(){
                    $('button').addClass("disabled");
                    $("#errmsg").text("UPnP Servie is Disabled");
                    $("#errormessagedialog").show();
                }
            })
        }

        function deleteSelected(){
            var ports = [];
            $("input:checkbox[class=multi]:checked").each(function(){
                var thisPort = $(this).attr("port");
                ports.push(parseInt(thisPort));
            });

            if (ports.length == 0){
                //Not selecting anything
                return;
            }

            //Confirm removal
            if (confirm("Confirm removing forward on: " + ports.join(", ") + "?")){
                ports.forEach(port => {
                    $.ajax({
                    url: "../../system/network/portforward",
                    data: {opr: "remove", port: port},
                    success: function(data){
                            if (data.error !== undefined){
                                alert(data.error);
                            }else{
                                //Refresh list
                                initPortForwardList();
                            }
                        }
                        
                    })
                })
            }
            
        }

        function deleteForwardRule(object){
            var port = $(object).attr("port");
            if (confirm("Confirm Removing forward to: " + port + "?")){
                $.ajax({
                url: "../../system/network/portforward",
                data: {opr: "remove", port: port},
                success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            //Refresh list
                            initPortForwardList();
                        }
                    }
                    
                })
            }
           
        }
    </script>
</body>
</html>