file_properties.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. <html>
  2. <head>
  3. <title locale="title/title">File Properties</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.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. <script type="text/javascript" src="../../script/applocale.js"></script>
  11. <style>
  12. body{
  13. overflow:hidden;
  14. }
  15. </style>
  16. </head>
  17. <body id="filePropertiesWindow">
  18. <br>
  19. <div class="ui container">
  20. <h3 class="ui header">
  21. <span locale="title/title">File Properties</span>
  22. <div class="sub header" locale="title/desc">Basic File Information</div>
  23. </h3>
  24. <div class="ui divider"></div>
  25. <div id="properties">
  26. </div>
  27. <br>
  28. <button style="display:none;" class="ui small blue fluid button singleFileOnly" onclick="changeDefaultWebApp();" locale="button/changeDefault">Change Default WebApp</button>
  29. <button style="display:none; margin-top: 4px;" class="ui small fluid button singleFileOnly" onclick="viewVersionHistory();" locale="button/versionHistory">View Version History</button>
  30. <button style="margin-top: 4px;" class="ui small fluid button linuxonly" onclick="openFilePermissionPanel();" locale="button/changeFilePermission">Change File Permissions</button>
  31. <br>
  32. </div>
  33. <div id="filesizeLoader" class="ui active dimmer">
  34. <div class="ui indeterminate text loader" locale="loader/loadingFileSize">Calculating File Size</div>
  35. </div>
  36. <script>
  37. //Initiate the view model
  38. var files = ao_module_loadInputFiles();
  39. var fileProperties = [];
  40. var fileInfo = {};
  41. function initFileProperties(){
  42. $("#properties").html("");
  43. if (files.length == 1){
  44. //There are only 1 file to be shown
  45. getFileProp(files[0], renderSingleObject);
  46. }else if (files.length > 1){
  47. for (var i =0; i < files.length; i++){
  48. getFileProp(files[i], function(data){
  49. fileProperties.push(data);
  50. if (fileProperties.length == files.length){
  51. renderMultipleObjects();
  52. }
  53. });
  54. }
  55. }
  56. }
  57. applocale.init("../locale/file_properties.json", function(){
  58. applocale.translate();
  59. initFileProperties();
  60. });
  61. //Hide windows / linux only operations
  62. $.get("/system/info/getArOZInfo", function(data){
  63. if (data.HostOS == "windows"){
  64. $(".linuxonly").hide();
  65. }else{
  66. $(".windowsonly").hide();
  67. }
  68. });
  69. function viewVersionHistory(){
  70. var hashPassthrough = encodeURIComponent(JSON.stringify(files));
  71. ao_module_newfw({
  72. url: "SystemAO/file_system/file_versions.html#" + hashPassthrough,
  73. width: 570,
  74. height: 480,
  75. appicon: "SystemAO/file_system/img/properties.png",
  76. title: "File Version History",
  77. });
  78. }
  79. function getFileProp(vpath, callback){
  80. $.ajax({
  81. url: "../../system/file_system/getProperties",
  82. data: {path: vpath},
  83. method: "POST",
  84. success: function(data){
  85. callback(data);
  86. fileInfo = data;
  87. //Initialize system theme
  88. fpw_loadPreference("file_explorer/theme",function(data){
  89. if (data.error === undefined){
  90. if (data == "darkTheme"){
  91. fpw_toggleDarkTheme();
  92. }else{
  93. //White theme. Do nothing
  94. }
  95. }
  96. });
  97. }
  98. })
  99. }
  100. function openFilePermissionPanel(){
  101. var hashPassthrough = encodeURIComponent(JSON.stringify(files));
  102. ao_module_newfw({
  103. url: "SystemAO/file_system/file_permission.html#" + hashPassthrough,
  104. width: 340,
  105. height: 480,
  106. appicon: "SystemAO/file_system/img/properties.png",
  107. title: "File Permissions",
  108. });
  109. }
  110. function renderMultipleObjects(){
  111. hideLoader();
  112. var filesizeSum = sumProperties(fileProperties, "Filesize");
  113. $("#properties").append(ui_getInput(fileProperties[0].VirtualDirname + "/", "Root Name"));
  114. var filecount = 0;
  115. var foldercount = 0;
  116. for (var i =0; i < fileProperties.length; i++){
  117. if (fileProperties[i].IsDirectory){
  118. foldercount++;
  119. }else{
  120. filecount++;
  121. }
  122. }
  123. $("#properties").append(ui_getText(applocale.getString("selection/multi", "Multiple selections")));
  124. $("#properties").append(ui_getText(filecount + applocale.getString("counter/files", " Files")));
  125. $("#properties").append(ui_getText(foldercount + applocale.getString("counter/folders", " Folders")));
  126. let totalSizeText = bytesToSize(filesizeSum) + ` (${filesizeSum} bytes)`
  127. if (filesizeSum < 0){
  128. //Network folder. Do not render size
  129. totalSizeText = `<i class="times circle outline yellow icon"></i> ${applocale.getString("properties/error/Not available for network folders", "Not available for network folders")}`;
  130. }
  131. //Append other properties as table
  132. $("#properties").append(ui_getTable(
  133. [],
  134. [
  135. ["Virtual Directory", fileProperties[0].VirtualDirname + "/"],
  136. ["Storage Directory", fileProperties[0].StorageDirname + "/"],
  137. ["Total Size", totalSizeText],
  138. ]
  139. ));
  140. }
  141. function sumProperties(data, propName){
  142. var sum = 0;
  143. for (var i = 0; i < data.length; i++){
  144. sum += data[i][propName];
  145. }
  146. return sum;
  147. }
  148. //Render one object property to the ui element
  149. function renderSingleObject(data){
  150. hideLoader();
  151. if (data.error !== undefined){
  152. //Something went wrong
  153. $("#properties").append(`<h4 class="ui header">
  154. <i class="question icon"></i>
  155. <div class="content">
  156. File Properties Unknown
  157. <div class="sub header">The system were unable to read the selected file properties.</div>
  158. </div>
  159. </h4>
  160. <div class="ui divider"></div>
  161. <small>${data.error}</small>
  162. `);
  163. }else{
  164. //Append Filename
  165. var filesizeText = "File Size";
  166. if (data.IsDirectory){
  167. $("#properties").append(ui_getInput(data.Basename, "Folder Name"));
  168. filesizeText = "Folder Size";
  169. }else{
  170. $("#properties").append(ui_getInput(data.Basename, "File Name"));
  171. }
  172. //Append MIME Type
  173. $("#properties").append(ui_getText(data.MimeType));
  174. //Get the default opener
  175. if (!data.IsDirectory){
  176. //Check if this file is shortcut
  177. if ( data.Basename.split(".").pop() == "shortcut"){
  178. //This is shortcut file
  179. $("#properties").append(ui_getTable(
  180. [],
  181. [
  182. ["Virtual Path", data.VirtualPath],
  183. ["Storage Path", data.StoragePath],
  184. ["Permission", data.Permission],
  185. ["Last Modified", generateDisplayLastModTime(data.LastModTime)],
  186. ["File Type", "System Shortcut"],
  187. ["Owner",data.Owner],
  188. ]
  189. ));
  190. }else{
  191. //Normal Files
  192. $(".singleFileOnly").show();
  193. $.ajax({
  194. url: "../../system/modules/getDefault",
  195. method: "GET",
  196. data: {
  197. opr: "launch",
  198. ext: "." + data.Basename.split(".").pop(),
  199. mode: "launch"
  200. },
  201. success: function(openerinfo) {
  202. //Check if the module is set.
  203. var defaultWebAppField = ["Default WebApp",`<img class="ui mini spaced image" style="margin-left: 0px; padding-right: 8px;" src="../../${openerinfo.IconPath}">` + openerinfo.Name];
  204. if ( openerinfo.Name == undefined){
  205. //Not set.
  206. defaultWebAppField = ["Default WebApp", `<a href="#" onclick="changeDefaultWebApp();">Set Default WebApp</a>`];
  207. }
  208. //Append other properties as table
  209. $("#properties").append(ui_getTable(
  210. [],
  211. [
  212. defaultWebAppField,
  213. ["Virtual Path", data.VirtualPath],
  214. ["Storage Path", data.StoragePath],
  215. [filesizeText, bytesToSize(data.Filesize) + ` (${data.Filesize} bytes)`],
  216. ["Permission", data.Permission],
  217. ["Last Modified", generateDisplayLastModTime(data.LastModTime)],
  218. ["File Type", "File"],
  219. ["Owner",data.Owner],
  220. ]
  221. ));
  222. }
  223. });
  224. }
  225. }else{
  226. let folderSizeText = bytesToSize(data.Filesize) + ` (${data.Filesize} bytes)`;
  227. if (data.Filesize < 0){
  228. //Network folder. Do not render size
  229. folderSizeText = `<i class="times circle outline yellow icon"></i> ${applocale.getString("properties/error/Not available for network folders", "Not available for network folders")}`;
  230. }
  231. let lastModTimeText = generateDisplayLastModTime(data.LastModTime);
  232. if (data.LastModUnix == 0){
  233. lastModTimeText = `<i class="times circle outline yellow icon"></i> ${applocale.getString("properties/error/No record", "No record")}`;
  234. }
  235. $("#properties").append(ui_getTable(
  236. [],
  237. [
  238. ["Virtual Path", data.VirtualPath],
  239. ["Storage Path", data.StoragePath],
  240. [filesizeText, folderSizeText ],
  241. ["Permission", data.Permission],
  242. ["Last Modified", lastModTimeText],
  243. ["File Type", "Folder"],
  244. ["Owner",data.Owner],
  245. ]
  246. ));
  247. }
  248. }
  249. }
  250. function hideLoader(){
  251. $("#filesizeLoader").hide();
  252. $("body").css('overflow-y',"auto");
  253. }
  254. //Model rendering scripts
  255. function ui_getInput(value, placeholder="", type="text"){
  256. return `<div class="ui fluid small input">
  257. <input type="${type}" placeholder="${placeholder}" value="${value}" readonly="true">
  258. </div>`
  259. }
  260. function ui_getText(value, color="black"){
  261. return `<p style="color:${color}; margin-bottom:0px;">${value}</p>`;
  262. }
  263. function ui_getDivider(){
  264. return `<div class="ui divider"></div>`;
  265. }
  266. //head is a 1D array and table is 2D array
  267. function ui_getTable(heads, table){
  268. html = `<table class="ui very basic fluid table">`;
  269. if (heads.length > 0){
  270. html += `<thead><tr>`;
  271. for (var i =0; i < heads.length; i++){
  272. html += `<th>${heads[i]}</th>`;
  273. }
  274. html += `</tr></thead>`;
  275. }
  276. html += `<tbody>`;
  277. for (var i =0; i < table.length; i++){
  278. html += `<tr>`;
  279. for (var j =0; j < table[i].length; j++){
  280. var keyString = table[i][j];
  281. if (j == 0 && applocale){
  282. keyString = applocale.getString("properties/key/" + keyString.trim(), keyString);
  283. }
  284. html += `<td style="word-break: break-all;">${keyString}</td>`
  285. }
  286. html += `</tr>`;
  287. }
  288. html += `</tbody>
  289. </table>`;
  290. return html
  291. }
  292. function bytesToSize(bytes) {
  293. var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  294. if (bytes == 0) return '0 Byte';
  295. var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  296. return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
  297. }
  298. /*
  299. Updates Oct 2020 - Matching File Explorer Theme on other file system tabs
  300. */
  301. function fpw_toggleDarkTheme(){
  302. $("#filePropertiesWindow").css({
  303. "background-color":"#242330",
  304. "color":"white",
  305. });
  306. $("#filePropertiesWindow td,.header,p,div").css({
  307. "color":"white",
  308. });
  309. $("#filePropertiesWindow .input").addClass("inverted transparent big")
  310. }
  311. function fpw_loadPreference(key, callback){
  312. $.get("../../system/file_system/preference?key=" + key,function(data){
  313. callback(data);
  314. });
  315. }
  316. /*
  317. Updates 30 Jan 2021: Added change of file opener
  318. */
  319. //Open Opener Selector for the given file
  320. function changeDefaultWebApp(){
  321. var ext = fileInfo.Ext;
  322. var openFileList = [];
  323. var openFileObject = {
  324. filepath: fileInfo.VirtualPath,
  325. filename: fileInfo.Basename,
  326. }
  327. openFileList.push(openFileObject);
  328. var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
  329. ao_module_newfw({
  330. url: "SystemAO/file_system/defaultOpener.html#" + openParamter,
  331. width: 320,
  332. height: 510,
  333. appicon: "SystemAO/file_system/img/opener.png",
  334. title: "Default WebApp for " + ext,
  335. parent: ao_module_windowID,
  336. callback: "handleRefresh"
  337. });
  338. }
  339. function handleRefresh(){
  340. //Default opener changed. Update the display
  341. initFileProperties();
  342. }
  343. /*
  344. Updates 9 April 2021: Added day compare for last modification days
  345. */
  346. function generateDisplayLastModTime(lastModTime){
  347. //Try to split the date into js date format
  348. var dateInfo = (lastModTime.split(" ")[0]).split("-");
  349. var modTime = new Date(dateInfo[0],dateInfo[1],dateInfo[2]);
  350. var diff = calcDate(new Date(), modTime);
  351. var displayText = "Unknown";
  352. if (diff[2] > 0){
  353. //years
  354. displayText = diff[2] + applocale.getString("lastmod/time/year", " year");
  355. if (diff[2] > 1){
  356. displayText += applocale.getString("lastmod/time/s", "s")
  357. }
  358. displayText += applocale.getString("lastmod/time/ago", " ago");
  359. }else if (diff[1] > 0){
  360. //months
  361. displayText = diff[1] + applocale.getString("lastmod/time/month", " month");
  362. if (diff[1] > 1){
  363. displayText += applocale.getString("lastmod/time/s", "s")
  364. }
  365. displayText += applocale.getString("lastmod/time/ago", " ago");
  366. }else if (diff [0] > 0){
  367. //days
  368. displayText = diff[0] + applocale.getString("lastmod/time/days", " day");
  369. if (diff[0] > 1){
  370. displayText += applocale.getString("lastmod/time/s", "s");
  371. }
  372. displayText += applocale.getString("lastmod/time/ago", " ago");
  373. }else{
  374. //just now
  375. displayText = applocale.getString("lastmod/time/today", "Today");
  376. }
  377. return displayText + " (" + lastModTime + ")";
  378. }
  379. function calcDate(date1 = new Date(),date2) {
  380. var diff = Math.floor(date1.getTime() - date2.getTime());
  381. var day = 1000 * 60 * 60 * 24;
  382. var days = Math.floor(diff/day);
  383. var months = Math.floor(days/31);
  384. var years = Math.floor(months/12);
  385. return [days, months, years];
  386. }
  387. </script>
  388. </body>
  389. </html>