Zoraxy/web/components/gandetails.html

<div class="standardContainer">
    <button onclick="exitToGanList();" class="ui large circular black icon button"><i class="angle left icon"></i></button>
    <div style="max-width: 300px; margin-top: 1em;">
        <button onclick='$("#gannetDetailEdit").slideToggle("fast");' class="ui mini basic right floated circular icon button" style="display: inline-block; margin-top: 2.5em;"><i class="ui edit icon"></i></button>
        <h1 class="ui header">
            <span class="ganetID"></span>
            <div class="sub header ganetName"></div>
        </h1>
        <div class="ui divider"></div>
        <p><span class="ganetDesc"></span></p>
        
    </div>
    <div id="gannetDetailEdit" class="ui form" style="margin-top: 1em; display:none;">
        <div class="ui divider"></div>
        <p>You can change the network name and description below. <br>The name and description is only for easy management purpose and will not effect the network operation.</p>
        <div class="field">
            <label>Network Name</label>
            <input type="text" id="gaNetNameInput" placeholder="">
          </div>
        <div class="field">
          <label>Network Description</label>
          <textarea id="gaNetDescInput" style="resize: none;"></textarea>
          <button onclick="saveNameAndDesc(this);" class="ui basic right floated button" style="margin-top: 0.6em;"><i class="ui save icon"></i> Save</button>
          <button onclick='$("#gannetDetailEdit").slideUp("fast");' class="ui basic right floated button" style="margin-top: 0.6em;"><i class="ui red remove icon"></i> Cancel</button>
        </div>
        <br><br>
    </div>
    <div class="ui divider"></div>
    <h2>Settings</h2>
    <div class="" style="overflow-x: auto;">
        <table class="ui basic celled unstackable table" style="min-width: 560px;">
            <thead>
                <tr>
                    <th colspan="4">IPv4 Auto-Assign</th>
                </tr>
            </thead>
            <tbody id="ganetRangeTable">
                
            </tbody>
        </table>
    </div>
    <br>
    <div class="ui form">
        <h3>Custom IP Range</h3>
        <p>Manual IP Range Configuration. The IP range must be within the selected CIDR range. 
        <br>Use <code>Utilities > IP to CIDR tool</code> if you are not too familiar with CIDR notations.</p>
        <div class="two fields">
            <div class="field">
                <label>IP Start</label>
                <input type="text" class="ganIpStart" placeholder="">
            </div>
            <div class="field">
                <label>IP End</label>
                <input type="text" class="ganIpEnd" placeholder="">
            </div>
        </div>
    </div>
    <button onclick="setNetworkRange();" class="ui basic button"><i class="ui blue save icon"></i> Save Settings</button>

    <div class="ui divider"></div>
    <h2>Members</h2>
    <p>To join this network using command line, type <code>sudo zerotier-cli join <span class="ganetID"></span></code> on your device terminal</p>
    <div class="ui checkbox" style="margin-bottom: 1em;">
        <input id="showUnauthorizedMembers" type="checkbox" onchange="changeUnauthorizedVisibility(this.checked);">
        <label>Show Unauthorized Members</label>
    </div>
    <div class="" style="overflow-x: auto;">
        <table class="ui celled unstackable table">
            <thead>
                <tr>
                    <th>Auth</th>
                    <th>Address</th>
                    <th>Name</th>
                    <th>Managed IP</th>
                    <th>Authorized Since</th>
                    <th>Version</th>
                    <th>Remove</th>
                </tr>
            </thead>
            <tbody id="networkMemeberTable">
                <tr>
                    
                </tr>
            </tbody>
        </table>
    </div>
    <br><br>
</div>
<script>
    $(".checkbox").checkbox();
    var currentGANetID = "";
    var currentGANNetMemeberListener = undefined;
    var currentGaNetDetails = {};
    var currentGANMemberList = [];
    var netRanges = {
            "10.147.17.*": "10.147.17.0/24",
            "10.147.18.*": "10.147.18.0/24",
            "10.147.19.*": "10.147.19.0/24",
            "10.147.20.*": "10.147.20.0/24",
            "10.144.*.*": "10.144.0.0/16",
            "10.241.*.*": "10.241.0.0/16",
            "10.242.*.*": "10.242.0.0/16",
            "10.243.*.*": "10.243.0.0/16",
            "10.244.*.*": "10.244.0.0/16",
            "172.22.*.*": "172.22.0.0/15",
            "172.23.*.*": "172.23.0.0/16",
            "172.24.*.*": "172.24.0.0/14",
            "172.25.*.*": "172.25.0.0/16",
            "172.26.*.*": "172.26.0.0/15",
            "172.27.*.*": "172.27.0.0/16",
            "172.28.*.*": "172.28.0.0/15",
            "172.29.*.*": "172.29.0.0/16",
            "172.30.*.*": "172.30.0.0/15",
            "192.168.191.*": "192.168.191.0/24",
            "192.168.192.*": "192.168.192.0/24",
            "192.168.193.*": "192.168.193.0/24",
            "192.168.194.*": "192.168.194.0/24",
            "192.168.195.*": "192.168.195.0/24",
            "192.168.196.*": "192.168.196.0/24"
        }

    function generateIPRangeTable(netRanges) {
        $("#ganetRangeTable").empty();
        const tableBody = document.getElementById('ganetRangeTable');
        const cidrs = Object.values(netRanges);
        
        // Set the number of rows and columns to display in the table
        const numRows = 6;
        const numCols = 4;

        let row = document.createElement('tr');
        let col = 0;
        for (let i = 0; i < cidrs.length; i++) {
            if (col >= numCols) {
            tableBody.appendChild(row);
            row = document.createElement('tr');
            col = 0;
            }

            const td = document.createElement('td');
            td.setAttribute('class', `clickable iprange`);
            td.setAttribute('CIDR', cidrs[i]);
            td.innerHTML = cidrs[i];
            let thisCidr = cidrs[i];
            td.onclick = function(){
                selectNetworkRange(thisCidr, td);
            };
            
            row.appendChild(td);
            col++;
        }

        // Add any remaining cells to the table
        if (col > 0) {
            for (let i = col; i < numCols; i++) {
                row.appendChild(document.createElement('td'));
            }
            tableBody.appendChild(row);
        }
    }

    function highlightCurrentGANetCIDR(){
        var currentCIDR = currentGaNetDetails.routes[0].target;
        $(".iprange").each(function(){
            if ($(this).attr("CIDR") == currentCIDR){
                $(this).addClass("active");
                populateStartEndIpByCidr(currentCIDR);
            }
        })
    }

    function populateStartEndIpByCidr(cidr){
        function cidrToRange(cidr) {
            var range = [2];
            cidr = cidr.split('/');
            var start = ip2long(cidr[0]);
            range[0] = long2ip(start);
            range[1] = long2ip(Math.pow(2, 32 - cidr[1]) + start - 1);
            return range;
        }
        var cidrRange = cidrToRange(cidr);
        $(".ganIpStart").val(cidrRange[0]);
        $(".ganIpEnd").val(cidrRange[1]);
    }

    function selectNetworkRange(cidr, object){
        populateStartEndIpByCidr(cidr);

        $(".iprange.active").removeClass("active");
        $(object).addClass("active");
    }

    function setNetworkRange(){
        var ipstart = $(".ganIpStart").val().trim();
        var ipend = $(".ganIpEnd").val().trim();

        if (ipstart == ""){
            $(".ganIpStart").parent().addClass("error");
        }else{
            $(".ganIpStart").parent().removeClass("error");
        }

        if (ipend == ""){
            $(".ganIpEnd").parent().addClass("error");
        }else{
            $(".ganIpEnd").parent().removeClass("error");
        }

        //Get CIDR from selected range group
        var cidr = $(".iprange.active").attr("cidr");

        $.ajax({
            url: "/api/gan/network/setRange",
            metohd: "POST",
            data:{
                netid: currentGANetID,
                cidr: cidr,
                ipstart: ipstart,
                ipend: ipend
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000)
                }else{
                    msgbox("Network Range Updated")
                }
            }
        })
    }


    function saveNameAndDesc(object=undefined){
        var name = $("#gaNetNameInput").val();
        var desc = $("#gaNetDescInput").val();
        if (object != undefined){
            $(object).addClass("loading");
        }
        $.ajax({
            url: "/api/gan/network/name",
            method: "POST",
            data: {
                netid: currentGANetID,
                name: name,
                desc: desc,
            },
            success: function(data){
                initNetNameAndDesc();
                if (object != undefined){
                    $(object).removeClass("loading");
                    msgbox("Network Metadata Updated");
                }
                $("#gannetDetailEdit").slideUp("fast");
            }
        });
    }

    function initNetNameAndDesc(){
        //Get the details of the net
        $.get("/api/gan/network/name?netid=" + currentGANetID, function(data){
            if (data.error !== undefined){
                msgbox(data.error, false, 6000);
            }else{
                $("#gaNetNameInput").val(data[0]);
                $(".ganetName").html(data[0]);
                $("#gaNetDescInput").val(data[1]);
                $(".ganetDesc").text(data[1]);
            }
        });
    }

    function initNetDetails(){
         //Get the details of the net
         $.get("/api/gan/network/list?netid=" + currentGANetID, function(data){
            if (data.error !== undefined){
                msgbox(data.error, false, 6000);
            }else{
                currentGaNetDetails = data;
                highlightCurrentGANetCIDR();
            }
        });
    }

    //Handle delete IP from memeber
    function deleteIpFromMemeber(memberid, ip){
        $.ajax({
            url: "/api/gan/members/ip",
            metohd: "POST",
            data: {
                netid: currentGANetID, 
                memid: memberid,
                opr: "del",
                ip: ip,
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000);
                }else{
                    msgbox("IP removed from member " + memberid)
                }
                renderMemeberTable();
            }
        });
    }

    function addIpToMemeberFromInput(memberid, newip){
        function isValidIPv4Address(address) {
            // Split the address into its 4 components
            const parts = address.split('.');
            
            // Check that there are 4 components
            if (parts.length !== 4) {
                return false;
            }
            
            // Check that each component is a number between 0 and 255
            for (let i = 0; i < 4; i++) {
                const part = parseInt(parts[i], 10);
                if (isNaN(part) || part < 0 || part > 255) {
                return false;
                }
            }
            
            // The address is valid
            return true;
        }

        if (!isValidIPv4Address(newip)){
            msgbox(newip + " is not a valid IPv4 address", false, 5000)
            return
        }

        $.ajax({
            url: "/api/gan/members/ip",
            metohd: "POST",
            data: {
                netid: currentGANetID, 
                memid: memberid,
                opr: "add",
                ip: newip,
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000);
                }else{
                    msgbox("IP added to member " + memberid)
                }
                renderMemeberTable();
            }
        })
    }

    //Member table populate
    function renderMemeberTable(forceUpdate = false) {
        $.ajax({
            url: '/api/gan/members/list?netid=' + currentGANetID + '&detail=true',
            type: 'GET',
            success: function(data) {
                const tableBody = $('#networkMemeberTable');
                data.sort((a, b) => a.address.localeCompare(b.address));
                //Check if the new object equal to the old one
                if (objectEqual(currentGANMemberList, data) && !forceUpdate){
                    //Do not need to update it
                    return;
                }
                tableBody.empty();
                currentGANMemberList = data;

                data.forEach((member) => {
                    let lastAuthTime = new Date(member.lastAuthorizedTime).toLocaleString();
                    if (member.lastAuthorizedTime == 0){
                        lastAuthTime = "Never";
                    }

                    let version = `${member.vMajor}.${member.vMinor}.${member.vProto}.${member.vRev}`;
                    if (member.vMajor == -1){
                        version = "Unknown";
                    }

                    let authorizedCheckbox = `<div class="ui fitted checkbox">
                        <input type="checkbox" addr="${member.address}" name="isAuthrozied" onchange="handleMemberAuth(this);">
                        <label></label>
                    </div>`;
                    if (member.authorized){
                        authorizedCheckbox = `<div class="ui fitted checkbox">
                            <input type="checkbox" addr="${member.address}" name="isAuthrozied" onchange="handleMemberAuth(this);" checked="">
                            <label></label>
                        </div>`
                    }

                    let rowClass = "authorized";
                    let unauthorizedStyle = "";
                    if (!$("#showUnauthorizedMembers")[0].checked && !member.authorized){
                        unauthorizedStyle = "display:none;";
                    }
                    if (!member.authorized){
                        rowClass = "unauthorized"
                    }
                    
                    let assignedIp = "";

                    if (member.ipAssignments.length == 0){
                        assignedIp = "Not assigned"
                    }else{
                        assignedIp = `<div class="ui list">`
                        member.ipAssignments.forEach(function(thisIp){
                            assignedIp += `<div class="item" style="width: 100%;">${thisIp} <a style="cursor:pointer; float: right;" title="Remove IP" onclick="deleteIpFromMemeber('${member.address}','${thisIp}');"><i class="red remove icon"></i></a></div>`;
                        })
                        assignedIp += `</div>`
                    }
                    const row = $(`<tr class="GANetMemberEntity ${rowClass}" style="${unauthorizedStyle}">`);
                    row.append($(`<td class="GANetMember ${rowClass}" style="text-align: center;">`).html(authorizedCheckbox));
                    row.append($('<td>').text(member.address));
                    row.append($('<td>').html(`<span class="memberName" addr="${member.address}"></span> <a style="cursor:pointer; float: right;" title="Edit Memeber Name" onclick="renameMember('${member.address}');"><i class="grey edit icon"></i></a>`));
                    row.append($('<td>').html(`${assignedIp}
                        <div class="ui action mini fluid input" style="min-width: 200px;">
                            <input type="text" placeholder="IPv4" onchange="$(this).val($(this).val().trim());">
                            <button onclick="addIpToMemeberFromInput('${member.address}',$(this).parent().find('input').val());" class="ui basic icon button">
                                <i class="add icon"></i>
                            </button>
                        </div>`));
                    row.append($('<td>').text(lastAuthTime));
                    row.append($('<td>').text(version));
                    row.append($(`<td title="Deauthorize & Delete Memeber" style="text-align: center;" onclick="handleMemberDelete('${member.address}');">`).html(`<button class="ui basic mini icon button"><i class="red remove icon"></i></button>`));

                    tableBody.append(row);
                });

                if (data.length == 0){
                    tableBody.append(`<tr>
                        <td colspan="7"><i class="green check circle icon"></i> No member has joined this network yet.</td>
                    </tr>`);
                }

                initNameForMembers();
            },
            error: function(xhr, status, error) {
                console.log('Error:', error);
            }
        });
    }

    function initNameForMembers(){
        $(".memberName").each(function(){
            let addr = $(this).attr("addr");
            let targetDOM = $(this);
            $.ajax({
                url: "/api/gan/members/name",
                method: "POST",
                data: {
                    netid: currentGANetID,
                    memid: addr,
                },
                success: function(data){
                    if (data.error != undefined){
                        $(targetDOM).text("N/A");
                    }else{
                        $(targetDOM).text(data.Name);
                    }
                }
            });
        })
    }

    function renameMember(targetMemberAddr){
        if (targetMemberAddr == ""){
            msgbox("Member address cannot be empty", false, 5000)
            return
        }

        let newname = prompt("Enter a easy manageable name for " + targetMemberAddr, "");
        if (newname != null && newname.trim() != "") {
          $.ajax({
            url: "/api/gan/members/name",
            method: "POST",
            data: {
                netid: currentGANetID,
                memid: targetMemberAddr,
                name: newname
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 6000);
                }else{
                    msgbox("Member Name Updated"); 
                }
                renderMemeberTable(true);
            }
          })
        }
    }

    //Helper function to check if two objects are equal recursively
    function objectEqual(obj1, obj2) {
        // compare types
        if (typeof obj1 !== typeof obj2) {
            return false;
        }

        // compare values
        if (typeof obj1 !== 'object' || obj1 === null) {
            return obj1 === obj2;
        }

        const keys1 = Object.keys(obj1);
        const keys2 = Object.keys(obj2);

        // compare keys
        if (keys1.length !== keys2.length) {
            return false;
        }

        for (const key of keys1) {
            if (!keys2.includes(key)) {
            return false;
            }

            // recursively compare values
            if (!objectEqual(obj1[key], obj2[key])) {
                return false;
            }
        }

        return true;
    }


    function changeUnauthorizedVisibility(visable){
        if(visable){
            $(".GANetMemberEntity.unauthorized").show();
        }else{
            $(".GANetMemberEntity.unauthorized").hide();
        }
    }

    function handleMemberAuth(object){
        let targetMemberAddr = $(object).attr("addr");
        let isAuthed = object.checked;
        $.ajax({
            url: "/api/gan/members/authorize",
            method: "POST",
            data: {
                netid:currentGANetID, 
                memid: targetMemberAddr, 
                auth: isAuthed
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 6000);
                }else{
                    if (isAuthed){
                        msgbox("Member Authorized");
                    }else{
                        msgbox("Member Deauthorized");
                    }
                    
                }

                renderMemeberTable(true);
            }
        })
    }

    function handleMemberDelete(addr){
        if (confirm("Confirm delete member " + addr + " ?")){
            $.ajax({
                url: "/api/gan/members/delete",
                method: "POST",
                data: {
                    netid:currentGANetID, 
                    memid: addr, 
                },
                success: function(data){
                    if (data.error != undefined){
                        msgbox(data.error, false, 6000);
                    }else{
                        msgbox("Member Deleted");
                    }
                    renderMemeberTable(true);
                }
            });
        }
       
    }

    //Entry points
    function initGanetDetails(ganetId){
        currentGANetID = ganetId;
        $(".ganetID").text(ganetId);
        initNetNameAndDesc(ganetId);
        generateIPRangeTable(netRanges);
        initNetDetails();
        renderMemeberTable(true);

        //Setup a listener to listen for member list change
        if (currentGANNetMemeberListener == undefined){
            currentGANNetMemeberListener = setInterval(function(){
                if ($('#networkMemeberTable').length > 0 && currentGANetID){
                    renderMemeberTable();
                }
            }, 3000);
        }
        
    }

    //Exit point
    function exitToGanList(){
        $("#gan").load("./components/gan.html", function(){
            if (tabSwitchEventBind["gan"]){
                tabSwitchEventBind["gan"]();
            }
        });
    }

    
</script>