delete drivers, some fixes, table updates
This commit is contained in:
Ivan
parent
c6b92f06e0
commit
88825aba2e
GPG Key ID:
0C191B86D9582583
319
server.js
319
server.js
@ -45,8 +45,7 @@ app.get("/register", register);
|
||||
app.get("/live", live);
|
||||
app.get("/reports", reports);
|
||||
app.get("/devices", devices);
|
||||
// app.get("/devices/drivers", drivers);
|
||||
app.get("/devices/update", update);
|
||||
// app.get("/devices/update", update);
|
||||
app.get("/devices/groups", groups)
|
||||
app.get("/videos", videos);
|
||||
app.get("/videos/export",videoExport);
|
||||
@ -1222,11 +1221,6 @@ app.get('/reports/:id', async (req, res) => {
|
||||
StartTime: "",
|
||||
EndTime: "",
|
||||
|
||||
DriverName: "",
|
||||
DriverPhone: "",
|
||||
DriverEmail: "",
|
||||
DriverLicense: "",
|
||||
|
||||
PrevLatitude: "",
|
||||
PrevLongitude: "",
|
||||
NextLatitude: "",
|
||||
@ -1273,15 +1267,9 @@ app.get('/reports/:id', async (req, res) => {
|
||||
(SELECT g4.longitude FROM alarms a4 LEFT JOIN geo g4 ON a4.geoid = g4.id WHERE a4.evtuuid = a.evtuuid ORDER BY a4.time DESC LIMIT 1) AS next_longitude,
|
||||
g.longitude,
|
||||
g.latitude,
|
||||
g.speed,
|
||||
d.name,
|
||||
d.surname,
|
||||
d.card,
|
||||
d.phone,
|
||||
d.email
|
||||
g.speed
|
||||
FROM alarms a
|
||||
LEFT JOIN geo g ON a.geoid = g.id
|
||||
LEFT JOIN drivers d ON a.serial = d.transport
|
||||
WHERE a.id = ${id}
|
||||
LIMIT 1
|
||||
),
|
||||
@ -1465,11 +1453,6 @@ app.get('/reports/:id', async (req, res) => {
|
||||
templateData.StartTime = formatTimeToHHMMSSBefore(alarm.time);
|
||||
templateData.EndTime = formatTimeToHHMMSSAfter(alarm.time);
|
||||
|
||||
templateData.DriverName = alarm.name + " " + alarm.surname;
|
||||
templateData.DriverPhone = alarm.phone;
|
||||
templateData.DriverEmail = alarm.email;
|
||||
templateData.DriverLicense = alarm.card;
|
||||
|
||||
templateData.PrevLatitude = alarm.prev_latitude;
|
||||
templateData.PrevLongitude = alarm.prev_longitude;
|
||||
templateData.NextLatitude = alarm.next_latitude;
|
||||
@ -1532,11 +1515,6 @@ app.get('/generate-pdf/:id', async (req, res) => {
|
||||
Latitude: "",
|
||||
Longitude: "",
|
||||
|
||||
DriverName: "",
|
||||
DriverPhone: "",
|
||||
DriverEmail: "",
|
||||
DriverLicense: "",
|
||||
|
||||
PrevLatitude: "",
|
||||
PrevLongitude: "",
|
||||
NextLatitude: "",
|
||||
@ -1569,15 +1547,9 @@ app.get('/generate-pdf/:id', async (req, res) => {
|
||||
(SELECT g4.longitude FROM alarms a4 LEFT JOIN geo g4 ON a4.geoid = g4.id WHERE a4.evtuuid = a.evtuuid ORDER BY a4.time DESC LIMIT 1) AS next_longitude,
|
||||
g.longitude,
|
||||
g.latitude,
|
||||
g.speed,
|
||||
d.name,
|
||||
d.surname,
|
||||
d.card,
|
||||
d.phone,
|
||||
d.email
|
||||
g.speed
|
||||
FROM alarms a
|
||||
LEFT JOIN geo g ON a.geoid = g.id
|
||||
LEFT JOIN drivers d ON a.serial = d.transport
|
||||
WHERE a.id = ${id}
|
||||
LIMIT 1
|
||||
),
|
||||
@ -1730,11 +1702,6 @@ app.get('/generate-pdf/:id', async (req, res) => {
|
||||
templateData.Latitude = alarm.latitude
|
||||
templateData.Longitude = alarm.longitude
|
||||
|
||||
templateData.DriverName = alarm.name + " " + alarm.surname;
|
||||
templateData.DriverPhone = alarm.phone;
|
||||
templateData.DriverEmail = alarm.email;
|
||||
templateData.DriverLicense = alarm.card;
|
||||
|
||||
templateData.PrevLatitude = alarm.prev_latitude;
|
||||
templateData.PrevLongitude = alarm.prev_longitude;
|
||||
templateData.NextLatitude = alarm.next_latitude;
|
||||
@ -2336,179 +2303,6 @@ app.post("/updatedevice", async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/updatedriver", upload.single("upload-file"), async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
}
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
var {
|
||||
driverName,
|
||||
driverSurname,
|
||||
driverCard,
|
||||
driverGender,
|
||||
driverLicense,
|
||||
driverPassport,
|
||||
driverPhone,
|
||||
driverEmail,
|
||||
driverTransport,
|
||||
driverDescription,
|
||||
driverID,
|
||||
} = req.body;
|
||||
|
||||
try {
|
||||
// Вставка новой строки в таблицу drivers
|
||||
const query = `
|
||||
UPDATE drivers
|
||||
SET name = $1,
|
||||
surname = $2,
|
||||
card = $3,
|
||||
gender = $4,
|
||||
license = $5,
|
||||
passport = $6,
|
||||
phone = $7,
|
||||
email = $8,
|
||||
transport = $9,
|
||||
description = $10
|
||||
WHERE id = $11
|
||||
RETURNING *;
|
||||
`;
|
||||
|
||||
const values = [
|
||||
driverName,
|
||||
driverSurname,
|
||||
driverCard,
|
||||
driverGender,
|
||||
driverLicense,
|
||||
driverPassport,
|
||||
driverPhone,
|
||||
driverEmail,
|
||||
driverTransport,
|
||||
driverDescription,
|
||||
driverID,
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
|
||||
const newRow = result.rows[0];
|
||||
// console.log("New driver added:", newRow);
|
||||
|
||||
res.send("Data added successfully");
|
||||
} catch (error) {
|
||||
console.error("Error adding data:", error);
|
||||
res.status(500).send("An error occurred while adding data");
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/adddriver", upload.single("upload-file"), async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
}
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
var {
|
||||
driverName,
|
||||
driverSurname,
|
||||
driverCard,
|
||||
driverGender,
|
||||
driverLicense,
|
||||
driverPassport,
|
||||
driverPhone,
|
||||
driverEmail,
|
||||
driverTransport,
|
||||
driverDescription,
|
||||
} = req.body;
|
||||
|
||||
try {
|
||||
// Вставка новой строки в таблицу drivers
|
||||
const query = `
|
||||
INSERT INTO drivers (
|
||||
name,
|
||||
surname,
|
||||
card,
|
||||
gender,
|
||||
license,
|
||||
passport,
|
||||
phone,
|
||||
email,
|
||||
transport,
|
||||
description
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
RETURNING *;
|
||||
`;
|
||||
|
||||
const values = [
|
||||
driverName,
|
||||
driverSurname,
|
||||
driverCard,
|
||||
driverGender,
|
||||
driverLicense,
|
||||
driverPassport,
|
||||
driverPhone,
|
||||
driverEmail,
|
||||
driverTransport,
|
||||
driverDescription,
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
|
||||
const newRow = result.rows[0];
|
||||
// console.log("New driver added:", newRow);
|
||||
|
||||
res.send("Data added successfully");
|
||||
} catch (error) {
|
||||
console.error("Error adding data:", error);
|
||||
res.status(500).send("An error occurred while adding data");
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/driverdata", async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
}
|
||||
const id = req.body.id;
|
||||
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
// Выполняем запрос и получаем результат
|
||||
const query = "SELECT * FROM drivers WHERE id = $1;";
|
||||
const driverdata = await client.query(query, [id]);
|
||||
|
||||
// Формирование и отправка ответа
|
||||
const response = driverdata.rows[0];
|
||||
res.json(response);
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/userdata", async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
@ -2565,33 +2359,6 @@ app.post("/groupdata", async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/deletedriver", async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
}
|
||||
const id = req.body.id;
|
||||
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
// Выполняем запрос и получаем результат
|
||||
const query = "DELETE FROM drivers WHERE id = $1;";
|
||||
const driverdata = await client.query(query, [id]);
|
||||
|
||||
// Формирование и отправка ответа
|
||||
res.send("Data deleted successfully");
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/deletedevice", async (req, res) => {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
@ -2710,86 +2477,6 @@ app.post("/add-group", async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
async function drivers(req, res) {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
}
|
||||
const userInfo = await getUserInfo(req.session.userId);
|
||||
let templateData = {
|
||||
SERVER_IP: process.env.SERVER_IP,
|
||||
Organisation: userInfo.Organisation,
|
||||
User: userInfo.User,
|
||||
UserInfo: userInfo.Users,
|
||||
isAdmin: req.session.userId === 'admin',
|
||||
ifDBError: false,
|
||||
Drivers: [],
|
||||
Registrars: [],
|
||||
};
|
||||
|
||||
try {
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const client = await pool.connect();
|
||||
|
||||
// Выполняем запрос для объединения данных из таблиц drivers и registrars
|
||||
const queryDrivers = `
|
||||
SELECT d.id, d.name, d.surname, d.transport, d.phone, d.email, d.card, r.connected
|
||||
FROM drivers d
|
||||
LEFT JOIN registrars r ON d.transport = r.serial
|
||||
ORDER BY r.connected DESC NULLS LAST, CASE WHEN r.connected = true THEN 0 ELSE 1 END, d.id
|
||||
`;
|
||||
const driversResult = await client.query(queryDrivers);
|
||||
|
||||
templateData.Drivers = driversResult.rows.map((driver) => ({
|
||||
id: driver.id,
|
||||
name: driver.name,
|
||||
surname: driver.surname,
|
||||
transport: driver.transport,
|
||||
phone: driver.phone,
|
||||
email: driver.email,
|
||||
card: driver.card,
|
||||
}));
|
||||
|
||||
const queryRegistrars = `
|
||||
SELECT serial
|
||||
FROM registrars
|
||||
`;
|
||||
const registrarsResult = await client.query(queryRegistrars);
|
||||
|
||||
templateData.Registrars = registrarsResult.rows.map(
|
||||
(registrar) => registrar.serial
|
||||
);
|
||||
|
||||
// console.log(templateData);
|
||||
|
||||
const source = fs.readFileSync(
|
||||
"static/templates/devices/drivers.html",
|
||||
"utf8"
|
||||
);
|
||||
const template = handlebars.compile(source);
|
||||
const resultT = template(templateData);
|
||||
res.send(resultT);
|
||||
|
||||
client.release();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
templateData.ifDBError = true;
|
||||
|
||||
const source = fs.readFileSync(
|
||||
"static/templates/devices/drivers.html",
|
||||
"utf8"
|
||||
);
|
||||
const template = handlebars.compile(source);
|
||||
const resultT = template(templateData);
|
||||
res.send(resultT);
|
||||
}
|
||||
}
|
||||
|
||||
async function update(req, res) {
|
||||
if (req.session.userId === undefined) {
|
||||
return res.redirect("/signin");
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
$("#continue-main").click(function () {
|
||||
document.getElementById("stage-details").checked = true;
|
||||
});
|
||||
|
||||
$("#continue-main-edit").click(function () {
|
||||
document.getElementById("stage-details-edit").checked = true;
|
||||
});
|
||||
|
||||
const container = document.getElementById("new-parameters");
|
||||
const content1 = document.getElementById("main");
|
||||
const content2 = document.getElementById("details");
|
||||
const btn1 = document.getElementById("continue-main");
|
||||
const content3 = document.getElementById("main-edit");
|
||||
const content4 = document.getElementById("details-edit");
|
||||
const btn2 = document.getElementById("continue-main-edit");
|
||||
const radioButtons = document.querySelectorAll(
|
||||
'input[type="radio"][name="newStage"]'
|
||||
);
|
||||
const radioButtonsEdit = document.querySelectorAll(
|
||||
'input[type="radio"][name="newStageEdit"]'
|
||||
);
|
||||
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 === content3) {
|
||||
switchContent(content4);
|
||||
} else {
|
||||
switchContent(content3);
|
||||
}
|
||||
});
|
||||
|
||||
for (let radioButton of radioButtons) {
|
||||
radioButton.addEventListener("change", () => {
|
||||
if (radioButton.value === "main") {
|
||||
switchContent(content1);
|
||||
} else if (radioButton.value === "details") {
|
||||
switchContent(content2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (let radioButton of radioButtonsEdit) {
|
||||
radioButton.addEventListener("change", () => {
|
||||
if (radioButton.value === "main") {
|
||||
switchContent(content3);
|
||||
} else if (radioButton.value === "details") {
|
||||
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) + "...";
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,176 +0,0 @@
|
||||
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
let tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
let rowHeight = 60;
|
||||
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
let filteredDevices = [...devices];
|
||||
|
||||
const createTable = () => {
|
||||
const table = document.getElementById("deviceTable");
|
||||
const tbody = table.querySelector("tbody");
|
||||
// Очищаем таблицу
|
||||
tbody.innerHTML = "";
|
||||
|
||||
// Добавляем строки таблицы
|
||||
const startIndex = (currentPage - 1) * rowsPerPage;
|
||||
const endIndex = startIndex + rowsPerPage;
|
||||
const devicesToDisplay = filteredDevices.slice(startIndex, endIndex);
|
||||
|
||||
devicesToDisplay.forEach((device) => {
|
||||
const row = document.createElement("tr");
|
||||
// Добавляем чекбокс перед каждым рядом
|
||||
const checkboxCell = document.createElement("td");
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.value = `device-${device.id}`;
|
||||
checkbox.id = `device-${device.id}`;
|
||||
|
||||
const checkboxLabel = document.createElement("label");
|
||||
checkboxLabel.setAttribute("for", `device-${device.id}`);
|
||||
|
||||
const checkboxDiv = document.createElement("div");
|
||||
checkboxDiv.setAttribute("class", "checkmark");
|
||||
checkboxLabel.appendChild(checkboxDiv);
|
||||
|
||||
checkboxCell.appendChild(checkbox);
|
||||
checkboxCell.appendChild(checkboxLabel);
|
||||
row.appendChild(checkboxCell);
|
||||
|
||||
// Добавляем ячейки с данными
|
||||
const driverID = document.createElement("td");
|
||||
driverID.textContent = device.id;
|
||||
row.appendChild(driverID);
|
||||
const name = document.createElement("td");
|
||||
name.textContent = device.name;
|
||||
row.appendChild(name);
|
||||
const surname = document.createElement("td");
|
||||
surname.textContent = device.surname;
|
||||
row.appendChild(surname);
|
||||
const numberTS = document.createElement("td");
|
||||
numberTS.textContent = device.numberTS;
|
||||
row.appendChild(numberTS);
|
||||
const phone = document.createElement("td");
|
||||
phone.textContent = device.phone;
|
||||
row.appendChild(phone);
|
||||
const mail = document.createElement("td");
|
||||
mail.textContent = device.mail;
|
||||
row.appendChild(mail);
|
||||
const driverCard = document.createElement("td");
|
||||
driverCard.textContent = device.driverCard;
|
||||
row.appendChild(driverCard);
|
||||
|
||||
// Добавляем кнопку удаления после каждого ряда
|
||||
const trashCell = document.createElement("td");
|
||||
trashCell.setAttribute("class", "optionsCell");
|
||||
const trashButton = document.createElement("button");
|
||||
trashButton.setAttribute("class", "trash");
|
||||
trashButton.setAttribute("onclick", `deleteDriver(${device.id})`);
|
||||
trashButton.value = `delete-device-${device.id}`;
|
||||
trashButton.id = `delete-device-${device.id}`;
|
||||
const optionsButton = document.createElement("button");
|
||||
optionsButton.setAttribute("onclick", `openEdit(${device.id})`);
|
||||
optionsButton.setAttribute("class", "options");
|
||||
optionsButton.value = `options-device-${device.id}`;
|
||||
optionsButton.id = `options-device-${device.id}`;
|
||||
|
||||
trashCell.appendChild(optionsButton);
|
||||
trashCell.appendChild(trashButton);
|
||||
|
||||
row.appendChild(trashCell);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("resize", function (event) {
|
||||
tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
rowHeight = 60;
|
||||
rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
createTable();
|
||||
createPagination();
|
||||
});
|
||||
|
||||
const createPagination = () => {
|
||||
const count = document.getElementById("count");
|
||||
count.textContent = `Всего результатов: ${filteredDevices.length}`;
|
||||
|
||||
const pagination = document.getElementById("pagination");
|
||||
pagination.innerHTML = "";
|
||||
|
||||
const pageCount = Math.ceil(filteredDevices.length / rowsPerPage);
|
||||
for (let i = 1; i <= pageCount; i++) {
|
||||
const pageLink = document.createElement("a");
|
||||
pageLink.href = "#";
|
||||
if (i === currentPage) {
|
||||
document.querySelector("#device-all").checked = false;
|
||||
pageLink.classList.add("active");
|
||||
}
|
||||
pageLink.textContent = i;
|
||||
pageLink.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
currentPage = i - 1;
|
||||
currentPage = i;
|
||||
createTable();
|
||||
createPagination();
|
||||
});
|
||||
pagination.appendChild(pageLink);
|
||||
}
|
||||
|
||||
// var currentPageSpan = document.createElement("span");
|
||||
// currentPageSpan.textContent = currentPage;
|
||||
// pagination.appendChild(currentPageSpan);
|
||||
|
||||
// Добавляем кнопки "Next" и "Previous"
|
||||
|
||||
// const prevButton = document.createElement("button");
|
||||
// prevButton.innerText = "Previous";
|
||||
// prevButton.onclick = () => {
|
||||
// if (currentPage === 1) return;
|
||||
// currentPage--;
|
||||
// createTable();
|
||||
// };
|
||||
// pagination.appendChild(prevButton);
|
||||
|
||||
// const nextButton = document.createElement("button");
|
||||
// nextButton.innerText = "Next";
|
||||
// nextButton.onclick = () => {
|
||||
// if (currentPage === pageCount) return;
|
||||
// currentPage++;
|
||||
// createTable();
|
||||
// };
|
||||
// pagination.appendChild(nextButton);
|
||||
};
|
||||
|
||||
const applyFilterAndSearch = () => {
|
||||
const searchValue = searchInput.value.toLowerCase();
|
||||
const groupFilters = Array.from(
|
||||
document.querySelectorAll('input[type="checkbox"].device-filter:checked')
|
||||
).map((checkbox) => checkbox.value);
|
||||
|
||||
filteredDevices = devices.filter((device) => {
|
||||
const searchString =
|
||||
`${device.group} ${device.driverID} ${device.name} ${device.number} ${device.surname} ${device.numberTS} ${device.phone} ${device.mail} ${device.driverCard}`.toLowerCase();
|
||||
const matchGroup =
|
||||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||||
const matchSearch = !searchValue || searchString.includes(searchValue);
|
||||
return matchGroup && matchSearch;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
createTable();
|
||||
createPagination();
|
||||
};
|
||||
|
||||
const searchInput = document.getElementById("table-search");
|
||||
searchInput.addEventListener("input", applyFilterAndSearch);
|
||||
|
||||
const filterCheckboxes = Array.from(
|
||||
document.querySelectorAll('input[type="checkbox"].device-filter')
|
||||
);
|
||||
filterCheckboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", applyFilterAndSearch);
|
||||
});
|
||||
|
||||
createTable();
|
||||
createPagination();
|
||||
@ -21,23 +21,6 @@ const createTable = () => {
|
||||
|
||||
devicesToDisplay.forEach((device) => {
|
||||
const row = document.createElement("tr");
|
||||
// Добавляем чекбокс перед каждым рядом
|
||||
const checkboxCell = document.createElement("td");
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.value = `device-${device.id}`;
|
||||
checkbox.id = `device-${device.id}`;
|
||||
|
||||
const checkboxLabel = document.createElement("label");
|
||||
checkboxLabel.setAttribute("for", `device-${device.id}`);
|
||||
|
||||
const checkboxDiv = document.createElement("div");
|
||||
checkboxDiv.setAttribute("class", "checkmark");
|
||||
checkboxLabel.appendChild(checkboxDiv);
|
||||
|
||||
checkboxCell.appendChild(checkbox);
|
||||
checkboxCell.appendChild(checkboxLabel);
|
||||
row.appendChild(checkboxCell);
|
||||
|
||||
// Добавляем ячейки с данными
|
||||
const name = document.createElement("td");
|
||||
|
||||
@ -19,23 +19,6 @@ const createTable = () => {
|
||||
|
||||
devicesToDisplay.forEach((device) => {
|
||||
const row = document.createElement("tr");
|
||||
// Добавляем чекбокс перед каждым рядом
|
||||
const checkboxCell = document.createElement("td");
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.value = `device-${device.id}`;
|
||||
checkbox.id = `device-${device.id}`;
|
||||
|
||||
const checkboxLabel = document.createElement("label");
|
||||
checkboxLabel.setAttribute("for", `device-${device.id}`);
|
||||
|
||||
const checkboxDiv = document.createElement("div");
|
||||
checkboxDiv.setAttribute("class", "checkmark");
|
||||
checkboxLabel.appendChild(checkboxDiv);
|
||||
|
||||
checkboxCell.appendChild(checkbox);
|
||||
checkboxCell.appendChild(checkboxLabel);
|
||||
row.appendChild(checkboxCell);
|
||||
|
||||
// Добавляем ячейки с данными
|
||||
const name = document.createElement("td");
|
||||
|
||||
@ -880,13 +880,14 @@ td {
|
||||
}
|
||||
|
||||
.optionsCell {
|
||||
min-width: 60px;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
table tr th:first-child,
|
||||
table td:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
padding-left: 30px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
@ -1,801 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Водители</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<img src="../img/argus.png">
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> {{Organisation}}</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>{{User}}</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/logout"><div id="account-additional" class="additional">Выйти</div></a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="navigation">
|
||||
<a href="/">
|
||||
<div><img src="../img/chart.svg">Главная</div>
|
||||
</a>
|
||||
<a href="/devices">
|
||||
<div class="selected"><img src="../img/cloud.svg">Устройства</div>
|
||||
</a>
|
||||
<a href="/reports">
|
||||
<div><img src="../img/bubble.svg">Отчёты</div>
|
||||
</a>
|
||||
<a href="/live">
|
||||
<div><img src="../img/waves.svg">Трансляция</div>
|
||||
</a>
|
||||
<a href="/videos">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
{{#if isAdmin}}
|
||||
<a class="admin-panel" href="/admin">
|
||||
<div><img src="../img/keyboard.svg">Админка</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
<a class="settings" href="/settings">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
{{#if ifDBError}}
|
||||
<section class="dberror">
|
||||
<div class="erorr-container">
|
||||
<img src="../img/warning.svg"> <br>
|
||||
<h1>Ошибка </h1> <br>
|
||||
<span>Не удалось получить данные из БД</span>
|
||||
<button type="button" onclick="location.reload();">Повторить попытку</button>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a class="selected" href="/devices/drivers">Водители</a>
|
||||
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
|
||||
<section class="for-table">
|
||||
|
||||
<section class="organisation">
|
||||
<h1>Организация</h1>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" 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-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
|
||||
<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> -->
|
||||
</ul>
|
||||
|
||||
<button class="addDriver" onclick="openNew()">Добавить водителя</button>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="table-area" class="table">
|
||||
<h1>Список водителей</h1>
|
||||
<input id="table-search" class="search" type="text" placeholder="Поиск">
|
||||
|
||||
|
||||
<table id="deviceTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
|
||||
<th>ID</th>
|
||||
<th>Имя</th>
|
||||
<th>Фамилия</th>
|
||||
<th>Номер ТС</th>
|
||||
<th>Номер телефона</th>
|
||||
<th>Почта</th>
|
||||
<th>Карта водителя</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Сюда будут добавляться строки таблицы -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div id="count">
|
||||
<!-- Сюда добавится итоговое количество результатов -->
|
||||
</div>
|
||||
<div id="pagination">
|
||||
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="form-bg" class="edit-container">
|
||||
|
||||
<section id="editForm">
|
||||
<section class="for-new">
|
||||
|
||||
<section class="stages">
|
||||
<input name="newStageEdit" type="radio" value="main" id="stage-main-edit" checked><label for="stage-main-edit">Основная информация</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStageEdit" type="radio" value="details" id="stage-details-edit"><label for="stage-details-edit">Детали</label>
|
||||
</section>
|
||||
</section>
|
||||
<section id="add-new-container" class="add-new">
|
||||
<img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">
|
||||
|
||||
<form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedriver">
|
||||
<input type="text" id="driver-id-edit" name="driverID" hidden>
|
||||
|
||||
<div id="main-edit" class="new-parameters drivers active">
|
||||
|
||||
<h1>Основная информация</h1>
|
||||
<h2>Сперва самое необходимое</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<div id="upload-photo-edit" class="upload-input">
|
||||
<!-- <img src="../img/upload.svg">
|
||||
<span class="upload-text">Загрузить фотографию водителя</span>
|
||||
<span class="upload-description">PNG, JPG (макс 20 мб)</span> -->
|
||||
<img src="../img/warning.svg">
|
||||
<span class="upload-text">Временно недоступно редактирование фотографии</span>
|
||||
<span class="upload-description">Остальная информация изменяется</span>
|
||||
</div>
|
||||
<input id="input-upload-photo-edit" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<label for="driver-name-edit">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverName" type="text" id="driver-name-edit" placeholder="Имя водителя" required>
|
||||
|
||||
<label for="driver-surname-edit">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverSurname" type="text" id="driver-surname-edit" placeholder="Фамилия водителя" required>
|
||||
|
||||
<label for="driver-card-edit">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverCard" type="text" id="driver-card-edit" placeholder="Номер карты водителя" required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-main-edit" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="details-edit" class="new-parameters">
|
||||
|
||||
<h1>Детальная информация</h1>
|
||||
<h2>Для удобства в идентификации</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-gender-edit">Пол</label>
|
||||
<select name="driverGender" id="driver-gender-edit">
|
||||
<option value="NS">Не указывать</option>
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-license-edit">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverLicense" type="text" id="driver-license-edit" placeholder="Номер водительского удостоверения" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-passport-edit">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPassport" type="text" id="driver-passport-edit" placeholder="Номер удостоверения личности" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-phone-edit">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPhone" type="text" id="driver-phone-edit" placeholder="Номер мобильного телефона" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-email-edit">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverEmail" type="text" id="driver-email-edit" placeholder="Электронная почта" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-transport-edit">Транспортное средство</label>
|
||||
<select name="driverTransport" id="driver-transport-edit">
|
||||
<option value="NS">Не указывать</option>
|
||||
{{#each Registrars}}
|
||||
<option value="{{this}}">{{this}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label for="driver-description-edit">Примечание</label>
|
||||
<input name="driverDescription" type="text" id="driver-description-edit" placeholder="Примечание">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button type="submit" id="send-edit">Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section id="newForm">
|
||||
<section class="for-new">
|
||||
|
||||
<section class="stages">
|
||||
<input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label>
|
||||
</section>
|
||||
</section>
|
||||
<section id="add-new-container" class="add-new">
|
||||
<img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">
|
||||
|
||||
<form id="new-form" enctype="multipart/form-data" method="post" action="/adddriver">
|
||||
|
||||
<div id="main" class="new-parameters drivers active">
|
||||
|
||||
<h1>Основная информация</h1>
|
||||
<h2>Сперва самое необходимое</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<div id="upload-photo" class="upload-input">
|
||||
<img src="../img/upload.svg">
|
||||
<span class="upload-text">Загрузить фотографию водителя</span>
|
||||
<span class="upload-description">PNG, JPG (макс 20 мб)</span>
|
||||
</div>
|
||||
<div class="image-container" id="image-container" style="display: none;">
|
||||
<img id="image-preview" src="#" alt="Uploaded Image">
|
||||
<div class="upload-result">
|
||||
<img id="file-icon" src="../img/file.svg" />
|
||||
<span id="file-name"></span>
|
||||
<span id="file-size"></span>
|
||||
<img id="clear-button" src="../img/xmark.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<input id="input-upload-photo" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required>
|
||||
|
||||
<label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required>
|
||||
|
||||
<label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-main" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="details" class="new-parameters">
|
||||
|
||||
<h1>Детальная информация</h1>
|
||||
<h2>Для удобства в идентификации</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-gender">Пол</label>
|
||||
<select name="driverGender" id="driver-gender">
|
||||
<option value="NS">Не указывать</option>
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPassport" type="text" id="driver-passport" placeholder="Номер удостоверения личности" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-email">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverEmail" type="text" id="driver-email" placeholder="Электронная почта" required>
|
||||
</div>
|
||||
|
||||
<div class="parameters-input">
|
||||
<label for="driver-transport">Транспортное средство</label>
|
||||
<select name="driverTransport" id="driver-transport">
|
||||
<option value="NS">Не указывать</option>
|
||||
{{#each Registrars}}
|
||||
<option value="{{this}}">{{this}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label for="driver-description">Примечание</label>
|
||||
<input name="driverDescription" type="text" id="driver-description" placeholder="Примечание">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button type="submit" id="send-form">Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<section style="display: none;" class="dberror" id="deleteConfirmation">
|
||||
<div class="erorr-container">
|
||||
<img src="../img/warning.svg"> <br>
|
||||
<h1>Удаление водителя </h1> <br>
|
||||
<span>Вы уверены что хотите удалить <span id="driverDeleteInfo"></span>?</span>
|
||||
<div class="buttons">
|
||||
<button id="deleteCancel" onclick="closeDeletion();" style="display: inline-block; background-color: white; color: rgba(0, 0, 0, 0.7); margin-right: 5px;" type="button" onclick="deleteDriver()">Отменить</button>
|
||||
<button id="deleteDriver" style="display: inline-block;" type="button">Подтвердить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const devices = [
|
||||
{{#each Drivers}}
|
||||
{
|
||||
id: "{{this.id}}",
|
||||
name: "{{this.name}}",
|
||||
surname: "{{this.surname}}",
|
||||
numberTS: "{{this.transport}}",
|
||||
phone: "{{this.phone}}",
|
||||
mail: "{{this.email}}",
|
||||
sim: "{{this.sim}}",
|
||||
driverCard: "{{this.card}}",
|
||||
},
|
||||
{{/each}}
|
||||
];
|
||||
</script>
|
||||
|
||||
<script src="../scripts/table-drivers.js"></script>
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
|
||||
<script src="../scripts/drivers-form.js"></script>
|
||||
|
||||
<script>
|
||||
const uploadPhotoInput = document.getElementById('input-upload-photo');
|
||||
const uploadContainer = document.getElementById('upload-photo');
|
||||
const imageContainer = document.getElementById('image-container');
|
||||
const imagePreview = document.getElementById('image-preview');
|
||||
const fileNameElement = document.getElementById('file-name');
|
||||
const fileSizeElement = document.getElementById('file-size');
|
||||
const clearButton = document.getElementById('clear-button');
|
||||
|
||||
uploadPhotoInput.addEventListener('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
uploadContainer.style.display = 'none';
|
||||
imagePreview.src = reader.result;
|
||||
imageContainer.style.display = 'block';
|
||||
fileNameElement.textContent = file.name ;
|
||||
fileSizeElement.textContent = formatFileSize(file.size);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (bytes === 0) return '0 Byte';
|
||||
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
||||
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
clearButton.addEventListener('click', function() {
|
||||
uploadContainer.style.display = 'block';
|
||||
uploadPhotoInput.value = null;
|
||||
imageContainer.style.display = 'none';
|
||||
imagePreview.src = '#';
|
||||
fileNameElement.textContent = '';
|
||||
fileSizeElement.textContent = '';
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var form = document.getElementById('new-form');
|
||||
const sendButton = document.getElementById('send-form');
|
||||
|
||||
form.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/adddriver', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
console.log('Водитель успешно добавлен!');
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Ошибка отправки формы:', xhr.status);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
|
||||
var form2 = document.getElementById('edit-form');
|
||||
const editSendButton = document.getElementById('send-edit');
|
||||
|
||||
form2.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(form2);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/updatedriver', true);
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
console.log('Информация о водителе успешно обновлена!');
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Ошибка отправки формы:', xhr.status);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const fileSelect = document.getElementById("upload-photo");
|
||||
const fileElem = document.getElementById("input-upload-photo");
|
||||
|
||||
fileSelect.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
if (fileElem) {
|
||||
fileElem.click();
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#driver-phone').inputmask({"mask": "+7 (999) 999-9999"});
|
||||
$('#driver-phone-edit').inputmask({"mask": "+7 (999) 999-9999"});
|
||||
|
||||
});
|
||||
|
||||
// Открывает popup форму
|
||||
function openNew() {
|
||||
|
||||
var formContainer = $("#form-bg");
|
||||
var newForm = $("#newForm");
|
||||
var editForm = $("#editForm");
|
||||
|
||||
|
||||
|
||||
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-main").checked = true;
|
||||
|
||||
|
||||
newForm.css("display", "flex");
|
||||
editForm.css("display", "none");
|
||||
// Открытие формы
|
||||
formContainer.addClass("active");
|
||||
newForm.addClass("form-animation");
|
||||
$("body").css("overflow", "hidden");
|
||||
}
|
||||
|
||||
function openEdit(id) {
|
||||
|
||||
var formContainer = $("#form-bg");
|
||||
var newForm = $("#newForm");
|
||||
var editForm = $("#editForm");
|
||||
|
||||
$.ajax({
|
||||
url: "/driverdata",
|
||||
method: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ id: id }),
|
||||
success: function(response) {
|
||||
// Установка значений полей формы
|
||||
$("#driver-name-edit").val(response.name);
|
||||
$("#driver-surname-edit").val(response.surname);
|
||||
$("#driver-card-edit").val(response.card);
|
||||
$("#driver-gender-edit").val(response.gender);
|
||||
$("#driver-license-edit").val(response.license);
|
||||
$("#driver-passport-edit").val(response.passport);
|
||||
$("#driver-phone-edit").val(response.phone);
|
||||
$("#driver-email-edit").val(response.email);
|
||||
$("#driver-transport-edit").val(response.transport);
|
||||
$("#driver-description-edit").val(response.description);
|
||||
$("#driver-id-edit").val(response.id);
|
||||
|
||||
activeContent = content3
|
||||
switchContent(content3);
|
||||
|
||||
content1.style.opacity = 0;
|
||||
content1.style.display = "none";
|
||||
content2.style.opacity = 0;
|
||||
content2.style.display = "none";
|
||||
content4.style.opacity = 0;
|
||||
content4.style.display = "none";
|
||||
|
||||
document.getElementById("stage-main").checked = true;
|
||||
|
||||
newForm.css("display", "none");
|
||||
editForm.css("display", "flex");
|
||||
// Открытие формы
|
||||
formContainer.addClass("active");
|
||||
editForm.addClass("form-animation");
|
||||
$("body").css("overflow", "hidden");
|
||||
},
|
||||
error: function() {
|
||||
// Обработка ошибки при запросе к серверу
|
||||
alert("Произошла ошибка при запросе к серверу.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var formContainer = $("#form-bg");
|
||||
var newForm = $("#newForm");
|
||||
var editForm = $("#editForm");
|
||||
|
||||
// Функция для закрытия формы
|
||||
function closeForm() {
|
||||
formContainer.removeClass("active");
|
||||
newForm.removeClass("form-animation");
|
||||
editForm.removeClass("form-animation");
|
||||
newForm.css("display", "none");
|
||||
editForm.css("display", "none");
|
||||
$("body").css("overflow", "auto");
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function deleteDriver(id) {
|
||||
|
||||
var deleteConfirmation = $("#deleteConfirmation");
|
||||
|
||||
$.ajax({
|
||||
url: "/driverdata",
|
||||
method: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ id: id }),
|
||||
success: function(response) {
|
||||
// Установка значений полей формы
|
||||
$("#driverDeleteInfo").html(response.name + " " + response.surname);
|
||||
document.getElementById('deleteDriver').setAttribute("onclick", `confirmDelete(${response.id})`);
|
||||
|
||||
|
||||
document.getElementById('deleteConfirmation').style.display = "flex";
|
||||
|
||||
$("body").css("overflow", "hidden");
|
||||
},
|
||||
error: function() {
|
||||
// Обработка ошибки при запросе к серверу
|
||||
alert("Произошла ошибка при запросе к серверу.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function closeDeletion() {
|
||||
document.getElementById('deleteConfirmation').style.display = "none";
|
||||
}
|
||||
|
||||
function confirmDelete(id) {
|
||||
$.ajax({
|
||||
url: "/deletedriver",
|
||||
method: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ id: id }),
|
||||
success: function(response) {
|
||||
location.reload();
|
||||
},
|
||||
error: function() {
|
||||
// Обработка ошибки при запросе к серверу
|
||||
alert("Произошла ошибка при запросе к серверу.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
// Скрытие/Показ дополнительных меню аккаунта
|
||||
const accountMain = document.getElementById('account-main');
|
||||
const accountAdditional = document.getElementById('account-additional');
|
||||
const accountUp = document.getElementById('up');
|
||||
const accountDown = document.getElementById('down');
|
||||
accountAdditional.style.display = 'none';
|
||||
accountUp.style.display = 'none';
|
||||
|
||||
accountMain.addEventListener('click', () => {
|
||||
if (accountAdditional.style.display === 'none') {
|
||||
accountAdditional.style.display = 'flex';
|
||||
accountUp.style.display = 'unset';
|
||||
accountDown.style.display = 'none';
|
||||
} else {
|
||||
accountAdditional.style.display = 'none';
|
||||
accountUp.style.display = 'none';
|
||||
accountDown.style.display = 'unset';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
const checkboxes = document.querySelectorAll('.organisation .checkbox-input');
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
applyFilterAndSearch();
|
||||
checkbox.addEventListener('change', function() {
|
||||
document.querySelector('#device-all').checked = false;
|
||||
applyFilterAndSearch();
|
||||
const devices = this.parentNode.querySelector('.area-devices');
|
||||
if (this.checked) {
|
||||
devices.style.display = 'block';
|
||||
|
||||
// Активируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = true;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
} else {
|
||||
devices.style.display = 'none';
|
||||
applyFilterAndSearch();
|
||||
|
||||
// Деактивируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
}
|
||||
|
||||
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
|
||||
if (!this.checked) {
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
devices.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var table = document.querySelector('#deviceTable');
|
||||
var tableCheckboxAll = table.querySelector('#device-all');
|
||||
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
tableCheckboxAll.addEventListener('click', function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
if (tableCheckboxAll.checked) {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = true;
|
||||
});
|
||||
} else {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#deviceTable').click( function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
|
||||
for (var i = 0; i < tableCheckboxes.length; i++) {
|
||||
tableCheckboxes[i].addEventListener('click', function(event) {
|
||||
for (var j = 0; j < tableCheckboxes.length; j++) {
|
||||
if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
|
||||
tableCheckboxAll.checked = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
tableCheckboxAll.checked = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -101,7 +101,7 @@
|
||||
<a class="selected" href="/devices/groups">Группы</a>
|
||||
|
||||
{{#if Update}}
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
<!-- <a class="update" href="/devices/update">Обновление ПО</a> -->
|
||||
{{/if}}
|
||||
</nav>
|
||||
<section class="bg">
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||
|
||||
{{#if Update}}
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
<!-- <a class="update" href="/devices/update">Обновление ПО</a> -->
|
||||
{{/if}}
|
||||
</nav>
|
||||
<section class="bg">
|
||||
@ -122,7 +122,6 @@
|
||||
<table id="deviceTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
|
||||
<th>Группа</th>
|
||||
<th>Код</th>
|
||||
<th>Номерной знак</th>
|
||||
|
||||
@ -473,7 +473,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
if (serial === $("input[name=camera-serial]:checked").val()) {
|
||||
var marker = L.divIcon({
|
||||
className: 'marker',
|
||||
html: `<div class="marker-name active-${status}">${number !== null ? number : serial}</div>
|
||||
html: `<div class="marker-name active-${status}">${number !== null && number !== "" ? 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"/>
|
||||
@ -482,7 +482,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
} else {
|
||||
var marker = L.divIcon({
|
||||
className: 'marker',
|
||||
html: `<div class="marker-name active-${status}">${number !== null ? number : serial}</div>
|
||||
html: `<div class="marker-name active-${status}">${number !== null && number !== "" ? 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"/>
|
||||
|
||||
@ -115,7 +115,6 @@
|
||||
<table id="deviceTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
|
||||
<th>Наименование</th>
|
||||
<th>ID</th>
|
||||
<th>Номерной знак</th>
|
||||
|
||||
@ -122,24 +122,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="driver-info">
|
||||
<ul>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none" viewBox="0 0 22 23">
|
||||
<path fill="#000" fill-opacity=".75" d="M2.99 23h15.337c2.025 0 2.99-.61 2.99-1.952 0-3.197-4.04-7.821-10.653-7.821C4.04 13.226 0 17.85 0 21.047 0 22.39.964 23 2.99 23Zm-.574-1.842c-.317 0-.452-.086-.452-.342 0-2.001 3.1-5.747 8.7-5.747 5.589 0 8.688 3.746 8.688 5.747 0 .256-.122.342-.44.342H2.416Zm8.248-9.444c2.904 0 5.271-2.587 5.271-5.735 0-3.124-2.355-5.576-5.27-5.576-2.893 0-5.272 2.501-5.272 5.6.012 3.136 2.367 5.71 5.271 5.71Zm0-1.843c-1.781 0-3.306-1.708-3.306-3.868 0-2.123 1.5-3.758 3.306-3.758 1.818 0 3.307 1.61 3.307 3.734 0 2.16-1.513 3.892-3.307 3.892Z"/>
|
||||
</svg>{{DriverName}}</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none" viewBox="0 0 23 23">
|
||||
<path fill="#000" fill-opacity=".75" d="M17.053 23c2.053 0 3.402-.551 4.587-1.888.093-.094.187-.2.27-.293.703-.786 1.031-1.56 1.031-2.3 0-.844-.492-1.63-1.536-2.357l-3.413-2.369c-1.056-.727-2.287-.81-3.272.164l-.904.903c-.27.27-.504.282-.762.117-.633-.398-1.912-1.513-2.78-2.38-.914-.903-1.794-1.912-2.263-2.651-.153-.27-.141-.493.129-.762l.891-.904c.985-.985.903-2.228.176-3.272l-2.37-3.413C6.112.551 5.326.07 4.48.06 3.741.047 2.967.387 2.182 1.09l-.294.258C.551 2.545 0 3.894 0 5.923c0 3.354 2.064 7.436 5.853 11.224C9.618 20.912 13.71 23 17.053 23Zm.012-1.806c-2.99.058-6.826-2.24-9.864-5.266-3.06-3.05-5.465-7.014-5.407-10.005.024-1.29.481-2.404 1.396-3.202.082-.07.141-.129.223-.188.352-.305.727-.469 1.067-.469.34 0 .645.13.868.481l2.276 3.413c.246.364.27.774-.094 1.138L6.498 8.128c-.81.81-.75 1.794-.165 2.58.669.903 1.83 2.217 2.733 3.108.892.904 2.31 2.17 3.226 2.85.786.587 1.77.646 2.58-.164l1.032-1.032c.364-.364.762-.34 1.138-.105l3.413 2.275c.352.235.48.528.48.88 0 .34-.163.715-.468 1.067l-.188.223c-.798.915-1.912 1.36-3.214 1.384Z"/>
|
||||
</svg>{{DriverPhone}}</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none" viewBox="0 0 23 18">
|
||||
<path fill="#000" fill-opacity=".75" d="M3.27 17.969h16.772c1.875 0 2.958-1.084 2.958-3.23V3.24C23 1.105 21.906.022 19.73.022H2.957C1.083.02 0 1.094 0 3.24v11.5c0 2.156 1.094 3.229 3.27 3.229Zm-.062-1.594c-1.041 0-1.614-.552-1.614-1.635V3.24c0-1.073.573-1.625 1.614-1.625h16.584c1.02 0 1.614.552 1.614 1.635v11.5c0 1.073-.593 1.625-1.614 1.625H3.208Zm8.313-4.604c.729 0 1.437-.302 2.166-1.021l8.459-8.312-1.084-1.094-8.28 8.177c-.449.448-.855.646-1.261.646-.417 0-.823-.209-1.26-.646L1.937 1.302.843 2.396l8.51 8.354c.73.719 1.427 1.02 2.167 1.02Zm9.437 4.833 1.084-1.094-6.74-6.656-1.083 1.084 6.74 6.666ZM.99 15.521l1.083 1.094 6.75-6.677-1.094-1.084-6.74 6.667Z"/>
|
||||
</svg>{{DriverEmail}}</li>
|
||||
<li><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none" viewBox="0 0 23 18">
|
||||
<path fill="#000" fill-opacity=".75" d="M4.633 5.91h6.292c.38 0 .682-.311.682-.692a.67.67 0 0 0-.682-.673H4.633a.656.656 0 0 0-.673.673c0 .38.283.693.673.693Zm0 2.605h4.604c.38 0 .683-.302.683-.683a.679.679 0 0 0-.683-.682H4.633a.664.664 0 0 0-.673.682c0 .38.283.683.673.683Zm12.076.264a2.333 2.333 0 0 0 2.33-2.341 2.333 2.333 0 0 0-2.33-2.341 2.342 2.342 0 0 0 0 4.682ZM3.063 17.957h16.874c2.049 0 3.063-1.004 3.063-3.014V3.023C23 1.015 21.986 0 19.937 0H3.063C1.024 0 0 1.014 0 3.024v11.92c0 2.009 1.024 3.013 3.063 3.013Zm.02-1.57c-.976 0-1.513-.517-1.513-1.532V3.112c0-1.015.537-1.542 1.512-1.542h16.836c.965 0 1.512.527 1.512 1.542v11.743c0 1.015-.547 1.532-1.512 1.532H3.082Z"/>
|
||||
</svg>{{DriverLicense}}</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
<div class="speedometr">
|
||||
<h1>Скорость</h1>
|
||||
<span>км/ч</span>
|
||||
@ -148,28 +130,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="video-controls">
|
||||
<div class="controls">
|
||||
<span id="current-time">00:00</span>
|
||||
<button id="play-pause-btn">
|
||||
<svg id="play-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="25" fill="none" viewBox="0 0 23 25">
|
||||
<path fill="#0B0B0B" d="M1.77 25c.59 0 1.091-.236 1.681-.575l17.198-9.941c1.224-.723 1.652-1.195 1.652-1.977 0-.781-.428-1.253-1.652-1.961L3.451.59C2.861.25 2.36.03 1.77.03.678.03 0 .856 0 2.139v20.737C0 24.16.678 25 1.77 25Z"/>
|
||||
</svg>
|
||||
<svg id="pause-icon" xmlns="http://www.w3.org/2000/svg" width="19" height="25" fill="none" viewBox="0 0 19 25">
|
||||
<path fill="#0B0B0B" d="M2.134 25h3.483c1.408 0 2.134-.736 2.134-2.163V2.163C7.751.706 7.025.015 5.617 0H2.134C.726 0 0 .736 0 2.163v20.674C-.015 24.264.712 25 2.134 25Zm11.264 0h3.468C18.274 25 19 24.264 19 22.837V2.163C19 .706 18.274 0 16.866 0h-3.468c-1.423 0-2.134.736-2.134 2.163v20.674c0 1.427.711 2.163 2.134 2.163Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span id="remaining-time">-00:00</span>
|
||||
</div>
|
||||
<div id="progress-bar">
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <video id="my-video" src="../test_video.MP4"></video> -->
|
||||
|
||||
<div class="report-video-container">
|
||||
<div id="camera-1" onclick="playVideo(10);">
|
||||
<img src="../../img/play-circle.svg">
|
||||
@ -254,69 +216,6 @@
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
const video = document.getElementById('my-video');
|
||||
const playPauseButton = document.getElementById('play-pause-btn');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progress = document.getElementById('progress');
|
||||
const currentTimeDisplay = document.getElementById('current-time');
|
||||
const remainingTimeDisplay = document.getElementById('remaining-time');
|
||||
const playIcon = document.getElementById('play-icon');
|
||||
const pauseIcon = document.getElementById('pause-icon');
|
||||
|
||||
playPauseButton.addEventListener('click', togglePlayPause);
|
||||
progressBar.addEventListener('click', seek);
|
||||
|
||||
function togglePlayPause() {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
playIcon.style.display = 'none';
|
||||
pauseIcon.style.display = 'inline-block';
|
||||
} else {
|
||||
video.pause();
|
||||
playIcon.style.display = 'inline-block';
|
||||
pauseIcon.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgressBar() {
|
||||
const progressPercentage = (video.currentTime / video.duration) * 100;
|
||||
progress.style.width = `${progressPercentage}%`;
|
||||
|
||||
const currentTime = formatTime(video.currentTime);
|
||||
currentTimeDisplay.textContent = currentTime;
|
||||
|
||||
const remainingTime = formatTime(video.duration - video.currentTime);
|
||||
remainingTimeDisplay.textContent = `-${remainingTime}`;
|
||||
|
||||
if (video.duration === video.currentTime) {
|
||||
progress.style.borderRadius = '50px';
|
||||
playIcon.style.display = 'inline-block';
|
||||
pauseIcon.style.display = 'none';
|
||||
} else {
|
||||
progress.style.borderRadius = '50px 0 0 50px';
|
||||
}
|
||||
}
|
||||
|
||||
function seek(event) {
|
||||
const progressWidth = progressBar.clientWidth;
|
||||
const clickX = event.offsetX;
|
||||
const seekTime = (clickX / progressWidth) * video.duration;
|
||||
video.currentTime = seekTime;
|
||||
}
|
||||
|
||||
function formatTime(time) {
|
||||
const minutes = Math.floor(time / 60);
|
||||
const seconds = Math.floor(time % 60);
|
||||
const formattedTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
return formattedTime;
|
||||
}
|
||||
|
||||
video.addEventListener('timeupdate', updateProgressBar);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Скрытие/Показ дополнительных меню аккаунта
|
||||
const accountMain = document.getElementById('account-main');
|
||||
|
||||
Binary file not shown.
Loading…
Reference in New Issue
Block a user