system parameters, groups, fixes and more

This commit is contained in:
Ivan
2023-09-04 12:11:22 +03:00
parent 82b24eb909
commit 8fea734b31
13 changed files with 862 additions and 507 deletions

View File

@ -72,26 +72,28 @@
</nav>
<section class="bg">
<section class="content">
<section class="for-table">
<section style="min-height: 800px;" class="for-table">
<section class="organisation">
<h1>Организация</h1>
<ul class="area">
<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>
{{#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 Registrars}}
<li class="device">
<img>
<input type="radio" name="camera-serial" id="radio-{{this.serial}}" class="radio-input" value="{{this.serial}}" hidden>
<label for="radio-{{this.serial}}" class="radio-label">
{{this.serial}}
</label>
</li>
{{/each}}
{{#each devices}}
<li class="device">
<img>
<input type="radio" name="camera-serial" id="radio-{{this.serial}}" class="radio-input" value="{{this.serial}}" hidden>
<label for="radio-{{this.serial}}" class="radio-label">
{{this.serial}}
</label>
</li>
{{/each}}
</ul>
</li>
</ul>
{{/each}}
</ul>
</section>
@ -101,16 +103,16 @@
<section class="table" style="position: relative;">
<div class="map">
<div id="properties" class="properties" style="display: none;">
<!-- <div id="properties" class="properties" style="display: none;">
<div class="propert"><h1>Группа</h1><br><h2 id="propert-group">Автобусы</h2></div>
<div class="propert"><h1>Скорость</h1><br><h2 id="propert-speed"> км/ч</h2></div>
<div class="propert"><h1>Номерной знак</h1><br><h2 id="propert-plate"></h2></div>
<div class="propert"><h1>Геопозиция</h1><br><h2 id="propert-geo"></h2></div>
</div>
</div> -->
<div id="map"></div>
</div>
<div class="cameras">
<div class="cameras" id="cameras">
<div class="video-container">
<div id="camera-1" onclick="playVideo(1);">
<img src="../../img/play-circle.svg">
@ -251,6 +253,58 @@
<script src="../scripts/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const areaNames = document.querySelectorAll('.area-name');
areaNames.forEach(function (areaName) {
const areaCheckbox = areaName.querySelector('.checkbox-input');
const deviceCheckboxes = areaName.querySelectorAll('.device .checkbox-input');
const deviceList = areaName.querySelector('.area-devices');
// Функция для скрытия/показа дочерних элементов
function toggleChildDevices(show) {
if (show) {
deviceList.style.display = 'block';
} else {
deviceList.style.display = 'none';
}
}
// Инициализация состояния чекбоксов и скрытия/показа дочерних элементов
toggleChildDevices(areaCheckbox.checked);
deviceCheckboxes.forEach(function (deviceCheckbox) {
deviceCheckbox.checked = areaCheckbox.checked;
});
areaCheckbox.addEventListener('change', function () {
const isChecked = areaCheckbox.checked;
deviceCheckboxes.forEach(function (deviceCheckbox) {
deviceCheckbox.checked = isChecked;
});
toggleChildDevices(isChecked);
});
deviceCheckboxes.forEach(function (deviceCheckbox) {
deviceCheckbox.addEventListener('change', function () {
const allUnchecked = Array.from(deviceCheckboxes).every(function (checkbox) {
return !checkbox.checked;
});
if (allUnchecked) {
areaCheckbox.checked = false;
toggleChildDevices(false);
} else {
areaCheckbox.checked = true;
toggleChildDevices(true);
}
});
});
});
});
</script>
<script>
function combineDateTime(dateString, timeString) {
const date = new Date(dateString);
@ -274,6 +328,7 @@ let HasData;
var selectedChannel = 1;
async function sendPostRequest() {
document.getElementById("cameras").style.opacity = "30%";
// Получение данных из полей ввода
const selectedDate = document.getElementById("selectedDate").value;
const videoTime = document.getElementById("video-time").value;
@ -305,6 +360,8 @@ async function sendPostRequest() {
.then((response) => response.json())
.then((data) => {
document.getElementById("cameras").style.opacity = "100%";
const existingChart = Chart.getChart("speed");
if (existingChart) {