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").toggle();' 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>
        </div>
        <div class="field">
            <table class="ui very basic collapsing celled table">
                <tbody>
                  <tr>
                    <td>
                     
                    </td>
                    <td>
                      
                    </td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="ui divider"></div>
    <br><br>
</div>
<script>
    var currentGANetID = "";
    var currentGaNetDetails = {};

    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");
                }
            }
        });
    }

    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]);
            }
        });
    }

    //Entry points
    function initGanetDetails(ganetId){
        currentGANetID = ganetId;
        $(".ganetID").text(ganetId);
        initNetNameAndDesc(ganetId);
    }

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

    
</script>