KRBL/ArgusSite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

devices from DB, updating device info

Browse Source
This commit is contained in:
Ivan
2023-07-16 19:09:25 +03:00
parent c1457995e8
commit 98c01bb8e6
12 changed files with 1445 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/img/xmark.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 175.5-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.4859" height="15.4956">
<g>
<rect height="15.4956" opacity="0" width="15.4859" x="0" y="0"/>
<path d="M0.252699 15.2429C0.594496 15.575 1.1609 15.575 1.49293 15.2429L7.74293 8.99293L13.9929 15.2429C14.325 15.575 14.9011 15.5847 15.2332 15.2429C15.5652 14.9011 15.5652 14.3445 15.2332 14.0125L8.98317 7.7527L15.2332 1.5027C15.5652 1.17067 15.575 0.604261 15.2332 0.27223C14.8914-0.0695668 14.325-0.0695668 13.9929 0.27223L7.74293 6.52223L1.49293 0.27223C1.1609-0.0695668 0.58473-0.0793324 0.252699 0.27223C-0.0793324 0.614027-0.0793324 1.17067 0.252699 1.5027L6.5027 7.7527L0.252699 14.0125C-0.0793324 14.3445-0.0890981 14.9109 0.252699 15.2429Z" fill="#000000" fill-opacity="0.85"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 998 B

116
static/scripts/device-form.js Normal file
View File

