added device number parametr

This commit is contained in:
Ivan 2023-09-19 16:31:40 +03:00
parent 0b34293389
commit 9c56099c33
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
9 changed files with 139 additions and 56 deletions

View File

@ -556,7 +556,7 @@ async function live(req, res) {
} }
const query = ` const query = `
SELECT id, serial, channels, lastkeepalive FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} ORDER BY id ASC SELECT id, serial, channels, lastkeepalive, number FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} ORDER BY id ASC
`; `;
const registrars = await client.query(query, templateData.isAdmin ? [] : [serialValues]); const registrars = await client.query(query, templateData.isAdmin ? [] : [serialValues]);
@ -565,6 +565,7 @@ async function live(req, res) {
serial: row.serial, serial: row.serial,
channels: row.channels, channels: row.channels,
status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis, status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis,
number: row.number,
})); }));
const subquery = ` const subquery = `
@ -729,7 +730,7 @@ async function live(req, res) {
// Выполняем запрос, чтобы получить все данные из таблицы registrars // Выполняем запрос, чтобы получить все данные из таблицы registrars
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''}
ORDER BY id ORDER BY id
`; `;
@ -753,6 +754,7 @@ async function live(req, res) {
sim: registrar.sim, sim: registrar.sim,
ip: registrar.ip, ip: registrar.ip,
port: registrar.port, port: registrar.port,
number: registrar.number,
}); });
}); });
@ -810,7 +812,7 @@ app.post("/devices-geo", async (req, res) => {
.map((_, index) => `$${index + 1}`) .map((_, index) => `$${index + 1}`)
.join(","); .join(",");
const subquery = ` const subquery = `
SELECT g.serial, g.longitude, g.latitude, g.direction, g.speed, r.lastkeepalive, r.plate, r.group SELECT g.serial, g.longitude, g.latitude, g.direction, g.speed, r.lastkeepalive, r.plate, r.group, r.number
FROM geo g FROM geo g
INNER JOIN ( INNER JOIN (
SELECT serial, MAX(time) AS time SELECT serial, MAX(time) AS time
@ -846,6 +848,7 @@ pool.query(subquery, selectedDevices, (err, result) => {
direction: row.direction, direction: row.direction,
speed: row.speed, speed: row.speed,
status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis, status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis,
number: row.number,
plate: row.plate, plate: row.plate,
group: row.group, group: row.group,
}; };
@ -1057,7 +1060,7 @@ async function reports(req, res) {
// Выполняем запрос, чтобы получить все данные из таблицы registrars // Выполняем запрос, чтобы получить все данные из таблицы registrars
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''}
ORDER BY id ORDER BY id
`; `;
@ -1065,17 +1068,21 @@ async function reports(req, res) {
const allRegistrars = registrarsResult.rows; const allRegistrars = registrarsResult.rows;
const groupedRegistrars = {}; const groupedRegistrars = {};
const groupedNumbers = {};
allRegistrars.forEach((registrar) => { allRegistrars.forEach((registrar) => {
const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна
if (!groupedRegistrars[groupName]) { if (!groupedRegistrars[groupName]) {
groupedRegistrars[groupName] = []; groupedRegistrars[groupName] = [];
groupedNumbers[groupName] = [];
} }
groupedRegistrars[groupName].push(registrar.serial); groupedRegistrars[groupName].push(registrar.serial);
groupedNumbers[groupName].push(registrar.number);
}); });
templateData.Groups = Object.keys(groupedRegistrars).map((groupName) => ({ templateData.Groups = Object.keys(groupedRegistrars).map((groupName) => ({
name: groupName, name: groupName,
serials: groupedRegistrars[groupName], serials: groupedRegistrars[groupName],
numbers: groupedNumbers[groupName],
})); }));
const source = fs.readFileSync( const source = fs.readFileSync(
@ -1877,7 +1884,7 @@ async function devices(req, res) {
const minuteInMillis = 90 * 1000; const minuteInMillis = 90 * 1000;
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''}
ORDER BY id ORDER BY id
`; `;
@ -1885,12 +1892,15 @@ async function devices(req, res) {
const allRegistrars = registrarsResult.rows; const allRegistrars = registrarsResult.rows;
const groupedRegistrars = {}; const groupedRegistrars = {};
const groupedNumbers = {};
allRegistrars.forEach((registrar) => { allRegistrars.forEach((registrar) => {
const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна
if (!groupedRegistrars[groupName]) { if (!groupedRegistrars[groupName]) {
groupedRegistrars[groupName] = []; groupedRegistrars[groupName] = [];
groupedNumbers[groupName] = [];
} }
groupedRegistrars[groupName].push(registrar.serial); groupedRegistrars[groupName].push(registrar.serial);
groupedNumbers[groupName].push(registrar.number);
}); });
userInfo = await getUserInfo(req.session.userId); userInfo = await getUserInfo(req.session.userId);
@ -1906,6 +1916,7 @@ async function devices(req, res) {
ifDBError: false, ifDBError: false,
Registrars: allRegistrars.map((registrar) => ({ Registrars: allRegistrars.map((registrar) => ({
id: registrar.id, id: registrar.id,
number: registrar.number,
serial: registrar.serial, serial: registrar.serial,
status: Date.now() - Date.parse(registrar.lastkeepalive) <= minuteInMillis, status: Date.now() - Date.parse(registrar.lastkeepalive) <= minuteInMillis,
name: registrar.name, name: registrar.name,
@ -1918,11 +1929,12 @@ async function devices(req, res) {
Groups: Object.keys(groupedRegistrars).map((groupName) => ({ Groups: Object.keys(groupedRegistrars).map((groupName) => ({
name: groupName, name: groupName,
serials: groupedRegistrars[groupName], serials: groupedRegistrars[groupName],
numbers: groupedNumbers[groupName],
})), })),
GroupsList: groupsResult.rows, GroupsList: groupsResult.rows,
}; };
// console.log(templateData); console.log(templateData.Groups);
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 template = handlebars.compile(source);
@ -2203,14 +2215,15 @@ app.post("/updatedevice", async (req, res) => {
const client = await pool.connect(); const client = await pool.connect();
var { var {
plateNumber,
plateColor,
serialNumber, serialNumber,
deviceNumber,
plateNumber,
channelsAmount, channelsAmount,
connectionProtocol, plateColor,
IPAddress, IPAddress,
deviceGroup,
serverPort, serverPort,
deviceGroup,
connectionProtocol,
sumNumber, sumNumber,
simIMEI, simIMEI,
simIMSI, simIMSI,
@ -2270,8 +2283,9 @@ app.post("/updatedevice", async (req, res) => {
release = $27, release = $27,
installer = $28, installer = $28,
installation = $29, installation = $29,
description = $30 description = $30,
WHERE serial = $31 number = $31
WHERE serial = $32
RETURNING *; RETURNING *;
`; `;
@ -2306,6 +2320,7 @@ app.post("/updatedevice", async (req, res) => {
equipmentInstaller, equipmentInstaller,
equipmentInstalled, equipmentInstalled,
equipmentDescription, equipmentDescription,
deviceNumber,
serialNumber, serialNumber,
]; ];
@ -3049,7 +3064,7 @@ groupsResult.rows.forEach((group) => {
const minuteInMillis = 90 * 1000; const minuteInMillis = 90 * 1000;
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars FROM registrars
ORDER BY id ORDER BY id
`; `;
@ -3057,15 +3072,18 @@ const registrarsResult = await client.query(queryRegistrars);
const allRegistrars = registrarsResult.rows; const allRegistrars = registrarsResult.rows;
const groupedRegistrars = {}; const groupedRegistrars = {};
const groupedNumbers = {};
allRegistrars.forEach((registrar) => { allRegistrars.forEach((registrar) => {
const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна const groupName = groupsMap[registrar.group] || "Другое"; // Используем "Другое", если группа неизвестна
if (!groupedRegistrars[groupName]) { if (!groupedRegistrars[groupName]) {
groupedRegistrars[groupName] = []; groupedRegistrars[groupName] = [];
groupedNumbers[groupName] = [];
} }
groupedRegistrars[groupName].push({ groupedRegistrars[groupName].push({
serial: registrar.serial, serial: registrar.serial,
checked: false, checked: false,
}); });
groupedNumbers[groupName].push(registrar.number);
}); });
@ -3094,9 +3112,10 @@ templateData.Update = response.update;
templateData.Groups = Object.keys(groupedRegistrars).map((groupName) => ({ templateData.Groups = Object.keys(groupedRegistrars).map((groupName) => ({
name: groupName, name: groupName,
serials: groupedRegistrars[groupName], serials: groupedRegistrars[groupName],
numbers: groupedNumbers[groupName],
})); }));
// console.log(templateData); console.log(templateData.Groups);
const source = fs.readFileSync("static/templates/admin/user.html", "utf8"); const source = fs.readFileSync("static/templates/admin/user.html", "utf8");
const template = handlebars.compile(source); const template = handlebars.compile(source);
@ -3245,7 +3264,7 @@ async function videos(req, res) {
// Выполняем запрос, чтобы получить все данные из таблицы registrars // Выполняем запрос, чтобы получить все данные из таблицы registrars
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''}
ORDER BY id ORDER BY id
`; `;
@ -3269,6 +3288,7 @@ async function videos(req, res) {
sim: registrar.sim, sim: registrar.sim,
ip: registrar.ip, ip: registrar.ip,
port: registrar.port, port: registrar.port,
number: registrar.number,
}); });
}); });
@ -3361,7 +3381,7 @@ async function videoExport(req, res) {
// Выполняем запрос, чтобы получить все данные из таблицы registrars // Выполняем запрос, чтобы получить все данные из таблицы registrars
const queryRegistrars = ` const queryRegistrars = `
SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port SELECT id, serial, channels, lastkeepalive, "group", name, plate, sim, ip, port, number
FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''} FROM registrars ${!templateData.isAdmin ? 'WHERE serial = ANY($1)' : ''}
ORDER BY id ORDER BY id
`; `;
@ -3385,6 +3405,7 @@ async function videoExport(req, res) {
sim: registrar.sim, sim: registrar.sim,
ip: registrar.ip, ip: registrar.ip,
port: registrar.port, port: registrar.port,
number: registrar.number
}); });
}); });

View File

@ -41,6 +41,9 @@ const createTable = () => {
const name = document.createElement("td"); const name = document.createElement("td");
name.textContent = device.group; name.textContent = device.group;
row.appendChild(name); row.appendChild(name);
const number = document.createElement("td");
number.textContent = device.number;
row.appendChild(number);
const plate = document.createElement("td"); const plate = document.createElement("td");
plate.textContent = device.plate; plate.textContent = device.plate;
row.appendChild(plate); row.appendChild(plate);
@ -61,11 +64,16 @@ const createTable = () => {
sim.textContent = device.sim; sim.textContent = device.sim;
row.appendChild(sim); row.appendChild(sim);
const ip = document.createElement("td"); const ip = document.createElement("td");
if (device.ip === "") {
ip.textContent = "";
} else {
if (device.port === "") {
ip.textContent = device.ip; ip.textContent = device.ip;
} else {
ip.textContent = device.ip + ":" + device.port
}
}
row.appendChild(ip); row.appendChild(ip);
const port = document.createElement("td");
port.textContent = device.port;
row.appendChild(port);
// Добавляем кнопку удаления после каждого ряда // Добавляем кнопку удаления после каждого ряда
const trashCell = document.createElement("td"); const trashCell = document.createElement("td");

View File

@ -1242,7 +1242,8 @@ tr:nth-child(even) {
display: inline-block; display: inline-block;
} }
.parameters-input input:read-only { .parameters-input input:read-only,
.parameters-inputs input:read-only {
background-color: #0000000a; background-color: #0000000a;
} }

View File

@ -134,9 +134,21 @@
<ul class="area-devices" id="devices-1"> <ul class="area-devices" id="devices-1">
{{#each serials}} {{#each serials}}
{{#if this.checked}} {{#if this.checked}}
<li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden checked><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>{{this.serial}}</label></li> <li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden checked><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>
{{#if (lookup ../numbers @index)}}
{{lookup ../numbers @index}}
{{else}} {{else}}
<li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>{{this.serial}}</label></li> {{this.serial}}
{{/if}}
</label></li>
{{else}}
<li class="device"><img><input type="checkbox" id="{{this.serial}}" class="checkbox-input device-filter device-serial" value="{{this.serial}}" hidden><label for="{{this.serial}}" class="checkbox-label"><div class="checkmark"></div>
{{#if (lookup ../numbers @index)}}
{{lookup ../numbers @index}}
{{else}}
{{this.serial}}
{{/if}}
</label></li>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>

View File

@ -91,11 +91,23 @@
<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">{{name}}</label>
<ul class="area-devices" id="devices-1"> <ul class="area-devices" id="devices-1">
{{#each serials}} {{#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> <li class="device"><img><input type="checkbox" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" hidden checked><label for="{{this}}" class="checkbox-label">
{{#if ../numbers}}
{{#if (lookup ../numbers @index)}}
<div class="checkmark"></div>{{lookup ../numbers @index}}
{{else}}
<div class="checkmark"></div>{{this}}
{{/if}}
{{else}}
<div class="checkmark"></div>{{this}}
{{/if}}
</label></li>
{{/each}} {{/each}}
</ul> </ul>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</section> </section>
@ -112,12 +124,12 @@
<tr> <tr>
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th> <th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
<th>Группа</th> <th>Группа</th>
<th>Код</th>
<th>Номерной знак</th> <th>Номерной знак</th>
<th>Серийный номер</th> <th>Серийный номер</th>
<th>Статус</th> <th>Статус</th>
<th>Номер SIM-карты</th> <th>Номер SIM-карты</th>
<th>IP-адрес</th> <th>IP-адрес</th>
<th>Порт</th>
<th>{{#if DeleteTransport}} <th>{{#if DeleteTransport}}
<button id="delete-device-all" value="delete-device-all" class="trash"></button> <button id="delete-device-all" value="delete-device-all" class="trash"></button>
{{/if}}</th> {{/if}}</th>
@ -179,10 +191,20 @@
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div class="parameters-inputs"> <div class="parameters-inputs">
<label for="parameters-serial">Серийный номер<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="serialNumber" type="text" id="parameters-serial" placeholder="Серийный номер устройства" required readonly>
<div class="parameters-input">
<label for="parameters-number">Цифровой код</label>
<input name="deviceNumber" type="text" id="parameters-number" placeholder="Цифровой код устройства">
</div>
<div class="parameters-input"> <div class="parameters-input">
<label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label> <label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required> <input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required>
</div> </div>
<div class="parameters-input">
<label for="parameters-channels">Количество каналов<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="channelsAmount" type="text" id="parameters-channels" placeholder="Кол-во каналов устройства" required>
</div>
<div class="parameters-input"> <div class="parameters-input">
<label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label> <label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="plateColor" id="parameters-plateColor"> <select name="plateColor" id="parameters-plateColor">
@ -191,24 +213,15 @@
<option value="yellow">Жёлтый</option> <option value="yellow">Жёлтый</option>
</select> </select>
</div> </div>
<div class="parameters-input">
<label for="parameters-serial">Серийный номер<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="serialNumber" type="text" id="parameters-serial" placeholder="Серийный номер устройства" required readonly>
</div>
<div class="parameters-input">
<label for="parameters-channels">Количество каналов<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="channelsAmount" type="text" id="parameters-channels" placeholder="Кол-во каналов устройства" required>
</div>
<div class="parameters-input">
<label for="parameters-protocol">Протокол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="connectionProtocol" id="parameters-protocol">
<option value="N9M">N9M</option>
</select>
</div>
<div class="parameters-input"> <div class="parameters-input">
<label for="parameters-ip">IP-адрес<span style="color: rgba(255, 69, 58, 1);">*</span></label> <label for="parameters-ip">IP-адрес<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="IPAddress" type="text" id="parameters-ip" placeholder="IP-адрес сервера" required> <input name="IPAddress" type="text" id="parameters-ip" placeholder="IP-адрес сервера" required>
</div> </div>
<div class="parameters-input">
<label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="serverPort" type="text" id="parameters-port" placeholder="Порт сервера" required>
</div>
<div class="parameters-input"> <div class="parameters-input">
<label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label> <label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="deviceGroup" id="parameters-group"> <select name="deviceGroup" id="parameters-group">
@ -219,10 +232,13 @@
</select> </select>
</div> </div>
<div class="parameters-input"> <div class="parameters-input">
<label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label> <label for="parameters-protocol">Протокол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="serverPort" type="text" id="parameters-port" placeholder="Порт сервера" required> <select name="connectionProtocol" id="parameters-protocol">
<option value="N9M">N9M</option>
</select>
</div> </div>
</div> </div>
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
@ -515,6 +531,7 @@
const devices = [ const devices = [
{{#each Registrars}} {{#each Registrars}}
{ {
number: "{{this.number}}",
id: "{{this.id}}", id: "{{this.id}}",
serial: "{{this.serial}}", serial: "{{this.serial}}",
status: "{{this.status}}", status: "{{this.status}}",
@ -685,6 +702,7 @@
data: JSON.stringify({ id: id }), data: JSON.stringify({ id: id }),
success: function(response) { success: function(response) {
// Установка значений полей формы // Установка значений полей формы
$("#parameters-number").val(response.number);
$("#parameters-plate").val(response.plate); $("#parameters-plate").val(response.plate);
$("#parameters-plateColor").val(response.plate_color); $("#parameters-plateColor").val(response.plate_color);
$("#parameters-serial").val(response.serial); $("#parameters-serial").val(response.serial);

View File

@ -93,7 +93,12 @@
<input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden> <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> <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}}"> <label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}} {{this.serial}}
{{/if}}
</label> </label>
</li> </li>
{{/each}} {{/each}}
@ -421,13 +426,13 @@ const selectedDevices = Array.from(checkboxes)
function addMarker(device) { function addMarker(device) {
const { serial, status, longitude, latitude, direction, speed } = device; const { serial, status, longitude, latitude, direction, speed, number } = device;
if (serial === $("input[name=camera-serial]:checked").val()) { if (serial === $("input[name=camera-serial]:checked").val()) {
var marker = L.divIcon({ var marker = L.divIcon({
className: 'marker', className: 'marker',
html: `<div class="marker-name active-${status}">${serial}</div> html: `<div class="marker-name active-${status}">${number !== null ? number : serial}</div>
<svg class="active-${status}" 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"> <svg class="active-${status}" 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 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="#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"/> <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"/>
@ -436,7 +441,7 @@ const selectedDevices = Array.from(checkboxes)
} else { } else {
var marker = L.divIcon({ var marker = L.divIcon({
className: 'marker', className: 'marker',
html: `<div class="marker-name active-${status}">${serial}</div> html: `<div class="marker-name active-${status}">${number !== null ? number : serial}</div>
<svg class="active-${status}" 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"> <svg class="active-${status}" 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="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"/> <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"/>

View File

@ -81,7 +81,17 @@
<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">{{name}}</label>
<ul class="area-devices" id="devices-1"> <ul class="area-devices" id="devices-1">
{{#each serials}} {{#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> <li class="device"><img><input type="checkbox" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" hidden checked><label for="{{this}}" class="checkbox-label">
{{#if ../numbers}}
{{#if (lookup ../numbers @index)}}
<div class="checkmark"></div>{{lookup ../numbers @index}}
{{else}}
<div class="checkmark"></div>{{this}}
{{/if}}
{{else}}
<div class="checkmark"></div>{{this}}
{{/if}}
</label></li>
{{/each}} {{/each}}
</ul> </ul>
</li> </li>

View File

@ -125,7 +125,11 @@
<input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden> <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> <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}}"> <label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}} {{this.serial}}
{{/if}}
</label> </label>
</li> </li>
{{/each}} {{/each}}

View File

@ -105,7 +105,11 @@
<input type="number" id="channels-{{this.serial}}" value="{{this.channels}}" hidden> <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> <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}}"> <label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}} {{this.serial}}
{{/if}}
</label> </label>
</li> </li>
{{/each}} {{/each}}