device status upd, markers upd
This commit is contained in:
Ivan
parent
ce9f4293ea
commit
dfc8c52d6a
GPG Key ID:
0C191B86D9582583
59
server.js
59
server.js
@ -115,14 +115,17 @@ async function live(req, res) {
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
const minuteInMillis = 60 * 1000;
|
||||
|
||||
const query = `
|
||||
SELECT id, serial FROM registrars ORDER BY id ASC
|
||||
SELECT id, serial, lastkeepalive FROM registrars ORDER BY id ASC
|
||||
`;
|
||||
const registrars = await client.query(query);
|
||||
|
||||
templateData.Registrars = registrars.rows.map((row) => ({
|
||||
id: row.id,
|
||||
serial: row.serial,
|
||||
status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis,
|
||||
}));
|
||||
|
||||
console.log(templateData);
|
||||
@ -481,28 +484,24 @@ async function devices(req, res) {
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
// Выполняем два запроса и получаем результаты
|
||||
const queryConnected = `
|
||||
SELECT id, serial, connected, name, "group", plate, sim, ip, port
|
||||
|
||||
const minuteInMillis = 60 * 1000;
|
||||
|
||||
// Выполняем запрос, чтобы получить все данные из таблицы registrars
|
||||
const queryRegistrars = `
|
||||
SELECT id, serial, lastkeepalive, name, "group", plate, sim, ip, port
|
||||
FROM registrars
|
||||
WHERE connected = true
|
||||
ORDER BY id
|
||||
`;
|
||||
const queryDisconnected = `
|
||||
SELECT id, serial, connected, name, "group", plate, sim, ip, port
|
||||
FROM registrars
|
||||
WHERE connected = false
|
||||
ORDER BY id
|
||||
`;
|
||||
const connectedRegistrars = await client.query(queryConnected);
|
||||
const disconnectedRegistrars = await client.query(queryDisconnected);
|
||||
|
||||
templateData.Registrars = [
|
||||
...connectedRegistrars.rows.map((registrar) => ({
|
||||
const registrarsResult = await client.query(queryRegistrars);
|
||||
const allRegistrars = registrarsResult.rows;
|
||||
|
||||
// Определяем статус connected на основе lastkeepalive
|
||||
const templateData = {
|
||||
Registrars: allRegistrars.map((registrar) => ({
|
||||
id: registrar.id,
|
||||
serial: registrar.serial,
|
||||
status: registrar.connected,
|
||||
status: Date.now() - Date.parse(registrar.lastkeepalive) <= minuteInMillis,
|
||||
name: registrar.name,
|
||||
group: registrar.group,
|
||||
plate: registrar.plate,
|
||||
@ -510,29 +509,15 @@ async function devices(req, res) {
|
||||
ip: registrar.ip,
|
||||
port: registrar.port,
|
||||
})),
|
||||
...disconnectedRegistrars.rows.map((registrar) => ({
|
||||
id: registrar.id,
|
||||
serial: registrar.serial,
|
||||
status: registrar.connected,
|
||||
name: registrar.name,
|
||||
group: registrar.group,
|
||||
plate: registrar.plate,
|
||||
sim: registrar.sim,
|
||||
ip: registrar.ip,
|
||||
port: registrar.port,
|
||||
})),
|
||||
];
|
||||
|
||||
};
|
||||
|
||||
console.log(templateData);
|
||||
|
||||
const source = fs.readFileSync(
|
||||
"static/templates/devices/index.html",
|
||||
"utf8"
|
||||
);
|
||||
|
||||
const source = fs.readFileSync("static/templates/devices/index.html", "utf8");
|
||||
const template = handlebars.compile(source);
|
||||
const resultT = template(templateData);
|
||||
res.send(resultT);
|
||||
|
||||
|
||||
client.release();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
@ -420,6 +420,10 @@ header h2 span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active-false {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.device img {
|
||||
margin-left: -22px;
|
||||
padding-right: 7px;
|
||||
|
||||
@ -84,11 +84,11 @@
|
||||
<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">
|
||||
<label for="{{this.id}}" class="checkbox-label active-{{this.status}}">
|
||||
<div class="checkmark"></div>
|
||||
</label>
|
||||
<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">
|
||||
<label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
|
||||
{{this.serial}}
|
||||
</label>
|
||||
</li>
|
||||
@ -305,7 +305,7 @@
|
||||
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
<!-- <script>
|
||||
var serial;
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const radioInputs = document.querySelectorAll(".radio-input");
|
||||
@ -316,7 +316,7 @@
|
||||
serial = $("input[name=camera-serial]:checked").val()
|
||||
playflv();
|
||||
});
|
||||
</script>
|
||||
</script> -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
|
||||
<script>
|
||||
let flvPlayers = [];
|
||||
@ -402,6 +402,15 @@
|
||||
serial = $("input[name=camera-serial]:checked").val()
|
||||
stopAllCameras();
|
||||
playflv();
|
||||
|
||||
var svgId = "marker-" + serial;
|
||||
var svgElement = document.getElementById(svgId);
|
||||
if (svgElement) {
|
||||
svgElement.innerHTML = `
|
||||
<path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/>
|
||||
<path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/>
|
||||
`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -508,7 +517,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
.then(data => {
|
||||
console.log(data.devicesData);
|
||||
data.devicesData.forEach(device => {
|
||||
const { longitude, latitude, direction, speed } = device;
|
||||
const { serial, longitude, latitude, direction, speed } = device;
|
||||
var newDirection = direction + 90
|
||||
console.log(newDirection);
|
||||
|
||||
@ -516,7 +525,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
const el = document.createElement('div');
|
||||
el.className = 'marker';
|
||||
// el.style.transform = `rotate(${direction / 100}deg)`;
|
||||
el.innerHTML = `<svg style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
el.innerHTML = `<svg id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
<path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
|
||||
<path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
|
||||
</svg><br><span class="speed">${speed} км/ч</span>`;
|
||||
@ -542,7 +551,7 @@ function updateMapMarkers(devicesData) {
|
||||
|
||||
// Создание новых маркеров на карте на основе полученных данных
|
||||
devicesData.forEach(device => {
|
||||
const { longitude, latitude, direction, speed } = device;
|
||||
const { serial, longitude, latitude, direction, speed } = device;
|
||||
var newDirection = direction + 90
|
||||
console.log(newDirection);
|
||||
|
||||
@ -550,7 +559,7 @@ function updateMapMarkers(devicesData) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'marker';
|
||||
// el.style.transform = `rotate(${direction}deg)`;
|
||||
el.innerHTML = `<svg style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
el.innerHTML = `<svg id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
<path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
|
||||
<path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
|
||||
</svg><br><span class="speed">${speed} км/ч</span>`;
|
||||
@ -563,6 +572,16 @@ function updateMapMarkers(devicesData) {
|
||||
// Добавление маркера в массив markers
|
||||
markers.push(marker);
|
||||
});
|
||||
serial = $("input[name=camera-serial]:checked").val()
|
||||
|
||||
var svgId = "marker-" + serial;
|
||||
var svgElement = document.getElementById(svgId);
|
||||
if (svgElement) {
|
||||
svgElement.innerHTML = `
|
||||
<path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/>
|
||||
<path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user