more solid layout for report submission
Moe
parent
63045065ae
commit
ef3849936d
|
|
@ -9209,29 +9209,42 @@ module.exports = function(s,config,lang){
|
|||
"Video Select": {
|
||||
"color": "green",
|
||||
"noHeader": true,
|
||||
"noDefaultSectionClasses": true,
|
||||
"box-wrapper-class": "row",
|
||||
"info": [
|
||||
{
|
||||
"field": lang.Monitor,
|
||||
"fieldType": "select",
|
||||
"class": "monitors_list",
|
||||
"form-group-class": "col-md-12",
|
||||
"form-group-class": "col-md-4",
|
||||
"possible": [
|
||||
{
|
||||
"name": lang['All Monitors'],
|
||||
"value": ""
|
||||
},
|
||||
{
|
||||
"name": lang.Monitors,
|
||||
"optgroup": []
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"form-group-class": "col-md-4",
|
||||
"class": "date_selector",
|
||||
"field": lang.Date,
|
||||
},
|
||||
{
|
||||
"form-group-class": "col-md-4",
|
||||
"id": "report-manager-search-tag",
|
||||
"field": lang['Object Tag'],
|
||||
},
|
||||
{
|
||||
"fieldType": "div",
|
||||
"class": "col-md-6",
|
||||
"class": "col-md-9 row",
|
||||
"id": "report-manager-video-select",
|
||||
},
|
||||
{
|
||||
"fieldType": "div",
|
||||
"class": "col-md-6",
|
||||
"class": "col-md-3 row",
|
||||
"id": "report-manager-video-selected",
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -93,6 +93,9 @@
|
|||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-time-card.selected {
|
||||
border: 2px solid #27b392;
|
||||
}
|
||||
.video-time-header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ function getDayPartsFromTime(theTime){
|
|||
var day = dayParts[2]
|
||||
var month = dayParts[1]
|
||||
var year = dayParts[0]
|
||||
{
|
||||
return {
|
||||
day,
|
||||
month,
|
||||
year,
|
||||
|
|
|
|||
|
|
@ -1,69 +1,142 @@
|
|||
function saveReport(){
|
||||
// Icon : simple identifier with font awesome
|
||||
// Report ID: A unique identifier for each report.
|
||||
// Date and Time of Submission: The date and time when the report is submitted.
|
||||
// Submitted By: The name and contact information of the person or organization submitting the report.
|
||||
// Case Reference Number: If the video is related to a specific case, include the case number for easy reference.
|
||||
// Video Title: A brief title or description of the video.
|
||||
// Video Source: Information about where the video was sourced from (e.g., CCTV, personal device, etc.).
|
||||
// Location of Incident: The specific location where the incident in the video took place.
|
||||
// Date and Time of Incident: The exact date and time when the incident occurred.
|
||||
// Duration of Video: The length of the video.
|
||||
// Video Format: The format of the video file (e.g., MP4, AVI, etc.).
|
||||
// Description of Incident: A detailed description of the incident captured in the video.
|
||||
// Involved Parties: Information about the individuals or entities involved in the incident, if known.
|
||||
// Key Timestamps: Specific timestamps in the video where important events occur.
|
||||
// Attached Video File: The actual video file or a secure link to the video file.
|
||||
// Additional Notes: Any additional information or context that might be relevant to the incident.
|
||||
// Verification: A statement by the person submitting the report that the information provided is accurate to the best of their knowledge.
|
||||
}
|
||||
function emailReport(){}
|
||||
function uploadReport(){}
|
||||
function createVideoCard(video){
|
||||
var monitorId = video.mid
|
||||
var startTime = video.time
|
||||
var endTime = video.end
|
||||
var {
|
||||
day,
|
||||
month,
|
||||
year,
|
||||
} = getDayPartsFromTime(startTime)
|
||||
var eventMatrixHtml = ``
|
||||
eventMatrixHtml += `<div class="video-day-slice" data-mid="${video.mid}" data-time="${video.time}" style="width:${getVideoPercentWidthForDay(video,[video],frames)}%;position:relative">`
|
||||
if(video.events && video.events.length > 0){
|
||||
$.each(video.events,function(n,theEvent){
|
||||
var leftPercent = getPercentOfTimePositionFromVideo(video,theEvent)
|
||||
eventMatrixHtml += `<div class="video-time-needle video-time-needle-event" style="margin-left:${leftPercent}%"></div>`
|
||||
})
|
||||
$(document).ready(function(){
|
||||
var theTab = $('#tab-reportManagerForm')
|
||||
var videoSelectContainer = $('#report-manager-video-select')
|
||||
var selectedContainer = $('#report-manager-video-selected')
|
||||
var monitorsList = theTab.find('.monitors_list')
|
||||
var dateSelector = theTab.find('.date_selector')
|
||||
var searchField = $('#report-manager-search-tag')
|
||||
function saveReport(){
|
||||
// Icon : simple identifier with font awesome
|
||||
// Report ID: A unique identifier for each report.
|
||||
// Date and Time of Submission: The date and time when the report is submitted.
|
||||
// Submitted By: The name and contact information of the person or organization submitting the report.
|
||||
// Case Reference Number: If the video is related to a specific case, include the case number for easy reference.
|
||||
// Video Title: A brief title or description of the video.
|
||||
// Video Source: Information about where the video was sourced from (e.g., CCTV, personal device, etc.).
|
||||
// Location of Incident: The specific location where the incident in the video took place.
|
||||
// Date and Time of Incident: The exact date and time when the incident occurred.
|
||||
// Duration of Video: The length of the video.
|
||||
// Video Format: The format of the video file (e.g., MP4, AVI, etc.).
|
||||
// Description of Incident: A detailed description of the incident captured in the video.
|
||||
// Involved Parties: Information about the individuals or entities involved in the incident, if known.
|
||||
// Key Timestamps: Specific timestamps in the video where important events occur.
|
||||
// Attached Video File: The actual video file or a secure link to the video file.
|
||||
// Additional Notes: Any additional information or context that might be relevant to the incident.
|
||||
// Verification: A statement by the person submitting the report that the information provided is accurate to the best of their knowledge.
|
||||
}
|
||||
eventMatrixHtml += `</div>`
|
||||
eventMatrixHtml += `<div class="video-day-slice-spacer" style="width: ${marginRight}%"></div>`
|
||||
function emailReport(){}
|
||||
function uploadReport(){}
|
||||
function createVideoCard(video,classOverride){
|
||||
var monitorId = video.mid
|
||||
var startTime = video.time
|
||||
var endTime = video.end
|
||||
var {
|
||||
day,
|
||||
month,
|
||||
year,
|
||||
} = getDayPartsFromTime(startTime)
|
||||
var firstFrame = video.timelapseFrames && video.timelapseFrames[0] ? video.timelapseFrames[0] : {href:''}
|
||||
console.log(firstFrame,video.timelapseFrames)
|
||||
var eventMatrixHtml = ``
|
||||
eventMatrixHtml += `<div class="video-day-slice" data-mid="${video.mid}" data-time="${video.time}" style="width:${getVideoPercentWidthForDay(video,[video],frames)}%;position:relative">`
|
||||
if(video.events && video.events.length > 0){
|
||||
$.each(video.events,function(n,theEvent){
|
||||
var leftPercent = getPercentOfTimePositionFromVideo(video,theEvent)
|
||||
eventMatrixHtml += `<div class="video-time-needle video-time-needle-event" style="margin-left:${leftPercent}%"></div>`
|
||||
})
|
||||
}
|
||||
eventMatrixHtml += `</div>`
|
||||
eventMatrixHtml += `<div class="video-day-slice-spacer"></div>`
|
||||
|
||||
var html += `
|
||||
<div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row">
|
||||
<div class="video-time-card shadow-sm px-0 ${definitions.Theme.isDark ? 'bg-dark' : 'bg-light'}">
|
||||
<div class="video-time-header">
|
||||
<div class="d-flex flex-row vertical-center ${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<b>${loadedMonitors[monitorId] ? loadedMonitors[monitorId].name : monitorId}</b>
|
||||
<div class="${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
<span class="video-time-label">${formattedTime(startTime)} to ${formattedTime(endTime)}</span>
|
||||
var html = `
|
||||
<div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row">
|
||||
<div data-ke="${video.ke}" data-mid="${video.mid}" data-time="${video.time}" class="video-time-card shadow-sm px-0 ${definitions.Theme.isDark ? 'bg-dark' : 'bg-light'}">
|
||||
<div class="video-time-header">
|
||||
<div class="d-flex flex-row vertical-center ${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
<div class="flex-grow-1 p-3">
|
||||
<b>${loadedMonitors[monitorId] ? loadedMonitors[monitorId].name : monitorId}</b>
|
||||
<div class="${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
<span class="video-time-label">${formattedTime(startTime)} to ${formattedTime(endTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right p-3" style="background:rgba(0,0,0,0.5)">
|
||||
<div class="text-center" style="font-size:20pt;font-weight:bold">${day}</div>
|
||||
<div>${month}, ${year}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right p-3" style="background:rgba(0,0,0,0.5)">
|
||||
<div class="text-center" style="font-size:20pt;font-weight:bold">${day}</div>
|
||||
<div>${month}, ${year}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img class="video-time-img" src="${firstFrame.href}">
|
||||
</div>
|
||||
<div class="video-time-strip card-footer p-0">
|
||||
<div class="flex-row d-flex" style="height:30px">${eventMatrixHtml}</div>
|
||||
<div class="video-time-needle video-time-needle-seeker" video-time-seeked-video-position="${startTime}" data-mid="${monitorId}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img class="video-time-img">
|
||||
</div>
|
||||
<div class="video-time-strip card-footer p-0">
|
||||
<div class="flex-row d-flex" style="height:30px">${eventMatrixHtml}</div>
|
||||
<div class="video-time-needle video-time-needle-seeker" video-time-seeked-video-position="${startTime}" data-mid="${monitorId}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
return html
|
||||
}
|
||||
</div>`
|
||||
return html
|
||||
}
|
||||
function loadVideoCards(videos){
|
||||
var dateRange = getSelectedTime(dateSelector)
|
||||
var startDate = dateRange.startDate
|
||||
var endDate = dateRange.endDate
|
||||
var monitorId = monitorsList.val()
|
||||
var searchQuery = searchField.val()
|
||||
getVideos({
|
||||
monitorId,
|
||||
startDate,
|
||||
endDate,
|
||||
searchQuery,
|
||||
archived: false,
|
||||
},function(data){
|
||||
var html = ''
|
||||
var videos = data.videos
|
||||
loadedReportVideos = {}
|
||||
$.each(videos,function(n,video){
|
||||
loadedReportVideos[`${video.ke}${video.mid}${video.time}`] = video;
|
||||
html += createVideoCard(video)
|
||||
})
|
||||
videoSelectContainer.html(html)
|
||||
})
|
||||
}
|
||||
function getAllSelectedVideos(){
|
||||
var selected = []
|
||||
videoSelectContainer.find('.video-time-card.selected').each(function(){
|
||||
var el = $(this)
|
||||
var ke = el.attr('data-ke')
|
||||
var mid = el.attr('data-mid')
|
||||
var time = el.attr('data-time')
|
||||
var video = loadedReportVideos[`${ke}${mid}${time}`]
|
||||
selected.push({
|
||||
ke,
|
||||
mid,
|
||||
time: video.time,
|
||||
filename: video.filename,
|
||||
frames: video.timelapseFrames.map(item => {
|
||||
ke: item.ke,
|
||||
mid: item.mid,
|
||||
time: item.time,
|
||||
filename: item.filename,
|
||||
}),
|
||||
events: video.events,
|
||||
})
|
||||
})
|
||||
return selected
|
||||
}
|
||||
addOnTabOpen('reportManagerForm', function () {
|
||||
loadVideoCards()
|
||||
})
|
||||
addOnTabAway('reportManagerForm', function () {
|
||||
|
||||
})
|
||||
loadDateRangePicker(dateSelector,{
|
||||
onChange: function(start, end, label) {
|
||||
drawVideosTableViewElements()
|
||||
}
|
||||
})
|
||||
drawMonitorListToSelector(monitorsList.find('optgroup'))
|
||||
videoSelectContainer.on('click','.video-time-card',function(){
|
||||
var el = $(this)
|
||||
el.toggleClass('selected')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue