TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<html>
    <head>
        <title>Create Group</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.css">
        <link rel="stylesheet" href="../../script/ao.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <style>
            body{
                background-color:white;
            }
            .themebackground{
                background-color:#588ce0 !important;
                color:white !important;
                background-image: url("/img/public/slate.png") !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
            }
            .ui.padded.slate{
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 4em;
            }

            .ui.heading.slate{
                align-items: flex-start;
            }

            .ui.slate .header:not(.ui):not(.sub):not(.item){
                font-size: 1.6em;
                line-height: 1.42857em;
                font-weight: 500;
                display: block;
            }

            .required{
                color:red;
            }
            .actionbtns{
                text-align:right;
            }
        </style>
    </head>
    <body>
        <div class="ui heading fluid padded slate themebackground" >
            <span class="header">
            <i class="users icon"></i> Create Users Group</span>
            <span class="description">Fill in the following group information to proceed.</span>
        </div>
        <br>
        <div class="ui container">
            <div class="ui horizontal form">
                <div class="field">
                    <label>Group Name <span class="required">*</span></label>
                    <input id="groupname" type="text">
                </div>
                <div class="two fields">
                    <div class="field">
                        <label>Default Storage Quota <span class="required">*</span></label>
                        <input id="quota" type="text" value="15">
                    </div>
                    <div class="field">
                        <label>Unit <span class="required">*</span></label>
                        <select class="ui fluid search dropdown" id="unit">
                            <option value="1">Bytes</option>
                            <option value="1024">KB</option>
                            <option value="1048576">MB</option>
                            <option value="1073741824">GB</option>
                            <option value="1099511627776">TB</option>
                            <option value="1125899906842624">PB</option>
                          </select>
                    </div>
                  </div>
                <div class="field">
                    <label>Default Interface Module <span class="required">*</span></label>
                    <div class="ui fluid selection dropdown">
                        <input type="hidden" name="dim">
                        <i class="dropdown icon"></i>
                        <div class="default text">Select Interface Module</div>
                        <div class="menu" id="interfaceModuleList">
                            
                        </div>
                      </div>
                    <small>The module that the user land once they logged in. Default Desktop</small>
                </div>
                <div class="field">
                    <label>Allow Access <span class="required">*</span></label>
                    <select id="allowAccessList" multiple="" class="ui fluid dropdown">
                        
                    </select>
                    <small>Allow this user group to access the selected modules and their APIs.</small>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input id="setAsAdmin" type="checkbox" tabindex="0" class="">
                        <label>Assign Administrator Privileges to Group</label>
                    </div>
                </div>
                <div class="ui divider"></div>
                <table class="ui celled striped compact unstackable table">
                    <thead>
                        <tr>
                            <th >#</th>
                            <th>Module Name</th>
                        </tr>
                    </thead>
                    <tbody id="selectedModuleList">
                       
                    </tbody>
                </table>
                <div class="ui divider"></div>
                <div align="right">
                    <button class="ui primary button" onclick="createGroup();">Create</button>
                    <button id="cancelbtn" class="ui button" onclick="cancel();">Cancel</button>
                </div>
                <div id="errorbox" class="ui inverted red segment" style="display:none;">
                    <p><i class="remove icon"></i><span class="errormessage"></span></p>
                </div>
            </div>
            <br><br>
        </div>
        <script>
            var selectedModules = [];
            var moduleList = [];
            //Init functions
            initModuleList();
            $(".ui.dropdown").dropdown();
            $("#unit").dropdown("set selected","GB");
            function createGroup(){
                var groupname = $("#groupname").val();
                if (groupname == ""){
                    $("#groupname").parent().removeClass("success").addClass("error");
                    return
                }else{
                    $("#groupname").parent().removeClass("error").addClass("success");
                }

                //Continue to create usergroup
                targetModuleList = [];
                for (var i =0; i < selectedModules.length; i++){
                    targetModuleList.push(selectedModules[i].Name);
                }

                var defaultStorageSize = parseFloat($("#quota").val()) * $("#unit").val();
                if (isNaN(defaultStorageSize)){
                    $("#quota").parent().addClass("error");
                    return
                }else{
                    $("#quota").parent().removeClass("error");
                }

                var interfaceModule = $("#interfaceModuleList").parent().dropdown("get value");
                if (interfaceModule == ""){
                    interfaceModule = "Desktop";
                }
                //Send Request to server side
                $.ajax({
                    url: "../../system/permission/newgroup",
                    data: {
                        "groupname": groupname, 
                        "permission": JSON.stringify(targetModuleList),
                        "isAdmin": $("#setAsAdmin").is(":checked"),
                        "defaultQuota": defaultStorageSize,
                        "interfaceModule": interfaceModule,
                    },
                    traditional: true,
                    method: "POST",
                    success: function(data){
                        if (data.error !== undefined){
                            $("#errorbox").slideDown("fast");
                            $("#errorbox").find(".errormessage").text(data.error);
                        }else{
                            ao_module_parentCallback(true);
                            ao_module_close();
                        }
                    }
                })
            }

            function initModuleList(){
                $("#interfaceModuleList").html("");
                var firstInterfaceModule = null;
                $.get("../../system/modules/list",function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        for (var i =0; i < data.length; i++){
                            if (data[i].StartDir !== ""  && data[i].Group != "Interface Module"){
                                $("#allowAccessList").append(`<option value="${data[i].Name}" icon="${data[i].IconPath}">${data[i].Name}</option>`);
                            }else if (data[i].Group == "Interface Module"){
                                //Add to interface module list
                                $("#interfaceModuleList").append(`
                                <div class="item" data-value="${data[i].Name}">
                                    <img class="ui mini avatar image" style="border-radius: 0px !important;" src="../../${data[i].IconPath}">
                                    ${data[i].Name}
                                </div>
                                `);

                                if (firstInterfaceModule == null){
                                    firstInterfaceModule = data[i].Name;
                                }
                            }else{
                                //Utlities modules. Always allow access

                            }
                        }
                        //Select the first interface modules
                        $("#interfaceModuleList").parent().dropdown();
                        $("#interfaceModuleList").parent().dropdown("set selected",firstInterfaceModule);
                        moduleList = data;
                    }
                });

                $("#allowAccessList").on("change", function(e){
                    var currentSelected = $(this).val();
                    selectedModules = [];
                    moduleList.forEach(mod => {
                        if (currentSelected.includes(mod.Name)){
                            selectedModules.push(mod);
                        }
                    });
                    renderSelectedModuleList();
                });
            }

            renderSelectedModuleList();
            function renderSelectedModuleList(){
                $("#selectedModuleList").html("");
                for (var i = 0; i < selectedModules.length; i++){
                    $("#selectedModuleList").append(`<tr>
                            <td class="collapsing"><img class="ui mini image" src="../../${selectedModules[i].IconPath}"/></td>
                            <td>${selectedModules[i].Name}</td>
                        </tr>`);
                }
                if (selectedModules.length == 0){
                    $("#selectedModuleList").append(`<tr>
                        <td class="collapsing"><img class="ui mini image" src="img/nomodule.png"></img></td>
                        <td>No Module Selected</td>
                       </tr>`);
                }
            }

            function cancel(){
                ao_module_close();
            }
            
        </script>
    </body>
</html>