|
@@ -43,7 +43,11 @@
|
|
|
border-top: 0px solid transparent !important;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ .overlap.bar{
|
|
|
+ position: absolute !important;
|
|
|
+ top:0px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
@@ -56,11 +60,11 @@
|
|
|
<div class="ui divider"></div>
|
|
|
<div class="ui container">
|
|
|
<div class="ui grid">
|
|
|
- <div class="three wide center aligned column" style="padding: 0px;">
|
|
|
- <img class="ui image" style="max-width: 50px; pointer-events: none;" src="../../img/system/drive-virtual.svg">
|
|
|
+ <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: 1em; padding-left: 1em;">
|
|
|
- <div class="ui fluid mini input">
|
|
|
+ <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>
|
|
@@ -72,23 +76,23 @@
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>
|
|
|
- Disk Hierarchy:
|
|
|
+ Physical Disk:
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td id="phydisk">
|
|
|
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
- File System:
|
|
|
+ Disk Hierarchy:
|
|
|
</td>
|
|
|
- <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;">
|
|
|
+ <table class="ui very basic collapsing compact unstackable table" style="vertical-align: middle; font-size:90%;">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>
|
|
@@ -135,6 +139,17 @@
|
|
|
</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="width: 50%; background-color: #52bdf2;">
|
|
|
+ <div class="progress"></div>
|
|
|
+ </div>
|
|
|
+ <div id="userUsedSpace" class="overlap bar" style="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>
|
|
@@ -147,14 +162,58 @@
|
|
|
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){
|
|
|
- getFileProp(files[0], function(data){
|
|
|
- console.log(data);
|
|
|
+ var rootName = files[0].split("/")[0];
|
|
|
+ $("#vrootName").val(rootName + "/");
|
|
|
+
|
|
|
+ getDiskProp(files[0], function(data){
|
|
|
+ $("#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));
|
|
|
+
|
|
|
+ $("#userUsedSpace").css("width", (folderdata.Filesize / data.Total) * 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",
|