Performance Updates to Timeline
Moe
parent
b073eab024
commit
57a17db487
|
|
@ -7773,6 +7773,7 @@ module.exports = function(s,config,lang){
|
|||
label: `${lang['Timeline']}`,
|
||||
pageOpen: 'timeline',
|
||||
addUl: true,
|
||||
ulStyle: `max-height:250px;overflow:auto;`
|
||||
},
|
||||
{
|
||||
icon: 'map-marker',
|
||||
|
|
@ -9178,7 +9179,7 @@ module.exports = function(s,config,lang){
|
|||
<div class="btn-group">
|
||||
<a class="btn btn-sm btn-primary" timeline-action="autoGridSizer" title="${lang.autoResizeGrid}"><i class="fa fa-expand"></i></a>
|
||||
<a class="btn btn-sm btn-primary" timeline-action="playUntilVideoEnd" title="${lang.playUntilVideoEnd}"><i class="fa fa-step-forward"></i></a>
|
||||
<a class="btn btn-sm btn-primary" timeline-action="dontShowDetection" title="${lang['Hide Detection on Stream']}"><i class="fa fa-grav"></i></a>
|
||||
<a class="btn btn-sm btn-primary btn-warning" timeline-action="dontShowDetection" title="${lang['Hide Detection on Stream']}"><i class="fa fa-grav"></i></a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-sm btn-success" timeline-action="downloadAll" title="${lang.Download}"><i class="fa fa-download"></i></a>
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@ body {
|
|||
box-shadow: 0 0 5px #1e2b37;
|
||||
}
|
||||
|
||||
.dot-grey {background:#777}
|
||||
.dot-red {background:#d9534f}
|
||||
.dot-purple {background:#3f51b5}
|
||||
.dot-blue {background:#375182}
|
||||
|
|
@ -148,7 +149,6 @@ body {
|
|||
.dot-green {background:#449d44}
|
||||
.dot-forestgreen {background:#408693}
|
||||
.dot-orange {background:#c49a68}
|
||||
.dot-grey {background:#777}
|
||||
|
||||
.slidemenu .nav-link:hover {
|
||||
color: #9abadd!important;
|
||||
|
|
|
|||
|
|
@ -728,7 +728,12 @@ function getAllSectionsFromDefinition(definitionsBase){
|
|||
function buildSubMenuItems(listOfItems){
|
||||
var html = ''
|
||||
$.each(listOfItems,function(n,item){
|
||||
if(item)html += `<li><a class="${definitions.Theme.isDark ? 'text-white' : 'text-dark'} text-decoration-none ${item.class || ''}" ${item.attributes || ''}><span class="${item.hasParent ? 'ml-3' : ''} dot dot-${item.color || 'blue'} mr-2"></span>${item.label}</a></li>`
|
||||
if(!item)return;
|
||||
if(item.divider){
|
||||
html += `<li><hr class="dropdown-divider"/></li>`
|
||||
}else{
|
||||
html += `<li><a class="${definitions.Theme.isDark ? 'text-white' : 'text-dark'} text-decoration-none ${item.class || ''}" ${item.attributes || ''}><span class="${item.hasParent ? 'ml-3' : ''} dot dot-${item.color || 'blue'} mr-2"></span>${item.label}</a></li>`
|
||||
}
|
||||
})
|
||||
return html
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ $(document).ready(function(){
|
|||
var timeStripItemColors = {}
|
||||
var timeStripAutoGridSizer = false
|
||||
var timeStripListOfQueries = []
|
||||
var timeStripSelectedMonitors = []
|
||||
var timeStripSelectedMonitors = dashboardOptions().timeStripSelectedMonitors || []
|
||||
var timeStripAutoScrollTimeout = null;
|
||||
var timeStripAutoScrollPositionStart = null;
|
||||
var timeStripAutoScrollPositionEnd = null;
|
||||
|
|
@ -42,12 +42,14 @@ $(document).ready(function(){
|
|||
var loadedVideoElsOnCanvasNextVideoTimeout = {}
|
||||
var loadedVideoEndingTimeouts = {}
|
||||
var playUntilVideoEnd = false
|
||||
var dontShowDetectionOnTimeline = false
|
||||
var dontShowDetectionOnTimeline = true
|
||||
var isPlaying = false
|
||||
var earliestStart = null
|
||||
var latestEnd = null
|
||||
var timeChanging = false
|
||||
var dateRangeChanging = false
|
||||
var lastDateChecked = new Date(0)
|
||||
var monitorSelectionElements = []
|
||||
function setLoadingMask(turnOn){
|
||||
if(turnOn){
|
||||
if(theWindow.find('.loading-mask').length === 0){
|
||||
|
|
@ -127,16 +129,17 @@ $(document).ready(function(){
|
|||
return videos;
|
||||
}
|
||||
async function getVideosByTimeStripRange(addOrOverWrite){
|
||||
// timeStripSelectedMonitors = selected monitors
|
||||
var currentVideosLength = parseInt(loadedVideosOnTimeStrip.length)
|
||||
var stripDate = getTimestripDate()
|
||||
var startDate = stripDate.start
|
||||
var endDate = stripDate.end
|
||||
var dateNow = new Date()
|
||||
var isOverCacheTime = dateNow.getTime() - lastDateChecked.getTime() >= 20 * 60 * 1000;
|
||||
if(isOverCacheTime){
|
||||
timeStripListOfQueries = []
|
||||
loadedVideosOnTimeStrip = []
|
||||
}
|
||||
var gaps = findGapsInSearchRanges(timeStripListOfQueries, [startDate,endDate])
|
||||
// console.error([startDate,endDate])
|
||||
// console.log('range : ',JSON.stringify([startDate,endDate]))
|
||||
// console.log('timeRanges : ',JSON.stringify(timeStripListOfQueries))
|
||||
// console.log('gaps : ',JSON.stringify(gaps))
|
||||
if(gaps.length > 0){
|
||||
setLoadingMask(true)
|
||||
timeStripListOfQueries.push(...gaps)
|
||||
|
|
@ -146,6 +149,7 @@ $(document).ready(function(){
|
|||
if(currentVideosLength !== loadedVideosOnTimeStrip.length)addTimelineItems(loadedVideosOnTimeStrip);
|
||||
setLoadingMask(false)
|
||||
}
|
||||
lastDateChecked = new Date();
|
||||
return loadedVideosOnTimeStrip
|
||||
}
|
||||
function selectVideosForCanvas(time, videos){
|
||||
|
|
@ -240,6 +244,7 @@ $(document).ready(function(){
|
|||
setTimeLabel(clickTime)
|
||||
setTimeOfCanvasVideos(clickTime)
|
||||
setHollowClickQueue()
|
||||
setSideMenuMonitorVisualSelection()
|
||||
}
|
||||
function timeStripActionWithPausePlay(restartPlaySpeed){
|
||||
return new Promise((resolve,reject) => {
|
||||
|
|
@ -769,6 +774,7 @@ $(document).ready(function(){
|
|||
}
|
||||
function drawFoundCamerasSubMenu(){
|
||||
var tags = getListOfTagsFromMonitors()
|
||||
var monitorsOrdered = Object.values(loadedMonitors).sort((a, b) => a.name.localeCompare(b.name));
|
||||
var allFound = [
|
||||
{
|
||||
attributes: `timeline-menu-action="selectMonitorGroup" tag=""`,
|
||||
|
|
@ -792,9 +798,33 @@ $(document).ready(function(){
|
|||
color: ' d-none',
|
||||
label: `<small class="mt-1">${lang.addTagText}</small>`,
|
||||
})
|
||||
}else if(allFound.length !== 0){
|
||||
allFound.push({
|
||||
divider: true
|
||||
})
|
||||
}
|
||||
$.each(monitorsOrdered,function(monitorKey,monitor){
|
||||
var monitorId = monitor.mid
|
||||
var label = monitor.name
|
||||
allFound.push({
|
||||
attributes: `timeline-menu-action="selectMonitor" data-mid="${monitorId}"`,
|
||||
class: `cursor-pointer timeline-selectMonitor`,
|
||||
color: 'grey',
|
||||
label,
|
||||
})
|
||||
})
|
||||
var html = buildSubMenuItems(allFound)
|
||||
sideMenuList.html(html)
|
||||
monitorSelectionElements = sideMenuList.find('.timeline-selectMonitor')
|
||||
}
|
||||
function setSideMenuMonitorVisualSelection(){
|
||||
var getForAllMonitors = timeStripSelectedMonitors.length === 0;
|
||||
monitorSelectionElements.find('.dot')[getForAllMonitors ? 'addClass' : 'removeClass']('dot-green')
|
||||
if(!getForAllMonitors){
|
||||
timeStripSelectedMonitors.forEach((monitorId) => {
|
||||
sideMenuList.find(`[data-mid="${monitorId}"] .dot`).addClass('dot-green')
|
||||
})
|
||||
}
|
||||
}
|
||||
function setColorReferences(){
|
||||
$.each(loadedMonitors,function(monitorId,monitor){
|
||||
|
|
@ -853,10 +883,24 @@ $(document).ready(function(){
|
|||
if(!video)return console.log('No More!')
|
||||
await jumpToVideo(video)
|
||||
}
|
||||
function onSelectedMonitorChange(){
|
||||
dashboardOptions('timeStripSelectedMonitors', timeStripSelectedMonitors)
|
||||
}
|
||||
sideMenuList.on('click','[timeline-menu-action]',function(){
|
||||
var el = $(this)
|
||||
var type = el.attr('timeline-menu-action')
|
||||
switch(type){
|
||||
case'selectMonitor':
|
||||
var monitorId = el.attr('data-mid')
|
||||
var alreadySelected = timeStripSelectedMonitors.indexOf(monitorId) > -1;
|
||||
if(alreadySelected){
|
||||
timeStripSelectedMonitors = timeStripSelectedMonitors.filter(fillId => monitorId !== fillId)
|
||||
}else{
|
||||
timeStripSelectedMonitors.push(monitorId)
|
||||
}
|
||||
onSelectedMonitorChange()
|
||||
refreshTimeline()
|
||||
break;
|
||||
case'selectMonitorGroup':
|
||||
var tag = el.attr('tag')
|
||||
if(!tag){
|
||||
|
|
@ -866,6 +910,7 @@ $(document).ready(function(){
|
|||
var monitorIds = tags[tag]
|
||||
timeStripSelectedMonitors = [...monitorIds];
|
||||
}
|
||||
onSelectedMonitorChange()
|
||||
refreshTimeline()
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<i class="fa fa-<%- item.icon %>"></i> <%- item.label %>
|
||||
</a>
|
||||
<% if(item.addUl){ %>
|
||||
<ul class="btn-default rounded btn-toggle-nav list-unstyled fw-normal ml-3 mt-2 px-2 pb-2 pt-1 <%- item.ulClass ? item.ulClass : '' %>">
|
||||
<ul class="btn-default rounded btn-toggle-nav list-unstyled fw-normal ml-3 mt-2 px-2 pb-2 pt-1 <%- item.ulClass ? item.ulClass : '' %>" style="<%- item.ulStyle ? item.ulStyle : '' %>">
|
||||
<% if(item.ulItems){
|
||||
item.ulItems.forEach((listItem) => { %>
|
||||
<li><a class="<%- define.Theme.isDark ? 'text-white' : 'text-dark' %> <%- listItem.class ? listItem.class : '' %>" <%- listItem.attributes ? listItem.attributes : '' %>><span class="dot dot-<%- listItem.color ? listItem.color : 'blue' %> shadow mr-2"></span><%- listItem.label ? listItem.label : 'Need Label' %></a></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue