TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
							<!DOCTYPE html>
<html>
<head>
    <title locale="title/title">File Properties</title>
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script src="../../script/jquery.min.js"></script>
	<script src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <script type="text/javascript" src="../../script/applocale.js"></script>
    <style>
        .hidden{
            display:none;
        }
    
        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }

        .colorblock{
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 12px;
        }

        .blue.colorblock{
            background-color: #52bdf2;
        }

        .grey.colorblock{
            background-color: #b9b9b9;
        }

        .yellow.colorblock{
            background-color: #e5e75c;
        }

        .ui.table tr td{
           border-top: 0px solid transparent !important; 
        }
        
        .overlap.bar{
            position: absolute !important; 
            top:0px; 
            left: 0px;
        }

        .smallerFont{
            font-size: 98%;
        }
    </style>
</head>
<body>
    <br>
    <div class="ui container">
        <h3 class="ui header">
            <span locale="title/title">Virtual Disk Properties</span>
            <div class="sub header" locale="title/desc">Show information about vroot mount points</div>
        </h3>
        <div class="ui divider"></div>
        <div class="ui container">
            <div class="ui grid">
                <div class="three wide right aligned column" style="text-align: center; padding: 0px;">
                    <img class="ui image" style="position: absolute; top: 0px; left: calc(50% - 25px); max-width: 50px; pointer-events: none;" src="../../img/system/drive-virtual.svg">
                </div>
                <div class="thirteen wide column" style="padding: 0px; padding-top: 0.8em; padding-left: 1em;">
                    <div class="ui fluid small input">
                        <input id="vrootName" type="text" placeholder="" readonly="true">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
        <table class="ui very basic collapsing compact unstackable table" style="vertical-align: middle;">
            <tbody>
            <tr>
                <td locale="diskinfo/physical">
                    Physical Disk: 
                </td>
                <td id="phydisk">
                    
                </td>
            </tr>
            <tr>
                <td locale="diskinfo/hierarchy">
                    Hierarchy (Format): 
                </td>
                <td id="hierarchy">
                    
                </td>
            </tr>
        </table>
        <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
        <table class="ui very basic collapsing compact unstackable table" style="vertical-align: middle; font-size:90%;">
            <tbody>
            <tr>
                <td>
                    <div class="blue colorblock"></div><span locale="spaceinfo/totalUsed">Total Used Space:</span>
                </td>
                <td>
                    <span id="usedSpaceInBytes"  class="smallerFont"></span> <span locale="unit/bytes">Bytes</span>
                </td>
                <td>
                    <span id="usedSpaceInHumanReadableFormat" class="smallerFont"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="yellow colorblock"></div><span locale="spaceinfo/userUsed">User Used Space:</span>
                </td>
                <td>
                    <span id="usedVirtualSpaceInByte" class="smallerFont"><i class="ui spinner loading icon"></i></span> <span locale="unit/bytes">Bytes</span>
                </td>
                <td>
                    <span id="usedVirtualSpaceInHumanReadableFormat"  class="smallerFont"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="grey colorblock"></div><span locale="spaceinfo/Usable">Usable Space:</span>
                </td>
                <td>
                    <span id="usableSpaceInBytes" class="smallerFont"></span> <span locale="unit/bytes">Bytes</span>
                </td>
                <td>
                    <span id="usableSpaceInHumanReadableFormat" class="smallerFont"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="transparent colorblock"></div><span locale="spaceinfo/Capacity">Capacity:</span>
                </td>
                <td>
                    <span id="totalSpaceInBytes" class="smallerFont"></span> <span locale="unit/bytes">Bytes</span>
                </td>
                <td>
                    <span id="totalSpaceInHumanReadableFormat" class="smallerFont"></span>
                </td>
            </tr>
        </table>
        <div class="ui small progress">
            <div class="overlap bar" style="width: 100%; background-color: #b9b9b9;">
                <div class="progress"></div>
            </div>
            <div id="totalUsedSpace" class="overlap bar" style="min-width: 5px; width: 100%; background-color: #52bdf2;">
                <div class="progress"></div>
            </div>
            <div id="userUsedSpace" class="overlap bar" style="min-width: 5px; width: 100%; background-color: #e5e75c;">
                <div class="progress"></div>
            </div>
        </div>
        <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
        <br>
           <button class="ui right floated button" onclick="ao_module_close();" locale="button/close">Close</button>
        <br>
    </div>
        
    <br><br>
    <script>
        //Initiate the view model
        var files = ao_module_loadInputFiles();
        var fileProperties = [];
        var fileInfo = {};
        var diskInfo = {};

        try{
            applocale.init("../locale/disk_properties.json", function(){
                applocale.translate();
                init();
            });
        }catch(ex){
            init();
        }
        

       function init(){
            //There are something to load. Load the vroot properties
            if (window.location.hash.length > 0 && typeof(files) != null){
                var rootName = files[0].split("/")[0];
                $("#vrootName").val(rootName + "/");

                getDiskProp(files[0], function(data){
                    if (data.error !== undefined){
                        $("#phydisk").text("Unknown");
                        $("#hierarchy").text("Unknown");
                        $("#usedSpaceInBytes").text("Not Available");
                        $("#usableSpaceInBytes").text("Not Available");
                        $("#totalSpaceInBytes").text("Not Available");
                        console.log(data.error);
                    }else{
                        $("#usedSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Used));
                        $("#usedSpaceInHumanReadableFormat").text(bytesToSize(data.Used));

                        $("#usableSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Available));
                        $("#usableSpaceInHumanReadableFormat").text(bytesToSize(data.Available));

                        $("#totalSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Total));
                        $("#totalSpaceInHumanReadableFormat").text(bytesToSize(data.Total));

                        $("#phydisk").text(data.PhysicalDevice + "/");
                        var s = data.MountingHierarchy;
                        s = s[0].toUpperCase() + s.slice(1);
                        $("#hierarchy").text(applocale.getString("hierarchy/" + s, s) + ` (${data.FileSystemType.toUpperCase()})`);
                        
                        $("#totalUsedSpace").css("width", (data.Used / data.Total) * 100 + "%");
                    }

                    getFileProp(files[0], function(folderdata){
                        //User Used Space
                        if (folderdata.Filesize >= 0){
                            $("#usedVirtualSpaceInByte").text(new Intl.NumberFormat('en-US').format(folderdata.Filesize));
                            $("#usedVirtualSpaceInHumanReadableFormat").text(bytesToSize(folderdata.Filesize));
                        
                        }else{
                            $("#usedVirtualSpaceInByte").text("Not Available");
                            $("#usedVirtualSpaceInHumanReadableFormat").text("");
                        }

                        if (diskInfo.Used == 0){
                            //Network or special drive. Use user space as usedSpace
                            $("#usedSpaceInBytes").text(new Intl.NumberFormat('en-US').format(folderdata.Filesize));
                            $("#usedSpaceInHumanReadableFormat").text(bytesToSize(folderdata.Filesize));
                        }
                       
                        
                        if (data.Total != undefined && data.Total > 0){
                            $("#userUsedSpace").css("width", (folderdata.Filesize / data.Total) * 100 + "%");
                        }else{
                            //Error when reading disk size. Just make it full width
                            $("#userUsedSpace").css("width", "100%");
                        }
                        
                    });
                });
            }
       }

        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            if (bytes == 0) return '0 Byte';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return (bytes / Math.pow(1024, i) * 100 / 100).toFixed(1) + ' ' + sizes[i];
        }

        function getDiskProp(vpath, callback){
            $.ajax({
                url: "../../system/disk/space/resolve",
                data: {path: vpath},
                method: "POST",
                success: function(data){
                    diskInfo = data;
                    callback(data);
                }
            })
        }

        function getFileProp(vpath, callback){
            $.ajax({
                url: "../../system/file_system/getProperties",
                data: {path: vpath},
                method: "POST",
                success: function(data){
                    callback(data);
                    fileInfo = data;
                    //Initialize system theme
                    loadPreference("file_explorer/theme",function(data){
                        if (data.error === undefined){
                            if (data == "darkTheme"){
                                toggleDarkTheme();
                            }else{
                                //White theme. Do nothing
                            }
                        }
                    });

                }
            })  
        }

        function loadPreference(key, callback){
                $.get("../../system/file_system/preference?key=" + key,function(data){
                    callback(data);
                });
            }

        function toggleDarkTheme(){
            $("body").css({
                "background-color":"#242330",
                "color":"white",
            });

            $("input").css({
                "background":"#242330",
                "color":"white",
                "border": "1px solid #e9e9e9"
            });

            $("input.focus").css({
                "background":"#242330",
                "color":"white"
            })

            $("td,.header,p,div,span").css({
                "color":"white",
            });

            $("button").css({
                "background-color":"#312f42",
                'border':"1px solid #262533",
                "color":"white"
            })

            $("button:hover").css({
                "background-color": "#424054"
            })
        }

    </script>
</body>
</html>