KRBL/ArgusSite
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity
087e28dbb3
ArgusSite/static/templates/reports/index.html

277 lines
12 KiB
HTML
Raw Normal View History

first commit
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>
<h1>Аргус</h1>
devices from DB, updating device info
2023-07-16 16:09:25 +00:00
<h2><span>/</span> {{Organisation}}</h2>
first commit
2023-07-03 22:31:18 +00:00
</header>
<section class="account-info">
<div id="account-main">
<img id="person" src="../img/person.svg">
devices from DB, updating device info
2023-07-16 16:09:25 +00:00
<span>{{User}}</span>
first commit
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="/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 class="selected"><img src="../img/bubble.svg">Отчёты</div>
</a>
<a href="/live">
<div><img src="../img/waves.svg">Трансляция</div>
</a>
archive, bug fixes
2023-08-21 03:28:58 +00:00
<a href="/videos">
first commit
2023-07-03 22:31:18 +00:00
<div><img src="../img/play.svg">Записи</div>
</a>
settings, more live videos, graphs
2023-08-28 04:40:58 +00:00
<a class="settings" href="/settings">
first commit
2023-07-03 22:31:18 +00:00
<div><img src="../img/gear.svg">Настройки</div>
</a>
</section>
<section class="main">
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
{{#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}}
first commit
2023-07-03 22:31:18 +00:00
<div class="name">
<span>Отчёты</span>
</div>
<nav>
<a class="selected" href="/reports">Предупреждения</a>
</nav>
<section class="bg">
<section class="content">
<section class="for-table">
<section class="organisation">
<h1>Организация</h1>
<ul class="area">
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
<!-- <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>
first commit
2023-07-03 22:31:18 +00:00
<ul class="area-devices" id="devices-1">
<li class="device"><img><input type="checkbox" id="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
<li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</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="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li>
<li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li>
<li class="device"><img><input type="checkbox" id="0005" class="checkbox-input device-filter" value="0005" hidden checked><label for="0005" class="checkbox-label"><div class="checkmark"></div>0005</label></li>
<li class="device"><img><input type="checkbox" id="0006" class="checkbox-input device-filter" value="0006" hidden checked><label for="0006" class="checkbox-label"><div class="checkmark"></div>0006</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="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li>
</ul>
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
</li> -->
first commit
2023-07-03 22:31:18 +00:00
</ul>
<div class="area-time-range">
<div class="time-range"><label for="timeRangeStart">с</label><input id="timeRangeStart" name="timeRangeStart" type="datetime-local"></div>
<div class="time-range"><label for="timeRangeEnd">до</label><input id="timeRangeEnd" name="timeRangeEnd" type="datetime-local"></div>
</div>
</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>Наименование</th>
<th>ID</th>
<th>Номерной знак</th>
<th>Серийный номер</th>
<th>Время</th>
<th>Местоположение</th>
<th><button id="share-device-all" value="share-device-all" class="share" onclick="location.href = '/reports/346';"></button></th>
</tr>
</thead>
<tbody>
<!-- Сюда будут добавляться строки таблицы -->
</tbody>
</table>
</section>
<div id="count">
<!-- Сюда добавится итоговое количество результатов -->
</div>
<div id="pagination">
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
</div>
alarms update
2023-08-07 01:15:36 +00:00
<!-- <br>
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
<br>
alarms update
2023-08-07 01:15:36 +00:00
<span style="opacity:50%">Временное ограничение: 100 последних предупреждений</span> -->
first commit
2023-07-03 22:31:18 +00:00
</section>
</section>
</section>
</section>
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
<script>
devices from DB, updating device info
2023-07-16 16:09:25 +00:00
const devices = [
{{#each Alarms}}
{
id: "{{this.id}}",
cmdno: "{{this.cmdno}}",
time: "{{this.time}}",
serial: "{{this.serial}}",
type: "{{this.type}}",
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
geo: "{{this.geo}}",
plate: "{{this.plate}}",
devices from DB, updating device info
2023-07-16 16:09:25 +00:00
},
{{/each}}
];
devices, drivers, alerts and more
2023-07-24 04:53:11 +00:00
</script>
devices from DB, updating device info
2023-07-16 16:09:25 +00:00
first commit
2023-07-03 22:31:18 +00:00
<script src="../scripts/table-reports.js"></script>
<script src="../scripts/jquery.min.js"></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>
Reference in New Issue Copy Permalink