finder.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <html>
  2. <head>
  3. <title>Space Finder</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  6. <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
  7. <script type="text/javascript" src="../../../script/jquery.min.js"></script>
  8. <script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
  9. <script type="text/javascript" src="../../../script/ao_module.js"></script>
  10. <style>
  11. .owner.header{
  12. color: #346eeb !important;
  13. }
  14. .owner.section{
  15. color: #1d51c2 !important;
  16. }
  17. i.owner{
  18. color: #346eeb !important;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="ui container">
  24. <p>Reclaim storage space by removing large files (Files owned by you will be in blue)</p>
  25. <div class="ui small buttons">
  26. <button class="ui primary basic button" onclick="initFileList(20);">20 Results (Fast)</button>
  27. <button class="ui secondary basic button" onclick="initFileList(50);">50 Results</button>
  28. <button class="ui secondary basic button" onclick="initFileList(100);">100 Results</button>
  29. <button class="ui red basic button" onclick="initFileList(300);">300 Results (Slow)</button>
  30. </div>
  31. <div class="ui divider"></div>
  32. <div id="filelist" class="ui list">
  33. <div class="item">
  34. <div class="content">
  35. <div class="header"><i class="loading spinner icon"></i> Loading...</div>
  36. <div class="description">
  37. <div class="ui breadcrumb" style="margin-top:8px;">
  38. <div class="active section">Scanning Local Filesystem. This will take a while.</div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <br><br><br>
  46. </div>
  47. <script>
  48. initFileList();
  49. function initFileList(number=20){
  50. $("#filelist").html(`<div class="item">
  51. <div class="content">
  52. <div class="header"><i class="loading spinner icon"></i> Loading...</div>
  53. <div class="description">
  54. <div class="ui breadcrumb" style="margin-top:8px;">
  55. <div class="active section">Scanning Local Filesystem. This will take a while.</div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>`);
  60. $.get("../../system/disk/space/largeFiles?number=" + number, function(data){
  61. $("#filelist").html("");
  62. data.forEach(file => {
  63. var filepath = file.Filepath.split("/");
  64. filepath.pop();
  65. filepath = filepath.join("/");
  66. var colorClass = "";
  67. if (file.IsOwner == true){
  68. colorClass = "owner"
  69. }
  70. $("#filelist").append(`<div class="item">
  71. <i class="file icon ${colorClass}"></i>
  72. <div class="content">
  73. <div class="header ${colorClass}">${file.Filename} (${bytesToSize(file.Size)})</div>
  74. <div class="description">
  75. <div class="ui breadcrumb">
  76. <div class="active section ${colorClass}">${filepath}/</div>
  77. <div class="divider"> ( </div>
  78. <a class="section" filepath="${filepath}" onclick="openFileLocation(this);">Open File Location</a>
  79. <div class="divider"> / </div>
  80. <a class="section" filepath="${file.Filepath}" onclick="deleteThisFile(this);">Delete</a>
  81. <div class="divider"> ) </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>`);
  86. });
  87. });
  88. }
  89. function openFileLocation(object){
  90. var filepath = $(object).attr("filepath");
  91. ao_module_openPath(filepath);
  92. }
  93. function deleteThisFile(object){
  94. var filepath = $(object).attr("filepath");
  95. var filename = filepath.split("/").pop();
  96. if (confirm("Confirm remove: " + filename + " ?")){
  97. //Request file system api to remove the file
  98. requestCSRFToken(function(token){
  99. $.ajax({
  100. url: "../../system/file_system/fileOpr",
  101. data: {opr: "delete", src: JSON.stringify([filepath]), csrft: token},
  102. success: function(data){
  103. if (data.error !== undefined){
  104. alert(data.error);
  105. }else{
  106. //DONE
  107. initFileList();
  108. }
  109. }
  110. });
  111. });
  112. }
  113. }
  114. function requestCSRFToken(callback){
  115. $.ajax({
  116. url: "../../system/csrf/new",
  117. success: function(token){
  118. callback(token);
  119. }
  120. })
  121. }
  122. function bytesToSize(bytes) {
  123. var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  124. if (bytes == 0) return '0 Byte';
  125. var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  126. return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
  127. }
  128. </script>
  129. </body>
  130. </html>