ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

simplify dateRange selector in multiple views

fix-timezone-by-ui
Moe 2022-10-20 19:30:49 -07:00
parent 3c7289db0b
commit 3e95e9458e
9 changed files with 60 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/assets/js/bs5.calendar.js
View File

@ -8,37 +8,16 @@ $(document).ready(function(e){
var openCalendarView = function(monitorId,startDate,endDate){
drawCalendarViewElements(monitorId,startDate,endDate)
}
var getSelectedTime = function(asUtc){
var dateRange = dateSelector.data('daterangepicker')
var startDate = dateRange.startDate.clone()
var endDate = dateRange.endDate.clone()
if(asUtc){
startDate = startDate.utc()
endDate = endDate.utc()
loadDateRangePicker(dateSelector,{
onChange: function(start, end, label) {
drawCalendarViewElements()
}
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) {
drawCalendarViewElements()
})
monitorsList.change(function(){
drawCalendarViewElements()
})
var drawCalendarViewElements = function(selectedMonitor,startDate,endDate){
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
if(!startDate)startDate = dateRange.startDate
if(!endDate)endDate = dateRange.endDate
if(!selectedMonitor)selectedMonitor = monitorsList.val()

21
web/assets/js/bs5.dashboard-base.js
View File

@ -923,6 +923,27 @@ function setInterfaceCounts(monitors){
count.text(`${activeCameraCount} / ${allCameraCount}`)
el.find('.progress-bar').css('width', `${percentActive}%`)
}
function getSelectedTime(dateSelector){
var dateRange = dateSelector.data('daterangepicker')
var startDate = dateRange.startDate.clone()
var endDate = dateRange.endDate.clone()
startDate = startDate.format('YYYY-MM-DDTHH:mm:ss')
endDate = endDate.format('YYYY-MM-DDTHH:mm:ss')
return {
startDate: startDate,
endDate: endDate
}
}
function loadDateRangePicker(dateSelector,options){
dateSelector.daterangepicker(Object.assign({
startDate: moment().utc().subtract(2, 'days'),
endDate: moment().utc(),
timePicker: true,
locale: {
format: 'YYYY/MM/DD hh:mm:ss A'
}
},options || {},{ onChange: undefined }), options.onChange)
}
// on page load
var readyFunctions = []
function onDashboardReady(theAction){

12
web/assets/js/bs5.eventListWithPics.js
View File

@ -2,26 +2,24 @@ $(document).ready(function(){
var theWindow = $('#tab-eventListWithPics')
var monitorSelector = $('#eventListWithPics-monitors-list')
var rowContainer = $('#eventListWithPics-rows')
var dateRangeSelector = $('#eventListWithPics-daterange')
var dateSelector = $('#eventListWithPics-daterange')
var theForm = theWindow.find('form')
var loadedEventsInMemory = {}
dateRangeSelector.daterangepicker({
loadDateRangePicker(dateSelector,{
startDate: moment().subtract(moment.duration("5:00:00")),
endDate: moment().add(moment.duration("24:00:00")),
timePicker: true,
timePicker24Hour: true,
timePickerSeconds: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
onChange: function(start, end, label) {
drawDataRows()
}
},function(start, end, label){
drawDataRows()
})
function drawDataRows(){
var selectedMonitorType = monitorSelector.val()
selectedMonitorType = selectedMonitorType === 'all' ? '' : selectedMonitorType
var currentDateRange = dateRangeSelector.data('daterangepicker');
var currentDateRange = dateSelector.data('daterangepicker');
getEvents({
monitorId: selectedMonitorType,
limit: 50,

29
web/assets/js/bs5.fileBin.js
View File

@ -8,31 +8,10 @@ $(document).ready(function(e){
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()
loadDateRangePicker(dateSelector,{
onChange: function(start, end, label) {
drawFileBinViewElements()
}
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()
@ -42,7 +21,7 @@ $(document).ready(function(e){
loadedFilesInMemory[`${video.mid}${video.name}`] = video
}
function drawFileBinViewElements(selectedMonitor,startDate,endDate){
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
if(!startDate)startDate = dateRange.startDate
if(!endDate)endDate = dateRange.endDate
if(!selectedMonitor)selectedMonitor = monitorsList.val()

1
web/assets/js/bs5.liveGrid.js
View File

@ -102,6 +102,7 @@ function buildStreamElementHtml(streamType){
function attachVideoElementErrorHandler(monitorId){
var monitor = loadedMonitors[monitorId]
var monitorDetails = safeJsonParse(monitor.details)
var subStreamChannel = monitor.subStreamChannel
var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
if(
streamType === 'flv' ||

20
web/assets/js/bs5.logViewer.js
View File

@ -1,24 +1,16 @@
$(document).ready(function(e){
var theWindow = $('#tab-logViewer')
var logTypeSelector = $('#log_monitors')
var dateRangeSelector = $('#logs_daterange')
var dateSelector = $('#logs_daterange')
var savedLogRows = $('#saved-logs-rows')
var theForm = theWindow.find('form')
var logViewerDataInMemory = {}
//log viewer
dateRangeSelector.daterangepicker({
startDate: moment().subtract(moment.duration("5:00:00")),
endDate: moment().add(moment.duration("24:00:00")),
timePicker: true,
timePicker24Hour: true,
timePickerSeconds: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
loadDateRangePicker(dateSelector,{
onChange: function(start, end, label) {
drawLogRows()
}
},function(start, end, label){
drawLogRows()
});
})
addOnTabOpen('logViewer',function(){
logTypeSelector.find('optgroup option').remove()
var html = ''
@ -35,7 +27,7 @@ $(document).ready(function(e){
var html = ''
var selectedLogType = logTypeSelector.val()
selectedLogType = selectedLogType === 'all' ? '' : selectedLogType
var currentDateRange = dateRangeSelector.data('daterangepicker');
var currentDateRange = dateSelector.data('daterangepicker');
var apiEndpoint = getApiPrefix(`logs`) + '/' + selectedLogType + '?start=' + formattedTimeForFilename(currentDateRange.startDate) + '&end=' + formattedTimeForFilename(currentDateRange.endDate)
$.getJSON(apiEndpoint,function(rows){
logViewerDataInMemory = {

40
web/assets/js/bs5.powerVideo.js
View File

@ -3,7 +3,7 @@ $(document).ready(function(e){
var powerVideoMonitorsListElement = $('#powerVideoMonitorsList')
var powerVideoMonitorViewsElement = $('#powerVideoMonitorViews')
var powerVideoTimelineStripsContainer = $('#powerVideoTimelineStrips')
var powerVideoDateRangeElement = $('#powerVideoDateRange')
var dateSelector = $('#powerVideoDateRange')
var powerVideoVideoLimitElement = $('#powerVideoVideoLimit')
var powerVideoEventLimitElement = $('#powerVideoEventLimit')
var powerVideoSet = $('#powerVideoSet')
@ -31,23 +31,18 @@ $(document).ready(function(e){
}
var activeTimeline = null
// fix utc/localtime translation (use timelapseJpeg as guide, it works as expected) >
powerVideoDateRangeElement.daterangepicker({
loadDateRangePicker(dateSelector,{
startDate: moment().subtract(moment.duration("24:00:00")),
endDate: moment().add(moment.duration("24:00:00")),
timePicker: true,
timePicker24Hour: true,
timePickerSeconds: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY h:mm A'
onChange: function(start, end, label) {
dateSelector.focus()
$.each(lastPowerVideoSelectedMonitors,async function(n,monitorId){
await requestTableData(monitorId)
})
}
},function(start, end, label){
// $.pwrvid.drawTimeline()
powerVideoDateRangeElement.focus()
$.each(lastPowerVideoSelectedMonitors,async function(n,monitorId){
await requestTableData(monitorId)
})
});
})
// fix utc/localtime translation (use timelapseJpeg as guide, it works as expected) />
function loadVideosToTimeLineMemory(monitorId,videos,events){
videos.forEach((video) => {
@ -75,23 +70,8 @@ $(document).ready(function(e){
})
powerVideoMonitorsListElement.html(html)
}
function getSelectedTime(asUtc){
var dateRange = powerVideoDateRangeElement.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
}
}
async function requestTableData(monitorId){
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
var searchQuery = objectTagSearchField.val() || null
var startDate = dateRange.startDate
var endDate = dateRange.endDate
@ -768,7 +748,7 @@ $(document).ready(function(e){
monitorListElement: powerVideoMonitorsListElement,
monitorViewsElement: powerVideoMonitorViewsElement,
timelineStripsElement: powerVideoTimelineStripsContainer,
dateRangeElement: powerVideoDateRangeElement,
dateRangeElement: dateSelector,
loadedVideos: powerVideoLoadedVideos,
loadedEvents: powerVideoLoadedEvents,
loadedChartData: powerVideoLoadedChartData,

31
web/assets/js/bs5.timelapseViewer.js
View File

@ -50,31 +50,10 @@ $(document).ready(function(e){
var openTimelapseWindow = function(monitorId,startDate,endDate){
drawTimelapseWindowElements(monitorId,startDate,endDate)
}
var getSelectedTime = function(asUtc){
var dateRange = dateSelector.data('daterangepicker')
var startDate = dateRange.startDate.clone()
var endDate = dateRange.endDate.clone()
if(asUtc){
startDate = startDate.utc()
endDate = endDate.utc()
loadDateRangePicker(dateSelector,{
onChange: function(start, end, label) {
drawTimelapseWindowElements()
}
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) {
drawTimelapseWindowElements()
})
monitorsList.change(function(){
drawTimelapseWindowElements()
@ -88,7 +67,7 @@ $(document).ready(function(e){
}
function drawTimelapseWindowElements(selectedMonitor,startDate,endDate){
setDownloadButtonLabel(lang['Build Video'], 'database')
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
if(!startDate)startDate = dateRange.startDate
if(!endDate)endDate = dateRange.endDate
if(!selectedMonitor)selectedMonitor = monitorsList.val()
@ -275,7 +254,7 @@ $(document).ready(function(e){
})
downloadButton.click(function(){
var fps = fpsSelector.val()
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
var startDate = dateRange.startDate
var endDate = dateRange.endDate
var selectedMonitor = monitorsList.val()

29
web/assets/js/bs5.videosTable.js
View File

@ -40,31 +40,10 @@ $(document).ready(function(e){
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()
loadDateRangePicker(dateSelector,{
onChange: function(start, end, label) {
drawVideosTableViewElements()
}
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()
@ -76,7 +55,7 @@ $(document).ready(function(e){
drawVideosTableViewElements()
})
async function drawVideosTableViewElements(usePreloadedData){
var dateRange = getSelectedTime(false)
var dateRange = getSelectedTime(dateSelector)
var searchQuery = objectTagSearchField.val() || null
var startDate = dateRange.startDate
var endDate = dateRange.endDate