Update Bootstrap Table, Add FileBin file viewer framework

definitions/base.js

@@ -4785,6 +4785,14 @@ module.exports = function(s,config,lang){
                       "notForSubAccount": true,
                       "evaluation": "details.edit_event_days !== '0'"
                    },
+                   {
+                      "name": "detail=timelapseFrames_days",
+                      "field": lang["Number of Days to keep"] + ' ' + lang['Timelapse'],
+                      "description": lang["fieldTextEventDays"],
+                      "default": "60",
+                      "notForSubAccount": true,
+                      "evaluation": "details.edit_timelapseFrames_days !== '0'"
+                   },
                    {
                       "name": "detail=log_days",
                       "field": lang["Number of Days to keep"] + ' ' + lang['Logs'],
@@ -7520,6 +7528,11 @@ module.exports = function(s,config,lang){
                           label: `${lang['Time-lapse']}`,
                           pageOpen: 'timelapseViewer',
                       },
+                      {
+                          icon: 'file-o',
+                          label: `${lang['FileBin']}`,
+                          pageOpen: 'fileBinView',
+                      },
                       {
                           divider: true,
                       },
@@ -7945,5 +7958,38 @@ module.exports = function(s,config,lang){
            },
          }
       },
+      "FileBin": {
+          "section": "FileBin",
+          "blocks": {
+              "Search Settings": {
+                 "name": lang["Search Settings"],
+                 "color": "green",
+                 "section-pre-class": "col-md-4",
+                 "info": [
+                     {
+                         "field": lang["Monitor"],
+                         "fieldType": "select",
+                         "class": "monitors_list",
+                         "possible": []
+                     },
+                     {
+                         "class": "date_selector",
+                         "field": lang.Date,
+                     }
+                ]
+            },
+            "FileBin": {
+                noHeader: true,
+               "section-pre-class": "col-md-8",
+               "info": [
+                   {
+                       "fieldType": "div",
+                       "id": "calendar_draw_area",
+                       "divContent": ""
+                   }
+               ]
+           },
+         }
+      },
   })
 }

languages/en_CA.json

@@ -373,6 +373,7 @@
    "Use Max Storage Amount": "Use Max Storage Amount",
    "Max Storage Amount": "Max Storage Amount",
    "Video Share": "Video Share",
+   "FileBin": "FileBin",
    "FileBin Share": "FileBin Share",
    "Timelapse Frames Share": "Timelapse Frames Share",
    "Number of Days to keep": "Number of Days to keep",

web/assets/js/bs5.fileBin.js

@@ -0,0 +1,86 @@
+$(document).ready(function(e){
+    //Timelapse JPEG Window
+    var theEnclosure = $('#tab-fileBinView')
+    var monitorsList = theEnclosure.find('.monitors_list')
+    var dateSelector = theEnclosure.find('.date_selector')
+    var fileBinDrawArea = $('#fileBin_draw_area')
+    var loadedVideosInMemory = {};
+    function openFileBinView(monitorId,startDate,endDate){
+        drawFileBinViewElements(monitorId,startDate,endDate)
+    }
+    function getSelectedTime(asUtc){
+        var dateRange = dateSelector.data('daterangepicker')
+        var startDate = dateRange.startDate.clone()
+        var endDate = dateRange.endDate.clone()
+        if(asUtc){
+            startDate = startDate.utc()
+            endDate = endDate.utc()
+        }
+        startDate = startDate.format('YYYY-MM-DDTHH:mm:ss')
+        endDate = endDate.format('YYYY-MM-DDTHH:mm:ss')
+        return {
+            startDate: startDate,
+            endDate: endDate
+        }
+    }
+
+    dateSelector.daterangepicker({
+        startDate: moment().utc().subtract(2, 'days'),
+        endDate: moment().utc(),
+        timePicker: true,
+        locale: {
+            format: 'YYYY/MM/DD hh:mm:ss A'
+        }
+    }, function(start, end, label) {
+        drawFileBinViewElements()
+    })
+    monitorsList.change(function(){
+        drawFileBinViewElements()
+    })
+    function drawFileBinViewElements(selectedMonitor,startDate,endDate){
+        var dateRange = getSelectedTime(false)
+        if(!startDate)startDate = dateRange.startDate
+        if(!endDate)endDate = dateRange.endDate
+        if(!selectedMonitor)selectedMonitor = monitorsList.val()
+        var queryString = ['start=' + startDate,'end=' + endDate,'limit=0']
+        var frameIconsHtml = ''
+        var apiURL = getApiPrefix('fileBin') + '/' + selectedMonitor;
+        var fileBinData = []
+        loadedVideosInMemory = {}
+        $.getJSON(apiURL + '?' + queryString.join('&'),function(data){
+            fileBinDrawArea.bootstrapTable({
+                pagination: true,
+                search: true,
+                columns: [
+                      {
+                        field: 'filename',
+                        title: lang['Filename']
+                      }, {
+                        field: 'time',
+                        title: lang['Time Created']
+                      }, {
+                        field: 'href',
+                        title: 'Download'
+                      }
+                ],
+                data: data.files
+            })
+        })
+    }
+
+    $('body').on('click','.open-fileBin-viewer',function(){
+        var el = $(this).parents('[data-mid]')
+        var monitorId = el.attr('data-mid')
+        openTab(`fileBinView`,{},null)
+        monitorsList.val(monitorId).change()
+    })
+    addOnTabOpen('fileBinView', function () {
+        drawMonitorListToSelector(monitorsList)
+        drawFileBinViewElements()
+    })
+    addOnTabReopen('fileBinView', function () {
+        var theSelected = `${monitorsList.val()}`
+        drawMonitorListToSelector(monitorsList)
+        monitorsList.val(theSelected)
+    })
+})

web/pages/blocks/footer.ejs

@@ -6,6 +6,7 @@
 <script src="<%-window.libURL%>libs/js/livestamp.min.js"></script>
 <script src="<%-window.libURL%>libs/js/poseidon.js"></script>
 <script src="<%-window.libURL%>assets/vendor/bootstrap5/js/bootstrap.bundle.min.js"></script>
+<script src="<%-window.libURL%>assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
 <!-- <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script> -->
 <script src="<%-window.libURL%>libs/js/daterangepicker.js"></script>

web/pages/blocks/header.ejs

@@ -25,6 +25,7 @@
     <meta name="msapplication-square310x310logo" content="libs/img/icon/mstile-310x310.png" />
     <link rel="stylesheet" href="<%-window.libURL%>libs/css/pnotify.custom.min.css">
     <link rel="stylesheet" href="<%-window.libURL%>assets/vendor/bootstrap5/css/bootstrap.min.css">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/vendor/bootstrap-table/bootstrap-table.min.css">
     <link rel="stylesheet" href="<%-window.libURL%>assets/css/bootstrap5-theme.css">
     <link rel="stylesheet" href="<%-window.libURL%>libs/css/font-awesome.min.css">
     <link rel="stylesheet" href="<%-window.libURL%>libs/css/daterangepicker.css">

web/pages/blocks/home.ejs

@@ -26,6 +26,7 @@
                     'home/logViewer',
                     'home/calendar',
                     'home/eventListWithPics',
+                    'home/fileBin',
                     'confirm',
                     'home/help',
                 ]).forEach(function(block){ %>

web/pages/blocks/home/fileBin.ejs

@@ -0,0 +1,16 @@
+<main class="page-tab pt-3" id="tab-fileBinView">
+    <div class="row <%- define.Theme.isDark ? `dark` : '' %>">
+        <%
+          var drawBlock
+          var buildOptions
+        %>
+        <%
+            include fieldBuilders.ejs
+        %>
+        <% Object.keys(define['FileBin'].blocks).forEach(function(blockKey){
+              var theBlock = define['FileBin'].blocks[blockKey]
+              drawBlock(theBlock)
+          }) %>
+    </div>
+    <script src="<%-window.libURL%>libs/js/bs5.fileBin.js"></script>
+</main>