ArgusSite/static/templates/devices/index.html

333 lines
12 KiB
HTML
Raw Normal View History

2023-07-03 22:31:18 +00:00
<!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">
2023-07-03 22:31:18 +00:00
<h1>Аргус</h1>
<h2><span>/</span> {{Organisation}}</h2>
2023-07-03 22:31:18 +00:00
</header>
<section class="account-info">
<div id="account-main">
<img id="person" src="../img/person.svg">
<span>{{User}}</span>
2023-07-03 22:31:18 +00:00
<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>
2023-07-03 22:31:18 +00:00
</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>
2023-08-21 03:28:58 +00:00
<a href="/videos">
2023-07-03 22:31:18 +00:00
<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}}
2023-08-28 04:40:58 +00:00
<a class="settings" href="/settings">
2023-07-03 22:31:18 +00:00
<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}}
2023-07-03 22:31:18 +00:00
<nav>
<a class="selected" href="/devices">Список устройств</a>
{{#if EditTransport}}
<a href="/devices/groups">Группы</a>
{{/if}}
2023-08-08 17:46:12 +00:00
<!-- <a href="/devices/drivers">Водители</a> -->
2023-07-24 04:53:11 +00:00
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
2023-07-03 22:31:18 +00:00
{{#if Update}}
<!-- <a class="update" href="/devices/update">Обновление ПО</a> -->
{{/if}}
2023-07-03 22:31:18 +00:00
</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>
2023-09-19 13:31:40 +00:00
<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}}
2023-09-19 13:31:40 +00:00
</ul>
</li>
{{/each}}
2023-09-19 13:31:40 +00:00
2023-07-03 22:31:18 +00:00
</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>
2023-07-16 16:09:25 +00:00
<th>Статус</th>
2023-07-03 22:31:18 +00:00
<th>Номер SIM-карты</th>
<th>IP-адрес</th>
2023-09-22 19:47:53 +00:00
<th></th>
2023-07-03 22:31:18 +00:00
</tr>
</thead>
<tbody>
<!-- Сюда будут добавляться строки таблицы -->
</tbody>
</table>
</section>
<div id="count">
<!-- Сюда добавится итоговое количество результатов -->
</div>
<div id="pagination">
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
</div>
</section>
</section>
</section>
</section>
2023-09-25 16:37:21 +00:00
2023-07-16 16:09:25 +00:00
2023-09-22 19:47:53 +00:00
<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>
2023-07-16 16:09:25 +00:00
<script>
const devices = [
{{#each Registrars}}
{
2023-09-19 13:31:40 +00:00
number: "{{this.number}}",
2023-07-16 16:09:25 +00:00
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}}
2023-07-16 16:09:25 +00:00
</script>
2023-07-03 22:31:18 +00:00
<script src="../scripts/table.js"></script>
<script src="../scripts/jquery.min.js"></script>
2023-07-16 16:09:25 +00:00
<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>
2023-09-25 16:37:21 +00:00
2023-07-16 16:09:25 +00:00
2023-09-22 19:47:53 +00:00
<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>
2023-07-03 22:31:18 +00:00
<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>
2023-07-16 16:09:25 +00:00
2023-07-03 22:31:18 +00:00
<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>