file_properties.html 21 KB

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