From ef3849936d8d6e58f72bd28fd03a4428aa7e326b Mon Sep 17 00:00:00 2001 From: Moe Date: Sun, 16 Jul 2023 08:51:30 -0700 Subject: [PATCH] more solid layout for report submission --- definitions/base.js | 21 ++- web/assets/css/bs5.videoPlayer.css | 3 + web/assets/js/bs5.dashboard-base.js | 2 +- web/assets/js/bs5.reportManager.js | 199 +++++++++++++++++++--------- 4 files changed, 157 insertions(+), 68 deletions(-) diff --git a/definitions/base.js b/definitions/base.js index 993b72c7..f1e96c6f 100644 --- a/definitions/base.js +++ b/definitions/base.js @@ -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", } ] diff --git a/web/assets/css/bs5.videoPlayer.css b/web/assets/css/bs5.videoPlayer.css index 3cdf0956..0dbb3421 100644 --- a/web/assets/css/bs5.videoPlayer.css +++ b/web/assets/css/bs5.videoPlayer.css @@ -93,6 +93,9 @@ border-radius: 10px; overflow: hidden; } +.video-time-card.selected { + border: 2px solid #27b392; +} .video-time-header { position: absolute; left: 0; diff --git a/web/assets/js/bs5.dashboard-base.js b/web/assets/js/bs5.dashboard-base.js index ea155dd2..305ca15c 100644 --- a/web/assets/js/bs5.dashboard-base.js +++ b/web/assets/js/bs5.dashboard-base.js @@ -199,7 +199,7 @@ function getDayPartsFromTime(theTime){ var day = dayParts[2] var month = dayParts[1] var year = dayParts[0] - { + return { day, month, year, diff --git a/web/assets/js/bs5.reportManager.js b/web/assets/js/bs5.reportManager.js index a507bb0b..a00826a0 100644 --- a/web/assets/js/bs5.reportManager.js +++ b/web/assets/js/bs5.reportManager.js @@ -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 += `
` - if(video.events && video.events.length > 0){ - $.each(video.events,function(n,theEvent){ - var leftPercent = getPercentOfTimePositionFromVideo(video,theEvent) - eventMatrixHtml += `
` - }) +$(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 += `
` - eventMatrixHtml += `
` + 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 += `
` + if(video.events && video.events.length > 0){ + $.each(video.events,function(n,theEvent){ + var leftPercent = getPercentOfTimePositionFromVideo(video,theEvent) + eventMatrixHtml += `
` + }) + } + eventMatrixHtml += `
` + eventMatrixHtml += `
` - var html += ` -
-
-
-
-
- ${loadedMonitors[monitorId] ? loadedMonitors[monitorId].name : monitorId} -
- ${formattedTime(startTime)} to ${formattedTime(endTime)} + var html = ` +
+
+
+
+
+ ${loadedMonitors[monitorId] ? loadedMonitors[monitorId].name : monitorId} +
+ ${formattedTime(startTime)} to ${formattedTime(endTime)} +
+
+
+
${day}
+
${month}, ${year}
-
-
${day}
-
${month}, ${year}
-
+
+
+ +
+
+
${eventMatrixHtml}
+
-
- -
-
-
${eventMatrixHtml}
-
-
-
-
` - return html -} +
` + 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') + }) +})