admin panel, users, bug fixes
This commit is contained in:
411
static/templates/admin/index.html
Normal file
411
static/templates/admin/index.html
Normal file
@ -0,0 +1,411 @@
|
||||
<!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><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="admin-panel" href="/admin">
|
||||
<div class="selected"><img src="../img/keyboard.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}}
|
||||
|
||||
<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>Добавление пользователя</h1> <br>
|
||||
<span id="status">Пожалуйста, подождите</span>
|
||||
<button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="name">
|
||||
<span>Панель управления</span>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<a class="selected" href="/admin">Пользователи</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section id="content" class="content">
|
||||
|
||||
<input id="table-search" class="search admin-search" type="text" placeholder="Поиск по имени, почте, номеру телефона или ID">
|
||||
<button class="button-purple add-user" onclick="addUser();">Добавить пользователя</button>
|
||||
|
||||
<table id="adminTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Имя</th>
|
||||
<th>ID</th>
|
||||
<th>Почта</th>
|
||||
<th>Номер телефона</th>
|
||||
<th>Дата добавления</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Сюда будут добавляться строки таблицы -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="count">
|
||||
<!-- Сюда добавится итоговое количество результатов -->
|
||||
</div>
|
||||
<div id="pagination">
|
||||
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section id="form-bg" class="edit-container">
|
||||
|
||||
<section class="add-user-form" id="form">
|
||||
<h1>Добавить пользователя</h1>
|
||||
<img src="../img/xmark.svg" id="close-form-btn">
|
||||
|
||||
|
||||
<form id="add-user-form">
|
||||
<div class="parameters-input">
|
||||
<label for="user-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="name" type="text" id="user-name" placeholder="Имя пользователя" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="surname" type="text" id="user-surname" placeholder="Фамилия пользователя" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-email">Email<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="email" type="text" id="user-email" placeholder="Email пользователя" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-phone">Номер телефона<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="phone" type="text" id="user-phone" placeholder="Номер телефона пользователя" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-password">Пароль<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="password" type="text" id="user-password" placeholder="Пароль пользователя" required>
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="user-add" type="submit">Добавить</button>
|
||||
</form>
|
||||
</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 users = [
|
||||
{{#each Users}}
|
||||
{
|
||||
id: "{{this.id}}",
|
||||
name: "{{this.name}}",
|
||||
surname: "{{this.surname}}",
|
||||
phone: "{{this.phone}}",
|
||||
email: "{{this.email}}",
|
||||
date: "{{this.added}}",
|
||||
},
|
||||
{{/each}}
|
||||
];
|
||||
</script>
|
||||
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="../scripts/table-admin.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>
|
||||
var formContainer = $("#form-bg");
|
||||
var fform = $("#form");
|
||||
|
||||
function closeForm() {
|
||||
formContainer.removeClass("active");
|
||||
fform.removeClass("form-animation");
|
||||
$("body").css("overflow", "auto");
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById("add-user-form");
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
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);
|
||||
|
||||
closeForm();
|
||||
form.reset();
|
||||
|
||||
fetch("/add-user", {
|
||||
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 addUser() {
|
||||
var formContainer = $("#form-bg");
|
||||
var form = $("#form");
|
||||
formContainer.addClass("active");
|
||||
form.addClass("form-animation");
|
||||
$("body").css("overflow", "hidden");
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var formContainer = $("#form-bg");
|
||||
var form = $("#form");
|
||||
|
||||
|
||||
|
||||
// Закрывает popup форму
|
||||
$("#close-form-btn").click(function() {
|
||||
closeForm();
|
||||
});
|
||||
|
||||
// Закрывает popup форму при клике вне её области
|
||||
$(document).click(function(event) {
|
||||
if (
|
||||
!formContainer.is(event.target) &&
|
||||
formContainer.has(event.target).length === 0 &&
|
||||
formContainer.hasClass("active") &&
|
||||
!openButton.is(event.target)
|
||||
) {
|
||||
closeForm();
|
||||
}
|
||||
});
|
||||
|
||||
// Функция для закрытия формы
|
||||
function closeForm() {
|
||||
formContainer.removeClass("active");
|
||||
form.removeClass("form-animation");
|
||||
$("body").css("overflow", "auto");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
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(id) {
|
||||
|
||||
var deleteConfirmation = $("#deleteConfirmation");
|
||||
|
||||
$.ajax({
|
||||
url: "/userdata",
|
||||
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: "/deleteuser",
|
||||
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>
|
375
static/templates/admin/user.html
Normal file
375
static/templates/admin/user.html
Normal file
@ -0,0 +1,375 @@
|
||||
<!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>{{Name}} {{Surname}}</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><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="admin-panel" href="/admin">
|
||||
<div class="selected"><img src="../../img/keyboard.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}}
|
||||
|
||||
<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>Обновление пользователя</h1> <br>
|
||||
<span id="status">Пожалуйста, подождите</span>
|
||||
<button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="name">
|
||||
<span>{{Name}} {{Surname}} <span class="user-id">ID {{Id}}</span></span>
|
||||
</div>
|
||||
<nav>
|
||||
<a class="return-name" href="/admin">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="17" fill="none" viewBox="0 0 10 17">
|
||||
<g clip-path="url(#a)">
|
||||
<path fill="#8086F9" d="M0 8.477a.88.88 0 0 0 .273.644l7.745 7.568a.84.84 0 0 0 .634.264c.508 0 .899-.38.899-.889a.917.917 0 0 0-.264-.634l-7.11-6.953 7.11-6.954A.936.936 0 0 0 9.551.89.876.876 0 0 0 8.652 0a.869.869 0 0 0-.634.254L.273 7.832A.864.864 0 0 0 0 8.477Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h9.551v16.963H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
Вернуться</a>
|
||||
</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}}
|
||||
{{#if this.checked}}
|
||||
<li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden checked><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>{{this.serial}}</label></li>
|
||||
{{else}}
|
||||
<li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>{{this.serial}}</label></li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="whole-width">
|
||||
<h1>Данные пользователя</h1>
|
||||
<h3>Кнопка "Обновить" также распространяется на доступ к устройствам.</h3>
|
||||
<form id="edit-user-form">
|
||||
<div class="parameters-input">
|
||||
<label for="user-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="name" type="text" id="user-name" placeholder="Имя пользователя" value="{{Name}}" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="surname" type="text" id="user-surname" placeholder="Фамилия пользователя" value="{{Surname}}" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-email">Email<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="email" type="text" id="user-email" placeholder="Email пользователя" value="{{Email}}" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-phone">Номер телефона<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="phone" type="text" id="user-phone" placeholder="Номер телефона пользователя" value="{{Phone}}" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="user-password">Пароль<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="password" type="text" id="user-password" placeholder="Пароль пользователя" value="{{Password}}" required>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>
|
||||
|
||||
<h1>Права пользователя</h1>
|
||||
|
||||
<section class="permissions">
|
||||
|
||||
<div class="permission-group">
|
||||
<h2>Устройства</h2>
|
||||
{{#if EditTransport}}
|
||||
<img><input name="EditTransport" type="checkbox" id="device-edit" class="checkbox-input device-filter" hidden checked><label for="device-edit" class="checkbox-label"><div class="checkmark"></div>Изменять</label>
|
||||
{{else}}
|
||||
<img><input name="EditTransport" type="checkbox" id="device-edit" class="checkbox-input device-filter" hidden><label for="device-edit" class="checkbox-label"><div class="checkmark"></div>Изменять</label>
|
||||
{{/if}}
|
||||
{{#if DeleteTransport}}
|
||||
<img><input name="DeleteTransport" type="checkbox" id="device-delete" class="checkbox-input device-filter" hidden checked><label for="device-delete" class="checkbox-label"><div class="checkmark"></div>Удалять</label>
|
||||
{{else}}
|
||||
<img><input name="DeleteTransport" type="checkbox" id="device-delete" class="checkbox-input device-filter" hidden><label for="device-delete" class="checkbox-label"><div class="checkmark"></div>Удалять</label>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="permission-group">
|
||||
<h2>Обновление ПО</h2>
|
||||
{{#if Update}}
|
||||
<img><input name="Update" type="checkbox" id="update-do" class="checkbox-input device-filter" hidden checked><label for="update-do" class="checkbox-label"><div class="checkmark"></div>Обновлять</label>
|
||||
{{else}}
|
||||
<img><input name="Update" type="checkbox" id="update-do" class="checkbox-input device-filter" hidden><label for="update-do" class="checkbox-label"><div class="checkmark"></div>Обновлять</label>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div style="margin-left: 44px; margin-right: 72px; width: calc(100% - 44px - 72px);" class="horizontal-line"></div>
|
||||
|
||||
<button style="margin-top: 15px;" id="user-edit" class="button-purple" type="button">Обновить</button>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.whole-width {
|
||||
display: inline-block;
|
||||
width: calc(100% - 275px);
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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.getElementById('user-edit').addEventListener('click', function() {
|
||||
|
||||
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";
|
||||
// Собираем данные из инпутов с классом "device" в массив
|
||||
const deviceInputs = document.querySelectorAll('.device-serial:checked');
|
||||
const devices = Array.from(deviceInputs).map(input => input.value);
|
||||
|
||||
// Собираем остальные данные из формы
|
||||
const formData = {
|
||||
name: document.getElementById('user-name').value,
|
||||
surname: document.getElementById('user-surname').value,
|
||||
email: document.getElementById('user-email').value,
|
||||
phone: document.getElementById('user-phone').value,
|
||||
password: document.getElementById('user-password').value,
|
||||
EditTransport: document.getElementById('device-edit').checked,
|
||||
DeleteTransport: document.getElementById('device-delete').checked,
|
||||
Update: document.getElementById('update-do').checked,
|
||||
// Другие данные, которые необходимо включить
|
||||
};
|
||||
|
||||
// Объединяем все данные в один объект
|
||||
const jsonData = {
|
||||
devices,
|
||||
formData
|
||||
};
|
||||
|
||||
|
||||
fetch('/updateuser/{{Id}}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(jsonData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
showMessage("Данные успешно обновлены", true);
|
||||
} else {
|
||||
showMessage("Не удалось обновить данные", false);
|
||||
console.error("Ошибка:", error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Произошла ошибка:', error);
|
||||
});
|
||||
});
|
||||
|
||||
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>
|
||||
// Скрытие/Показ дополнительных меню аккаунта
|
||||
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 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;
|
||||
});
|
||||
} else {
|
||||
devices.style.display = 'none';
|
||||
|
||||
// Деактивируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
|
||||
if (!this.checked) {
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
});
|
||||
devices.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
@ -45,6 +45,9 @@
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -47,6 +47,9 @@
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -43,6 +43,9 @@
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -45,6 +45,9 @@
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -43,6 +43,9 @@
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div class="selected"><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -47,6 +47,9 @@
|
||||
<a href="/videos">
|
||||
<div class="selected"><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
@ -47,6 +47,9 @@
|
||||
<a href="/videos">
|
||||
<div class="selected"><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
|
Reference in New Issue
Block a user