<!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}} <section style="display: none;" class="dberror" id="addInformation" > <div class="erorr-container"> <div id="loader" class="loader"> <div class="square" id="sq1"></div> <div class="square" id="sq2"></div> <div class="square" id="sq3"></div> <div class="square" id="sq4"></div> <div class="square" id="sq5"></div> <div class="square" id="sq6"></div> <div class="square" id="sq7"></div> <div class="square" id="sq8"></div> <div class="square" id="sq9"></div> </div> <svg id="success-mark" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="108" height="108" fill="none" viewBox="0 0 108 108"> <g clip-path="url(#a)"> <path fill="#8086F9" fill-opacity=".85" d="M54 107.947c29.541 0 54-24.5 54-53.973C108 24.447 83.488 0 53.947 0 24.459 0 0 24.447 0 53.974c0 29.474 24.512 53.973 54 53.973Zm0-8.995c-24.988 0-44.947-20.002-44.947-44.978 0-24.976 19.906-44.978 44.894-44.978S99 28.998 99 53.974c0 24.976-20.012 44.978-45 44.978Zm-5.824-19.844c1.747 0 3.23-.846 4.289-2.487l24.194-38.046c.582-1.058 1.27-2.222 1.27-3.386 0-2.382-2.117-3.916-4.341-3.916-1.323 0-2.647.847-3.653 2.381l-21.97 35.241-10.43-13.493c-1.27-1.693-2.435-2.116-3.917-2.116-2.277 0-4.077 1.852-4.077 4.18 0 1.164.477 2.276 1.218 3.28l12.917 15.875c1.324 1.747 2.753 2.487 4.5 2.487Z"/> </g> <defs> <clipPath id="a"> <path fill="#fff" d="M0 0h108v108H0z"/> </clipPath> </defs> </svg> <h1 id="loader-header">Обновление группы</h1> <br> <span id="status">Пожалуйста, подождите</span> <button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button> </div> </section> <nav> <a href="/devices">Список устройств</a> <a class="selected" href="/devices/groups">Группы</a> {{#if Update}} <!-- <a class="update" href="/devices/update">Обновление ПО</a> --> {{/if}} </nav> <section class="bg"> <section class="content"> <section class="for-table"> <section class="whole-width"> <h1>Изменить данные группы</h1> <h3>Здесь вы можете управлять названиями групп и удалять их.</h3> <form id="edit-group-form"> <div class="parameters-input"> <label for="group-id">Название<span style="color: rgba(255, 69, 58, 1);">*</span></label> <select name="group-id" id="group-id"> <option value="">Выберите название</option> {{#each Groups}} <option value="{{this.id}}">{{this.name}}</option> {{/each}} </select> </div> <div style="margin-top: 10px;" class="parameters-input"> <label for="new-name">Новое название</label> <input name="new-name" type="text" id="new-name" placeholder="Введите новое название группы" required> </div> </form> <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div> <button style="margin-top: 15px;" id="group-edit" class="button-purple" type="button">Обновить</button> <button style="margin-top: 15px; background-color: rgb(255, 69, 58); margin-left: 10px;" id="group-delete" class="button-purple" type="button" onclick="deleteUser();">Удалить</button> </section> <section style="margin-top: 25px;" class="whole-width"> <h1>Добавить новую группу</h1> <form id="new-group-form"> <div class="parameters-input"> <label for="new-group-name">Название<span style="color: rgba(255, 69, 58, 1);">*</span></label> <input name="name" type="text" id="new-group-name" placeholder="Введите название новой группы" required> </div> </form> <div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div> <button style="margin-top: 15px;" id="group-new" class="button-purple" type="button">Добавить</button> </section> </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="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 src="../../scripts/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script> <script> $(document).ready(function(){ $('#user-phone').inputmask({"mask": "+7 (999) 999-9999"}); }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const editButton = document.getElementById('group-edit'); const groupIdSelect = document.getElementById('group-id'); const newNameInput = document.getElementById('new-name'); groupIdSelect.addEventListener('change', () => { const selectedOption = groupIdSelect.options[groupIdSelect.selectedIndex]; const groupName = selectedOption.textContent; newNameInput.value = groupName; }); editButton.addEventListener('click', async () => { const groupId = document.getElementById('group-id').value; const newName = document.getElementById('new-name').value; if (!groupId || !newName) { alert('Пожалуйста, выберите группу и введите новое имя'); return; } const deleteConfirmation = document.getElementById("addInformation"); const loader = document.getElementById("loader"); const status = document.getElementById("status"); const closeButton = document.getElementById("closeButton"); const mark = document.getElementById("success-mark"); loader.style.display = "block"; closeButton.style.display = "none"; deleteConfirmation.style.display = "flex"; mark.style.display = "none"; try { const response = await fetch('/update-group', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ groupId, newName }), }); if (response.ok) { showMessage("Данные успешно обновлены", true); } else { showMessage("Не удалось обновить данные", false); } } catch (error) { showMessage("Не удалось обновить данные", false); console.error("Ошибка:", error); } }); }); </script> <script> document.addEventListener("DOMContentLoaded", function () { const form = document.getElementById("new-group-form"); document.getElementById('group-new').addEventListener('click', () => { event.preventDefault(); const newName = document.getElementById('new-group-name').value; if (!newName) { alert('Пожалуйста, выберите группу и введите новое имя'); return; } $('#loader-header').html("Добавление группы"); const deleteConfirmation = document.getElementById("addInformation"); const loader = document.getElementById("loader"); const status = document.getElementById("status"); const closeButton = document.getElementById("closeButton"); const mark = document.getElementById("success-mark"); loader.style.display = "block"; closeButton.style.display = "none"; deleteConfirmation.style.display = "flex"; mark.style.display = "none"; const formData = new FormData(form); const jsonObject = {}; formData.forEach((value, key) => { jsonObject[key] = value; }); const jsonData = JSON.stringify(jsonObject); fetch("/add-group", { method: "POST", headers: { "Content-Type": "application/json" }, body: jsonData, }) .then((response) => response.json()) .then((data) => { showMessage("Группа успешно добавлена", true); }) .catch((error) => { showMessage("Не удалось добавить группу", false); console.error("Ошибка:", error); }); }); }); </script> <script> function hideMessage() { location.reload(); const deleteConfirmation = document.getElementById("addInformation"); deleteConfirmation.style.display = "none"; } function showMessage(messageText, isSuccess) { const loader = document.getElementById("loader"); const status = document.getElementById("status"); const closeButton = document.getElementById("closeButton"); const mark = document.getElementById("success-mark"); loader.style.display = "none"; status.textContent = messageText; if (isSuccess) { mark.style.display = "block"; status.style.color = "green"; } else { status.style.color = "red"; } closeButton.style.display = "block"; } </script> <script> function deleteUser() { const id = document.getElementById('group-id').value; const newName = document.getElementById('new-name').value; if (!id) { alert('Пожалуйста, выберите группу'); return; } var deleteConfirmation = $("#deleteConfirmation"); $.ajax({ url: "/groupdata", method: "POST", contentType: "application/json", data: JSON.stringify({ id: id }), success: function(response) { $("#driverDeleteInfo").html(response.name); 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: "/deletegroup", 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> </body> </html>