<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Отчёты</title> <link rel="stylesheet" href="../styles/main.css" /> </head> <body> <header> <img src="../img/argus.png"> <h1>Аргус</h1> <h2><span>/</span> {{Organisation}}</h2> </header> <section class="account-info"> <div id="account-main"> <img id="person" src="../img/person.svg"> <span>{{User}}</span> <img id="down" src="../img/down.svg"> <img id="up" src="../img/up.svg"> </div> <a href="/logout"><div id="account-additional" class="additional">Выйти</div></a> </section> <section class="navigation"> <a href="/"> <div><img src="../img/chart.svg">Главная</div> </a> <a href="/devices"> <div><img src="../img/cloud.svg">Устройства</div> </a> <a href="/reports"> <div class="selected"><img src="../img/bubble.svg">Отчёты</div> </a> <a href="/live"> <div><img src="../img/waves.svg">Трансляция</div> </a> <a href="/videos"> <div><img src="../img/play.svg">Записи</div> </a> <a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank"> <div><img src="../img/bug.svg">Собщить об ошибке</div> </a> {{#if isAdmin}} <a class="admin-panel" href="/admin"> <div><img src="../img/keyboard.svg">Админка</div> </a> {{/if}} <a class="settings" href="/settings"> <div><img src="../img/gear.svg">Настройки</div> </a> </section> <section class="main"> {{#if ifDBError}} <section class="dberror"> <div class="erorr-container"> <img src="../img/warning.svg"> <br> <h1>Ошибка </h1> <br> <span>Не удалось получить данные из БД</span> <button type="button" onclick="location.reload();">Повторить попытку</button> </div> </section> {{/if}} <nav> <a class="selected" href="/reports">Предупреждения</a> </nav> <section class="bg"> <section class="content"> <section style="height: 945px !important;" class="for-table"> <section class="organisation"> <h1>Организация</h1> <ul class="area"> {{#each Groups}} <li class="area-name"><img src="../img/ul.svg"><input autocomplete="off" type="checkbox" id="{{name}}" class="checkbox-input" onchange="requestUpdate()" hidden checked><label for="{{name}}" class="checkbox-label checkbox-name"><span class="text">{{name}}</span></label> <ul class="area-devices" id="devices-1"> {{#each serials}} <li class="device"><img><input autocomplete="off" type="checkbox" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" onchange="requestUpdate()" hidden checked><label for="{{this}}" class="checkbox-label"> {{#if ../numbers}} {{#if (lookup ../numbers @index)}} <div class="checkmark"></div>{{lookup ../numbers @index}} {{else}} <div class="checkmark"></div>{{this}} {{/if}} {{else}} <div class="checkmark"></div>{{this}} {{/if}} </label></li> {{/each}} </ul> </li> {{/each}} </ul> <div class="area-time-range"> <div class="time-range"><label for="timeRangeStart">с</label><input autocomplete="off" id="timeRangeStart" name="timeRangeStart" onblur="requestUpdate()" type="datetime-local"></div> <div class="time-range"><label for="timeRangeEnd">до</label><input autocomplete="off" id="timeRangeEnd" name="timeRangeEnd" onblur="requestUpdate()" type="datetime-local"></div> </div> </section> <section id="table-area" class="table"> <h1>Список предупреждений</h1> <input autocomplete="off" id="table-search" class="search" type="text" onblur="requestUpdate()" placeholder="Поиск"> <table id="deviceTable"> <thead> <tr> <th>Наименование</th> <th>ID</th> <th>Номерной знак</th> <th>Серийный номер</th> <th>Время</th> <th>Местоположение</th> <th></th> </tr> </thead> <tbody> <!-- Сюда будут добавляться строки таблицы --> </tbody> </table> </section> <div id="count">Всего результатов: <span id="count-value">{{Count}}</span></div> <div id="pagination"> <svg id="left-slider" xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19" onclick="decrementPage()"> <path fill="#000" fill-opacity=".75" d="M0 9.495c0 .273.101.514.315.722l8.92 8.477a.981.981 0 0 0 .73.295c.585 0 1.035-.427 1.035-.995 0-.285-.124-.525-.304-.711L2.508 9.495l8.188-7.789c.18-.186.304-.437.304-.71C11 .425 10.55 0 9.965 0c-.292 0-.54.098-.73.284L.314 8.773A.955.955 0 0 0 0 9.495Z"/> </svg> <input autocomplete="off" id="page-number" type="number" onblur="requestUpdate()" value="1"> <svg id="right-slider" xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19" onclick="incrementPage()"> <path fill="#000" fill-opacity=".75" d="M11 9.495a.967.967 0 0 0-.326-.722L1.766.284A1.062 1.062 0 0 0 1.024 0C.45 0 0 .427 0 .995c0 .274.112.525.292.711l8.189 7.789-8.189 7.788c-.18.186-.292.426-.292.71 0 .57.45.996 1.024.996.292 0 .54-.098.742-.295l8.908-8.477c.213-.208.326-.449.326-.722Z"/> </svg> </div> <script> var pageNumberInput = document.getElementById('page-number'); var countMax = Math.ceil({{Count}} / 14); function decrementPage() { var currentPage = parseInt(pageNumberInput.value, 10); if (currentPage > 1) { pageNumberInput.value = currentPage - 1; requestUpdate(); } } function incrementPage() { var currentPage = parseInt(pageNumberInput.value, 10); if (currentPage === countMax || currentPage > countMax) { pageNumberInput.value = countMax; requestUpdate(); } if (currentPage < countMax) { pageNumberInput.value = currentPage + 1; requestUpdate(); } } </script> <!-- <br> <br> <span style="opacity:50%">Временное ограничение: 100 последних предупреждений</span> --> </section> </section> </section> </section> <script> let devices = [ {{#each Alarms}} { id: "{{this.id}}", cmdno: "{{this.cmdno}}", number: "{{this.number}}", time: "{{this.time}}", serial: "{{this.serial}}", type: "{{this.type}}", geo: "{{this.geo}}", plate: "{{this.plate}}", }, {{/each}} ]; </script> <script src="../scripts/table-reports.js"></script> <script src="../scripts/jquery.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var containers = document.querySelectorAll('.checkbox-name'); containers.forEach(function (container) { var text = container.querySelector('.text'); if (text.clientWidth > container.clientWidth) { text.classList.add('animated'); } }); }); document.addEventListener('DOMContentLoaded', function () { var checkboxLabels = document.querySelectorAll('.checkbox-label'); checkboxLabels.forEach(function (label) { var labelText = label.textContent.trim(); if (labelText.length > 10) { var checkmarkDiv = document.createElement('div'); checkmarkDiv.className = 'checkmark'; label.textContent = ''; label.appendChild(checkmarkDiv); label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...')); } }); }); </script> <script> function requestUpdate() { document.getElementById("deviceTable").style.filter = "brightness(0.85)"; const requestData = { page: parseInt(document.getElementById("page-number").value), timeRangeStart: document.getElementById("timeRangeStart").value, timeRangeEnd: document.getElementById("timeRangeEnd").value, serials: Array.from( document.querySelectorAll('input[type="checkbox"].device-filter:checked') ).map((checkbox) => checkbox.value), searchText: document.getElementById("table-search").value, }; console.log(requestData); fetch("/getreports", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(requestData), }) .then((response) => response.json()) .then((data) => { console.log(data); console.log(devices); devices.splice(0, devices.length); devices.push(...data.data.map(item => ({ id: item.id, cmdno: item.cmdno, number: item.number, time: item.time, serial: item.serial, type: item.type, geo: item.geo, plate: item.plate, }))); console.log(devices); createTable(); document.getElementById("count-value").innerHTML = data.total; countMax = Math.ceil(data.total / 14); var currentPage = parseInt(pageNumberInput.value, 10); if (currentPage > countMax) { pageNumberInput.value = countMax; requestUpdate(); } document.getElementById("deviceTable").style.filter = "brightness(1)"; }) .catch((error) => { document.getElementById("dataLoading").style.display = 'none'; h1Element.textContent = 'Ошибка отправки запроса.'; console.error("Ошибка при отправке запроса:", error); }); }; </script> <script> // Скрытие/Показ дополнительных меню аккаунта const accountMain = document.getElementById('account-main'); const accountAdditional = document.getElementById('account-additional'); const accountUp = document.getElementById('up'); const accountDown = document.getElementById('down'); accountAdditional.style.display = 'none'; accountUp.style.display = 'none'; accountMain.addEventListener('click', () => { if (accountAdditional.style.display === 'none') { accountAdditional.style.display = 'flex'; accountUp.style.display = 'unset'; accountDown.style.display = 'none'; } else { accountAdditional.style.display = 'none'; accountUp.style.display = 'none'; accountDown.style.display = 'unset'; } }); </script> <script> const checkboxes = document.querySelectorAll('.organisation .checkbox-input'); checkboxes.forEach((checkbox) => { checkbox.addEventListener('change', function() { const areaDevices = this.parentNode.querySelector('.area-devices'); if (this.checked) { areaDevices.style.display = 'block'; // Активируем дочерние чекбоксы const childCheckboxes = areaDevices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = true; }); } else { areaDevices.style.display = 'none'; // Деактивируем дочерние чекбоксы const childCheckboxes = areaDevices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = false; }); } // Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран if (!this.checked) { const childCheckboxes = areaDevices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = false; }); areaDevices.style.display = 'none'; } requestUpdate(); }); }); </script> </body> </html>