port calendar view into dashboard v3
parent
91f8af3002
commit
199d51424b
|
|
@ -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": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
'home/onvifScanner',
|
||||
'home/configFinder',
|
||||
'home/logViewer',
|
||||
'home/calendar',
|
||||
'home/eventListWithPics',
|
||||
'confirm',
|
||||
'help',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue