TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!DOCTYPE html>
<html>
<head>
    <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>
    <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;
        }
    </style>
</head>
<body>
    <br>
    <div class="ui container">
        <h3 class="ui header">
            Virtual Disk Properties
            <div class="sub header">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>
                    Physical Disk: 
                </td>
                <td id="phydisk">
                    
                </td>
            </tr>
            <tr>
                <td>
                    Disk Hierarchy: 
                </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>Total Used Space:
                </td>
                <td>
                    <span id="usedSpaceInBytes"></span> Bytes
                </td>
                <td>
                    <span id="usedSpaceInHumanReadableFormat"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="yellow colorblock"></div>User Used Space:
                </td>
                <td>
                    <span id="usedVirtualSpaceInByte"></span> Bytes
                </td>
                <td>
                    <span id="usedVirtualSpaceInHumanReadableFormat"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="grey colorblock"></div>Usable Space:
                </td>
                <td>
                    <span id="usableSpaceInBytes"></span> Bytes
                </td>
                <td>
                    <span id="usableSpaceInHumanReadableFormat"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="transparent colorblock"></div>Capacity:
                </td>
                <td>
                    <span id="totalSpaceInBytes"></span> Bytes
                </td>
                <td>
                    <span id="totalSpaceInHumanReadableFormat"></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: 50%; background-color: #52bdf2;">
                <div class="progress"></div>
            </div>
            <div id="userUsedSpace" class="overlap bar" style="min-width: 5px; width: 30%; 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();">Close</button>
        <br>
    </div>
        
    <br><br>
    <script>
        //Initiate the view model
        var files = ao_module_loadInputFiles();
        var fileProperties = [];
        var fileInfo = {};
        var diskInfo = {};

        //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(data.error);
                    $("#hierarchy").text("Unknown");
                    $("#usedSpaceInBytes").text("Not Available");
                    $("#usableSpaceInBytes").text("Not Available");
                    $("#totalSpaceInBytes").text("Not Available");
                    
                }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.Avilable));
                    $("#usableSpaceInHumanReadableFormat").text(bytesToSize(data.Avilable));

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

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

                getFileProp(files[0], function(folderdata){
                    //User Used Space
                    $("#usedVirtualSpaceInByte").text(new Intl.NumberFormat('en-US').format(folderdata.Filesize));
                    $("#usedVirtualSpaceInHumanReadableFormat").text(bytesToSize(folderdata.Filesize));
                    
                    if (data.Total != undefined){
                        $("#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",
            });

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

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