Zoraxy/web/components/vdir.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Virtual Directory</h2>
        <p>A virtual directory is a consolidated view of multiple directories that provides a unified entry point for users to access disparate sources.</p>
    </div>
    <div class="ui stackable grid">
        <div class="six wide column">
            <h4>Select a Target Host / Site</h4>
            <p>Attach Virtual Directory routing rule to root proxy router</p>
            <div class="ui checkbox">
                <input type="checkbox" id="useRootProxyRouterForVdir" onchange="handleVdirAttachTargetChange(this);">
                <label>Use Root Proxy Router<br>
                <small>Only applicable when Default Site is set to "Reverse Proxy" mode</small></label>
            </div>
            <div class="ui horizontal divider">OR</div>
            <p>Create Virtual Directory routing in existing host / routing rule entries</p>
            <div class="ui fluid search selection dropdown">
                <input type="hidden" id="vdirBaseRoutingRule" name="vdirBaseRoutingRule" onchange="handleVdirAttachTargetChange();">
                <i class="dropdown icon"></i>
                <div class="default text">Select a host to edit</div>
                <div class="menu" id="hostDomainList">
                    
                </div>
            </div>
        </div>
        <div class="ten wide column">
            <h4>Virtual Directory Routing Rules</h4>
            <p>The following are the list of Virtual Directories currently handled by the host router above</p>
            <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
                <table class="ui celled sortable basic unstackable compact table">
                    <thead>
                        <tr>
                            <th>Virtual Directory</th>
                            <th>Proxy To</th>
                            <th>Basic Auth</th>
                            <th class="no-sort" style="min-width: 7.2em;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="vdirList">
                        <tr>
                            <td data-label=""><button class="ui circular mini red basic button"><i class="remove icon"></i> Remove Proxy</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="ui icon right floated basic button" onclick="listVdirs();"><i class="green refresh icon"></i> Refresh</button>
        </div>
    </div>
    
    
    
    <br><br>
</div>
<script>
    //Virtual directories functions

    //Initialize the list of hosts that can be used to attach vdirs config
    function initVdirList(){
        //Load the hosts into the dropdown
        $("#hostDomainList").html("");
        $.get("/api/proxy/list?type=host", function(data){
            if (data.error != undefined){
                msgbox(data.error, false);
            }else{
                if (data.length == 0){
                    //No hosts found
                }else{
                    data.forEach(proxyEndpoint => {
                        let domain = proxyEndpoint.RootOrMatchingDomain;
                        $("#hostDomainList").append(`<div class="item" data-value="${domain}">${domain}</div>`);
                    });

                    //Update the dropdown events
                    $("#vdirBaseRoutingRule").parent().dropdown();
                }
            }
        });
    }

    function handleVdirAttachTargetChange(targetCheckbox=undefined){
        if (targetCheckbox != undefined && targetCheckbox.checked){
            $("#vdirBaseRoutingRule").parent().addClass("disabled");

            //Load the vdir list for root
            loadVdirList("root");
        }else{
            $("#vdirBaseRoutingRule").parent().removeClass("disabled");
            let selectedEndpointRule = $("#vdirBaseRoutingRule").val();
            if (selectedEndpointRule != ""){
                loadVdirList(selectedEndpointRule);
            }
        }
    }

    function loadVdirList(endpoint){
        alert("Loading endpoint " + endpoint)
        if (endpoint == "root"){
            //Load root endpoint vdir list

        }else{
            //Load target endpoint list

        }
    }

    /*
    function listVdirs(){
        $.get("/api/proxy/list?type=vdir", function(data){
            $("#vdirList").html(``);
            if (data.error !== undefined){
                $("#vdirList").append(`<tr>
                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
                </tr>`);
            }else if (data.length == 0){
                $("#vdirList").append(`<tr>
                    <td data-label="" colspan="3"><i class="checkmark icon"></i> No Virtual Directory Record</td>
                </tr>`);
            }else{
                data.forEach(vdir => {
                    let tlsIcon = "";
                    let vdirData = encodeURIComponent(JSON.stringify(vdir));
                    if (vdir.RequireTLS){
                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
                        if (vdir.SkipCertValidations){
                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
                        }
                    }

                    let tlsVerificationField = "";
                    if (vdir.RequireTLS){
                        tlsVerificationField = !vdir.SkipCertValidations?`<i class="ui green check icon"></i>`:`<i class="ui yellow exclamation circle icon" title="TLS/SSL Verification will be skipped on this host"></i>`
                    }else{
                        tlsVerificationField = "N/A"
                    }

                    $("#vdirList").append(`<tr eptuuid="${vdir.RootOrMatchingDomain}" payload="${vdirData}" class="vdirEntry">
                        <td data-label="" editable="false">${vdir.RootOrMatchingDomain}</td>
                        <td data-label="" editable="true" datatype="domain">${vdir.Domain} ${tlsIcon}</td>
                        <td data-label="" editable="true" datatype="basicauth">${vdir.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
                        <td class="center aligned" editable="true" datatype="action" data-label="">
                            <button class="ui circular mini basic icon button editBtn" onclick='editEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
                            <button class="ui circular mini red basic icon button"  onclick='deleteEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
                        </td>
                    </tr>`);
                });
            }
        });
    }
    */

    //Bind on tab switch events
    tabSwitchEventBind["vdir"] = function(){
        initVdirList();
    }
</script>