diskprop.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title locale="title/title">File Properties</title>
  5. <meta name="mobile-web-app-capable" content="yes">
  6. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  7. <meta charset="UTF-8">
  8. <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
  9. <script src="../../script/jquery.min.js"></script>
  10. <script src="../../script/semantic/semantic.min.js"></script>
  11. <script type="text/javascript" src="../../script/ao_module.js"></script>
  12. <script type="text/javascript" src="../../script/applocale.js"></script>
  13. <style>
  14. .hidden{
  15. display:none;
  16. }
  17. .disabled{
  18. opacity: 0.5;
  19. pointer-events: none;
  20. }
  21. .colorblock{
  22. width: 20px;
  23. height: 20px;
  24. display: inline-block;
  25. vertical-align: bottom;
  26. margin-right: 12px;
  27. }
  28. .blue.colorblock{
  29. background-color: #52bdf2;
  30. }
  31. .grey.colorblock{
  32. background-color: #b9b9b9;
  33. }
  34. .yellow.colorblock{
  35. background-color: #e5e75c;
  36. }
  37. .ui.table tr td{
  38. border-top: 0px solid transparent !important;
  39. }
  40. .overlap.bar{
  41. position: absolute !important;
  42. top:0px;
  43. left: 0px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <br>
  49. <div class="ui container">
  50. <h3 class="ui header">
  51. <span locale="title/title">Virtual Disk Properties</span>
  52. <div class="sub header" locale="title/desc">Show information about vroot mount points</div>
  53. </h3>
  54. <div class="ui divider"></div>
  55. <div class="ui container">
  56. <div class="ui grid">
  57. <div class="three wide right aligned column" style="text-align: center; padding: 0px;">
  58. <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">
  59. </div>
  60. <div class="thirteen wide column" style="padding: 0px; padding-top: 0.8em; padding-left: 1em;">
  61. <div class="ui fluid small input">
  62. <input id="vrootName" type="text" placeholder="" readonly="true">
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <br>
  68. <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
  69. <table class="ui very basic collapsing compact unstackable table" style="vertical-align: middle;">
  70. <tbody>
  71. <tr>
  72. <td locale="diskinfo/physical">
  73. Physical Disk:
  74. </td>
  75. <td id="phydisk">
  76. </td>
  77. </tr>
  78. <tr>
  79. <td locale="diskinfo/hierarchy">
  80. Disk Hierarchy:
  81. </td>
  82. <td id="hierarchy">
  83. </td>
  84. </tr>
  85. </table>
  86. <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
  87. <table class="ui very basic collapsing compact unstackable table" style="vertical-align: middle; font-size:90%;">
  88. <tbody>
  89. <tr>
  90. <td>
  91. <div class="blue colorblock"></div><span locale="spaceinfo/totalUsed">Total Used Space:</span>
  92. </td>
  93. <td>
  94. <span id="usedSpaceInBytes"></span> <span locale="unit/bytes">Bytes</span>
  95. </td>
  96. <td>
  97. <span id="usedSpaceInHumanReadableFormat"></span>
  98. </td>
  99. </tr>
  100. <tr>
  101. <td>
  102. <div class="yellow colorblock"></div><span locale="spaceinfo/userUsed">User Used Space:</span>
  103. </td>
  104. <td>
  105. <span id="usedVirtualSpaceInByte"></span> <span locale="unit/bytes">Bytes</span>
  106. </td>
  107. <td>
  108. <span id="usedVirtualSpaceInHumanReadableFormat"></span>
  109. </td>
  110. </tr>
  111. <tr>
  112. <td>
  113. <div class="grey colorblock"></div><span locale="spaceinfo/Usable">Usable Space:</span>
  114. </td>
  115. <td>
  116. <span id="usableSpaceInBytes"></span> <span locale="unit/bytes">Bytes</span>
  117. </td>
  118. <td>
  119. <span id="usableSpaceInHumanReadableFormat"></span>
  120. </td>
  121. </tr>
  122. <tr>
  123. <td>
  124. <div class="transparent colorblock"></div><span locale="spaceinfo/Capacity">Capacity:</span>
  125. </td>
  126. <td>
  127. <span id="totalSpaceInBytes"></span> <span locale="unit/bytes">Bytes</span>
  128. </td>
  129. <td>
  130. <span id="totalSpaceInHumanReadableFormat"></span>
  131. </td>
  132. </tr>
  133. </table>
  134. <div class="ui small progress">
  135. <div class="overlap bar" style="width: 100%; background-color: #b9b9b9;">
  136. <div class="progress"></div>
  137. </div>
  138. <div id="totalUsedSpace" class="overlap bar" style="min-width: 5px; width: 50%; background-color: #52bdf2;">
  139. <div class="progress"></div>
  140. </div>
  141. <div id="userUsedSpace" class="overlap bar" style="min-width: 5px; width: 30%; background-color: #e5e75c;">
  142. <div class="progress"></div>
  143. </div>
  144. </div>
  145. <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
  146. <br>
  147. <button class="ui right floated button" onclick="ao_module_close();" locale="button/close">Close</button>
  148. <br>
  149. </div>
  150. <br><br>
  151. <script>
  152. //Initiate the view model
  153. var files = ao_module_loadInputFiles();
  154. var fileProperties = [];
  155. var fileInfo = {};
  156. var diskInfo = {};
  157. try{
  158. applocale.init("../locale/disk_properties.json", function(){
  159. applocale.translate();
  160. init();
  161. });
  162. }catch(ex){
  163. init();
  164. }
  165. function init(){
  166. //There are something to load. Load the vroot properties
  167. if (window.location.hash.length > 0 && typeof(files) != null){
  168. var rootName = files[0].split("/")[0];
  169. $("#vrootName").val(rootName + "/");
  170. getDiskProp(files[0], function(data){
  171. if (data.error !== undefined){
  172. $("#phydisk").text(data.error);
  173. $("#hierarchy").text("Unknown");
  174. $("#usedSpaceInBytes").text("Not Available");
  175. $("#usableSpaceInBytes").text("Not Available");
  176. $("#totalSpaceInBytes").text("Not Available");
  177. }else{
  178. $("#usedSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Used));
  179. $("#usedSpaceInHumanReadableFormat").text(bytesToSize(data.Used));
  180. $("#usableSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Avilable));
  181. $("#usableSpaceInHumanReadableFormat").text(bytesToSize(data.Avilable));
  182. $("#totalSpaceInBytes").text(new Intl.NumberFormat('en-US').format(data.Total));
  183. $("#totalSpaceInHumanReadableFormat").text(bytesToSize(data.Total));
  184. $("#phydisk").text(data.PhysicalDevice + "/");
  185. var s = data.MountingHierarchy;
  186. s = s[0].toUpperCase() + s.slice(1);
  187. $("#hierarchy").text(applocale.getString("hierarchy/" + s, s));
  188. $("#totalUsedSpace").css("width", (data.Used / data.Total) * 100 + "%");
  189. }
  190. getFileProp(files[0], function(folderdata){
  191. //User Used Space
  192. $("#usedVirtualSpaceInByte").text(new Intl.NumberFormat('en-US').format(folderdata.Filesize));
  193. $("#usedVirtualSpaceInHumanReadableFormat").text(bytesToSize(folderdata.Filesize));
  194. if (data.Total != undefined){
  195. $("#userUsedSpace").css("width", (folderdata.Filesize / data.Total) * 100 + "%");
  196. }else{
  197. //Error when reading disk size. Just make it full width
  198. $("#userUsedSpace").css("width", "100%");
  199. }
  200. });
  201. });
  202. }
  203. }
  204. function bytesToSize(bytes) {
  205. var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  206. if (bytes == 0) return '0 Byte';
  207. var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  208. return (bytes / Math.pow(1024, i) * 100 / 100).toFixed(1) + ' ' + sizes[i];
  209. }
  210. function getDiskProp(vpath, callback){
  211. $.ajax({
  212. url: "../../system/disk/space/resolve",
  213. data: {path: vpath},
  214. method: "POST",
  215. success: function(data){
  216. diskInfo = data;
  217. callback(data);
  218. }
  219. })
  220. }
  221. function getFileProp(vpath, callback){
  222. $.ajax({
  223. url: "../../system/file_system/getProperties",
  224. data: {path: vpath},
  225. method: "POST",
  226. success: function(data){
  227. callback(data);
  228. fileInfo = data;
  229. //Initialize system theme
  230. loadPreference("file_explorer/theme",function(data){
  231. if (data.error === undefined){
  232. if (data == "darkTheme"){
  233. toggleDarkTheme();
  234. }else{
  235. //White theme. Do nothing
  236. }
  237. }
  238. });
  239. }
  240. })
  241. }
  242. function loadPreference(key, callback){
  243. $.get("../../system/file_system/preference?key=" + key,function(data){
  244. callback(data);
  245. });
  246. }
  247. function toggleDarkTheme(){
  248. $("body").css({
  249. "background-color":"#242330",
  250. "color":"white",
  251. });
  252. $("#filePropertiesWindow td,.header,p,div").css({
  253. "color":"white",
  254. });
  255. }
  256. </script>
  257. </body>
  258. </html>