TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <title>Storage Pool Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        body{
            background-color:white;
        }
        .themebackground{
            background-color:#242424 !important;
            color:white !important;
            background-image: url("img/slate.png") !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed !important;
            height:100px;
            border: 0px solid transparent !important;
            padding:24px !important;
        }
        .fshList{
            max-height: 300px;
            overflow-y: auto;
        }

        .controls{
            position: absolute;
            top: 12px;
            right: 12px;
        }

        a{
            cursor: pointer;
        }
        .false{
            color: #eb0909;
        }

        .true{
            color: #05b074;
        }

        .backuponly{
            display:none;
        }

        .backgroundIcon{
            position: fixed;
            bottom: 0px;
            right: 0px;
            opacity: 0.1;
            margin-right: -3em;
            margin-bottom: -5em;
            z-index: -99;
            pointer-events: none;
            user-select: none;
        }

    </style>
</head>
<body>
    <div class="backgroundIcon">
        <img class="ui medium image" src="../../img/system/drive-virtual.svg">
    </div>
    <!-- 
    <div class="ui fluid attached segment themebackground" >
        <h4 class="ui inverted header">
            <i class="folder icon"></i>
            <div class="content">
                <span id="pagetitle">Edit File System Handler</span>
            <div class="sub header" id="pageSubTitle">Edit the selected File System Handler (FSH)</div>
            </div>
        </h4>
    </div>
    -->
    <br>
    <div class="ui container">
        <h3 class="ui header">
            <img src="../../img/system/drive-virtual.svg">
            <div class="content">
                <span>Edit File System Handler </span><span id="poolid"></span>
                <div class="sub header">Mount Local or Connect Remote Disk as Virtual Disk on this Host</div>
            </div>
        </h3>
        <form id="mainForm" class="ui form" onsubmit="handleFormSubmit(event);">
            <div class="field" style="display: none;">
                <label>Group</label>
                <input type="text" name="group" id="groupfield" readonly="true">
                </div>
            <div class="field">
                <label>Name</label>
                <input type="text" name="name" placeholder="e.g. My Drive">
            </div>
            <div class="field">
                <label>UUID</label>
                <input type="text" name="uuid" placeholder="e.g. mydrive">
            </div>
            <div class="field">
                <label>Path</label>
                <input type="text" name="path" placeholder="e.g. /media/mydrive" onchange="checkPathProtocol(this);">
            </div>
            <div class="field">
                <label>Access Permission</label>
                <div id="accessfield" class="ui selection dropdown">
                <input type="hidden" name="access" value="readwrite">
                <i class="dropdown icon"></i>
                <div class="default text">Access Permission</div>
                <div class="menu">
                    <div class="item" data-value="readonly">Read Only</div>
                    <div class="item" data-value="readwrite">Read Write</div>
                </div>
                </div>
            </div>
            <div class="field">
                <label>Storage Hierarchy</label>
                <div id="hierarchyfield" class="ui selection dropdown" onchange="handleHierarchyChange(this);">
                <input type="hidden" name="hierarchy" value="public">
                <i class="dropdown icon"></i>
                <div class="default text">Storage Hierarchy</div>
                <div class="menu">
                    <div class="item" data-value="user">Isolated User Folders</div>
                    <div class="item" data-value="public">Public Access Folders</div>
                </div>
                </div>
            </div>
            <div class="ui divider"></div>
            <p>Physical Disks Settings</p>
            <div class="field">
                <label>Filesystem Type</label>
                <div id="fstype" class="ui selection dropdown">
                    <input type="hidden" name="filesystem" value="ntfs" onchange="handleFileSystemTypeChange(this.value);">
                    <i class="dropdown icon"></i>
                    <div class="default text">Filesystem Type</div>
                    <div class="menu">
                        <div class="item" data-value="ext4">EXT4</div>
                        <!-- <div class="item" data-value="ext3">EXT3</div> -->
                        <div class="item" data-value="ntfs">NTFS</div>
                        <div class="item" data-value="vfat">VFAT</div>
                        <div class="item" data-value="fat">FAT</div>
                        <div class="item" data-value="webdav">WebDAV</div>
                        <div class="item" data-value="smb">SMB</div>
                        <div class="item" data-value="ftp">FTP</div>
                        <div class="item" data-value="sftp">SFTP</div>
                    </div>
                </div>
            </div>
            <div class="localfs">
                <div class="field">
                    <label>Mount Device</label>
                    <input type="text" name="mountdev" placeholder="e.g. /dev/sda1">
                </div>
                <div class="field">
                    <label>Mount Point</label>
                    <input type="text" name="mountpt" placeholder="e.g. /media/myfolder">
                </div>
                <div class="field">
                    <div class="ui checkbox">
                    <input type="checkbox" id="automount" tabindex="0" class="hidden">
                    <label>Automount</label>
                    </div>
                </div>
                <br>
            </div>
            <div class="networkfs" style="display:none;">
                <div class="ui divider"></div>
                <p>Security and Authentication</p>
                <div class="field">
                    <label>Username</label>
                    <input type="text" name="username" placeholder="">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="">
                </div>
                <small>Leave Username / Password field empty for using the old config</small>
                <br><br>
            </div>
            <button class="ui right floated button" onclick='handleCancel();'>Cancel</button>
            <button class="ui green right floated button" type="submit">Confirm</button>
            <br><br><br><br>
        </form>
    </div>
    <script>
        //Get target fsh uuid and group from hash
        var targetFSH = "";
        var opr = "set";
        $(".ui.dropdown").dropdown();
        $(".ui.checkbox").checkbox();

        $(document).ready(function(){
            initEditor();
        });

        function initEditor(){
            if (window.location.hash.length > 0){
                //Get a list of vroot from system
                $("#backupIdList").html(``);
                $.get("../../system/storage/pool/list", function(data){
                    data.forEach(usergroup => {
                        if (usergroup.Storages != null){
                            usergroup.Storages.forEach(storage => {
                                $("#backupIdList").append(`<div class="item" data-value="${storage.UUID}">${storage.Name} (${storage.UUID}:/)</div>`);
                            });
                        }
                    });
                    $("#backupIdList").parent().dropdown();
                    renderFSHCurrentSettings();
                });  
            }
        }

        function handleFormSubmit(e){
            e.preventDefault();
            //Get the form value
            let payload = new FormData(e.target);
            let fshObject = {};
            [...payload.entries()].forEach(function(field){
                fshObject[field[0]] = field[1];
            });

            //Inject other payloads
            fshObject.automount = $("#automount")[0].checked;
            $.ajax({
                url: "../../system/storage/pool/edit",
                method: "POST",
                data: {
                    opr: opr,
                    group: $("#groupfield").val(),
                    config: JSON.stringify(fshObject),
                },
                success: function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        //Done
                        window.location.href = "updateComplete.html";
                    }
                }

            });
        }

        function renderFSHCurrentSettings(){
            //Request server side to provide info on this FSH
            var input = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
            $("#groupfield").val(input.group);

            if (input.uuid == undefined){
                 //New fsh
                $("#pagetitle").text("New File System Handler");
                $("#pageSubTitle").text("Mount a new file system into this host as storage");
                opr = "new";
            }else{
                $.ajax({
                    url: "../../system/storage/pool/edit",
                    method: "GET",
                    data: {opr: "get", uuid: input.uuid, group: input.group},
                    success: function(data){
                        renderOptionsToForm(data);
                    }
                });

                $("#mainForm").attr("action", "../../system/storage/pool/edit?opr=set&uuid=" + input.uuid + "&group=" + input.group);
            }
        }

        function checkPathProtocol(object){
            var newPath = $(object).val();
            if (newPath.startsWith("http://") || newPath.startsWith("https://")){
                //WebDAV
                $("#fstype").dropdown("set selected", "webdav");
                //newPath = newPath.replace("http://", "");
                //newPath = newPath.replace("https://", "");
                $(object).val(newPath);
            }else if (newPath.startsWith("ftp://")){
                //FTP
                $("#fstype").dropdown("set selected", "ftp");
                newPath = newPath.replace("ftp://", "");
                $(object).val(newPath);
            }else if (newPath.startsWith("sftp://")){
                //SFTP
                $("#fstype").dropdown("set selected", "sftp");
                newPath = newPath.replace("sftp://", "");
                $(object).val(newPath);
            }else if (newPath.startsWith("\\\\")){
                //SMB, Copy directly from Windows
                $("#fstype").dropdown("set selected", "smb");
                newPath = newPath.replace("\\\\", "");
                newPath = newPath.split("\\").join("/");
                $(object).val(newPath);
            }
        }

        function handleHierarchyChange(object){
            var newHierarcy = $(object).find("input").val();
            //Force access mode to readonly if backup mode
            if (newHierarcy == "backup"){
                $("#accessfield").dropdown("set selected", "readonly")
                $("#accessfield").addClass("disabled");
            }else{
                $("#accessfield").removeClass("disabled");
            }
        }

        function handleFileSystemTypeChange(fstype){
            if (isNetworkFs(fstype)){
                $(".localfs").hide();
                $(".networkfs").show();
            }else{
                $(".localfs").show();
                $(".networkfs").hide();
            }
        }

        function isNetworkFs(name){
            name = name.trim();
            if (name == "webdav" || name == "smb" || name == "ftp" || name == "sftp"){
                return true;
            }
            return false;
        }

        function renderOptionsToForm(option){
            console.log(option);
            $("input[name=name]").val(option.name);
            $("input[name=uuid]").val(option.uuid);
            $("input[name=path]").val(option.path);
            $("#accessfield").dropdown("set selected", option.access);
            $("#hierarchyfield").dropdown("set selected", option.hierarchy);
            if (isNetworkFs(option.filesystem)){
                $(".localfs").hide();
                $(".networkfs").show();
            }
            $("#fstype").dropdown("set selected",option.filesystem);
            handleFileSystemTypeChange(option.filesystem);
            $("input[name=mountdev]").val(option.mountdev);
            $("input[name=mountpt]").val(option.mountpt);
            if (option.automount == true){
                //$("input[name=automount]")[0].checked = true;
                $("#automount").parent().checkbox("set checked");
            }
        }

        function handleCancel(){
            ao_module_parentCallback(true);
            ao_module_close();
        }
    </script>
</body>
</html>