<!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> Название организации</h2> </header> <section class="account-info"> <div id="account-main"> <img id="person" src="../img/person.svg"> <span>Тестовое Имя</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 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> <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 href="/devices">Список устройств</a> <a class="selected" href="/devices/drivers">Водители</a> <!-- <a href="/devices/newdevice">Добавить устройство</a> --> <!-- <a href="/devices/newdriver">Добавить водителя</a> --> <a class="update" href="/devices/update">Обновление ПО</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="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li> <li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</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="2-device-1" class="checkbox-input device-filter" value="2-device-1" hidden checked><label for="2-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li> <li class="device"><img><input type="checkbox" id="2-device-2" class="checkbox-input device-filter" value="2-device-2" hidden checked><label for="2-device-2" class="checkbox-label"><div class="checkmark"></div>Электробусы</label></li> <li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li> <li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" class="checkbox-label"><div class="checkmark"></div>Старые ТС</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="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li> </ul> </li> --> </ul> <button class="addDriver" onclick="openNew()">Добавить водителя</button> </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>ID</th> <th>Имя</th> <th>Фамилия</th> <th>Номер ТС</th> <th>Номер телефона</th> <th>Почта</th> <th>Карта водителя</th> <th><button id="delete-device-all" value="delete-device-all" class="trash"></button></th> </tr> </thead> <tbody> <!-- Сюда будут добавляться строки таблицы --> </tbody> </table> </section> <div id="count"> <!-- Сюда добавится итоговое количество результатов --> </div> <div id="pagination"> <!-- Сюда будут добавляться ссылки для переключения между страницами --> </div> </section> </section> </section> </section> <section id="form-bg" class="edit-container"> <section id="editForm"> <section class="for-new"> <section class="stages"> <input name="newStageEdit" type="radio" value="main" id="stage-main-edit" checked><label for="stage-main-edit">Основная информация</label> <div class="vertical-line"></div> <input name="newStageEdit" type="radio" value="details" id="stage-details-edit"><label for="stage-details-edit">Детали</label> </section> </section> <section id="add-new-container" class="add-new"> <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()"> <form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedriver"> <input type="text" id="driver-id-edit" name="driverID" hidden> <div id="main-edit" class="new-parameters drivers active"> <h1>Основная информация</h1> <h2>Сперва самое необходимое</h2> <div class="horizontal-line"></div> <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label> <div id="upload-photo-edit" class="upload-input"> <!-- <img src="../img/upload.svg"> <span class="upload-text">Загрузить фотографию водителя</span> <span class="upload-description">PNG, JPG (макс 20 мб)</span> --> <img src="../img/warning.svg"> <span class="upload-text">Временно недоступно редактирование фотографии</span> <span class="upload-description">Остальная информация изменяется</span> </div> <input id="input-upload-photo-edit" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;"> <div class="parameters-inputs"> <label for="driver-name-edit">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverName" type="text" id="driver-name-edit" placeholder="Имя водителя" required> <label for="driver-surname-edit">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverSurname" type="text" id="driver-surname-edit" placeholder="Фамилия водителя" required> <label for="driver-card-edit">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverCard" type="text" id="driver-card-edit" placeholder="Номер карты водителя" required> </div> <div class="horizontal-line"></div> <button id="continue-main-edit" type="button">Продолжить</button> </div> <div id="details-edit" class="new-parameters"> <h1>Детальная информация</h1> <h2>Для удобства в идентификации</h2> <div class="horizontal-line"></div> <div class="parameters-inputs"> <div class="parameters-input"> <label for="driver-gender-edit">Пол</label> <select name="driverGender" id="driver-gender-edit"> <option value="NS">Не указывать</option> <option value="male">Мужской</option> <option value="female">Женский</option> </select> </div> <div class="parameters-input"> <label for="driver-license-edit">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverLicense" type="text" id="driver-license-edit" placeholder="Номер водительского удостоверения" required> </div> <div class="parameters-input"> <label for="driver-passport-edit">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverPassport" type="text" id="driver-passport-edit" placeholder="Номер удостоверения личности" required> </div> <div class="parameters-input"> <label for="driver-phone-edit">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverPhone" type="text" id="driver-phone-edit" placeholder="Номер мобильного телефона" required> </div> <div class="parameters-input"> <label for="driver-email-edit">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverEmail" type="text" id="driver-email-edit" placeholder="Электронная почта" required> </div> <div class="parameters-input"> <label for="driver-transport-edit">Транспортное средство</label> <select name="driverTransport" id="driver-transport-edit"> <option value="NS">Не указывать</option> {{#each Registrars}} <option value="{{this}}">{{this}}</option> {{/each}} </select> </div> <label for="driver-description-edit">Примечание</label> <input name="driverDescription" type="text" id="driver-description-edit" placeholder="Примечание"> </div> <div class="horizontal-line"></div> <button type="submit" id="send-edit">Сохранить</button> </div> </form> </section> </section> <section id="newForm"> <section class="for-new"> <section class="stages"> <input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label> <div class="vertical-line"></div> <input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label> </section> </section> <section id="add-new-container" class="add-new"> <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()"> <form id="new-form" enctype="multipart/form-data" method="post" action="/adddriver"> <div id="main" class="new-parameters drivers active"> <h1>Основная информация</h1> <h2>Сперва самое необходимое</h2> <div class="horizontal-line"></div> <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label> <div id="upload-photo" class="upload-input"> <img src="../img/upload.svg"> <span class="upload-text">Загрузить фотографию водителя</span> <span class="upload-description">PNG, JPG (макс 20 мб)</span> </div> <div class="image-container" id="image-container" style="display: none;"> <img id="image-preview" src="#" alt="Uploaded Image"> <div class="upload-result"> <img id="file-icon" src="../img/file.svg" /> <span id="file-name"></span> <span id="file-size"></span> <img id="clear-button" src="../img/xmark.svg" /> </div> </div> <input id="input-upload-photo" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;"> <div class="parameters-inputs"> <label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required> <label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required> <label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required> </div> <div class="horizontal-line"></div> <button id="continue-main" type="button">Продолжить</button> </div> <div id="details" class="new-parameters"> <h1>Детальная информация</h1> <h2>Для удобства в идентификации</h2> <div class="horizontal-line"></div> <div class="parameters-inputs"> <div class="parameters-input"> <label for="driver-gender">Пол</label> <select name="driverGender" id="driver-gender"> <option value="NS">Не указывать</option> <option value="male">Мужской</option> <option value="female">Женский</option> </select> </div> <div class="parameters-input"> <label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required> </div> <div class="parameters-input"> <label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverPassport" type="text" id="driver-passport" placeholder="Номер удостоверения личности" required> </div> <div class="parameters-input"> <label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required> </div> <div class="parameters-input"> <label for="driver-email">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="driverEmail" type="text" id="driver-email" placeholder="Электронная почта" required> </div> <div class="parameters-input"> <label for="driver-transport">Транспортное средство</label> <select name="driverTransport" id="driver-transport"> <option value="NS">Не указывать</option> {{#each Registrars}} <option value="{{this}}">{{this}}</option> {{/each}} </select> </div> <label for="driver-description">Примечание</label> <input name="driverDescription" type="text" id="driver-description" placeholder="Примечание"> </div> <div class="horizontal-line"></div> <button type="submit" id="send-form">Сохранить</button> </div> </form> </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="driverDeleteInfo"></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" onclick="deleteDriver()">Отменить</button> <button id="deleteDriver" style="display: inline-block;" type="button">Подтвердить</button> </div> </div> </section> <script> const devices = [ {{#each Drivers}} { id: "{{this.id}}", name: "{{this.name}}", surname: "{{this.surname}}", numberTS: "{{this.transport}}", phone: "{{this.phone}}", mail: "{{this.email}}", sim: "{{this.sim}}", driverCard: "{{this.card}}", }, {{/each}} ]; </script> <script src="../scripts/table-drivers.js"></script> <script src="../scripts/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script> <script src="../scripts/drivers-form.js"></script> <script> const uploadPhotoInput = document.getElementById('input-upload-photo'); const uploadContainer = document.getElementById('upload-photo'); const imageContainer = document.getElementById('image-container'); const imagePreview = document.getElementById('image-preview'); const fileNameElement = document.getElementById('file-name'); const fileSizeElement = document.getElementById('file-size'); const clearButton = document.getElementById('clear-button'); uploadPhotoInput.addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function() { uploadContainer.style.display = 'none'; imagePreview.src = reader.result; imageContainer.style.display = 'block'; fileNameElement.textContent = file.name ; fileSizeElement.textContent = formatFileSize(file.size); }; reader.readAsDataURL(file); } }); function formatFileSize(bytes) { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) return '0 Byte'; const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; } clearButton.addEventListener('click', function() { uploadContainer.style.display = 'block'; uploadPhotoInput.value = null; imageContainer.style.display = 'none'; imagePreview.src = '#'; fileNameElement.textContent = ''; fileSizeElement.textContent = ''; }); </script> <script> var form = document.getElementById('new-form'); const sendButton = document.getElementById('send-form'); form.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form); const xhr = new XMLHttpRequest(); xhr.open('POST', '/adddriver', true); xhr.onload = function() { if (xhr.status === 200) { console.log('Водитель успешно добавлен!'); location.reload(); } else { console.error('Ошибка отправки формы:', xhr.status); } }; xhr.send(formData); }); var form2 = document.getElementById('edit-form'); const editSendButton = document.getElementById('send-edit'); form2.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form2); const xhr = new XMLHttpRequest(); xhr.open('POST', '/updatedriver', true); xhr.onload = function() { if (xhr.status === 200) { console.log('Информация о водителе успешно обновлена!'); location.reload(); } else { console.error('Ошибка отправки формы:', xhr.status); } }; xhr.send(formData); }); </script> <script> const fileSelect = document.getElementById("upload-photo"); const fileElem = document.getElementById("input-upload-photo"); fileSelect.addEventListener( "click", (e) => { if (fileElem) { fileElem.click(); } }, false ); $(document).ready(function(){ $('#driver-phone').inputmask({"mask": "+7 (999) 999-9999"}); $('#driver-phone-edit').inputmask({"mask": "+7 (999) 999-9999"}); }); // Открывает popup форму function openNew() { var formContainer = $("#form-bg"); var newForm = $("#newForm"); var editForm = $("#editForm"); activeContent = content1 switchContent(content1); content2.style.opacity = 0; content2.style.display = "none"; content3.style.opacity = 0; content3.style.display = "none"; content4.style.opacity = 0; content4.style.display = "none"; document.getElementById("stage-main").checked = true; newForm.css("display", "flex"); editForm.css("display", "none"); // Открытие формы formContainer.addClass("active"); newForm.addClass("form-animation"); $("body").css("overflow", "hidden"); } function openEdit(id) { var formContainer = $("#form-bg"); var newForm = $("#newForm"); var editForm = $("#editForm"); $.ajax({ url: "/driverdata", method: "POST", contentType: "application/json", data: JSON.stringify({ id: id }), success: function(response) { // Установка значений полей формы $("#driver-name-edit").val(response.name); $("#driver-surname-edit").val(response.surname); $("#driver-card-edit").val(response.card); $("#driver-gender-edit").val(response.gender); $("#driver-license-edit").val(response.license); $("#driver-passport-edit").val(response.passport); $("#driver-phone-edit").val(response.phone); $("#driver-email-edit").val(response.email); $("#driver-transport-edit").val(response.transport); $("#driver-description-edit").val(response.description); $("#driver-id-edit").val(response.id); activeContent = content3 switchContent(content3); content1.style.opacity = 0; content1.style.display = "none"; content2.style.opacity = 0; content2.style.display = "none"; content4.style.opacity = 0; content4.style.display = "none"; document.getElementById("stage-main").checked = true; newForm.css("display", "none"); editForm.css("display", "flex"); // Открытие формы formContainer.addClass("active"); editForm.addClass("form-animation"); $("body").css("overflow", "hidden"); }, error: function() { // Обработка ошибки при запросе к серверу alert("Произошла ошибка при запросе к серверу."); } }); } var formContainer = $("#form-bg"); var newForm = $("#newForm"); var editForm = $("#editForm"); // Функция для закрытия формы function closeForm() { formContainer.removeClass("active"); newForm.removeClass("form-animation"); editForm.removeClass("form-animation"); newForm.css("display", "none"); editForm.css("display", "none"); $("body").css("overflow", "auto"); } </script> <script> function deleteDriver(id) { var deleteConfirmation = $("#deleteConfirmation"); $.ajax({ url: "/driverdata", method: "POST", contentType: "application/json", data: JSON.stringify({ id: id }), success: function(response) { // Установка значений полей формы $("#driverDeleteInfo").html(response.name + " " + response.surname); document.getElementById('deleteDriver').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: "/deletedriver", 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> <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>