added device number parametr

This commit is contained in:
Ivan
2023-09-19 16:31:40 +03:00
parent 0b34293389
commit 9c56099c33
9 changed files with 139 additions and 56 deletions

View File

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

View File

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

View File

@ -134,9 +134,21 @@
<ul class="area-devices" id="devices-1">
{{#each serials}}
{{#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}}
{{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>{{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><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}}
{{/each}}
</ul>

View File

@ -89,13 +89,25 @@
<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>
<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>
<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">
{{#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}}
</ul>
</ul>
</li>
{{/each}}
</ul>
</section>
@ -112,12 +124,12 @@
<tr>
<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>Номер SIM-карты</th>
<th>IP-адрес</th>
<th>Порт</th>
<th>{{#if DeleteTransport}}
<button id="delete-device-all" value="delete-device-all" class="trash"></button>
{{/if}}</th>
@ -179,36 +191,37 @@
<div class="horizontal-line"></div>
<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">
<label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required>
</div>
<div class="parameters-input">
<label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="plateColor" id="parameters-plateColor">
<option value="white">Белый</option>
<option value="blue">Синий</option>
<option value="yellow">Жёлтый</option>
</select>
</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>
<label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="plateColor" id="parameters-plateColor">
<option value="white">Белый</option>
<option value="blue">Синий</option>
<option value="yellow">Жёлтый</option>
</select>
</div>
<div class="parameters-input">
<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>
</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">
<label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="deviceGroup" id="parameters-group">
@ -219,9 +232,12 @@
</select>
</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>
<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>
@ -515,6 +531,7 @@
const devices = [
{{#each Registrars}}
{
number: "{{this.number}}",
id: "{{this.id}}",
serial: "{{this.serial}}",
status: "{{this.status}}",
@ -685,6 +702,7 @@
data: JSON.stringify({ id: id }),
success: function(response) {
// Установка значений полей формы
$("#parameters-number").val(response.number);
$("#parameters-plate").val(response.plate);
$("#parameters-plateColor").val(response.plate_color);
$("#parameters-serial").val(response.serial);

View File

@ -93,7 +93,12 @@
<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}}
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}}
{{/if}}
</label>
</li>
{{/each}}
@ -421,13 +426,13 @@ const selectedDevices = Array.from(checkboxes)
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()) {
var marker = L.divIcon({
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">
<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"/>
@ -436,7 +441,7 @@ const selectedDevices = Array.from(checkboxes)
} else {
var marker = L.divIcon({
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">
<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"/>

View File

@ -79,11 +79,21 @@
<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>
<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>
<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">
{{#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}}
</ul>
</ul>
</li>
{{/each}}
</ul>

View File

@ -125,7 +125,11 @@
<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}}
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}}
{{/if}}
</label>
</li>
{{/each}}

View File

@ -105,7 +105,11 @@
<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}}
{{#if this.number}}
{{this.number}}
{{else}}
{{this.serial}}
{{/if}}
</label>
</li>
{{/each}}