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