KRBL/ArgusSite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

system parameters, groups, fixes and more

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

112
static/templates/live.html
View File

@ -77,40 +77,29 @@
<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="checkbox" name="devices" id="{{this.id}}" class="checkbox-input device-filter" value="{{this.id}}" hidden checked>
<label for="{{this.id}}" class="checkbox-label active-{{this.status}}">
<div class="checkmark"></div>
</label>
<input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden>
<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 active-{{this.status}}">
{{this.serial}}
</label>
</li>
{{/each}}
<!-- <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> -->
{{#each devices}}
<li class="device">
<img>
<input type="checkbox" name="devices" id="{{this.id}}" class="checkbox-input device-filter" value="{{this.id}}" hidden checked>
<label for="{{this.id}}" class="checkbox-label active-{{this.status}}">
<div class="checkmark"></div>
</label>
<input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden>
<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 active-{{this.status}}">
{{this.serial}}
</label>
</li>
{{/each}}
</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>
</li> -->
</ul>
{{/each}}
</ul>
</section>
@ -200,6 +189,57 @@
<script src="../scripts/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.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>
var cameraSerials = document.querySelectorAll('.radio-input');
@ -367,7 +407,8 @@ const selectedDevices = Array.from(checkboxes)
.map(checkbox => checkbox.value);
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.addEventListener('change', async function() {
await new Promise(resolve => setTimeout(resolve, 100));
selectedDevices.length = 0; // Очищаем массив
selectedDevices.push(...Array.from(checkboxes)
.filter(checkbox => checkbox.checked && checkbox.value !== 'on')
@ -381,9 +422,6 @@ const selectedDevices = Array.from(checkboxes)
function addMarker(device) {
const { serial, status, longitude, latitude, direction, speed } = device;
console.log(serial, status, longitude, latitude, direction, speed)
console.log("Trying add marker")
if (serial === $("input[name=camera-serial]:checked").val()) {
var marker = L.divIcon({
@ -447,7 +485,7 @@ var markerObj = L.marker([latitude, longitude], { icon: marker });
console.log(selectedDevice);
if (selectedDevice) {
// groupElement.textContent = selectedDevice.group;
groupElement.textContent = selectedDevice.group;
speedElement.textContent = selectedDevice.speed + ' км/ч';
plateElement.textContent = selectedDevice.plate;
geoElement.textContent = `${selectedDevice.latitude.toFixed(6)}, ${selectedDevice.longitude.toFixed(6)}`;
@ -574,6 +612,8 @@ closeVideoPopup();
});
</script>
</body>