398 lines
15 KiB
HTML
398 lines
15 KiB
HTML
<!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>
|
||
<div class="name">
|
||
<span>Устройства</span>
|
||
</div>
|
||
|
||
<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> |