devices from DB, updating device info

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

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) + "...";
}
}

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}`;