export and playback update

server.js

@@ -172,17 +172,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) {
   if (req.session.userId === undefined) {
@@ -3283,7 +3283,7 @@ app.get('/getData', async (req, res) => {
   try {
     const successResponse = await axios.get(`http://krbl.ru:8080/http/filelist/request?serial=${selectedSerial}&querytime=${selectedDate}&channel=${selectedChannel}`);
     if (successResponse.data.SUCCESS) {
-      await new Promise(resolve => setTimeout(resolve, 5000));
+      await new Promise(resolve => setTimeout(resolve, 7000));
       const dataResponse = await axios.get(`http://krbl.ru:8080/http/filelist/get?serial=${selectedSerial}&querytime=${selectedDate}&channel=${selectedChannel}`);
       if (successResponse.data.SUCCESS) {
       const dataId = dataResponse.data.DATAID;
@@ -3356,12 +3356,14 @@ app.post("/getspeedarchive", async (req, res) => {
     port: DB_Port,
   });
   const client = await pool.connect();
-  const sqlQuery = `
+
-    SELECT speed, latitude, longitude
+  // Запрос для получения первой и последней временных отметок
+  const timeRangeQuery = `
+    SELECT MIN(time) as min_time, MAX(time) as max_time
     FROM geo
     WHERE serial = $1
     AND time >= $2
-    AND time < $3;
+    AND time <= $3;
   `;
 
   const startTime = new Date(formattedDateTime);
@@ -3369,29 +3371,64 @@ app.post("/getspeedarchive", async (req, res) => {
   const endTime = new Date(startTime);
   endTime.setHours(endTime.getHours() + 1);
 
+  // Первый запрос для получения временных отметок
+  pool.query(timeRangeQuery, [serial, startTime, endTime], (error, timeResults) => {
+    if (error) {
+      console.error("Ошибка при выполнении SQL-запроса:", error);
+      res.status(500).json({ error: "Ошибка на сервере" });
+    } else {
+      const { min_time, max_time } = timeResults.rows[0];
+
+      // Запрос для получения данных скорости и геолокации
+      const sqlQuery = `
+        SELECT speed, latitude, longitude, time
+        FROM geo
+        WHERE serial = $1
+        AND time >= $2
+        AND time <= $3;
+      `;
+
       pool.query(sqlQuery, [serial, startTime, endTime], (error, results) => {
         if (error) {
           console.error("Ошибка при выполнении SQL-запроса:", error);
           res.status(500).json({ error: "Ошибка на сервере" });
         } else {
-      const speeds = results.rows.map((row) => row.speed);
+          const data = results.rows.map((row) => ({
-      const transformedSpeeds = speeds.map((speed) => {
+            speed: row.speed > 150 ? row.speed / 100 : row.speed,
-        if (speed > 150) {
+            geo: {
-          return speed / 100;
-        } else {
-          return speed;
-        }
-      });
-
-      const geoData = results.rows.map((row) => ({
               latitude: row.latitude,
               longitude: row.longitude,
+            },
+            time: row.time.toLocaleTimeString("ru-RU", {
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: false,
+            }),
           }));
-      res.json({ speeds: transformedSpeeds, geo: geoData });
+
+          // Функция для сравнения времени в формате "час:минута"
+          function compareTime(a, b) {
+            return new Date('1970-01-01 ' + a.time) - new Date('1970-01-01 ' + b.time);
+          }
+
+          // Сортируем массив данных
+          data.sort(compareTime);
+
+          // Разделяем отсортированный массив обратно на отдельные массивы
+          const transformedSpeeds = data.map((item) => item.speed);
+          const geoData = data.map((item) => item.geo);
+          const names = data.map((item) => item.time);
+
+          res.json({ speeds: transformedSpeeds, geo: geoData, names });
+        }
+      });
     }
   });
 });
 
+
+
+
 const port = 8081;
 app.listen(port, () => {
   console.log(`Server is running on port ${port}`);

static/styles/main.css

@@ -325,9 +325,9 @@ header h2 span {
 }
 
 .whole-width h1 {
-    font-weight: 500;
+    font-weight: 500 !important;
-    font-size: 30px;
+    font-size: 30px !important;
-    margin: 35px 0 0 44px;
+    margin: 35px 0 0 44px !important;
 }
 
 .whole-width h3 {
@@ -355,6 +355,15 @@ header h2 span {
   margin-bottom: 25px;
 }
 
+.loader-container {
+  width: fit-content;
+  height: fit-content;
+  padding: 50px;
+  padding-bottom: 25px;
+  border-radius: 10px;
+  background: white;
+}
+
 .square {
   background: #8086F9;
   width: 10px;
@@ -415,6 +424,54 @@ header h2 span {
   animation: loader_5191 675ms ease-in-out 600ms infinite;
 }
 
+#sq11 {
+  margin-top: -25px;
+  margin-left: -25px;
+  animation: loader_5191 675ms ease-in-out 0s infinite alternate;
+}
+
+#sq12 {
+  margin-top: -25px;
+  animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
+}
+
+#sq13 {
+  margin-top: -25px;
+  margin-left: 15px;
+  animation: loader_5191 675ms ease-in-out 150ms infinite;
+}
+
+#sq14 {
+  margin-left: -25px;
+  animation: loader_5191 675ms ease-in-out 225ms infinite;
+}
+
+#sq15 {
+  animation: loader_5191 675ms ease-in-out 300ms infinite;
+}
+
+#sq16 {
+  margin-left: 15px;
+  animation: loader_5191 675ms ease-in-out 375ms infinite;
+}
+
+#sq17 {
+  margin-top: 15px;
+  margin-left: -25px;
+  animation: loader_5191 675ms ease-in-out 450ms infinite;
+}
+
+#sq18 {
+  margin-top: 15px;
+  animation: loader_5191 675ms ease-in-out 525ms infinite;
+}
+
+#sq19 {
+  margin-top: 15px;
+  margin-left: 15px;
+  animation: loader_5191 675ms ease-in-out 600ms infinite;
+}
+
 
 .content .organisation {
   width: 250px;

static/templates/videos/export.html

@@ -60,6 +60,7 @@
     <section class="main">
       <section style="display: none;" class="dberror" id="exportLoading" >
         <div class="erorr-container">
+        <div class="loader-container">
           <div id="loader" class="loader">
             <div class="square" id="sq1"></div>
             <div class="square" id="sq2"></div>
@@ -70,11 +71,28 @@
             <div class="square" id="sq7"></div>
             <div class="square" id="sq8"></div>
             <div class="square" id="sq9"></div>
+          </div>
         </div>
                 <h1>Подготовка видео</h1> <br>
                 <span id="status">Пожалуйста, подождите..</span>
         </div>
     </section>
+
+    <section style="display: none;" class="dberror" id="dataLoading" >
+      <div class="loader-container">
+        <div class="loader">
+          <div class="square" id="sq11"></div>
+          <div class="square" id="sq12"></div>
+          <div class="square" id="sq13"></div>
+          <div class="square" id="sq14"></div>
+          <div class="square" id="sq15"></div>
+          <div class="square" id="sq16"></div>
+          <div class="square" id="sq17"></div>
+          <div class="square" id="sq18"></div>
+          <div class="square" id="sq19"></div>
+        </div>
+      </div>
+  </section>
       {{#if ifDBError}}
       <section class="dberror">
         <div class="erorr-container">
@@ -106,6 +124,7 @@
                               {{#each devices}}
                               <li class="device">
                                 <img>
+                                <input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden>
                                 <input type="radio" name="camera-serial" id="radio-{{this.serial}}" class="radio-input" value="{{this.serial}}" hidden>
                                 <label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
                                   {{this.serial}}
@@ -125,84 +144,39 @@
                     <section class="table" style="position: relative;">
 
                       <div class="map">
-                        <!-- <div id="properties" class="properties" style="display: none;">
-                          <div class="propert"><h1>Группа</h1><br><h2 id="propert-group">Автобусы</h2></div>
-                          <div class="propert"><h1>Скорость</h1><br><h2 id="propert-speed"> км/ч</h2></div>
-                          <div class="propert"><h1>Номерной знак</h1><br><h2 id="propert-plate"></h2></div>
-                          <div class="propert"><h1>Геопозиция</h1><br><h2 id="propert-geo"></h2></div>
-                        </div> -->
                         <div id="map"></div>
                       </div>
 
-                      <div id="cameras" class="cameras">
+                      <div style="background: white;" class="cameras">
-                        <div class="video-container">
+                        <section style="border: 0;" class="whole-width">
-                          <div id="camera-1" onclick="playVideo(1);">
+                        <h1>Экспортировать запись с камеры</h1>
-                            <img src="../../img/play-circle.svg">
+                      <h3>Выберите камеру, время и нажмите кнопку "Скачать запись"</h3>
-                            <span>Экспортировать 1 камеру</span>
+                      <form id="edit-group-form">
-                          </div>
+                        <div class="parameters-input">
-                          <div id="camera-2" onclick="playVideo(2);">
+                          <label for="group-id">Камера</label>
-                            <img src="../../img/play-circle.svg">
+                          <select name="group-id" id="group-id">
-                            <span>Экспортировать 2 камеру</span>
+                            <option value="">Выберите номер камеры</option>
-                          </div>
+                            <option value="1">Камера 1</option>
-                          <div id="camera-3" onclick="playVideo(3);">
+                            <option value="2">Камера 2</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="3">Камера 3</option>
-                            <span>Экспортировать 3 камеру</span>
+                            <option value="4">Камера 4</option>
-                          </div>
+                            <option value="5">Камера 5</option>
-                          <div id="camera-4" onclick="playVideo(4);">
+                            <option value="6">Камера 6</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="7">Камера 7</option>
-                            <span>Экспортировать 4 камеру</span>
+                            <option value="8">Камера 8</option>
-                          </div>
+                            <option value="9">Камера 9</option>
-                          <div id="camera-5" onclick="playVideo(5);">
+                            <option value="10">Камера 10</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="11">Камера 11</option>
-                            <span>Экспортировать 5 камеру</span>
+                            <option value="12">Камера 12</option>
-                          </div>
+                            <option value="13">Камера 13</option>
-                          <div id="camera-6" onclick="playVideo(6);">
+                        </select>
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 6 камеру</span>
-                          </div>
-                          <div id="camera-7" onclick="playVideo(7);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 7 камеру</span>
-                          </div>
-                          <div id="camera-8" onclick="playVideo(8);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 8 камеру</span>
-                          </div>
-                          <div id="camera-9" onclick="playVideo(9);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 9 камеру</span>
-                          </div>
-                          <div id="camera-10" onclick="playVideo(10);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 10 камеру</span>
-                          </div>
-                          <div id="camera-11" onclick="playVideo(11);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 11 камеру</span>
-                          </div>
-                          <div id="camera-12" onclick="playVideo(12);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 12 камеру</span>
-                          </div>
-                        </div>
-                        <div class="video-container-right">
-                          <div id="camera-13" onclick="playVideo(13);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 13 камеру</span>
-                          </div>
-                          <div id="camera-14" onclick="playVideo(14);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 14 камеру</span>
-                          </div>
-                          <div id="camera-15" onclick="playVideo(15);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 15 камеру</span>
-                          </div>
-                          <div id="camera-16" onclick="playVideo(16);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Экспортировать 16 камеру</span>
-                          </div>
                         </div>
+                      </form>
+
+                        <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>
+                
+                        <button style="margin-top: 15px;" id="group-edit" class="button-purple" type="button" onclick="playVideo();">Скачать запись</button>
+                      </section>
                       </div>
 
                       <div class="calendar">
@@ -271,13 +245,39 @@
       }
 
       .speedometr div {
-        height: 200px;
+        height: 190px;
       }
     </style>
 
     <script src="../scripts/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
+    <script>
+      function updateCameraOptions() {
+        var selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
+
+        var channelsInput = document.querySelector('#channels-' + selectedSerial);
+
+        var numChannels = parseInt(channelsInput.value, 10);
+
+        var select = document.querySelector('#group-id');
+
+        select.innerHTML = '';
+
+        var defaultOption = document.createElement('option');
+        defaultOption.value = '';
+        defaultOption.textContent = 'Выберите номер камеры';
+        select.appendChild(defaultOption);
+
+        for (var i = 1; i <= numChannels; i++) {
+          var option = document.createElement('option');
+          option.value = i;
+          option.textContent = 'Камера ' + i;
+          select.appendChild(option);
+        }
+      }
+    </script>
+
     <script>
       document.addEventListener('DOMContentLoaded', function () {
         const areaNames = document.querySelectorAll('.area-name');
@@ -356,7 +356,8 @@ var selectedChannel = 1;
 
 
 async function sendPostRequest() {
-  document.getElementById("cameras").style.opacity = "30%";
+  updateCameraOptions();
+  document.getElementById("dataLoading").style.display = 'flex';
   // Получение данных из полей ввода
   const selectedDate = document.getElementById("selectedDate").value;
   const videoTime = document.getElementById("video-time").value;
@@ -395,8 +396,6 @@ async function sendPostRequest() {
                     .then((response) => response.json())
                     .then((data) => {
 
-                      document.getElementById("cameras").style.opacity = "100%";
-
                       const existingChart = Chart.getChart("speed");
 
                       if (existingChart) {
@@ -404,13 +403,13 @@ async function sendPostRequest() {
                       }
 
                       const numberOfLabels = data.speeds.length;
-                      const labels = Array.from({ length: numberOfLabels }, () => "");
+                      // const labels = Array.from({ length: numberOfLabels }, () => "");
 
                       // Обновление данных графика
                       const chart = new Chart("speed", {
                         type: "line",
                         data: {
-                          labels: labels,
+                          labels: data.names,
                           datasets: [
                             {
                               label: "Скорость",
@@ -445,6 +444,19 @@ async function sendPostRequest() {
                               },
                             },
                             x: {
+                              ticks: {
+                                autoSkip: false,
+                                callback: function(value, index, values) {
+                                  const data = this.chart.data.labels;
+                                  if (index === 0 || index === values.length - 1) {
+                                    return data[index];
+                                  } else {
+                                    return ''; 
+                                  }
+                                },
+                                position: 'bottom',
+                                maxRotation: 0,
+                              },
                               grid: {
                                 display: false,
                               },
@@ -482,19 +494,72 @@ async function sendPostRequest() {
 
                     })
                     .catch((error) => {
+                      document.getElementById("dataLoading").style.display = 'none';
+                      var h1Element = document.querySelector('.speedometr h1');
+                        h1Element.textContent = 'Ошибка отправки запроса.';
                       console.error("Ошибка при отправке запроса:", error);
                     });
 
                     const endResponse = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoEndTime)}&selectedChannel=${selectedChannel}`);
-
                     const endData = await endResponse.json();
 
                     if (endData.success) {
+                      document.getElementById("dataLoading").style.display = 'none';
                       console.log(`Конечные данные доступны. DATAID: ${endData.dataId}`)
                       const speedBG = document.getElementById("speed-bg");
                       speedBG.style.display = 'none';
                       HasData = true;
                       if (data.dataId != endData.dataId) {
+                        const existingChart = Chart.getChart("speed");
+
+                      if (existingChart) {
+                        existingChart.destroy();
+                      }
+                        const chart = new Chart("speed", {
+                        type: "line",
+                        data: {
+                          labels: "",
+                          datasets: [
+                            {
+                              label: "Скорость",
+                              borderColor: "#8086F9",
+                              fill: false,
+                              data: "",
+                              pointStyle: false,
+                              pointRadius: 25,
+                              pointHoverRadius: 25,
+                              tension: 0.1,
+                            },
+                          ],
+                        },
+                        options: {
+                          plugins: {
+                            legend: {
+                              display: false,
+                            },
+                          },
+                          labelStep: "3",
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              stacked: true,
+                              grid: {
+                                display: true,
+                                color: "#D9D9D9",
+                              },
+                              ticks: {
+                                stepSize: 10,
+                              },
+                            },
+                            x: {
+                              grid: {
+                                display: false,
+                              },
+                            },
+                          },
+                        },
+                      });
                         HasData = false;
                         var h1Element = document.querySelector('.speedometr h1');
                         h1Element.textContent = 'Временной диапазон находится в разных видео сессиях. Измените время.';
@@ -502,6 +567,57 @@ async function sendPostRequest() {
                         speedBG.style.display = 'flex';
                       } 
                     } else {
+                      document.getElementById("dataLoading").style.display = 'none';
+                      const existingChart = Chart.getChart("speed");
+
+                      if (existingChart) {
+                        existingChart.destroy();
+                      }
+                      const chart = new Chart("speed", {
+                        type: "line",
+                        data: {
+                          labels: "",
+                          datasets: [
+                            {
+                              label: "Скорость",
+                              borderColor: "#8086F9",
+                              fill: false,
+                              data: "",
+                              pointStyle: false,
+                              pointRadius: 25,
+                              pointHoverRadius: 25,
+                              tension: 0.1,
+                            },
+                          ],
+                        },
+                        options: {
+                          plugins: {
+                            legend: {
+                              display: false,
+                            },
+                          },
+                          labelStep: "3",
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              stacked: true,
+                              grid: {
+                                display: true,
+                                color: "#D9D9D9",
+                              },
+                              ticks: {
+                                stepSize: 10,
+                              },
+                            },
+                            x: {
+                              grid: {
+                                display: false,
+                              },
+                            },
+                          },
+                        },
+                      });
                         HasData = false;
                         const speedBG = document.getElementById("speed-bg");
                         speedBG.style.display = 'flex';
@@ -511,6 +627,56 @@ async function sendPostRequest() {
                       
                       
                 } else {
+                  const existingChart = Chart.getChart("speed");
+
+                      if (existingChart) {
+                        existingChart.destroy();
+                      }
+                  const chart = new Chart("speed", {
+                        type: "line",
+                        data: {
+                          labels: "",
+                          datasets: [
+                            {
+                              label: "Скорость",
+                              borderColor: "#8086F9",
+                              fill: false,
+                              data: "",
+                              pointStyle: false,
+                              pointRadius: 25,
+                              pointHoverRadius: 25,
+                              tension: 0.1,
+                            },
+                          ],
+                        },
+                        options: {
+                          plugins: {
+                            legend: {
+                              display: false,
+                            },
+                          },
+                          labelStep: "3",
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              stacked: true,
+                              grid: {
+                                display: true,
+                                color: "#D9D9D9",
+                              },
+                              ticks: {
+                                stepSize: 10,
+                              },
+                            },
+                            x: {
+                              grid: {
+                                display: false,
+                              },
+                            },
+                          },
+                        },
+                      });
                   var h1Element = document.querySelector('.speedometr h1');
                   h1Element.textContent = 'Данных для выбранного периода нет.';
                   const speedBG = document.getElementById("speed-bg");
@@ -530,10 +696,10 @@ const selectedDateInput = document.getElementById("selectedDate");
 selectedDateInput.addEventListener("change", sendPostRequest);
 
 const videoTimeInput = document.getElementById("video-time");
-videoTimeInput.addEventListener("change", sendPostRequest);
+videoTimeInput.addEventListener("blur", sendPostRequest);
 
 const endVideoTimeInput = document.getElementById("video-end-time");
-endVideoTimeInput.addEventListener("change", sendPostRequest);
+endVideoTimeInput.addEventListener("blur", sendPostRequest);
 
     </script>
 
@@ -652,13 +818,17 @@ endVideoTimeInput.addEventListener("change", sendPostRequest);
   }
 
 
-  async function playVideo(channel) {
+  async function playVideo() {
-    document.getElementById("exportLoading").style.display = 'flex';
+    const channel = document.getElementById("group-id").value;
     const selectedDevice = document.querySelector('input[name="camera-serial"]:checked');
     if (!selectedDevice) {
       alert('Пожалуйста, выберите устройство из списка.');
       return;
     }
+    if (channel === "") {
+      alert('Пожалуйста, выберите камеру из списка.');
+      return;
+    }
     if (!HasData) {
       alert('Пожалуйста, выберите другой временной период.');
       return;
@@ -667,6 +837,7 @@ endVideoTimeInput.addEventListener("change", sendPostRequest);
       alert('Конечное время не может быть больше начального.');
       return;
     }
+    document.getElementById("exportLoading").style.display = 'flex';
 
     const startTimeInput = document.getElementById('video-time');
     const endTimeInput = document.getElementById('video-end-time');
@@ -794,9 +965,7 @@ datasets: [
 label: "Скорость",
 borderColor: "#8086F9",
 fill: false,
-data: [
+data: "",
-  {{Speeds}}
-],
 pointStyle: false,
 pointRadius: 25,
 pointHoverRadius: 25,

static/templates/videos/playback.html

@@ -58,6 +58,21 @@
     </section>
 
     <section class="main">
+      <section style="display: none;" class="dberror" id="dataLoading" >
+        <div class="loader-container">
+          <div class="loader">
+            <div class="square" id="sq11"></div>
+            <div class="square" id="sq12"></div>
+            <div class="square" id="sq13"></div>
+            <div class="square" id="sq14"></div>
+            <div class="square" id="sq15"></div>
+            <div class="square" id="sq16"></div>
+            <div class="square" id="sq17"></div>
+            <div class="square" id="sq18"></div>
+            <div class="square" id="sq19"></div>
+          </div>
+        </div>
+    </section>
       {{#if ifDBError}}
       <section class="dberror">
         <div class="erorr-container">
@@ -89,6 +104,7 @@
                               {{#each devices}}
                               <li class="device">
                                 <img>
+                                <input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden>
                                 <input type="radio" name="camera-serial" id="radio-{{this.serial}}" class="radio-input" value="{{this.serial}}" hidden>
                                 <label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
                                   {{this.serial}}
@@ -108,86 +124,42 @@
                     <section class="table" style="position: relative;">
 
                       <div class="map">
-                        <!-- <div id="properties" class="properties" style="display: none;">
-                          <div class="propert"><h1>Группа</h1><br><h2 id="propert-group">Автобусы</h2></div>
-                          <div class="propert"><h1>Скорость</h1><br><h2 id="propert-speed"> км/ч</h2></div>
-                          <div class="propert"><h1>Номерной знак</h1><br><h2 id="propert-plate"></h2></div>
-                          <div class="propert"><h1>Геопозиция</h1><br><h2 id="propert-geo"></h2></div>
-                        </div> -->
                         <div id="map"></div>
                       </div>
 
-                      <div class="cameras" id="cameras">
+                      <div style="background: white;" class="cameras">
-                        <div class="video-container">
+                        <section style="border: 0;" class="whole-width">
-                          <div id="camera-1" onclick="playVideo(1);">
+                        <h1>Запустить запись с камеры</h1>
-                            <img src="../../img/play-circle.svg">
+                      <h3>Выберите камеру, время и нажмите кнопку "Запустить запись"</h3>
-                            <span>Запустить 1 камеру</span>
+                      <form id="edit-group-form">
-                          </div>
+                        <div class="parameters-input">
-                          <div id="camera-2" onclick="playVideo(2);">
+                          <label for="group-id">Камера</label>
-                            <img src="../../img/play-circle.svg">
+                          <select name="group-id" id="group-id">
-                            <span>Запустить 2 камеру</span>
+                            <option value="">Выберите номер камеры</option>
-                          </div>
+                            <option value="1">Камера 1</option>
-                          <div id="camera-3" onclick="playVideo(3);">
+                            <option value="2">Камера 2</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="3">Камера 3</option>
-                            <span>Запустить 3 камеру</span>
+                            <option value="4">Камера 4</option>
-                          </div>
+                            <option value="5">Камера 5</option>
-                          <div id="camera-4" onclick="playVideo(4);">
+                            <option value="6">Камера 6</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="7">Камера 7</option>
-                            <span>Запустить 4 камеру</span>
+                            <option value="8">Камера 8</option>
-                          </div>
+                            <option value="9">Камера 9</option>
-                          <div id="camera-5" onclick="playVideo(5);">
+                            <option value="10">Камера 10</option>
-                            <img src="../../img/play-circle.svg">
+                            <option value="11">Камера 11</option>
-                            <span>Запустить 5 камеру</span>
+                            <option value="12">Камера 12</option>
-                          </div>
+                            <option value="13">Камера 13</option>
-                          <div id="camera-6" onclick="playVideo(6);">
+                        </select>
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 6 камеру</span>
-                          </div>
-                          <div id="camera-7" onclick="playVideo(7);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 7 камеру</span>
-                          </div>
-                          <div id="camera-8" onclick="playVideo(8);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 8 камеру</span>
-                          </div>
-                          <div id="camera-9" onclick="playVideo(9);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 9 камеру</span>
-                          </div>
-                          <div id="camera-10" onclick="playVideo(10);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 10 камеру</span>
-                          </div>
-                          <div id="camera-11" onclick="playVideo(11);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 11 камеру</span>
-                          </div>
-                          <div id="camera-12" onclick="playVideo(12);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 12 камеру</span>
-                          </div>
-                        </div>
-                        <div class="video-container-right">
-                          <div id="camera-13" onclick="playVideo(13);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 13 камеру</span>
-                          </div>
-                          <div id="camera-14" onclick="playVideo(14);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 14 камеру</span>
-                          </div>
-                          <div id="camera-15" onclick="playVideo(15);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 15 камеру</span>
-                          </div>
-                          <div id="camera-16" onclick="playVideo(16);">
-                            <img src="../../img/play-circle.svg">
-                            <span>Запустить 16 камеру</span>
-                          </div>
                         </div>
+                      </form>
+
+                        <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>
+                
+                        <button style="margin-top: 15px;" id="group-edit" class="button-purple" type="button" onclick="playVideo();">Запустить запись</button>
+                      </section>
                       </div>
 
+
                       <div class="calendar">
                         <div class="calendar-header">
                             <button id="prevMonth"></button>
@@ -251,13 +223,39 @@
       }
 
       .speedometr div {
-        height: 200px;
+        height: 190px;
       }
     </style>
 
     <script src="../scripts/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
+    <script>
+      function updateCameraOptions() {
+        var selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
+
+        var channelsInput = document.querySelector('#channels-' + selectedSerial);
+
+        var numChannels = parseInt(channelsInput.value, 10);
+
+        var select = document.querySelector('#group-id');
+
+        select.innerHTML = '';
+
+        var defaultOption = document.createElement('option');
+        defaultOption.value = '';
+        defaultOption.textContent = 'Выберите номер камеры';
+        select.appendChild(defaultOption);
+
+        for (var i = 1; i <= numChannels; i++) {
+          var option = document.createElement('option');
+          option.value = i;
+          option.textContent = 'Камера ' + i;
+          select.appendChild(option);
+        }
+      }
+    </script>
+
     <script>
       document.addEventListener('DOMContentLoaded', function () {
         const areaNames = document.querySelectorAll('.area-name');
@@ -333,7 +331,8 @@ let HasData;
 var selectedChannel = 1;
 
 async function sendPostRequest() {
-  document.getElementById("cameras").style.opacity = "30%";
+  updateCameraOptions();
+  document.getElementById("dataLoading").style.display = 'flex';
   // Получение данных из полей ввода
   const selectedDate = document.getElementById("selectedDate").value;
   const videoTime = document.getElementById("video-time").value;
@@ -365,7 +364,7 @@ async function sendPostRequest() {
                     .then((response) => response.json())
                     .then((data) => {
 
-                      document.getElementById("cameras").style.opacity = "100%";
+                      document.getElementById("dataLoading").style.display = 'none';
 
                       const existingChart = Chart.getChart("speed");
 
@@ -374,13 +373,13 @@ async function sendPostRequest() {
                       }
 
                       const numberOfLabels = data.speeds.length;
-                      const labels = Array.from({ length: numberOfLabels }, () => "");
+                      // const labels = Array.from({ length: numberOfLabels }, () => "");
 
                       // Обновление данных графика
                       const chart = new Chart("speed", {
                         type: "line",
                         data: {
-                          labels: labels,
+                          labels: data.names,
                           datasets: [
                             {
                               label: "Скорость",
@@ -415,6 +414,19 @@ async function sendPostRequest() {
                               },
                             },
                             x: {
+                              ticks: {
+                                autoSkip: false,
+                                callback: function(value, index, values) {
+                                  const data = this.chart.data.labels;
+                                  if (index === 0 || index === values.length - 1) {
+                                    return data[index];
+                                  } else {
+                                    return ''; 
+                                  }
+                                },
+                                position: 'bottom',
+                                maxRotation: 0,
+                              },
                               grid: {
                                 display: false,
                               },
@@ -452,9 +464,62 @@ async function sendPostRequest() {
 
                     })
                     .catch((error) => {
+                      document.getElementById("dataLoading").style.display = 'none';
+                      var h1Element = document.querySelector('.speedometr h1');
+                        h1Element.textContent = 'Ошибка отправки запроса.';
                       console.error("Ошибка при отправке запроса:", error);
                     });
                 } else {
+                  const existingChart = Chart.getChart("speed");
+
+                      if (existingChart) {
+                        existingChart.destroy();
+                      }
+                  const chart = new Chart("speed", {
+                        type: "line",
+                        data: {
+                          labels: "",
+                          datasets: [
+                            {
+                              label: "Скорость",
+                              borderColor: "#8086F9",
+                              fill: false,
+                              data: "",
+                              pointStyle: false,
+                              pointRadius: 25,
+                              pointHoverRadius: 25,
+                              tension: 0.1,
+                            },
+                          ],
+                        },
+                        options: {
+                          plugins: {
+                            legend: {
+                              display: false,
+                            },
+                          },
+                          labelStep: "3",
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              stacked: true,
+                              grid: {
+                                display: true,
+                                color: "#D9D9D9",
+                              },
+                              ticks: {
+                                stepSize: 10,
+                              },
+                            },
+                            x: {
+                              grid: {
+                                display: false,
+                              },
+                            },
+                          },
+                        },
+                      });
                   const speedBG = document.getElementById("speed-bg");
                   speedBG.style.display = 'flex';
                 }
@@ -472,7 +537,7 @@ const selectedDateInput = document.getElementById("selectedDate");
 selectedDateInput.addEventListener("change", sendPostRequest);
 
 const videoTimeInput = document.getElementById("video-time");
-videoTimeInput.addEventListener("change", sendPostRequest);
+videoTimeInput.addEventListener("blur", sendPostRequest);
 
     </script>
 
@@ -585,12 +650,17 @@ videoTimeInput.addEventListener("change", sendPostRequest);
   return formatTime(`${hours}:${minutes}:${seconds}`);
 }
 
-  function playVideo(channel) {
+  function playVideo() {
+    const channel = document.getElementById("group-id").value;
     const selectedDevice = document.querySelector('input[name="camera-serial"]:checked');
     if (!selectedDevice) {
       alert('Пожалуйста, выберите устройство из списка.');
       return;
     }
+    if (channel === "") {
+      alert('Пожалуйста, выберите камеру из списка.');
+      return;
+    }
     if (!HasData) {
       alert('Пожалуйста, выберите другой временной период.');
       return;
@@ -714,9 +784,7 @@ datasets: [
 label: "Скорость",
 borderColor: "#8086F9",
 fill: false,
-data: [
+data: "",
-  {{Speeds}}
-],
 pointStyle: false,
 pointRadius: 25,
 pointHoverRadius: 25,