update main graphs, live properties

static/templates/index.html

@@ -86,6 +86,57 @@
         </section>
     </section>
 
+    <script>
+        var warningsData = {
+        labels: [
+            {{#each Dates}}
+            '{{this}}',
+            {{/each}}
+        ],
+        datasets: [
+            {
+            label: "Актуальный период",
+            backgroundColor: "rgba(235, 146, 139, 1)",
+            borderWidth: 0,
+            borderRadius: 9,
+            hoverBackgroundColor: "rgba(235, 146, 139, 0.8)",
+            data: [{{AlarmsLast11Days}}],
+            grouped: false,
+            },
+            {
+            label: "Предыдущий период",
+            backgroundColor: "rgba(235, 146, 139, 0.5)",
+            borderWidth: 0,
+            borderRadius: 9,
+            hoverBackgroundColor: "rgba(235, 146, 139, 0.3)",
+            data: [{{Alarms11DaysBefore}}],
+            },
+        ],
+        };
+
+        var positionsData = {
+        labels: [
+        {{#each Dates}}
+            '{{this}}',
+            {{/each}}
+        ],
+        datasets: [
+            {
+            label: "Позиционирование",
+            borderColor: "#8086F9",
+            fill: false,
+            data: [
+                {{PositionsLast11Days}}
+            ],
+            pointStyle: false,
+            pointRadius: 25,
+            pointHoverRadius: 25,
+            tension: 0.4,
+            },
+        ],
+        };
+    </script>
+
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="../scripts/graphs.js"></script>
     <script>

static/templates/live.html

@@ -157,6 +157,12 @@
                       </div>
 
                       <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>
 
@@ -418,9 +424,35 @@
         data.devicesData.forEach(device => {
           addMarker(device);
         });
+
+        // Поиск устройства с выбранным серийным номером
+        const selectedDevice = data.devicesData.find(device => device.serial === $("input[name=camera-serial]:checked").val());
+
+        // Получение ссылок на элементы для заполнения данных
+        const groupElement = document.getElementById('propert-group');
+        const speedElement = document.getElementById('propert-speed');
+        const plateElement = document.getElementById('propert-plate');
+        const geoElement = document.getElementById('propert-geo');
+
+        const propertiesDiv = document.getElementById('properties');
+
+        if (selectedDevice) {
+          // Вывод нужных свойств устройства в консоль
+          // groupElement.textContent = selectedDevice.group;
+          speedElement.textContent = selectedDevice.speed + ' км/ч';
+          plateElement.textContent = selectedDevice.plate;
+          geoElement.textContent = `${selectedDevice.latitude.toFixed(6)}, ${selectedDevice.longitude.toFixed(6)}`;
+
+          propertiesDiv.style.display = 'inline-flex';
+        } else {
+          console.log('Устройство с выбранным серийным номером не найдено.');
+        }
       })
       .catch(error => {
         console.error('Ошибка при получении данных:', error);
+
+        const propertiesDiv = document.getElementById('properties');
+        propertiesDiv.style.display = 'none';
       });
       
   }