Zoraxy/web/components/gan.html

<div id="ganetWindow" class="standardContainer">
    <div class="ui basic segment">
        <h2>Global Area Network</h2>
        <p>Virtual Network Hub that allows all networked devices to communicate as if they all reside in the same physical data center or cloud region</p>
    </div>
    <div class="gansnetworks">
        <div class="ganstats">
            <div class="ui list">
                <div class="item">
                    <i class="exchange icon"></i>
                    <div class="content">
                    <div class="header" style="font-size: 1.2em;" id="ganetCount">0</div>
                    <div class="description">Networks</div>
                    </div>
                </div>
                <div class="item">
                    <i class="desktop icon"></i>
                    <div class="content">
                    <div class="header" style="font-size: 1.2em;" id="ganodeCount">0</div>
                    <div class="description">Connected Nodes</div>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <div class="ganlist">
            <button class="ui basic orange button" onclick="$('#newGanForm').fadeToggle('fast');">Create New Network</button>
            <div class="" id="newGanForm" style="display:none; position: relative;">
                <div class="ui divider"></div>
                <p>Enter a new network name to create new network</p>
                <div class="ui action fluid input">
                    <input type="text" id="networkName" placeholder="Network Name">
                    <button class="ui basic button" onclick="handleAddNetwork();">
                        <i class="blue add icon"></i> Add Network
                    </button>
                </div>
                <button onclick="$('#newGanForm').fadeOut('fast');" class="ui mini circular basic icon button" style="position: absolute; right: 0.4em; top: 1em;"><i class="remove icon"></i></button>
            </div>
            <div class="ui divider"></div>
            <div class="ui icon input" style="margin-bottom: 1em;">
                <input type="text" placeholder="Search a Network">
                <i class="circular search link icon"></i>
            </div>
            <div style="width: 100%; overflow-x: auto;">
                <table class="ui celled basic unstackable striped table">
                    <thead>
                        <tr>
                            <th>Network ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Subnet</th>
                            <th>Nodes</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="GANetList">
                        <tr>
                            <td colspan="6"><i class="ui green circle check icon"></i> No Global Area Network Found on this host</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    /*
        Network Management Functions
    */
    function handleAddNetwork(){
        let networkName = $("#networkName").val().trim();
        if (networkName == ""){
            msgbox("Network name cannot be empty", false, 5000);
            return;
        }

        //Add network with default settings
        addGANet(networkName, "192.168.196.0/24");
        $("#networkName").val("");
    }

    function addGANet(name, subnetMask) {
        $.ajax({
            url: "/api/gan/network/add",
            type: "POST",
            dataType: "json",
            data: {
                name: name,
                subnetMask: subnetMask
            },
            success: function(response) {
                if (response.error != undefined){
                    msgbox(response.error, false, 5000);
                }else{
                    msgbox("Network added successfully");
                }
                console.log("Network added successfully:", response);
                listGANet();
            },
            error: function(xhr, status, error) {
                console.log("Error adding network:", error);
            }
        });
    }

    function listGANet(){
        $.get("/api/gan/network/list", function(data){
            $("#GANetList").empty();
            if (data.error != undefined){
                msgbox(data.error, false, 5000);
            }else{
                var nodeCount = 0;
                data.forEach(function(gan){
                    $("#GANetList").append(`<tr>
                        <td>${gan.UID}</td>
                        <td>${gan.Name}</td>
                        <td>${gan.Description}</td>
                        <td>${gan.CIDR}</td>
                        <td>${gan.Nodes.length}</td>
                        <td>
                            <button onclick="openGANetDetails('${gan.UID}');" class="ui tiny basic icon button" title="Edit Network"><i class="edit icon"></i></button>
                            <button onclick="removeGANet('${gan.UID}');" class="ui tiny basic icon button" title="Remove Network"><i class="red remove icon"></i></button>
                        </td>
                    </tr>`);

                    nodeCount += gan.Nodes.length;
                });

                if (data.length == 0){
                    $("#GANetList").append(`<tr>
                        <td colspan="6"><i class="ui green circle check icon"></i> No Global Area Network Found on this host</td>
                    </tr>`);
                }

                $("#ganodeCount").text(nodeCount);
                $("#ganetCount").text(data.length);
            }
        })
    }

    //Remove the given GANet
    function removeGANet(netid){
        if (confirm("Confirm remove Network " + netid + " PERMANENTLY ?"))
        $.ajax({
            url: "/api/gan/network/remove",
            type: "POST",
            dataType: "json",
            data: {
                id: netid,
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000);
                }else{
                    msgbox("Net " + netid + " removed");
                }
                listGANet();
            }
        });
    }

    function openGANetDetails(netid){
        $("#ganetWindow").load("./components/gandetails.html", function(){
            setTimeout(function(){
                initGanetDetails(netid);
            });
        });
       
    }

     //Bind event to tab switch
     tabSwitchEventBind["gan"] = function(){
        //On switch over to this page, load info
        listGANet();
    }
</script>