devices organisation update, map optimize, bug fix
This commit is contained in:
Ivan
parent
c1a4322410
commit
d9cef4dac9
GPG Key ID:
0C191B86D9582583
@ -559,7 +559,7 @@ async function live(req, res) {
|
||||
}));
|
||||
|
||||
const subquery = `
|
||||
SELECT a.evtuuid, a.id, a.cmdno, a.time, a.serial, a.st, r.plate, g.latitude, g.longitude
|
||||
SELECT a.evtuuid, a.id, a.cmdno, a.time, a.serial, a.st, r.plate, r.number, g.latitude, g.longitude
|
||||
FROM (
|
||||
SELECT DISTINCT ON (evtuuid) evtuuid, id, cmdno, time, serial, st
|
||||
FROM alarms
|
||||
@ -697,6 +697,7 @@ async function live(req, res) {
|
||||
id: alarm.id,
|
||||
cmdno: alarm.cmdno,
|
||||
time: formatDate(alarm.time),
|
||||
number: alarm.number,
|
||||
serial: alarm.serial,
|
||||
st: alarm.st,
|
||||
type: type,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
let tableHeight = document.getElementById("content").offsetHeight;
|
||||
let rowHeight = 60;
|
||||
let rowHeight = 75;
|
||||
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
|
||||
let filteredUsers = [...users];
|
||||
let timeRangeStart = null;
|
||||
@ -110,7 +110,7 @@ function getRandomColor() {
|
||||
|
||||
window.addEventListener("resize", function (event) {
|
||||
tableHeight = document.getElementById("content").offsetHeight;
|
||||
rowHeight = 60;
|
||||
rowHeight = 75;
|
||||
rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
|
||||
createTable();
|
||||
createPagination();
|
||||
|
||||
@ -519,6 +519,32 @@ header img {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.organisation .checkbox-name {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 150px !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.organisation .checkbox-label .text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.organisation .checkbox-label .text.animated {
|
||||
animation: moveText 6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes moveText {
|
||||
0%, 100% {
|
||||
transform: translateX(5%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(calc(150px - 105%));
|
||||
}
|
||||
}
|
||||
|
||||
.permission-group .checkbox-label {
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
{{#each serials}}
|
||||
{{#if this.checked}}
|
||||
@ -257,6 +257,22 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('user-edit').addEventListener('click', function() {
|
||||
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></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">
|
||||
@ -212,6 +212,22 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
@ -293,7 +309,6 @@ $.ajax({
|
||||
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) {
|
||||
|
||||
@ -242,7 +242,6 @@
|
||||
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) {
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
{{#each devices}}
|
||||
<li class="device">
|
||||
@ -96,12 +96,13 @@
|
||||
<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}}">
|
||||
<span class="text">
|
||||
{{#if this.number}}
|
||||
{{this.number}}
|
||||
{{else}}
|
||||
{{this.serial}}
|
||||
{{/if}}
|
||||
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
{{/each}}
|
||||
@ -141,7 +142,11 @@
|
||||
<label for="signal-{{this.id}}">
|
||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 19">
|
||||
<path fill="#000" fill-opacity=".75" d="M4.58 6.143c-.078.341.068.478.44.459 1.562-.108 3.418-.196 6.533-.196 3.125 0 4.98.088 6.543.196.361.02.508-.118.43-.46-.235-1.035-.684-2.382-.997-2.92-.254-.439-.537-.634-1.045-.702-.703-.098-2.304-.166-4.931-.166-2.617 0-4.219.068-4.932.166-.508.068-.79.263-1.045.703-.312.537-.752 1.884-.996 2.92Zm-.068 6.65c.888 0 1.572-.684 1.572-1.572 0-.899-.684-1.573-1.572-1.573-.889 0-1.573.674-1.573 1.573 0 .888.684 1.572 1.573 1.572Zm4.463-.39h5.166c.664 0 1.123-.46 1.123-1.133 0-.665-.46-1.123-1.123-1.123H8.975c-.674 0-1.133.458-1.133 1.123 0 .673.459 1.132 1.133 1.132Zm9.619.39c.898 0 1.572-.684 1.572-1.572 0-.899-.674-1.573-1.572-1.573-.889 0-1.563.674-1.563 1.573 0 .888.674 1.572 1.563 1.572Zm-7.041 2.637c3.281 0 7.646-.166 9.492-.381 1.328-.147 2.06-.88 2.06-2.13v-1.718c0-1.65-.332-2.568-1.23-3.74l-.83-1.065c-.352-1.757-1.006-3.603-1.338-4.326C19.18.967 18.174.313 16.875.137 16.221.049 14.082 0 11.553 0 9.033 0 6.895.059 6.24.137 4.941.293 3.926.967 3.408 2.07c-.342.723-.986 2.569-1.347 4.326l-.82 1.065C.331 8.633 0 9.55 0 11.2v1.719c0 1.25.742 1.982 2.06 2.129 1.856.215 6.211.38 9.493.38Zm0-1.28c-3.32 0-7.578-.156-9.15-.351-.83-.098-1.124-.527-1.124-1.27v-1.328c0-1.338.215-1.963.977-2.959l.996-1.308c.264-1.416.898-3.39 1.318-4.288.313-.673.928-1.093 1.817-1.2.625-.079 2.607-.167 5.166-.167 2.568 0 4.58.088 5.146.166.918.117 1.524.537 1.846 1.201.42.899 1.055 2.872 1.308 4.288l1.006 1.308c.752.996.967 1.621.967 2.96v1.327c0 .742-.293 1.172-1.123 1.27-1.562.195-5.83.351-9.15.351Zm-9.756 3.965h1.142c.733 0 1.3-.566 1.3-1.289v-2.324l-3.741-.537v2.861c0 .723.566 1.29 1.299 1.29Zm18.369 0h1.152a1.27 1.27 0 0 0 1.29-1.289v-2.861l-3.731.537v2.324a1.27 1.27 0 0 0 1.289 1.29Z"/>
|
||||
</svg>{{this.serial}}</p>
|
||||
</svg>{{#if this.number}}
|
||||
{{this.number}}
|
||||
{{else}}
|
||||
{{this.serial}}
|
||||
{{/if}}</p>
|
||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" fill="none" viewBox="0 0 13 14">
|
||||
<path fill="rgba(255, 106, 75, 0.8)" fill-opacity=".85" d="M0 10.722c0 .494.386.82 1.04.82h2.908c.055 1.307 1.095 2.451 2.549 2.451 1.46 0 2.5-1.138 2.555-2.452h2.908c.647 0 1.04-.325 1.04-.82 0-.677-.703-1.286-1.295-1.889-.455-.467-.579-1.429-.634-2.208-.048-2.668-.75-4.389-2.583-5.04C8.253.699 7.516 0 6.497 0 5.484 0 4.74.698 4.512 1.585c-1.832.65-2.535 2.37-2.583 5.04-.055.778-.18 1.74-.634 2.207C.695 9.435 0 10.044 0 10.722Zm1.337-.203v-.082c.124-.196.537-.596.895-.989.496-.541.73-1.415.792-2.736.055-2.96.951-3.901 2.13-4.22.171-.04.268-.121.275-.298.02-.704.434-1.198 1.068-1.198.64 0 1.047.494 1.074 1.198.007.177.097.258.269.299 1.185.318 2.08 1.26 2.136 4.22.062 1.32.296 2.194.785 2.735.365.393.772.793.896.99v.08H1.337Zm3.685 1.022h2.956c-.055.922-.648 1.497-1.481 1.497-.827 0-1.427-.575-1.475-1.497Z"/>
|
||||
</svg>{{this.type}}</p>
|
||||
@ -189,6 +194,22 @@
|
||||
<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 () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const leftSlider = document.getElementById("left-slider");
|
||||
@ -504,6 +525,27 @@ var markerObj = L.marker([latitude, longitude], { icon: marker });
|
||||
markers = [];
|
||||
}
|
||||
|
||||
fetch('/devices-geo', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ devices: selectedDevices }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.devicesData.length > 0) {
|
||||
const firstDevice = data.devicesData[0];
|
||||
map.setView([firstDevice.latitude, firstDevice.longitude], 12);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка при получении данных:', error);
|
||||
|
||||
const propertiesDiv = document.getElementById('properties');
|
||||
propertiesDiv.style.display = 'none';
|
||||
});
|
||||
|
||||
function fetchAndShowMarkers() {
|
||||
fetch('/devices-geo', {
|
||||
method: 'POST',
|
||||
@ -664,5 +706,6 @@ closeVideoPopup();
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></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">
|
||||
@ -172,6 +172,22 @@
|
||||
|
||||
<script src="../scripts/table-reports.js"></script>
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// Скрытие/Показ дополнительных меню аккаунта
|
||||
const accountMain = document.getElementById('account-main');
|
||||
@ -200,7 +216,7 @@
|
||||
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) {
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
{{#each devices}}
|
||||
<li class="device">
|
||||
@ -257,6 +257,22 @@
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function updateCameraOptions() {
|
||||
var selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
|
||||
@ -495,6 +511,12 @@ async function sendPostRequest() {
|
||||
// Создаем линию маршрута
|
||||
const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer);
|
||||
|
||||
// Находим границы координат для центрирования карты
|
||||
const bounds = L.latLngBounds(routePoints);
|
||||
|
||||
// Центрируем карту по первой координате
|
||||
map.fitBounds(bounds, { padding: [50, 50] });
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
<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>
|
||||
<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 checkbox-name"><span class="text">{{name}}</span></label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
{{#each devices}}
|
||||
<li class="device">
|
||||
@ -235,6 +235,22 @@
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var containers = document.querySelectorAll('.checkbox-name');
|
||||
|
||||
containers.forEach(function (container) {
|
||||
var text = container.querySelector('.text');
|
||||
|
||||
if (text.clientWidth > container.clientWidth) {
|
||||
text.classList.add('animated');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function updateCameraOptions() {
|
||||
var selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
|
||||
@ -468,6 +484,12 @@ async function sendPostRequest() {
|
||||
// Создаем линию маршрута
|
||||
const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer);
|
||||
|
||||
// Находим границы координат для центрирования карты
|
||||
const bounds = L.latLngBounds(routePoints);
|
||||
|
||||
// Центрируем карту по первой координате
|
||||
map.fitBounds(bounds, { padding: [50, 50] });
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user