system parameters, groups, fixes and more
This commit is contained in:
@ -79,25 +79,15 @@
|
||||
<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>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
<li class="device"><img><input type="checkbox" id="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Автобусы</label></li>
|
||||
<!-- <li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</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="2-device-1" class="checkbox-input device-filter" value="2-device-1" hidden checked><label for="2-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-2" class="checkbox-input device-filter" value="2-device-2" hidden checked><label for="2-device-2" class="checkbox-label"><div class="checkmark"></div>Электробусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" class="checkbox-label"><div class="checkmark"></div>Старые ТС</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="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
|
||||
</ul>
|
||||
</li> -->
|
||||
{{#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 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"><div class="checkmark"></div>{{this}}</label></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
@ -161,6 +151,8 @@
|
||||
<input name="newStage" type="radio" value="ts" id="stage-ts"><label for="stage-ts">Транспортное средство</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="equipment" id="stage-equipment"><label for="stage-equipment">Оборудование</label>
|
||||
<br>
|
||||
<input name="newStage" type="radio" value="parameters" id="stage-parameters"><label style="margin-top: 115%;" for="stage-parameters">Системные настройки</label>
|
||||
</section>
|
||||
</section>
|
||||
<section id="add-new-container" class="add-new">
|
||||
@ -209,7 +201,7 @@
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required readonly>
|
||||
<input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
@ -417,6 +409,83 @@
|
||||
|
||||
</form>
|
||||
|
||||
<div id="parameters" class="new-parameters">
|
||||
|
||||
<h1>Системные настройки</h1>
|
||||
<h2>Параметры регистраторов</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<div class="parameters-input">
|
||||
<label for="system-date">Формат даты</label>
|
||||
<select name="DATEMOD" id="system-date">
|
||||
<option value="0">ММ-ДД-ГГГГ</option>
|
||||
<option value="1">ГГГГ-ММ-ДД</option>
|
||||
<option value="2">ДД-ММ-ГГГГ</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="system-time">Формат времени</label>
|
||||
<select name="TIMEFORMAT" id="system-time">
|
||||
<option value="0">24 ч</option>
|
||||
<option value="1">12 ч</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="system-video">Формат видео</label>
|
||||
<select name="VIDEOFORMAT" id="system-video">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="system-stream">Формат трансляции</label>
|
||||
<select name="SUBSTREAMMODE" id="system-stream">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="system-language">Язык системы</label>
|
||||
<select name="LANGUAGE" id="system-language">
|
||||
<option value="1">Английский</option>
|
||||
<option value="12">Русский</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="system-geo">Определение геопозиции</label>
|
||||
<select name="GEOMOD" id="system-geo">
|
||||
<option value="0">GPS</option>
|
||||
<option value="1">BEIDO</option>
|
||||
<option value="2">GALILEO</option>
|
||||
<option value="3">GLENAS</option>
|
||||
<option value="4">Смешанное</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<h2 style="margin-bottom: 5px;">Отметьте то, что должно отображаться на трансляции</h2>
|
||||
|
||||
<input type="checkbox" id="TE" class="checkbox-input" hidden><label for="TE" class="checkbox-label"><div class="checkmark"></div>Время</label>
|
||||
<input type="checkbox" id="SE" class="checkbox-input" hidden><label for="SE" class="checkbox-label"><div class="checkmark"></div>Скорость</label>
|
||||
<input type="checkbox" id="VE" class="checkbox-input" hidden><label for="VE" class="checkbox-label"><div class="checkmark"></div>Номер ТС</label>
|
||||
<input type="checkbox" id="GE" class="checkbox-input" hidden><label for="GE" class="checkbox-label"><div class="checkmark"></div>Координаты</label>
|
||||
<input type="checkbox" id="NE" class="checkbox-input" hidden><label for="NE" class="checkbox-label"><div class="checkmark"></div>Названия камер</label>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-parameters" onclick="sendPutRequest();" type="button">Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -450,6 +519,79 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Функция для отправки PUT запроса
|
||||
async function sendPutRequest() {
|
||||
const dateModSelect = document.getElementById('system-date');
|
||||
const timeFormatSelect = document.getElementById('system-time');
|
||||
const videoFormatSelect = document.getElementById('system-video');
|
||||
const streamFormatSelect = document.getElementById('system-stream');
|
||||
const languageSelect = document.getElementById('system-language');
|
||||
const geoModSelect = document.getElementById('system-geo');
|
||||
|
||||
// Извлекаем значения выбранных опций
|
||||
const DATEMOD = dateModSelect.value;
|
||||
const TIMEFORMAT = timeFormatSelect.value;
|
||||
const VIDEOFORMAT = videoFormatSelect.value;
|
||||
const SUBSTREAMMODE = streamFormatSelect.value;
|
||||
const LANGUAGE = languageSelect.value;
|
||||
const GEOMOD = geoModSelect.value;
|
||||
|
||||
// Извлекаем значения чекбоксов
|
||||
const NE = document.getElementById('NE').checked ? 1 : 0;
|
||||
const TE = document.getElementById('TE').checked ? 1 : 0;
|
||||
const VE = document.getElementById('VE').checked ? 1 : 0;
|
||||
const SE = document.getElementById('SE').checked ? 1 : 0;
|
||||
const GE = document.getElementById('GE').checked ? 1 : 0;
|
||||
|
||||
|
||||
const serial = $("#parameters-serial").val();
|
||||
|
||||
// Создаем объект данных для PUT запроса
|
||||
const requestData = {
|
||||
DATEMOD,
|
||||
TIMEFORMAT,
|
||||
VIDEOFORMAT,
|
||||
SUBSTREAMMODE,
|
||||
LANGUAGE,
|
||||
GEOMOD,
|
||||
NE,
|
||||
TE,
|
||||
VE,
|
||||
SE,
|
||||
GE,
|
||||
};
|
||||
|
||||
// console.log(requestData);
|
||||
|
||||
try {
|
||||
// Отправляем PUT запрос
|
||||
const response = await fetch(`/device-parameters?serial=${serial}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestData),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// PUT запрос выполнен успешно
|
||||
var formContainer = $("#form-bg");
|
||||
var form = $("#form");
|
||||
formContainer.removeClass("active");
|
||||
form.removeClass("form-animation");
|
||||
$("body").css("overflow", "auto");
|
||||
console.log('PUT запрос выполнен успешно');
|
||||
// Здесь вы можете выполнить дополнительные действия, если необходимо
|
||||
} else {
|
||||
console.error('Ошибка при выполнении PUT запроса');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Произошла ошибка при отправке PUT запроса:', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('edit-form');
|
||||
const sendButton = document.getElementById('send-form');
|
||||
@ -554,6 +696,8 @@
|
||||
content3.style.display = "none";
|
||||
content4.style.opacity = 0;
|
||||
content4.style.display = "none";
|
||||
content5.style.opacity = 0;
|
||||
content5.style.display = "none";
|
||||
|
||||
document.getElementById("stage-details").checked = true;
|
||||
|
||||
@ -561,14 +705,57 @@
|
||||
formContainer.addClass("active");
|
||||
form.addClass("form-animation");
|
||||
$("body").css("overflow", "hidden");
|
||||
|
||||
const requestBody = {
|
||||
"serial": $("#parameters-serial").val(),
|
||||
"FIELDS": [
|
||||
"DATEMOD",
|
||||
"TIMEFORMAT",
|
||||
"LANGUAGE",
|
||||
"VIDEOFORMAT",
|
||||
"GEOMOD",
|
||||
"SUBSTREAMMODE",
|
||||
"DISPLAYMENU"
|
||||
]
|
||||
};
|
||||
|
||||
console.log(requestBody);
|
||||
|
||||
// Отправляем POST-запрос
|
||||
fetch('/device-parameters', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Заполняем поля input данными из ответа
|
||||
document.getElementById('system-date').value = data.DATEMOD;
|
||||
document.getElementById('system-time').value = data.TIMEFORMAT;
|
||||
document.getElementById('system-language').value = data.LANGUAGE;
|
||||
document.getElementById('system-video').value = data.VIDEOFORMAT;
|
||||
document.getElementById('system-geo').value = data.GEOMOD;
|
||||
document.getElementById('system-stream').value = data.SUBSTREAMMODE;
|
||||
document.getElementById('NE').checked = data.DISPLAYMENU.NE === 1;
|
||||
document.getElementById('TE').checked = data.DISPLAYMENU.TE === 1;
|
||||
document.getElementById('VE').checked = data.DISPLAYMENU.VE === 1;
|
||||
document.getElementById('SE').checked = data.DISPLAYMENU.SE === 1;
|
||||
document.getElementById('GE').checked = data.DISPLAYMENU.GE === 1;
|
||||
})
|
||||
.catch(error => console.error('Ошибка:', error));
|
||||
},
|
||||
error: function() {
|
||||
// Обработка ошибки при запросе к серверу
|
||||
alert("Произошла ошибка при запросе к серверу.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var formContainer = $("#form-bg");
|
||||
var form = $("#form");
|
||||
|
@ -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>
|
||||
|
@ -74,26 +74,16 @@
|
||||
<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">
|
||||
<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 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"><div class="checkmark"></div>{{this}}</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>
|
||||
|
||||
<div class="area-time-range">
|
||||
<div class="time-range"><label for="timeRangeStart">с</label><input id="timeRangeStart" name="timeRangeStart" type="datetime-local"></div>
|
||||
|
@ -53,6 +53,23 @@
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<section style="display: none;" class="dberror" id="exportLoading" >
|
||||
<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>
|
||||
<h1>Подготовка видео</h1> <br>
|
||||
<span id="status">Пожалуйста, подождите..</span>
|
||||
</div>
|
||||
</section>
|
||||
{{#if ifDBError}}
|
||||
<section class="dberror">
|
||||
<div class="erorr-container">
|
||||
@ -72,26 +89,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 +120,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 id="cameras" class="cameras">
|
||||
<div class="video-container">
|
||||
<div id="camera-1" onclick="playVideo(1);">
|
||||
<img src="../../img/play-circle.svg">
|
||||
@ -254,6 +273,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);
|
||||
@ -280,6 +351,7 @@ 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;
|
||||
@ -296,6 +368,8 @@ async function sendPostRequest() {
|
||||
|
||||
HasData = data.success;
|
||||
|
||||
|
||||
|
||||
if (data.success) {
|
||||
console.log(`Данные доступны. DATAID: ${data.dataId}`)
|
||||
recordID = data.dataId;
|
||||
@ -304,6 +378,8 @@ async function sendPostRequest() {
|
||||
datetime: combinedDateTime,
|
||||
};
|
||||
|
||||
|
||||
|
||||
fetch("/getspeedarchive", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
@ -314,6 +390,8 @@ async function sendPostRequest() {
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
|
||||
document.getElementById("cameras").style.opacity = "100%";
|
||||
|
||||
const existingChart = Chart.getChart("speed");
|
||||
|
||||
if (existingChart) {
|
||||
@ -570,6 +648,7 @@ endVideoTimeInput.addEventListener("change", sendPostRequest);
|
||||
|
||||
|
||||
async function playVideo(channel) {
|
||||
document.getElementById("exportLoading").style.display = 'flex';
|
||||
const selectedDevice = document.querySelector('input[name="camera-serial"]:checked');
|
||||
if (!selectedDevice) {
|
||||
alert('Пожалуйста, выберите устройство из списка.');
|
||||
@ -591,14 +670,12 @@ endVideoTimeInput.addEventListener("change", sendPostRequest);
|
||||
const endTime = formatTime(endTimeInput.value);
|
||||
const selectedDate = formatDate(selectedDateInput.value);
|
||||
|
||||
selectedChannel = channel;
|
||||
|
||||
const reqDate = document.getElementById("selectedDate").value;
|
||||
const reqTime = document.getElementById("video-time").value;
|
||||
const reqSerial = document.querySelector('input[name="camera-serial"]:checked').value;
|
||||
|
||||
|
||||
const finalResponse = await fetch(`/getData?serial=${reqSerial}&selectedDate=${formatDate(reqDate)}&selectedTime=${formatTime(reqTime)}&selectedChannel=${selectedChannel}`);
|
||||
const finalResponse = await fetch(`/getData?serial=${reqSerial}&selectedDate=${formatDate(reqDate)}&selectedTime=${formatTime(reqTime)}&selectedChannel=${channel}`);
|
||||
|
||||
const resData = await finalResponse.json();
|
||||
|
||||
@ -606,6 +683,7 @@ endVideoTimeInput.addEventListener("change", sendPostRequest);
|
||||
const serial = selectedDevice.value;
|
||||
|
||||
const url = `http://localhost:8081/export?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fdownload.flv%3Fserial%3D${serial}%26channel%3D${channel}%26queryTime%3D${selectedDate}%26startTime%3D${startTime}%26endTime%3D${endTime}%26recordID%3D${resData.dataId}`;
|
||||
document.getElementById("exportLoading").style.display = 'none';
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
</script>
|
||||
|
@ -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) {
|
||||
|
Reference in New Issue
Block a user