<!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> <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="/login"><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 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}} <div class="name"> <span>Отчёты</span> </div> <nav> <a class="selected" href="/reports">Предупреждения</a> </nav> <section class="bg"> <section class="content"> <section class="for-table"> <section class="organisation"> <h1>Организация</h1> <ul class="area"> <!-- <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label> <ul class="area-devices" id="devices-1"> <li class="device"><img><input type="checkbox" id="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li> <li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</label></li> </ul> </li> <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label> <ul class="area-devices" id="devices-2"> <li class="device"><img><input type="checkbox" id="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li> <li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li> <li class="device"><img><input type="checkbox" id="0005" class="checkbox-input device-filter" value="0005" hidden checked><label for="0005" class="checkbox-label"><div class="checkmark"></div>0005</label></li> <li class="device"><img><input type="checkbox" id="0006" class="checkbox-input device-filter" value="0006" hidden checked><label for="0006" class="checkbox-label"><div class="checkmark"></div>0006</label></li> </ul> </li> <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label> <ul class="area-devices" id="devices-3"> <li class="device"><img><input type="checkbox" id="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li> </ul> </li> --> </ul> <div class="area-time-range"> <div class="time-range"><label for="timeRangeStart">с</label><input id="timeRangeStart" name="timeRangeStart" type="datetime-local"></div> <div class="time-range"><label for="timeRangeEnd">до</label><input id="timeRangeEnd" name="timeRangeEnd" type="datetime-local"></div> </div> </section> <section id="table-area" class="table"> <h1>Список предупреждений</h1> <input id="table-search" class="search" type="text" placeholder="Поиск"> <table id="deviceTable"> <thead> <tr> <th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th> <th>Наименование</th> <th>ID</th> <th>Номерной знак</th> <th>Серийный номер</th> <th>Время</th> <th>Местоположение</th> <th><button id="share-device-all" value="share-device-all" class="share" onclick="location.href = '/reports/346';"></button></th> </tr> </thead> <tbody> <!-- Сюда будут добавляться строки таблицы --> </tbody> </table> </section> <div id="count"> <!-- Сюда добавится итоговое количество результатов --> </div> <div id="pagination"> <!-- Сюда будут добавляться ссылки для переключения между страницами --> </div> <!-- <br> <br> <span style="opacity:50%">Временное ограничение: 100 последних предупреждений</span> --> </section> </section> </section> </section> <script> const devices = [ {{#each Alarms}} { id: "{{this.id}}", cmdno: "{{this.cmdno}}", 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> // Скрытие/Показ дополнительных меню аккаунта 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) => { applyFilterAndSearch(); checkbox.addEventListener('change', function() { document.querySelector('#device-all').checked = false; applyFilterAndSearch(); const devices = this.parentNode.querySelector('.area-devices'); if (this.checked) { devices.style.display = 'block'; // Активируем дочерние чекбоксы const childCheckboxes = devices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = true; applyFilterAndSearch(); }); } else { devices.style.display = 'none'; applyFilterAndSearch(); // Деактивируем дочерние чекбоксы const childCheckboxes = devices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = false; applyFilterAndSearch(); }); } // Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран if (!this.checked) { const childCheckboxes = devices.querySelectorAll('.device-filter'); childCheckboxes.forEach((childCheckbox) => { childCheckbox.checked = false; applyFilterAndSearch(); }); devices.style.display = 'none'; } }); }); </script> <script> var table = document.querySelector('#deviceTable'); var tableCheckboxAll = table.querySelector('#device-all'); var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]'); tableCheckboxAll.addEventListener('click', function(event) { table = document.querySelector('#deviceTable'); tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]'); if (tableCheckboxAll.checked) { tableCheckboxes.forEach((tableCheckbox) => { tableCheckbox.checked = true; }); } else { tableCheckboxes.forEach((tableCheckbox) => { tableCheckbox.checked = false; }); } }); $('#deviceTable').click( function(event) { table = document.querySelector('#deviceTable'); tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]'); for (var i = 0; i < tableCheckboxes.length; i++) { tableCheckboxes[i].addEventListener('click', function(event) { for (var j = 0; j < tableCheckboxes.length; j++) { if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) { tableCheckboxAll.checked = false; return; } } tableCheckboxAll.checked = true; }); } }); </script> </body> </html>