@ -0,0 +1,116 @@
$("#continue-details").click(function () {
document.getElementById("stage-sim").checked = true;
});
$("#continue-sim").click(function () {
document.getElementById("stage-ts").checked = true;
});
$("#continue-ts").click(function () {
document.getElementById("stage-equipment").checked = true;
});
const container = document.getElementById("new-parameters");
const content1 = document.getElementById("details");
const content2 = document.getElementById("sim");
const content3 = document.getElementById("ts");
const content4 = document.getElementById("equipment");
const btn1 = document.getElementById("continue-details");
const btn2 = document.getElementById("continue-sim");
const btn3 = document.getElementById("continue-ts");
const radioButtons = document.querySelectorAll(
'input[type="radio"][name="newStage"]'
);
const duration = 100;
let activeContent = content1;
function switchContent(newContent) {
fadeOut(activeContent, () => {
fadeIn(newContent);
activeContent = newContent;
});
}
function fadeIn(element) {
element.style.opacity = 0;
element.style.display = "block";
let start = performance.now();
function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) {
element.style.opacity = 1;
} else {
element.style.opacity = timeFraction;
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
function fadeOut(element, callback) {
element.style.opacity = 1;
let start = performance.now();
function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) {
element.style.opacity = 0;
element.style.display = "none";
if (callback) {
callback();
}
} else {
element.style.opacity = 1 - timeFraction;
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
btn1.addEventListener("click", () => {
if (activeContent === content1) {
switchContent(content2);
} else {
switchContent(content1);
}
});
btn2.addEventListener("click", () => {
if (activeContent === content2) {
switchContent(content3);
} else {
switchContent(content2);
}
});
btn3.addEventListener("click", () => {
if (activeContent === content3) {
switchContent(content4);
} else {
switchContent(content3);
}
});
for (let radioButton of radioButtons) {
radioButton.addEventListener("change", () => {
if (radioButton.value === "details") {
switchContent(content1);
} else if (radioButton.value === "sim") {
switchContent(content2);
} else if (radioButton.value === "ts") {
switchContent(content3);
} else if (radioButton.value === "equipment") {
switchContent(content4);
}
});
}
function truncateText(select) {
var maxLength = 30;
var option = select.options[select.selectedIndex];
if (option.text.length > maxLength) {
option.text = option.text.substring(0, maxLength) + "...";
}
}

350
static/scripts/table.js
View File

@ -1,170 +1,172 @@
const devices = [
{
id: "1",
group: "2-device-1",
name: "Трамваи",
plate: "AB1234",
serial: "008803559E",
sim: "1234567890",
channels: 12,
ip: "192.168.0.1",
port: 17891,
},
{
id: "2",
group: "2-device-2",
name: "Электробусы",
plate: "BC2345",
serial: "008803559E",
sim: "2345678901",
channels: 12,
ip: "192.168.0.2",
port: 17891,
},
{
id: "3",
group: "2-device-1",
name: "Трамваи",
plate: "CD3456",
serial: "009800852A",
sim: "3456789012",
channels: 16,
ip: "192.168.0.3",
port: 17891,
},
{
id: "4",
group: "2-device-3",
name: "Троллейбусы",
plate: "DE4567",
serial: "009800858D",
sim: "4567890123",
channels: 12,
ip: "192.168.0.4",
port: 17891,
},
{
id: "5",
group: "2-device-2",
name: "Электробусы",
plate: "EF5678",
serial: "00980084FD",
sim: "5678901234",
channels: 16,
ip: "192.168.0.5",
port: 17891,
},
{
id: "6",
group: "2-device-1",
name: "Трамваи",
plate: "FG6789",
serial: "0088036B7F",
sim: "6789012345",
channels: 16,
ip: "192.168.0.6",
port: 17891,
},
{
id: "7",
group: "2-device-4",
name: "Старые ТС",
plate: "GH7890",
serial: "00880302CD",
sim: "7890123456",
channels: 12,
ip: "192.168.0.7",
port: 17891,
},
{
id: "8",
group: "2-device-4",
name: "Старые ТС",
plate: "HI8901",
serial: "008802A035",
sim: "8901234567",
channels: 12,
ip: "192.168.0.8",
port: 17891,
},
{
id: "9",
group: "1-device-1",
name: "Трамваи",
plate: "IJ9012",
serial: "008802A96A",
sim: "9012345678",
channels: 16,
ip: "192.168.0.9",
port: 17891,
},
{
id: "10",
group: "2-device-4",
name: "Старые ТС",
plate: "КТ32376",
serial: "00880302C7",
sim: "7012345678",
channels: 14,
ip: "192.168.0.10",
port: 17891,
},
{
id: "11",
group: "2-device-3",
name: "Троллейбусы",
plate: "ОА33277",
serial: "008802A035",
sim: "9034234348",
channels: 12,
ip: "192.168.0.11",
port: 17891,
},
{
id: "12",
group: "1-device-2",
name: "Маршрутки",
plate: "КЛ987102",
serial: "009800852A",
sim: "9023345678",
channels: 10,
ip: "192.168.0.12",
port: 17891,
},
{
id: "13",
group: "3-device-1",
name: "Троллейбусы",
plate: "КЛ987102",
serial: "0088036B78",
sim: "9023345678",
channels: 8,
ip: "192.168.0.13",
port: 17891,
},
{
id: "14",
group: "3-device-1",
name: "Маршрутки",
plate: "КЛ987102",
serial: "0088036B7F",
sim: "9023345678",
channels: 8,
ip: "192.168.0.14",
port: 17891,
},
{
id: "15",
group: "1-device-1",
name: "Трамваи",
plate: "КЛ987102",
serial: "008802A96A",
sim: "9023345678",
channels: 16,
ip: "192.168.0.15",
port: 17891,
},
];
// const devices = [
// {
// id: "1",
// group: "2-device-1",
// name: "Трамваи",
// plate: "AB1234",
// serial: "008803559E",
// sim: "1234567890",
// channels: 12,
// ip: "192.168.0.1",
// port: 17891,
// },
// {
// id: "2",
// group: "2-device-2",
// name: "Электробусы",
// plate: "BC2345",
// serial: "008803559E",
// sim: "2345678901",
// channels: 12,
// ip: "192.168.0.2",
// port: 17891,
// },
// {
// id: "3",
// group: "2-device-1",
// name: "Трамваи",
// plate: "CD3456",
// serial: "009800852A",
// sim: "3456789012",
// channels: 16,
// ip: "192.168.0.3",
// port: 17891,
// },
// {
// id: "4",
// group: "2-device-3",
// name: "Троллейбусы",
// plate: "DE4567",
// serial: "009800858D",
// sim: "4567890123",
// channels: 12,
// ip: "192.168.0.4",
// port: 17891,
// },
// {
// id: "5",
// group: "2-device-2",
// name: "Электробусы",
// plate: "EF5678",
// serial: "00980084FD",
// sim: "5678901234",
// channels: 16,
// ip: "192.168.0.5",
// port: 17891,
// },
// {
// id: "6",
// group: "2-device-1",
// name: "Трамваи",
// plate: "FG6789",
// serial: "0088036B7F",
// sim: "6789012345",
// channels: 16,
// ip: "192.168.0.6",
// port: 17891,
// },
// {
// id: "7",
// group: "2-device-4",
// name: "Старые ТС",
// plate: "GH7890",
// serial: "00880302CD",
// sim: "7890123456",
// channels: 12,
// ip: "192.168.0.7",
// port: 17891,
// },
// {
// id: "8",
// group: "2-device-4",
// name: "Старые ТС",
// plate: "HI8901",
// serial: "008802A035",
// sim: "8901234567",
// channels: 12,
// ip: "192.168.0.8",
// port: 17891,
// },
// {
// id: "9",
// group: "1-device-1",
// name: "Трамваи",
// plate: "IJ9012",
// serial: "008802A96A",
// sim: "9012345678",
// channels: 16,
// ip: "192.168.0.9",
// port: 17891,
// },
// {
// id: "10",
// group: "2-device-4",
// name: "Старые ТС",
// plate: "КТ32376",
// serial: "00880302C7",
// sim: "7012345678",
// channels: 14,
// ip: "192.168.0.10",
// port: 17891,
// },
// {
// id: "11",
// group: "2-device-3",
// name: "Троллейбусы",
// plate: "ОА33277",
// serial: "008802A035",
// sim: "9034234348",
// channels: 12,
// ip: "192.168.0.11",
// port: 17891,
// },
// {
// id: "12",
// group: "1-device-2",
// name: "Маршрутки",
// plate: "КЛ987102",
// serial: "009800852A",
// sim: "9023345678",
// channels: 10,
// ip: "192.168.0.12",
// port: 17891,
// },
// {
// id: "13",
// group: "3-device-1",
// name: "Троллейбусы",
// plate: "КЛ987102",
// serial: "0088036B78",
// sim: "9023345678",
// channels: 8,
// ip: "192.168.0.13",
// port: 17891,
// },
// {
// id: "14",
// group: "3-device-1",
// name: "Маршрутки",
// plate: "КЛ987102",
// serial: "0088036B7F",
// sim: "9023345678",
// channels: 8,
// ip: "192.168.0.14",
// port: 17891,
// },
// {
// id: "15",
// group: "1-device-1",
// name: "Трамваи",
// plate: "КЛ987102",
// serial: "008802A96A",
// sim: "9023345678",
// channels: 16,
// ip: "192.168.0.15",
// port: 17891,
// },
// ];
console.log(devices);
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
let currentPage = 1;
@ -214,12 +216,19 @@ const createTable = () => {
const serial = document.createElement("td");
serial.textContent = device.serial;
row.appendChild(serial);
const status = document.createElement("td");
if (device.status === "true") {
status.textContent = "Включен";
status.setAttribute("style", "color:#32D74B");
} else {
status.textContent = "Выключен";
status.setAttribute("style", "color:#FF453A");
}
// status.textContent = device.status;
row.appendChild(status);
const sim = document.createElement("td");
sim.textContent = device.sim;
row.appendChild(sim);
const channels = document.createElement("td");
channels.textContent = device.channels;
row.appendChild(channels);
const ip = document.createElement("td");
ip.textContent = device.ip;
row.appendChild(ip);
@ -236,6 +245,7 @@ const createTable = () => {
trashButton.id = `delete-device-${device.id}`;
const optionsButton = document.createElement("button");
optionsButton.setAttribute("class", "options");
optionsButton.setAttribute("onclick", `openForm("${device.id}")`);
optionsButton.value = `options-device-${device.id}`;
optionsButton.id = `options-device-${device.id}`;

72
static/styles/main.css
View File

@ -911,6 +911,10 @@ tr:nth-child(even) {
display: inline-block;
}
.parameters-input input:read-only {
background-color: #0000000a;
}
.new-parameters label,
.update-info label,
.input-name {
@ -1500,6 +1504,61 @@ video {
/* float: right; */
}
.edit-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 1000;
background-color: #00000039;
display: none;
opacity: 0;
justify-content: center;
align-items: center;
transition: opacity 0.4s ease-in-out;
}
.edit-container.active {
display: flex;
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
.form-animation {
animation: form-appear 0.4s ease-in-out;
}
@keyframes form-appear {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.edit-container .for-new,
.edit-container .add-new {
height: 800px !important;
margin: 0 !important;
position: relative;
}
.edit-container .add-new {
width: 850px;
}
#close-form-btn {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
width: 20px;
height: 20px;
}
@media (max-width: 1950px) {
/* при разрешении монитора до 1950 пикселей */
@ -1535,7 +1594,7 @@ video {
}
@media (max-width: 1700px) {
/* при разрешении монитора до 1500 пикселей */
/* при разрешении монитора до 1700 пикселей */
th,
td {
@ -1544,8 +1603,8 @@ video {
}
table {
display: block;
width: 100%;
/* display: block; */
/* width: 100%; */
overflow-x: auto;
white-space: nowrap;
}
@ -1568,3 +1627,10 @@ video {
margin-bottom: 60px;
}
}
@media (max-width: 1400px) {
/* при разрешении монитора до 1400 пикселей */
body {
width: 1400px !important;
}
}

463
static/templates/devices/index.html
View File

@ -71,11 +71,11 @@
<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>
<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>
<!-- <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>
@ -87,7 +87,7 @@
<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>
</li> -->
</ul>
</section>
@ -106,8 +106,8 @@
<th>Группа</th>
<th>Номерной знак</th>
<th>Серийный номер</th>
<th>Статус</th>
<th>Номер SIM-карты</th>
<th>Кол-во каналов</th>
<th>IP-адрес</th>
<th>Порт</th>
<th><button id="delete-device-all" value="delete-device-all" class="trash"></button></th>
@ -138,8 +138,459 @@
</section>
</section>
<section id="form-bg" class="edit-container">
<section id="form">
<section class="for-new">
<section class="stages">
<input name="newStage" type="radio" value="details" id="stage-details" checked><label for="stage-details">Детали</label>
<div class="vertical-line"></div>
<input name="newStage" type="radio" value="sim" id="stage-sim"><label for="stage-sim">SIM - Карта</label>
<div class="vertical-line"></div>
<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>
</section>
</section>
<section id="add-new-container" class="add-new">
<img src="../img/xmark.svg" id="close-form-btn">
<form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedevice">
<div id="details" class="new-parameters active">
<h1>Детали устройства</h1>
<h2>Сперва самое необходимое</h2>
<div class="horizontal-line"></div>
<div class="parameters-inputs">
<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>
</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-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required readonly>
</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>
<div class="horizontal-line"></div>
<button id="continue-details" type="button">Продолжить</button>
</div>
<div id="sim" class="new-parameters">
<h1>Настройки SIM-карты</h1>
<h2>Для связи с устройством</h2>
<div class="horizontal-line"></div>
<div class="parameters-inputs">
<div class="parameters-input">
<label for="parameters-sim">Номер SIM-карты<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="sumNumber" type="text" id="parameters-sim" placeholder="Номер SIM-карты" required>
</div>
<div class="parameters-input">
<label for="parameters-sim-imei">IMEI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="simIMEI" type="text" id="parameters-sim-imei" placeholder="IMEI SIM-карты" required>
</div>
<div class="parameters-input">
<label for="parameters-sim-imsi">IMSI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="simIMSI" type="text" id="parameters-sim-imsi" placeholder="IMSI SIM-карты" required>
</div>
<div class="parameters-input">
<label for="parameters-sim-module">Тип сетевого модуля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="simModule" id="parameters-sim-module">
<option value="GPRS">GPRS</option>
<option value="CDMA">CDMA</option>
<option value="EVDO">EVDO</option>
<option value="WCDMA">WCDMA</option>
<option value="EDGE">EDGE</option>
<option value="TDSCDMA">TDSCDMA</option>
<option value="LTE-TDD">LTE-TDD</option>
<option value="LTE-FDD">LTE-FDD</option>
</select>
</div>
</div>
<div class="horizontal-line"></div>
<button id="continue-sim" type="button">Продолжить</button>
</div>
<div id="ts" class="new-parameters">
<h1>Детали транспортного средства</h1>
<h2>Технические характеристики и не только</h2>
<div class="horizontal-line"></div>
<div class="parameters-inputs">
<div class="parameters-input">
<label for="parameters-trasnsport-type">Тип автомобиля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="transportType" id="parameters-trasnsport-type" onchange="truncateText(this)">
<option value="1">Пассажирский подвижной состав</option>
<option value="2">Большой автобус</option>
<option value="3">Средний автобус</option>
<option value="4">Микроавтобус</option>
<option value="5">Лимузин</option>
<option value="6">Большой спальный автобус</option>
<option value="7">Спальный автобус среднего размера</option>
<option value="8">Обычный грузовик</option>
<option value="9">Большой обычный грузовик</option>
<option value="10">Среднегабаритный обычный грузовик</option>
<option value="11">Маленький обычный грузовик</option>
<option value="12">Специальная транспортировочная машина</option>
<option value="13">Контейнерная тележка</option>
<option value="14">Большой транспортировочный автомобиль</option>
<option value="15">Изометрический вагон</option>
<option value="16">Спецтехника для перевозки грузовых автомобилей</option>
<option value="17">Танкер</option>
<option value="18">Тягач</option>
<option value="19">Прицеп</option>
<option value="20">Транспортер</option>
<option value="21">Другая спецтехника</option>
<option value="22">Автомобиль для перевозки опасных грузов</option>
<option value="23">Сельскохозяйственная машина</option>
</select>
</div>
<div class="parameters-input">
<label for="parameters-trasnsport-factory">Номер завода<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportFactory" type="text" id="parameters-trasnsport-factory" placeholder="Номер завода ТС" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-strength">Несущая способность<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportStrength" type="text" id="parameters-transport-strength" placeholder="Несущая способность (тонны)" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-engine">Номер двигателя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportEngine" type="text" id="parameters-transport-engine" placeholder="Номер двигателя ТС" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-stanina">Номер станины<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportStanina" type="text" id="parameters-transport-stanina" placeholder="Номер станины ТС" required>
</div>
<div class="parameters-input">
<label for="parameters-trasnsport-fuel">Тип топливного масла<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="transportFuel" id="parameters-trasnsport-fuel">
<option value="gasoline">Бензин</option>
<option value="diesel">Дизельное топливо</option>
<option value="naturalGas">Природный газ</option>
<option value="liquefiedGas">Сжиженный газ</option>
<option value="electric">Электрическое</option>
<option value="other">Прочие</option>
</select>
</div>
<div class="parameters-input">
<div class="parameters-transport-certificate">
<label for="parameters-transport-certificate">Свид-ство о дорожной перевозке<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportCertificate" type="text" id="parameters-transport-certificate" placeholder="Номер свидетельства" required>
</div>
</div>
<div class="parameters-input">
<div class="pparameters-trasnsport-category">
<label for="parameters-trasnsport-category">Техническая категория<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<select name="transportCategory" id="parameters-trasnsport-category">
<option value="1">Категория 1</option>
<option value="2">Категория 2</option>
<option value="3">Категория 3</option>
<option value="other">Не достает стандарта</option>
</select>
</div>
</div>
<div class="parameters-input">
<label for="parameters-transport-expire">Срок действия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportExpire" type="date" id="parameters-transport-expire" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-consumption">Расход топлива на 100 км<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportConsumption" type="text" id="parameters-transport-consumption" placeholder="Расход топлива в литрах" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-province">Провинция<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportProvince" type="text" id="parameters-transport-province" placeholder="Провинция" required>
</div>
<div class="parameters-input">
<label for="parameters-transport-city">Город<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="transportCity" type="text" id="parameters-transport-city" placeholder="Город" required>
</div>
</div>
<div class="horizontal-line"></div>
<button id="continue-ts" type="button">Продолжить</button>
</div>
<div id="equipment" class="new-parameters">
<h1>Информация о оборудовании</h1>
<h2>Технические моменты</h2>
<div class="horizontal-line"></div>
<div class="parameters-inputs">
<div class="parameters-input">
<label for="parameters-equipment-name">Имя устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentName" type="text" id="parameters-equipment-name" placeholder="Имя пользовательского устройства" required>
</div>
<div class="parameters-input">
<label for="parameters-equipment-password">Пароль устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentPassword" type="text" id="parameters-equipment-password" placeholder="Пароль устройства" required>
</div>
<div class="parameters-input">
<label for="parameters-equipment-number">Номер партии<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentNumber" type="text" id="parameters-equipment-number" placeholder="Заводской номер партии" required>
</div>
<div class="parameters-input">
<label for="parameters-equipment-released">Дата выпуска<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentReleased" type="date" id="parameters-equipment-released" required>
</div>
<div class="parameters-input">
<label for="parameters-device-installer">Установщик<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentInstaller" type="text" id="parameters-device-installer" placeholder="ФИО установщика" required>
</div>
<div class="parameters-input">
<label for="parameters-equipment-installed">Дата монтажа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentInstalled" type="date" id="parameters-equipment-installed" required>
</div>
<label for="parameters-device-description">Внешнее описание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
<input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание " required>
</div>
<div class="horizontal-line"></div>
<button type="button" id="send-form">Сохранить</button>
</div>
</form>
</section>
</section>
</section>
<script>
const devices = [
{{#each Registrars}}
{
id: "{{this.id}}",
serial: "{{this.serial}}",
status: "{{this.status}}",
name: "{{this.name}}",
group: "{{this.group}}",
plate: "{{this.plate}}",
sim: "{{this.sim}}",
ip: "{{this.ip}}",
port: "{{this.port}}",
},
{{/each}}
];
</script>
<script src="../scripts/table.js"></script>
<script src="../scripts/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
<script>
$(document).ready(function(){
$('#parameters-sim').inputmask({"mask": "+7 (999) 999-9999"});
});
</script>
<script>
const form = document.getElementById('edit-form');
const sendButton = document.getElementById('send-form');
sendButton.addEventListener('click', function(event) {
event.preventDefault(); // Предотвращаем отправку формы по умолчанию
const xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Данные устройства обновлены!');
location.reload()
} else {
console.error('Ошибка отправки формы:', xhr.status);
}
};
// Получаем данные формы для отправки
const formData = new FormData(form);
// Создаем объект с данными формы
const data = {};
for (const [key, value] of formData) {
data[key] = value;
}
// Преобразуем данные в JSON
const jsonData = JSON.stringify(data);
// Отправляем данные формы
xhr.send(jsonData);
});
</script>
<script>
// Преобразование даты в формат YYYY-MM-DD
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
// Открывает popup форму
function openForm(id) {
var formContainer = $("#form-bg");
var form = $("#form");
$.ajax({
url: "/devicedata",
method: "POST",
contentType: "application/json",
data: JSON.stringify({ id: id }),
success: function(response) {
// Установка значений полей формы
$("#parameters-plate").val(response.plate);
$("#parameters-plateColor").val(response.plate_color);
$("#parameters-serial").val(response.serial);
$("#parameters-channels").val(response.channels);
$("#parameters-protocol").val(response.protocol);
$("#parameters-ip").val(response.ip);
$("#parameters-group").val(response.group);
$("#parameters-port").val(response.port);
$("#parameters-sim").val(response.sim);
$("#parameters-sim-imei").val(response.imei);
$("#parameters-sim-imsi").val(response.imsi);
$("#parameters-sim-module").val(response.module);
$("#parameters-trasnsport-type").val(response.auto);
$("#parameters-trasnsport-factory").val(response.factory);
$("#parameters-transport-strength").val(response.capacity);
$("#parameters-transport-engine").val(response.engine);
$("#parameters-transport-stanina").val(response.stanina);
$("#parameters-trasnsport-fuel").val(response.fuel);
$("#parameters-transport-certificate").val(response.certificate);
$("#parameters-transport-category").val(response.category);
$("#parameters-transport-expire").val(formatDate(new Date(response.certificate_exp)));
$("#parameters-transport-consumption").val(response.consumption);
$("#parameters-transport-province").val(response.region);
$("#parameters-transport-city").val(response.city);
$("#parameters-equipment-name").val(response.name);
$("#parameters-equipment-password").val(response.password);
$("#parameters-equipment-number").val(response.batch);
$("#parameters-equipment-released").val(formatDate(new Date(response.release)));
$("#parameters-device-installer").val(response.installer);
$("#parameters-equipment-installed").val(formatDate(new Date(response.installation)));
$("#parameters-device-description").val(response.description);
activeContent = content1
switchContent(content1);
content2.style.opacity = 0;
content2.style.display = "none";
content3.style.opacity = 0;
content3.style.display = "none";
content4.style.opacity = 0;
content4.style.display = "none";
document.getElementById("stage-details").checked = true;
// Открытие формы
formContainer.addClass("active");
form.addClass("form-animation");
$("body").css("overflow", "hidden");
},
error: function() {
// Обработка ошибки при запросе к серверу
alert("Произошла ошибка при запросе к серверу.");
}
});
}
$(document).ready(function() {
var formContainer = $("#form-bg");
var form = $("#form");
// Закрывает popup форму
$("#close-form-btn").click(function() {
closeForm();
});
// Закрывает popup форму при клике вне её области
$(document).click(function(event) {
if (
!formContainer.is(event.target) &&
formContainer.has(event.target).length === 0 &&
formContainer.hasClass("active") &&
!openButton.is(event.target)
) {
closeForm();
}
});
// Функция для закрытия формы
function closeForm() {
formContainer.removeClass("active");
form.removeClass("form-animation");
$("body").css("overflow", "auto");
}
});
</script>
<script>
// Скрытие/Показ дополнительных меню аккаунта
const accountMain = document.getElementById('account-main');
@ -162,6 +613,8 @@
});
</script>
<script src="../scripts/device-form.js"></script>
<script>
const checkboxes = document.querySelectorAll('.organisation .checkbox-input');

127
static/templates/devices/newdevice.html
View File

@ -94,9 +94,9 @@
<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>
<option value="white">Белый</option>
</select>
</div>
<div class="parameters-input">
@ -358,130 +358,7 @@
});
</script>
<script>
$("#continue-details").click(function () {
document.getElementById("stage-sim").checked = true;
});
$("#continue-sim").click(function () {
document.getElementById("stage-ts").checked = true;
});
$("#continue-ts").click(function () {
document.getElementById("stage-equipment").checked = true;
});
</script>
<script>
const container = document.getElementById('new-parameters');
const content1 = document.getElementById('details');
const content2 = document.getElementById('sim');
const content3 = document.getElementById('ts');
const content4 = document.getElementById('equipment');
const btn1 = document.getElementById('continue-details');
const btn2 = document.getElementById('continue-sim');
const btn3 = document.getElementById('continue-ts');
const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
const duration = 100;
let activeContent = content1;
function switchContent(newContent) {
fadeOut(activeContent, () => {
fadeIn(newContent);
activeContent = newContent;
});
}
function fadeIn(element) {
element.style.opacity = 0;
element.style.display = 'block';
let start = performance.now();
function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) {
element.style.opacity = 1;
} else {
element.style.opacity = timeFraction;
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
function fadeOut(element, callback) {
element.style.opacity = 1;
let start = performance.now();
function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) {
element.style.opacity = 0;
element.style.display = 'none';
if (callback) {
callback();
}
} else {
element.style.opacity = 1 - timeFraction;
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
btn1.addEventListener('click', () => {
if (activeContent === content1) {
switchContent(content2);
} else {
switchContent(content1);
}
});
btn2.addEventListener('click', () => {
if (activeContent === content2) {
switchContent(content3);
} else {
switchContent(content2);
}
});
btn3.addEventListener('click', () => {
if (activeContent === content3) {
switchContent(content4);
} else {
switchContent(content3);
}
});
for (let radioButton of radioButtons) {
radioButton.addEventListener('change', () => {
if (radioButton.value === 'details') {
switchContent(content1);
} else if (radioButton.value === 'sim') {
switchContent(content2);
} else if (radioButton.value === 'ts') {
switchContent(content3);
} else if (radioButton.value === 'equipment') {
switchContent(content4);
}
});
}
</script>
<script>
function truncateText(select) {
var maxLength = 30;
var option = select.options[select.selectedIndex];
if (option.text.length > maxLength) {
option.text = option.text.substring(0, maxLength) + '...';
}
}
</script>
<script src="../scripts/device-form.js"></script>

6
static/templates/index.html
View File

@ -13,13 +13,13 @@
<header>
<h1>Аргус</h1>
<h2><span>/</span> Название организации</h2>
<h2><span>/</span> {{Organisation}}</h2>
</header>
<section class="account-info">
<div id="account-main">
<img id="person" src="../img/person.svg">
<span>Тестовое Имя</span>
<span>{{User}}</span>
<img id="down" src="../img/down.svg">
<img id="up" src="../img/up.svg">
</div>
@ -52,7 +52,7 @@
<section class="main">
<div class="name">
<img src="../img/cars.svg"><span>Сводка по 351 ТС</span>
<img src="../img/cars.svg"><span>Сводка по {{Count}} ТС</span>
</div>
<section class="bg">
<section class="content">

18
static/templates/reports/index.html
View File

@ -11,13 +11,13 @@
<header>
<h1>Аргус</h1>
<h2><span>/</span> Название организации</h2>
<h2><span>/</span> {{Organisation}}</h2>
</header>
<section class="account-info">
<div id="account-main">
<img id="person" src="../img/person.svg">
<span>Тестовое Имя</span>
<span>{{User}}</span>
<img id="down" src="../img/down.svg">
<img id="up" src="../img/up.svg">
</div>
@ -135,6 +135,20 @@
</section>
</section>
<!-- <script>
const devices = [
{{#each Alarms}}
{
id: "{{this.id}}",
cmdno: "{{this.cmdno}}",
time: "{{this.time}}",
serial: "{{this.serial}}",
type: "{{this.type}}",
},
{{/each}}
];
</script> -->
<script src="../scripts/table-reports.js"></script>
<script src="../scripts/jquery.min.js"></script>
<script>