<!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 class="selected"><img src="../img/cloud.svg">Устройства</div> </a> <a href="/reports"> <div><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> {{#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="/devices">Список устройств</a> {{#if EditTransport}} <a href="/devices/groups">Группы</a> {{/if}} <!-- <a href="/devices/drivers">Водители</a> --> <!-- <a href="/devices/newdevice">Добавить устройство</a> --> <!-- <a href="/devices/newdriver">Добавить водителя</a> --> {{#if Update}} <!-- <a class="update" href="/devices/update">Обновление ПО</a> --> {{/if}} </nav> <section class="bg"> <section class="content"> <section class="for-table"> <section class="organisation"> <h1>Организация</h1> <ul class="area"> {{#each Groups}} <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="{{name}}" class="checkbox-input" hidden checked><label for="{{name}}" class="checkbox-label">{{name}}</label> <ul class="area-devices" id="devices-1"> {{#each serials}} <li class="device"><img><input type="checkbox" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" 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> </section> <section id="table-area" class="table"> <h1>Список устройств</h1> <input id="table-search" class="search" type="text" placeholder="Поиск"> <table id="deviceTable"> <thead> <tr> <th>Группа</th> <th>Номерной знак</th> <th>Серийный номер</th> <th>Статус</th> <th>Номер SIM-карты</th> <th>IP-адрес</th> <th></th> </tr> </thead> <tbody> <!-- Сюда будут добавляться строки таблицы --> </tbody> </table> </section> <div id="count"> <!-- Сюда добавится итоговое количество результатов --> </div> <div id="pagination"> <!-- Сюда будут добавляться ссылки для переключения между страницами --> </div> </section> </section> </section> </section> <section style="display: none;" class="dberror" id="deleteConfirmation"> <div class="erorr-container"> <img src="../img/warning.svg"> <br> <h1>Удаление устройства </h1> <br> <span>Вы уверены что хотите удалить <span id="deviceDeleteInfo"></span>?</span> <div class="buttons"> <button id="deleteCancel" onclick="closeDeletion();" style="display: inline-block; background-color: white; color: rgba(0, 0, 0, 0.7); margin-right: 5px;" type="button">Отменить</button> <button id="deleteDevice" style="display: inline-block;" type="button" onclick="deleteDevice()">Подтвердить</button> </div> </div> </section> <script> const devices = [ {{#each Registrars}} { number: "{{this.number}}", id: "{{this.id}}", serial: "{{this.serial}}", status: "{{this.status}}", name: "{{this.name}}", group: "{{this.group}}", plate: "{{this.plate}}", sim: "{{this.sim}}", ip: "{{this.ip}}", port: "{{this.port}}", }, {{/each}} ]; let EditTransport = false; {{#if EditTransport}} EditTransport = true; {{/if}} let DeleteTransport = false; {{#if DeleteTransport}} DeleteTransport = true; {{/if}} </script> <script src="../scripts/table.js"></script> <script src="../scripts/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script> <script> $(document).ready(function(){ $('#parameters-sim').inputmask({"mask": "+7 (999) 999-9999"}); }); </script> <script> function deleteDevice(id) { var deleteConfirmation = $("#deleteConfirmation"); $.ajax({ url: "/devicedata", method: "POST", contentType: "application/json", data: JSON.stringify({ id: id }), success: function(response) { // Установка значений полей формы $("#deviceDeleteInfo").html(response.serial); document.getElementById('deleteDevice').setAttribute("onclick", `confirmDelete(${response.id})`); document.getElementById('deleteConfirmation').style.display = "flex"; $("body").css("overflow", "hidden"); }, error: function() { // Обработка ошибки при запросе к серверу alert("Произошла ошибка при запросе к серверу."); } }); } function closeDeletion() { document.getElementById('deleteConfirmation').style.display = "none"; } function confirmDelete(id) { $.ajax({ url: "/deletedevice", method: "POST", contentType: "application/json", data: JSON.stringify({ id: id }), success: function(response) { location.reload(); }, error: function() { // Обработка ошибки при запросе к серверу alert("Произошла ошибка при запросе к серверу."); } }); } </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> </body> </html>