report info update

2023-09-10 19:36:39 +03:00 · 2023-09-10 19:36:39 +03:00 · 62453b6ba1
commit 62453b6ba1
parent 859d96f301
5 changed files with 95 additions and 76 deletions
--- a/server.js
+++ b/server.js
@ -104,17 +104,17 @@ conn.on('error', function(err) {
 });


-// const DB_User = process.env.DB_USER;
-// const DB_Password = process.env.DB_PASSWORD;
-// const DB_Host = process.env.DB_HOST;
-// const DB_Port = process.env.DB_PORT;
-// const DB_Name = process.env.DB_NAME;
+const DB_User = process.env.DB_USER;
+const DB_Password = process.env.DB_PASSWORD;
+const DB_Host = process.env.DB_HOST;
+const DB_Port = process.env.DB_PORT;
+const DB_Name = process.env.DB_NAME;

-const DB_User = "postgres";
-const DB_Password = process.env.POSTGRES_PASSWORD;
-const DB_Host = "postgres";
-const DB_Port = "5432";
-const DB_Name = "postgres";
+// const DB_User = "postgres";
+// const DB_Password = process.env.POSTGRES_PASSWORD;
+// const DB_Host = "postgres";
+// const DB_Port = "5432";
+// 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");
--- a/static/styles/main.css
+++ b/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);
--- a/static/templates/devices/update.html
+++ b/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>
--- a/static/templates/live.html
+++ b/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');
--- a/static/templates/reports/report.html
+++ b/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 sizeMap() {
-    var mapContainer = document.querySelector('.map');
-    var mapArea = document.getElementById('map');
-    mapArea.style.height = (mapContainer.clientHeight) + 'px';
-    mapArea.style.width = (mapContainer.clientWidth) + 'px';
+  function playVideo(channel) {
+    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}}`;
+    window.open(url, '_blank');
  }
-
-  // window.addEventListener('DOMContentLoaded', function() {
-  //   sizeMap();
-  // });
-
-  window.addEventListener("resize", function (event) {
-    sizeMap();
-  });
 </script>