Zoraxy/web/components/gan.html

<div 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;">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;">0 / 0</div>
                    <div class="description">Connected Nodes</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ganlist">
            <button class="ui basic orange button">Create New Network</button>
            <div class="ui icon input">
                <input type="text" placeholder="Search a Network">
                <i class="circular search link icon"></i>
            </div>
            <div class="ui segment">
                <div class="ui input">
                    <input type="text" placeholder="Network Name">
                </div>
                <button class="ui basic button">
                    <i class="blue add icon"></i> Add Network
                </button>
            </div>
           
            <div class="ui divider"></div>
            <table class="ui celled basic striped table">
                <thead>
                    <tr>
                        <th>Network ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Subnet</th>
                        <th>Nodes</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
                    <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>
<script>
    /*
        Network Management Functions
    */
    function handleAddNetwork(){

    }

    function wildcardToSubnetMask(wildcard) {
        var octets = wildcard.split('.');
        var binary = '';
        for (var i = 0; i < 4; i++) {
            if (octets[i] === '*') {
            binary += '00000000';
            } else {
            binary += parseInt(octets[i], 10).toString(2).padStart(8, '0');
            }
        }
        var subnetBits = binary.replace(/0+$/, '').length;
        var subnetMask = subnetBits === 32 ? '255.255.255.255' : (new Array(5).join('0') + parseInt(binary.substr(0, subnetBits), 2).toString(10)).slice(-3).split('').join('.');
        return subnetMask;
    }

    function addNetwork(name, subnetMask) {
        $.ajax({
            url: "/api/gan/network/add",
            type: "POST",
            dataType: "json",
            data: {
                name: name,
                subnetMask: subnetMask
            },
            success: function(response) {
            console.log("Network added successfully:", response);
            },
            error: function(xhr, status, error) {
            console.log("Error adding network:", error);
            }
        });
    }
</script>