Better FileBin listing

languages/en_CA.json

@@ -281,6 +281,8 @@
    "Type": "Type",
    "File Type": "File Type",
    "Filesize": "Filesize",
+   "Created": "Created",
+   "Size": "Size",
    "Video Status": "Video Status",
    "Custom Auto Load": "Custom Auto Load",
    "Easy Remote Access (P2P)": "Easy Remote Access (P2P)",

web/assets/js/bs5.dashboard-base.js

@@ -804,7 +804,12 @@ function downloadJSON(jsonData,filename){
         .attr('download',filename)
         [0].click()
 }
-
+function convertKbToHumanSize(theNumber){
+    var amount = theNumber / 1048576
+    var unit = amount / 1000 >= 1000 ? 'TB' : amount >= 1000 ? 'GB' : 'MB'
+    var number = (amount / 1000 >= 1000 ? amount / 1000000  : amount >= 1000 ? amount / 1000 : amount).toFixed(2)
+    return `${number} ${unit}`
+}
 function drawIndicatorBar(item){
     var html = `<div id="indicator-${item.name}" class="mb-2">
         <div class="d-flex flex-row text-white mb-1">

web/assets/js/bs5.fileBin.js

@@ -54,6 +54,10 @@ $(document).ready(function(e){
                 pagination: true,
                 search: true,
                 columns: [
+                      {
+                        field: 'monitorName',
+                        title: lang['Monitor']
+                      },
                       {
                         field: 'name',
                         title: lang['Filename']
@@ -62,15 +66,25 @@ $(document).ready(function(e){
                         field: 'time',
                         title: lang['Time Created']
                       },
+                      {
+                        field: 'size',
+                        title: ''
+                      },
                       {
                         field: 'buttons',
-                        title: 'Download'
+                        title: ''
                       }
                 ],
                 data: data.files.map((file) => {
                     return {
+                        monitorName: `<b>${loadedMonitors[file.mid]?.name || file.mid}</b>`,
                         name: file.name,
-                        time: file.time,
+                        time: `
+                            <div><b>${lang.Created}</b> ${formattedTime(file.time, 'DD-MM-YYYY hh:mm:ss AA')}</div>
+                            ${file.details.start ? `<div><b>${lang.Started}</b> ${formattedTime(file.details.start, 'DD-MM-YYYY hh:mm:ss AA')}</div>` : ''}
+                            ${file.details.end ? `<div><b>${lang.Ended}</b> ${formattedTime(file.details.end, 'DD-MM-YYYY hh:mm:ss AA')}</div>` : ''}
+                        `,
+                        size: convertKbToHumanSize(file.size),
                         buttons: `
                             <a class="btn btn-sm btn-primary" href="${file.href}" download title="${lang.Download}"><i class="fa fa-download"></i></a>
                             ${file.details.video ? `<a class="btn btn-sm btn-primary preview-video" href="${file.href}" title="${lang.Play}"><i class="fa fa-play"></i></a>` : ``}