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

Make Timeline more careful with large selections

better-plugin-controller
Moe 2024-01-08 16:52:32 -08:00
parent b45c902cf7
commit 709cd2e549
3 changed files with 81 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
languages/en_CA.json
View File

@ -11,6 +11,8 @@
"contactAdmin": "Contact the maintainer of your Shinobi installation.",
"accountAdded": "Account Added",
"accountAddedText": "Account has been added.",
"tooManyMonitorsSelected": "Too Many Monitors Selected",
"performanceMayBeAffected": "Performance may be affected. Do you wish to continue?",
"monitorDeleted": "Monitor Deleted",
"accountCreationError": "Account Creation Error",
"accountEditError": "Account Edit Error",

27
web/assets/js/bs5.confirm.js
View File

@ -10,6 +10,7 @@ $(document).ready(function(){
if(!x.class){x.class='btn-success'}
if(!x.title){x.title='Save changes'}
$.confirm.footer.find('.confirmaction'+place).click(function(){
delete($.confirm.onCancel);
$.confirm.e.modal('hide')
callback();
})
@ -23,20 +24,24 @@ $(document).ready(function(){
}
}
$.confirm.create = function(options){
if(options.title && options.body){
$.confirm.e.modal('show')
$.confirm.title.text(options.title)
$.confirm.body.css('word-wrap','initial')
if(options.breakWord){
$.confirm.body.css('word-wrap','break-word')
}
$.confirm.body.html(options.body)
}else{
alert('No Title, Language file Update?')
options.title = options.title || 'No Title'
options.body = options.body || 'No Text'
$.confirm.e.modal('show')
$.confirm.title.text(options.title)
$.confirm.body.css('word-wrap','initial')
if(options.breakWord){
$.confirm.body.css('word-wrap','break-word')
}
if(options.clickOptions && options.clickCallback || options.clickOptions instanceof Array)$.confirm.click(options.clickOptions,options.clickCallback)
$.confirm.body.html(options.body)
if(options.clickOptions && options.clickCallback || options.clickOptions instanceof Array){
$.confirm.click(options.clickOptions, options.clickCallback);
}
$.confirm.onCancel = options.onCancel;
}
$.confirm.e.on('hidden.bs.modal', function () {
if($.confirm.onCancel){
$.confirm.onCancel()
}
$.confirm.body.empty()
$.confirm.footer.find('.confirmaction').remove()
})

84
web/assets/js/bs5.timeline.js
View File

@ -139,17 +139,19 @@ $(document).ready(function(){
timeStripListOfQueries = []
loadedVideosOnTimeStrip = []
}
var gaps = findGapsInSearchRanges(timeStripListOfQueries, [startDate,endDate])
if(gaps.length > 0){
setLoadingMask(true)
timeStripListOfQueries.push(...gaps)
var videos = await getVideosInGaps(gaps,timeStripSelectedMonitors)
videos = addVideoBeforeAndAfter(videos)
loadedVideosOnTimeStrip.push(...videos)
if(currentVideosLength !== loadedVideosOnTimeStrip.length)addTimelineItems(loadedVideosOnTimeStrip);
setLoadingMask(false)
if(timeStripSelectedMonitors.length > 0){
var gaps = findGapsInSearchRanges(timeStripListOfQueries, [startDate,endDate])
if(gaps.length > 0){
setLoadingMask(true)
timeStripListOfQueries.push(...gaps)
var videos = await getVideosInGaps(gaps,timeStripSelectedMonitors)
videos = addVideoBeforeAndAfter(videos)
loadedVideosOnTimeStrip.push(...videos)
if(currentVideosLength !== loadedVideosOnTimeStrip.length)addTimelineItems(loadedVideosOnTimeStrip);
setLoadingMask(false)
}
lastDateChecked = new Date();
}
lastDateChecked = new Date();
return loadedVideosOnTimeStrip
}
function selectVideosForCanvas(time, videos){
@ -240,10 +242,14 @@ $(document).ready(function(){
}
async function resetTimeline(clickTime){
await getAndDrawVideosToTimeline(clickTime,true)
setTickDate(clickTime)
setTimeLabel(clickTime)
setTimeOfCanvasVideos(clickTime)
setHollowClickQueue()
if(timeStripSelectedMonitors.length > 0){
setTickDate(clickTime)
setTimeLabel(clickTime)
setTimeOfCanvasVideos(clickTime)
setHollowClickQueue()
}else{
setViewForNoMonitorsSelected()
}
setSideMenuMonitorVisualSelection()
}
function timeStripActionWithPausePlay(restartPlaySpeed){
@ -779,7 +785,7 @@ $(document).ready(function(){
{
attributes: `timeline-menu-action="selectMonitorGroup" tag=""`,
class: `cursor-pointer`,
color: 'green',
color: 'forestgreen',
label: lang['All Monitors'],
}
]
@ -817,9 +823,9 @@ $(document).ready(function(){
sideMenuList.html(html)
monitorSelectionElements = sideMenuList.find('.timeline-selectMonitor')
}
function setSideMenuMonitorVisualSelection(){
async function setSideMenuMonitorVisualSelection(){
var getForAllMonitors = timeStripSelectedMonitors.length === 0;
monitorSelectionElements.find('.dot')[getForAllMonitors ? 'addClass' : 'removeClass']('dot-green')
monitorSelectionElements.find('.dot').removeClass('dot-green')
if(!getForAllMonitors){
timeStripSelectedMonitors.forEach((monitorId) => {
sideMenuList.find(`[data-mid="${monitorId}"] .dot`).addClass('dot-green')
@ -886,6 +892,41 @@ $(document).ready(function(){
function onSelectedMonitorChange(){
dashboardOptions('timeStripSelectedMonitors', timeStripSelectedMonitors)
}
function setViewForNoMonitorsSelected(){
destroyTimeline();
timeStripVideoCanvas.html(`<h3 class="my-3 text-center text-white vertical-center flex-column"><i class="fa fa-hand-pointer-o fa-3x m-3"></i><div>${lang['No Monitors Selected']}</div></h3>`)
}
function isAllMonitorsSelected(percent = 100){
var divisor = percent / 100;
var allMonitorIds = Object.values(loadedMonitors).map(item => item.mid);
return timeStripSelectedMonitors.length >= (allMonitorIds.length * divisor);
}
function deselectAllMonitors(){
timeStripSelectedMonitors = [];
onSelectedMonitorChange()
refreshTimeline()
}
function refreshTimelineOnAgree(){
var askToLoad = isAllMonitorsSelected(50)
if(askToLoad){
$.confirm.create({
title: lang.tooManyMonitorsSelected,
body: lang.performanceMayBeAffected,
clickOptions: {
title: lang.getVideos,
class: 'btn-success'
},
clickCallback: function(){
refreshTimeline()
},
onCancel: function(){
deselectAllMonitors()
}
})
}else{
refreshTimeline()
}
}
sideMenuList.on('click','[timeline-menu-action]',function(){
var el = $(this)
var type = el.attr('timeline-menu-action')
@ -904,14 +945,15 @@ $(document).ready(function(){
case'selectMonitorGroup':
var tag = el.attr('tag')
if(!tag){
timeStripSelectedMonitors = []
timeStripSelectedMonitors = Object.values(loadedMonitors).map(item => item.mid)
refreshTimelineOnAgree()
}else{
var tags = getListOfTagsFromMonitors()
var monitorIds = tags[tag]
timeStripSelectedMonitors = [...monitorIds];
onSelectedMonitorChange()
refreshTimeline()
}
onSelectedMonitorChange()
refreshTimeline()
break;
}
})
@ -976,8 +1018,8 @@ $(document).ready(function(){
})
addOnTabOpen('timeline', async function () {
setColorReferences()
refreshTimeline()
drawFoundCamerasSubMenu()
refreshTimelineOnAgree()
})
addOnTabReopen('timeline', function () {
drawFoundCamerasSubMenu()