diff --git a/definitions/base.js b/definitions/base.js index cfa3d59a..f3bd517e 100644 --- a/definitions/base.js +++ b/definitions/base.js @@ -7520,6 +7520,11 @@ module.exports = function(s,config,lang){ `, pageOpen: 'monitorsList', }, + { + icon: 'film', + label: `${lang['Videos']}`, + pageOpen: 'videosTableView', + }, { icon: 'map-marker', label: `${lang['Power Viewer']}`, @@ -8013,5 +8018,44 @@ module.exports = function(s,config,lang){ }, } }, + "Videos Table": { + "section": "Videos Table", + "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, + }, + { + "fieldType": "div", + "id": "videosTable_preview_area", + "divContent": "" + } + ] + }, + "theTable": { + noHeader: true, + "section-pre-class": "col-md-8", + "info": [ + { + "fieldType": "table", + "attribute": `data-classes="table table-striped"`, + "id": "videosTable_draw_area", + "divContent": "" + } + ] + }, + } + }, }) } diff --git a/web/assets/js/bs5.videosTable.js b/web/assets/js/bs5.videosTable.js new file mode 100644 index 00000000..122dda5a --- /dev/null +++ b/web/assets/js/bs5.videosTable.js @@ -0,0 +1,120 @@ +$(document).ready(function(e){ + var theEnclosure = $('#tab-videosTableView') + var monitorsList = theEnclosure.find('.monitors_list') + var dateSelector = theEnclosure.find('.date_selector') + var videosTableDrawArea = $('#videosTable_draw_area') + var videosTablePreviewArea = $('#videosTable_preview_area') + var loadedVideosInMemory = {}; + function openVideosTableView(monitorId,startDate,endDate){ + drawVideosTableViewElements(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) { + drawVideosTableViewElements() + }) + monitorsList.change(function(){ + drawVideosTableViewElements() + }) + function drawVideosTableViewElements(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('videos') + '/' + selectedMonitor; + var videosTableData = [] + loadedVideosInMemory = {} + $.getJSON(apiURL + '?' + queryString.join('&'),function(data){ + videosTableDrawArea.bootstrapTable('destroy') + videosTableDrawArea.bootstrapTable({ + pagination: true, + search: true, + columns: [ + { + field: 'monitorName', + title: lang['Monitor'] + }, + { + field: 'time', + title: lang['Time Created'] + }, + { + field: 'size', + title: '' + }, + { + field: 'buttons', + title: '' + } + ], + data: data.videos.map((file) => { + return { + monitorName: `${loadedMonitors[file.mid]?.name || file.mid}`, + time: ` + ${file.start ? `
${lang.Started} ${formattedTime(file.details.start, 'DD-MM-YYYY hh:mm:ss AA')}
` : ''} + ${file.end ? `
${lang.Ended} ${formattedTime(file.details.end, 'DD-MM-YYYY hh:mm:ss AA')}
` : ''} + `, + size: convertKbToHumanSize(file.size), + buttons: ` + + + `, + } + }) + }) + }) + } + function drawPreviewVideo(href){ + videosTablePreviewArea.html(``) + } + $('body') + .on('click','.open-videosTable-video',function(e){ + e.preventDefault() + var href = $(this).attr('href') + openTab(`videosTableView`,{},null) + drawPreviewVideo(href) + return false; + }); + theEnclosure + .on('click','.preview-video',function(e){ + e.preventDefault() + var href = $(this).attr('href') + drawPreviewVideo(href) + return false; + }) + addOnTabOpen('videosTableView', function () { + drawMonitorListToSelector(monitorsList) + drawVideosTableViewElements() + }) + addOnTabReopen('videosTableView', function () { + var theSelected = `${monitorsList.val()}` + drawMonitorListToSelector(monitorsList) + monitorsList.val(theSelected) + }) + addOnTabAway('videosTableView', function () { + videosTablePreviewArea.find('video')[0].pause() + }) +}) diff --git a/web/pages/blocks/home.ejs b/web/pages/blocks/home.ejs index 15722bfe..b242b3fd 100644 --- a/web/pages/blocks/home.ejs +++ b/web/pages/blocks/home.ejs @@ -27,6 +27,7 @@ 'home/calendar', 'home/eventListWithPics', 'home/fileBin', + 'home/videosTable', 'confirm', 'home/help', ]).forEach(function(block){ %> diff --git a/web/pages/blocks/home/videosTable.ejs b/web/pages/blocks/home/videosTable.ejs new file mode 100644 index 00000000..2e8eb446 --- /dev/null +++ b/web/pages/blocks/home/videosTable.ejs @@ -0,0 +1,16 @@ +
+
+ <% + var drawBlock + var buildOptions + %> + <% + include fieldBuilders.ejs + %> + <% Object.keys(define['Videos Table'].blocks).forEach(function(blockKey){ + var theBlock = define['Videos Table'].blocks[blockKey] + drawBlock(theBlock) + }) %> +
+ +