devices from DB, updating device info
This commit is contained in:
116
static/scripts/device-form.js
Normal file
116
static/scripts/device-form.js
Normal 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) + "...";
|
||||
}
|
||||
}
|
@ -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}`;
|
||||
|
||||
|
Reference in New Issue
Block a user