port calendar view into dashboard v3

email-send-options-from-account
Moe 2021-11-02 21:16:06 -07:00
parent 91f8af3002
commit 199d51424b
6 changed files with 158 additions and 2 deletions

View File

@ -6200,7 +6200,7 @@ module.exports = function(s,config,lang){
{
"field": lang["Monitor"],
"fieldType": "select",
"class": "dark monitors_list",
"class": "monitors_list",
"possible": []
},
{
@ -7917,5 +7917,38 @@ module.exports = function(s,config,lang){
}
}
},
"Calendar": {
"section": "Calendar",
"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,
}
]
},
"Calendar": {
noHeader: true,
"section-pre-class": "col-md-8",
"info": [
{
"fieldType": "div",
"id": "calendar_draw_area",
"divContent": ""
}
]
},
}
},
})
}

View File

@ -0,0 +1,104 @@
$(document).ready(function(e){
//Timelapse JPEG Window
var theEnclosure = $('#tab-calendarView')
var monitorsList = theEnclosure.find('.monitors_list')
var dateSelector = theEnclosure.find('.date_selector')
var calendarDrawArea = $('#calendar_draw_area')
var loadedVideosInMemory = {};
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()
}
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)
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 calendarData = []
loadedVideosInMemory = {}
$.getJSON(apiURL + '?' + queryString.join('&'),function(data){
$.each(data.videos,function(n,v){
if(v.status !== 0){
loadedVideosInMemory[v.filename] = Object.assign({},v)
var loadedMonitor = loadedMonitors[v.mid]
if(loadedMonitor){
v.title = loadedMonitor.name+' - '+(parseInt(v.size)/1048576).toFixed(2)+'mb';
}
v.start = moment.utc(v.time).local()
v.end = moment.utc(v.end).local()
calendarData.push(v)
}
})
try{
calendarDrawArea.fullCalendar('destroy')
}catch(er){
}
calendarDrawArea.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: moment(startDate).format('YYYY-MM-DD'),
locale: $user.details.lang.substring(0, 2),
navLinks: true,
eventLimit: true,
events: calendarData,
eventClick: function(v){
var video = loadedVideosInMemory[v.filename]
createVideoPlayerTab(video)
$(this).css('border-color', 'red');
}
});
})
}
$('body').on('click','.open-timelapse-viewer',function(){
var el = $(this).parents('[data-mid]')
var monitorId = el.attr('data-mid')
openTab(`calendarView`,{},null)
monitorsList.val(monitorId).change()
})
addOnTabOpen('calendarView', function () {
drawMonitorListToSelector(monitorsList)
drawCalendarViewElements()
})
addOnTabReopen('calendarView', function () {
var theSelected = `${monitorsList.val()}`
drawMonitorListToSelector(monitorsList)
monitorsList.val(theSelected)
})
})

View File

@ -3,7 +3,6 @@
<script src="<%-window.libURL%>libs/js/pnotify.custom.min.js"></script>
<script src="<%-window.libURL%>libs/js/socket.io.js"></script>
<script src="<%-window.libURL%>libs/js/jquery.serialize.js"></script>
<script src="<%-window.libURL%>assets/vendor/moment-with-locales.js"></script>
<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>

View File

@ -78,6 +78,7 @@
<%= details.css %>
</style>
<script src="<%-window.libURL%>libs/js/jquery.min.js"></script>
<script src="<%-window.libURL%>assets/vendor/moment-with-locales.js"></script>
</head>
<script>applicationName = `<%- lang.Shinobi %>`</script>
<script>$user = <%- JSON.stringify($user) %></script>

View File

@ -23,6 +23,7 @@
'home/onvifScanner',
'home/configFinder',
'home/logViewer',
'home/calendar',
'home/eventListWithPics',
'confirm',
'help',

View File

@ -0,0 +1,18 @@
<main class="page-tab pt-3" id="tab-calendarView">
<div class="row <%- define.Theme.isDark ? `dark` : '' %>">
<%
var drawBlock
var buildOptions
%>
<%
include fieldBuilders.ejs
%>
<% Object.keys(define['Calendar'].blocks).forEach(function(blockKey){
var theBlock = define['Calendar'].blocks[blockKey]
drawBlock(theBlock)
}) %>
</div>
<link rel="stylesheet" href="<%-window.libURL%>libs/css/fullcalendar.min.css">
<script src="<%-window.libURL%>libs/js/fullcalendar.min.js"></script>
<script src="<%-window.libURL%>assets/js/bs5.calendar.js"></script>
</main>