TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<html>
    <head>
        <title>Disk Space</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.min.css">
        <script type="text/javascript" src="../../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
        <style>
            #diskInfo{
                padding-left:22px;
            }
            .usedSpace{
                margin-top: -0.8em;
            }
        </style>
    </head>
    <body>
        <button class="ui small button" onclick="toggleTmpfs();">Toggle tmpfs</button>
        <div id="diskInfo" class="ui feed">
            
        </div>
        <script>
            initDiskInfo();
            function initDiskInfo(){
                $("#diskInfo").html("");
                $.get("../../system/disk/space/list",function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        for (var i = 0; i < data.length; i++){
                            var thisDev = data[i];
                            var usedPercentage = parseInt(thisDev.Used / thisDev.Volume * 100);
                            var color = "blue";
                            if (usedPercentage >= 90){
                                color = "red";
                            }
                            if (thisDev.Used == 0 && thisDev.Volume == 0){
                                color = "black";
                                console.log("Oops");
                                usedPercentage = 100;
                            }
                            var tmpfs = "";
                            var style = "";
                            if (thisDev.Device == "tmpfs"){
                                tmpfs = "tmpfs";
                                style = "display:none;";
                            }
                            $("#diskInfo").append(`<div class="event ${tmpfs}" style="${style}">
                                <div class="label">
                                    <img src="../disk/space/img/disk.svg">
                                </div>
                                <div class="content">
                                    <div class="summary">
                                        ${thisDev.MountPoint}
                                    <div class="date">
                                    (${thisDev.Device})
                                    </div>
                                    </div>
                                    <div class="extra text" style="width:100% !important;">
                                    <div class="ui small ${color} active progress">
                                        <div class="bar" style="width:${usedPercentage}%;">
                                            <div class="progress">${usedPercentage}%</div>
                                        </div>
                                        <div class="label">Free: ${bytesToSize(thisDev.Available)} / Total: ${bytesToSize(thisDev.Volume)}</div>
                                    </div>
                                    </div>
                                </div>
                            </div>`);
                        }
                    }
                })
            }

            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)).toFixed(1) + ' ' + sizes[i];
            }

            function toggleTmpfs(){
                $(".tmpfs").slideToggle();
            }
        </script>
    </body>
</html>