TC
/
arozos


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<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;
            }
        </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>
                                        <div class="label">Remaining: ${bytesToSize(thisDev.Available)} / ${bytesToSize(thisDev.Volume)}</div>
                                    </div>
                                    <p style="margin-top:-20px;">Used Space: ${thisDev.UsedPercentage}</p>
                                    </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>