file_versions.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title locale="title/title">File Version History</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  7. <link rel="stylesheet" href="../../script/semantic/semantic.css">
  8. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  9. <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
  10. <script type="text/javascript" src="../../script/ao_module.js"></script>
  11. <script type="text/javascript" src="../../script/applocale.js"></script>
  12. <link rel="stylesheet" href="../../script/ao.css">
  13. <style>
  14. body{
  15. background-color: var(--body_background);
  16. }
  17. .backgroundIcon{
  18. position: fixed;
  19. bottom: 0px;
  20. right: 0px;
  21. opacity: 0.3;
  22. margin-right: -8em;
  23. margin-bottom: -5em;
  24. z-index: -99;
  25. pointer-events: none;
  26. user-select: none;
  27. }
  28. </style>
  29. </head>
  30. <body id="filePropertiesWindow">
  31. <br>
  32. <div class="backgroundIcon">
  33. <img class="ui medium image" src="../../img/system/file-restore.svg">
  34. </div>
  35. <div class="ui container">
  36. <h3 class="ui header">
  37. <div class="content">
  38. <span locale="title/title">File Version History</span>
  39. <div class="sub header" locale="title/desc">Any file versions that is more than 30 days old will be automatically removed from the system.</div>
  40. </div>
  41. </h3>
  42. <button onclick="createSnapshot();" class="ui basic button"><i class="ui green add icon"></i> <span locale="button/newver">Create New Version</span></button>
  43. <div class="ui divider"></div>
  44. <div id="succ" style="display:none;" class="ui green message">
  45. <i class="ui green circle check icon"></i> <span id="msg">File Restore Succeed</span>
  46. </div>
  47. <div>
  48. <table class="ui very basic fluid celled table unstackable">
  49. <tbody id="versions">
  50. <tr>
  51. <td>
  52. <h4 class="ui header">
  53. <div class="content">
  54. <span locale="message/nofile/title">No File</span>
  55. <div locale="message/nofile/desc" class="sub header">Invalid usage</div>
  56. </div>
  57. </h4>
  58. </td>
  59. </tr>
  60. </tbody>
  61. </table>
  62. </div>
  63. <div class="ui divider"></div>
  64. <button class="ui red button" onclick="deleteAllVersions();"><i class="ui trash icon"></i> <span locale="button/removeAll">Remove All Version Histories</span></button>
  65. <br>
  66. </div>
  67. <script>
  68. var files = ao_module_loadInputFiles();
  69. var targetFile = "";
  70. var currentVersionList = [];
  71. if (files.length >= 1){
  72. targetFile = files[0];
  73. applocale.init("../../SystemAO/locale/file_versions.json", function(){
  74. applocale.translate();
  75. loadVersionHistory(targetFile);
  76. initTheme();
  77. });
  78. setInterval(function(){
  79. checkHistoryListUpdate(targetFile);
  80. }, 3000)
  81. }else{
  82. //No file selected
  83. applocale.init("../../SystemAO/locale/file_versions.json", function(){
  84. applocale.translate();
  85. initTheme();
  86. });
  87. }
  88. function initTheme(){
  89. //Load system theme
  90. $.get("../../system/file_system/preference?key=" + "file_explorer/theme",function(data){
  91. if (data.error === undefined){
  92. if (data == "darkTheme"){
  93. $("body").addClass("darkTheme");
  94. $("#succ").attr("class","ui black message");
  95. }else{
  96. $("body").addClass("whiteTheme");
  97. }
  98. }
  99. });
  100. }
  101. function checkHistoryListUpdate(vpath){
  102. $.ajax({
  103. url: "../../system/file_system/versionHistory",
  104. data: {path: vpath},
  105. method: "POST",
  106. success: function(data){
  107. if (data.error == undefined){
  108. if (currentVersionList.length != data.Versions.length){
  109. loadVersionHistory(vpath);
  110. }
  111. }
  112. }
  113. });
  114. }
  115. function loadVersionHistory(vpath){
  116. $("#versions").html("Loading...");
  117. $.ajax({
  118. url: "../../system/file_system/versionHistory",
  119. data: {path: vpath},
  120. method: "POST",
  121. success: function(data){
  122. if (data.error !== undefined){
  123. alert(data.error);
  124. }else{
  125. $("#versions").html("");
  126. currentVersionList = data.Versions;
  127. data.Versions.forEach(fileVersionEntry => {
  128. var filesize = ao_module_utils.formatBytes(fileVersionEntry.Filesize, 1);
  129. $("#versions").append(`<tr>
  130. <td>
  131. <h4 class="ui header">
  132. <div class="content">
  133. <span>${fileVersionEntry.Filename}</span>
  134. <div class="sub header">${fileVersionEntry.OverwriteTime} / ${filesize}</div>
  135. </div>
  136. </h4></td>
  137. <td>
  138. <div class="ui icon mini buttons">
  139. <button relpath="${fileVersionEntry.Relpath}" onclick="downloadVersion(this);" class="ui very basic icon button" title="${applocale.getString("title/download", "Download Version")}"><i class="ui blue download icon"></i></button>
  140. <button verid="${fileVersionEntry.HistoryID}" onclick="restoreVersion(this);" class="ui very basic icon button" title="${applocale.getString("title/restore", "Restore This Version")}"><i class="ui green history icon"></i></button>
  141. <button verid="${fileVersionEntry.HistoryID}" onclick="deleteVersion(this);" class="ui very basic icon button" title="${applocale.getString("title/delete", "Delete")}"><i class="ui red trash icon"></i></button>
  142. </div>
  143. </td>
  144. </tr>`);
  145. });
  146. if (data.Versions.length == 0){
  147. //This file has no version history
  148. $("#versions").html(`<tr>
  149. <td>
  150. <h4 class="ui header">
  151. <div class="content">
  152. <i class="ui history icon"></i><span> ${applocale.getString("message/nohist/title", "No History")}</span>
  153. <div class="sub header">${applocale.getString("message/nohist/desc", "This file has no previous version histories.")}</div>
  154. </div>
  155. </h4>
  156. </td>
  157. </tr>`);
  158. }
  159. applocale.translate();
  160. }
  161. }
  162. });
  163. }
  164. function downloadVersion(object){
  165. var relpath = $(object).attr("relpath");
  166. var dirname = targetFile.split("/");
  167. dirname.pop();
  168. var accessPath = dirname.join("/") + "/" + relpath;
  169. window.open("../../media/download?file=" + accessPath)
  170. }
  171. function createSnapshot(){
  172. //Create a snapshot of the current object
  173. $.ajax({
  174. url: "../../system/file_system/versionHistory",
  175. data: {path: targetFile, opr: "new"},
  176. method: "POST",
  177. success: function(data){
  178. if (data.error != undefined){
  179. alert(data.error)
  180. }else{
  181. msgbox(applocale.getString("msgbox/created","New Version Created"));
  182. loadVersionHistory(targetFile);
  183. }
  184. }
  185. });
  186. }
  187. function restoreVersion(object){
  188. var versionID = $(object).attr("verid");
  189. if (confirm(applocale.getString("warning/restore", "Restoring this file will remove all newer version histories of this file. Confirm?"))){
  190. $.ajax({
  191. url: "../../system/file_system/versionHistory",
  192. data: {path: targetFile, opr: "restore", histid: versionID},
  193. method: "POST",
  194. success: function(data){
  195. if (data.error != undefined){
  196. alert(data.error)
  197. }else{
  198. loadVersionHistory(targetFile);
  199. msgbox(applocale.getString("msgbox/restored","Restore Succeed"));
  200. }
  201. }
  202. });
  203. }
  204. }
  205. function msgbox(message){
  206. $("#msg").text(message);
  207. $("#succ").stop().finish().fadeIn("fast").delay(3000).fadeOut("fast");
  208. }
  209. function deleteVersion(object){
  210. var versionID = $(object).attr("verid");
  211. $.ajax({
  212. url: "../../system/file_system/versionHistory",
  213. data: {path: targetFile, opr: "delete", histid: versionID},
  214. method: "POST",
  215. success: function(data){
  216. if (data.error != undefined){
  217. alert(data.error)
  218. }else{
  219. loadVersionHistory(targetFile);
  220. }
  221. }
  222. });
  223. }
  224. function deleteAllVersions(object){
  225. var versionID = $(object).attr("verid");
  226. if (confirm(applocale.getString("warning/deleteall", "This operation will **PERMANENTLY DELETE ALL** version history of this file. Confirm?"))){
  227. $.ajax({
  228. url: "../../system/file_system/versionHistory",
  229. data: {path: targetFile, opr: "deleteAll", histid: versionID},
  230. method: "POST",
  231. success: function(data){
  232. if (data.error != undefined){
  233. alert(data.error)
  234. }else{
  235. msgbox(applocale.getString("msgbox/deletedall","All version history deleted"));
  236. loadVersionHistory(targetFile);
  237. }
  238. }
  239. });
  240. }
  241. }
  242. </script>
  243. </body>
  244. </html>