report info update

server.js

@@ -104,17 +104,17 @@ conn.on('error', function(err) {
 });
 
 
-// const DB_User = process.env.DB_USER;
+const DB_User = process.env.DB_USER;
-// const DB_Password = process.env.DB_PASSWORD;
+const DB_Password = process.env.DB_PASSWORD;
-// const DB_Host = process.env.DB_HOST;
+const DB_Host = process.env.DB_HOST;
-// const DB_Port = process.env.DB_PORT;
+const DB_Port = process.env.DB_PORT;
-// const DB_Name = process.env.DB_NAME;
+const DB_Name = process.env.DB_NAME;
 
-const DB_User = "postgres";
+// const DB_User = "postgres";
-const DB_Password = process.env.POSTGRES_PASSWORD;
+// const DB_Password = process.env.POSTGRES_PASSWORD;
-const DB_Host = "postgres";
+// const DB_Host = "postgres";
-const DB_Port = "5432";
+// const DB_Port = "5432";
-const DB_Name = "postgres";
+// const DB_Name = "postgres";
 
 async function index(req, res) {
   var templateData = {
@@ -925,6 +925,9 @@ app.get('/reports/:id', async (req, res) => {
     Geo: "",
     Latitude: "",
     Longitude: "",
+    QueryTime: "",
+    StartTime: "",
+    EndTime: "",
     
     DriverName: "",
     DriverPhone: "",
@@ -1010,6 +1013,32 @@ app.get('/reports/:id', async (req, res) => {
       return formattedDate.replace(",", "");
     }
 
+    function formatDateToYYYYMMDD(sqlDate) {
+      const date = new Date(sqlDate);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}${month}${day}`;
+    }
+
+    function formatTimeToHHMMSSBefore(sqlDate) {
+      const date = new Date(sqlDate);
+      date.setSeconds(date.getSeconds() - 10); 
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${hours}${minutes}${seconds}`;
+    }
+
+    function formatTimeToHHMMSSAfter(sqlDate) {
+      const date = new Date(sqlDate);
+      date.setSeconds(date.getSeconds() + 10); 
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${hours}${minutes}${seconds}`;
+    }
+
       let type;
       switch (alarm.st) {
         case "0":
@@ -1123,6 +1152,9 @@ app.get('/reports/:id', async (req, res) => {
       templateData.Geo = alarm.latitude + "," + alarm.longitude;
       templateData.Latitude = alarm.latitude
       templateData.Longitude = alarm.longitude
+      templateData.QueryTime = formatDateToYYYYMMDD(alarm.time);
+      templateData.StartTime = formatTimeToHHMMSSBefore(alarm.time);
+      templateData.EndTime = formatTimeToHHMMSSAfter(alarm.time);
 
       templateData.DriverName = alarm.name + " " + alarm.surname;
       templateData.DriverPhone = alarm.phone;
@@ -1143,30 +1175,6 @@ app.get('/reports/:id', async (req, res) => {
         }
       });
       
-
-let data = {
-  Id: templateData.Id,
-  Organisation: templateData.Organisation,
-  Type: templateData.Type,
-  Speed: templateData.Speed,
-  Date: templateData.Date,
-  Serial: templateData.Serial,
-  Geo: templateData.Geo,
-  PrevLongitude: templateData.PrevLongitude,
-  PrevLatitude: templateData.PrevLatitude,
-  NextLongitude: templateData.NextLongitude,
-  NextLatitude: templateData.NextLatitude,
-  Speeds: templateData.Speeds,
-};
-
-      generatePDF(data)
-  .then(() => {
-    console.log('PDF создан успешно.');
-  })
-  .catch((error) => {
-    console.error('Ошибка при создании PDF:', error);
-  });
-      
     // console.log(templateData);
   
     const source = fs.readFileSync("static/templates/reports/report.html", "utf8");

static/styles/main.css

@@ -1917,7 +1917,8 @@ input[type="datetime-local"] {
 }
 
 .video-container div,
-.video-container-right div {
+.video-container-right div,
+.report-video-container div {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1928,18 +1929,21 @@ input[type="datetime-local"] {
 }
 
 .video-container div:hover,
-.video-container-right div:hover {
+.video-container-right div:hover,
+.report-video-container div:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
 .video-container div img,
-.video-container-right div img {
+.video-container-right div img,
+.report-video-container div img {
   height: 32px;
   width: 32px;
 }
 
 .video-container div span,
-.video-container-right div span {
+.video-container-right div span,
+.report-video-container div span {
   font-size: 16px;
   font-weight: 500;
   margin-top: 15px;
@@ -1963,6 +1967,31 @@ input[type="datetime-local"] {
   
 }
 
+.report-video-container {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 510px;
+  border-right: 2px solid rgba(245, 245, 250, 1);
+  display: flex;
+  height: calc(100% - 266px - 198px - 62px);
+  flex-wrap: wrap;
+}
+
+.report-video-container div {
+  height: auto;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  height: 50%;
+  border: 1px solid rgba(245, 245, 250, 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+
 .report video {
   width: 450px;
   border-right: 2px solid rgba(245, 245, 250, 1);

static/templates/devices/update.html

@@ -50,7 +50,7 @@
 
     <section class="main">
         <div class="name">
-            <span>Устройства</span>
+            <span style="color: rgb(255, 69, 58);">В разработке</span>
         </div>
         <nav>
             <a href="/devices">Список устройств</a>

static/templates/live.html

@@ -301,7 +301,7 @@
             type: 'flv',
             isLive: true,
             cors: true,
-            url: `${baseURL}?serial=${serial}&channel=${i}&quality=0`,
+            url: `${baseURL}?serial=${serial}&channel=${i}&quality=1`,
           }, {
             enableWorker: true,
             enableStashBuffer: false,
@@ -359,24 +359,6 @@
       });
     </script>
 
-<script>
-  window.addEventListener('DOMContentLoaded', function() {
-    var mapContainer = document.querySelector('.map');
-    var mapArea = document.getElementById('map');
-
-    mapArea.style.height = (mapContainer.clientHeight) + 'px';
-    mapArea.style.width = (mapContainer.clientWidth) + 'px';
-  });
-
-  window.addEventListener("resize", function (event) {
-        var mapContainer = document.querySelector('.map');
-        var mapArea = document.getElementById('map');
-
-        mapArea.style.height = (mapContainer.clientHeight) + 'px';
-        mapArea.style.width = (mapContainer.clientWidth) + 'px';
-      });
-</script>
-
     <script>
 
       var checkboxes = document.querySelectorAll('.checkbox-input');

static/templates/reports/report.html

@@ -145,7 +145,7 @@
                         </div>
                       </div>
 
-                      <div class="video-controls">
+                      <!-- <div class="video-controls">
                         <div class="controls">
                           <span id="current-time">00:00</span>
                           <button id="play-pause-btn">
@@ -161,11 +161,22 @@
                           <div id="progress-bar">
                             <div id="progress"></div>
                           </div>
-                      </div>
+                      </div> -->
 
                     </div>
 
-                      <video id="my-video" src="../test_video.MP4"></video>
+                      <!-- <video id="my-video" src="../test_video.MP4"></video> -->
+
+                      <div class="report-video-container">
+                        <div id="camera-1" onclick="playVideo(10);">
+                          <img src="../../img/play-circle.svg">
+                          <span>Запустить камеру водителя</span>
+                        </div>
+                        <div id="camera-2" onclick="playVideo(3);">
+                          <img src="../../img/play-circle.svg">
+                          <span>Запустить камеру из салона</span>
+                        </div>
+                      </div>
 
                       <div class="stream-map">
                         <div id="map"></div>
@@ -177,7 +188,7 @@
 
   <style>
     .stream-map {
-      width: calc(100% - 450px - 514px);
+      width: calc(100% - 512px);
       height: calc(100% - 62px);
       float: right;
     }
@@ -225,21 +236,10 @@
 
 
 <script>
-
+  function playVideo(channel) {
-  function sizeMap() {
+    const url = `http://localhost:8081/playback?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fplayback.flv%3Fserial%3D{{Serial}}%26channel%3D${channel}%26quality%3D1%26queryTime%3D{{QueryTime}}%26startTime%3D{{StartTime}}%26endTime%3D{{EndTime}}`;
-    var mapContainer = document.querySelector('.map');
+    window.open(url, '_blank');
-    var mapArea = document.getElementById('map');
-    mapArea.style.height = (mapContainer.clientHeight) + 'px';
-    mapArea.style.width = (mapContainer.clientWidth) + 'px';
   }
-
-  // window.addEventListener('DOMContentLoaded', function() {
-  //   sizeMap();
-  // });
-
-  window.addEventListener("resize", function (event) {
-    sizeMap();
-  });
 </script>