devices, drivers, alerts and more
This commit is contained in:
Ivan
parent
c94017820a
commit
4f34433d6b
GPG Key ID:
0C191B86D9582583
1
.gitignore
vendored
1
.gitignore
vendored
@ -10,3 +10,4 @@ static/.DS_Store
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -13,10 +13,12 @@
|
||||
"express": "^4.18.2",
|
||||
"fs": "^0.0.1-security",
|
||||
"handlebars": "^4.7.7",
|
||||
"http": "^0.0.1-security",
|
||||
"mapbox-gl": "^2.15.0",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"path": "^0.12.7",
|
||||
"pg": "^8.11.1"
|
||||
"pg": "^8.11.1",
|
||||
"ws": "^8.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-rewind": {
|
||||
@ -478,6 +480,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/http": {
|
||||
"version": "0.0.1-security",
|
||||
"resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
|
||||
"integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
@ -1199,6 +1206,26 @@
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
|
||||
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
@ -1564,6 +1591,11 @@
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
|
||||
},
|
||||
"http": {
|
||||
"version": "0.0.1-security",
|
||||
"resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
|
||||
"integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
|
||||
},
|
||||
"http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
@ -2121,6 +2153,12 @@
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
|
||||
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"requires": {}
|
||||
},
|
||||
"xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
|
||||
@ -14,9 +14,11 @@
|
||||
"express": "^4.18.2",
|
||||
"fs": "^0.0.1-security",
|
||||
"handlebars": "^4.7.7",
|
||||
"http": "^0.0.1-security",
|
||||
"mapbox-gl": "^2.15.0",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"path": "^0.12.7",
|
||||
"pg": "^8.11.1"
|
||||
"pg": "^8.11.1",
|
||||
"ws": "^8.13.0"
|
||||
}
|
||||
}
|
||||
|
||||
575
server.js
575
server.js
@ -6,11 +6,26 @@ const fs = require("fs");
|
||||
const handlebars = require("handlebars");
|
||||
require("dotenv").config();
|
||||
const multer = require("multer");
|
||||
const http = require("http");
|
||||
const WebSocket = require("ws");
|
||||
|
||||
const upload = multer();
|
||||
const server = http.createServer(app);
|
||||
const wss = new WebSocket.Server({ server });
|
||||
|
||||
// Для сохранения загруженных фотографий
|
||||
const storage = multer.diskStorage({
|
||||
destination: function (req, file, cb) {
|
||||
cb(null, "uploads"); // Папка для сохранения фотографий
|
||||
},
|
||||
filename: function (req, file, cb) {
|
||||
cb(null, Date.now() + "-" + file.originalname);
|
||||
},
|
||||
});
|
||||
const upload = multer({ storage: storage });
|
||||
|
||||
app.use(express.static(path.join(__dirname, "static")));
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
|
||||
app.get("/", index);
|
||||
app.get("/login", login);
|
||||
@ -20,21 +35,19 @@ app.get("/reports", reports);
|
||||
app.get("/reports/346", reports346);
|
||||
app.get("/devices", devices);
|
||||
app.get("/devices/drivers", drivers);
|
||||
app.get("/devices/newdevice", newdevice);
|
||||
app.get("/devices/newdriver", newdriver);
|
||||
app.get("/devices/update", update);
|
||||
|
||||
// const DB_User = process.env.DB_USER;
|
||||
// const DB_Password = process.env.DB_PASSWORD;
|
||||
// const DB_Host = process.env.DB_HOST;
|
||||
// const DB_Port = process.env.DB_PORT;
|
||||
// const DB_Name = process.env.DB_NAME;
|
||||
const DB_User = process.env.DB_USER;
|
||||
const DB_Password = process.env.DB_PASSWORD;
|
||||
const DB_Host = process.env.DB_HOST;
|
||||
const DB_Port = process.env.DB_PORT;
|
||||
const DB_Name = process.env.DB_NAME;
|
||||
|
||||
const DB_User = "postgres";
|
||||
const DB_Password = "password";
|
||||
const DB_Host = "postgres";
|
||||
const DB_Port = "5432";
|
||||
const DB_Name = "postgres";
|
||||
// const DB_User = "postgres";
|
||||
// const DB_Password = "password";
|
||||
// const DB_Host = "postgres";
|
||||
// const DB_Port = "5432";
|
||||
// const DB_Name = "postgres";
|
||||
|
||||
async function index(req, res) {
|
||||
var templateData = {
|
||||
@ -179,6 +192,12 @@ app.post("/devices-geo", async (req, res) => {
|
||||
});
|
||||
|
||||
async function reports(req, res) {
|
||||
let templateData = {
|
||||
Organisation: "Название организации",
|
||||
User: "Тестовое Имя",
|
||||
ifDBError: false,
|
||||
Registrars: [],
|
||||
};
|
||||
try {
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
@ -190,16 +209,22 @@ async function reports(req, res) {
|
||||
const client = await pool.connect();
|
||||
// Выполняем запрос и получаем результат
|
||||
const query = `
|
||||
SELECT id, cmdno, time, serial, st
|
||||
FROM (
|
||||
SELECT id, cmdno, time, serial, st
|
||||
FROM alarms
|
||||
ORDER BY time DESC
|
||||
LIMIT 100
|
||||
) AS subquery
|
||||
ORDER BY time ASC;
|
||||
SELECT a.id, a.cmdno, a.time, a.serial, a.st, r.plate, g.latitude, g.longitude
|
||||
FROM (
|
||||
SELECT id, cmdno, time, serial, st
|
||||
FROM alarms
|
||||
ORDER BY time DESC
|
||||
LIMIT 100
|
||||
) AS a
|
||||
LEFT JOIN registrars AS r ON a.serial = r.serial
|
||||
LEFT JOIN (
|
||||
SELECT *,
|
||||
ROW_NUMBER() OVER (PARTITION BY serial ORDER BY ABS(EXTRACT(EPOCH FROM (time - $1)))) AS row_num
|
||||
FROM geo
|
||||
) AS g ON a.serial = g.serial AND g.row_num = 1
|
||||
ORDER BY a.time DESC;
|
||||
`;
|
||||
const alarms = await client.query(query);
|
||||
const alarms = await client.query(query, [new Date()]); // Pass current date/time to the query for finding the nearest geoposition.
|
||||
|
||||
function formatDate(date) {
|
||||
const options = {
|
||||
@ -213,36 +238,120 @@ async function reports(req, res) {
|
||||
return formattedDate.replace(",", "");
|
||||
}
|
||||
|
||||
var templateData = {
|
||||
Organisation: "Название организации",
|
||||
User: "Тестовое Имя",
|
||||
Alarms: alarms.rows.map((alarm) => {
|
||||
let type;
|
||||
switch (alarm.st) {
|
||||
case "0":
|
||||
type = "Усталость";
|
||||
break;
|
||||
case "1":
|
||||
type = "Отсутствие водителя";
|
||||
break;
|
||||
case "2":
|
||||
type = "Разговор по телефону";
|
||||
break;
|
||||
default:
|
||||
type = "Неизвестный тип";
|
||||
}
|
||||
return {
|
||||
id: alarm.id,
|
||||
cmdno: alarm.cmdno,
|
||||
time: formatDate(alarm.time),
|
||||
serial: alarm.serial,
|
||||
st: alarm.st,
|
||||
type: type,
|
||||
};
|
||||
}),
|
||||
};
|
||||
(templateData.Alarms = alarms.rows.map((alarm) => {
|
||||
let type;
|
||||
switch (alarm.st) {
|
||||
case "0":
|
||||
type = "Усталость";
|
||||
break;
|
||||
case "1":
|
||||
type = "Водитель пропал";
|
||||
break;
|
||||
case "2":
|
||||
type = "Разговор по телефону";
|
||||
break;
|
||||
case "3":
|
||||
type = "Курение за рулём";
|
||||
break;
|
||||
case "4":
|
||||
type = "Водитель отвлекся";
|
||||
break;
|
||||
case "5":
|
||||
type = "Выезд с полосы движения";
|
||||
break;
|
||||
case "6":
|
||||
type = "!!! Лобовое столкновение";
|
||||
break;
|
||||
case "7":
|
||||
type = "Скорость превышена";
|
||||
break;
|
||||
case "8":
|
||||
type = "Распознавание номерных знаков";
|
||||
break;
|
||||
case "9":
|
||||
type = "!! Маленькое расстояние спереди";
|
||||
break;
|
||||
case "10":
|
||||
type = "Водитель зевает";
|
||||
break;
|
||||
case "11":
|
||||
type = "!!! Столкновение с пешеходом";
|
||||
break;
|
||||
case "12":
|
||||
type = "Проходы переполнены";
|
||||
break;
|
||||
case "13":
|
||||
type = "!! Посадка/высадка вне остановки";
|
||||
break;
|
||||
case "14":
|
||||
type = "!! Смена полосы с нарушением ПДД";
|
||||
break;
|
||||
case "15":
|
||||
type = "! Включенный телефон у водителя";
|
||||
break;
|
||||
case "16":
|
||||
type = "!!! Ремень безопасности";
|
||||
break;
|
||||
case "17":
|
||||
type = "Проверка не удалась";
|
||||
break;
|
||||
case "18":
|
||||
type = "Слепые зоны справа";
|
||||
break;
|
||||
case "19":
|
||||
type = "!!! Заднее столкновение";
|
||||
break;
|
||||
case "20":
|
||||
type = "!!! Управление без рук";
|
||||
break;
|
||||
case "21":
|
||||
type = "!! Управление одной рукой";
|
||||
break;
|
||||
case "22":
|
||||
type = "Очки, блокирующие инфракрасное излучение";
|
||||
break;
|
||||
case "23":
|
||||
type = "Слепые зоны слева";
|
||||
break;
|
||||
case "24":
|
||||
type = "Помехи для пассажиров";
|
||||
break;
|
||||
case "25":
|
||||
type = "На перекрестке ограничена скорость";
|
||||
break;
|
||||
case "26":
|
||||
type = "Обнаружен перекресток";
|
||||
break;
|
||||
case "27":
|
||||
type = "Пешеходы на переходе";
|
||||
break;
|
||||
case "28":
|
||||
type = "! Неучтивое отношение к пешеходам";
|
||||
break;
|
||||
case "29":
|
||||
type = "Обнаружен пешеходный переход";
|
||||
break;
|
||||
case "30":
|
||||
type = "Водитель матерится";
|
||||
break;
|
||||
default:
|
||||
type = "Неизвестный тип";
|
||||
}
|
||||
|
||||
console.log(templateData);
|
||||
return {
|
||||
id: alarm.id,
|
||||
cmdno: alarm.cmdno,
|
||||
time: formatDate(alarm.time),
|
||||
serial: alarm.serial,
|
||||
st: alarm.st,
|
||||
type: type,
|
||||
plate: alarm.plate,
|
||||
latitude: alarm.latitude,
|
||||
longitude: alarm.longitude,
|
||||
geo: alarm.latitude + "," + alarm.longitude,
|
||||
};
|
||||
})),
|
||||
console.log(templateData);
|
||||
|
||||
const source = fs.readFileSync(
|
||||
"static/templates/reports/index.html",
|
||||
@ -255,7 +364,7 @@ async function reports(req, res) {
|
||||
res.send(resultT);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
// templateData.ifDBError = true;
|
||||
templateData.ifDBError = true;
|
||||
|
||||
const source = fs.readFileSync(
|
||||
"static/templates/reports/index.html",
|
||||
@ -265,8 +374,93 @@ async function reports(req, res) {
|
||||
const resultT = template(templateData);
|
||||
res.send(resultT);
|
||||
}
|
||||
// res.sendFile(path.join(__dirname, "static/templates/reports/index.html"));
|
||||
}
|
||||
app.get("/api/devices", async (req, res) => {
|
||||
try {
|
||||
const pool = new Pool({
|
||||
user: DB_User,
|
||||
host: DB_Host,
|
||||
database: DB_Name,
|
||||
password: DB_Password,
|
||||
port: DB_Port,
|
||||
});
|
||||
const { page = 1, limit = 10 } = req.query;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
const query = `
|
||||
SELECT a.id, a.cmdno, a.time, a.serial, a.st, r.plate, g.latitude, g.longitude
|
||||
FROM (
|
||||
SELECT id, cmdno, time, serial, st
|
||||
FROM alarms
|
||||
ORDER BY time DESC
|
||||
LIMIT $1 OFFSET $2
|
||||
) AS a
|
||||
LEFT JOIN registrars AS r ON a.serial = r.serial
|
||||
LEFT JOIN (
|
||||
SELECT *,
|
||||
ROW_NUMBER() OVER (PARTITION BY serial ORDER BY ABS(EXTRACT(EPOCH FROM (time - $3)))) AS row_num
|
||||
FROM geo
|
||||
) AS g ON a.serial = g.serial AND g.row_num = 1
|
||||
ORDER BY a.time DESC;
|
||||
`;
|
||||
const alarms = await pool.query(query, [limit, offset, new Date()]); // Pass current date/time to the query for finding the nearest geoposition.
|
||||
|
||||
function formatDate(date) {
|
||||
const options = {
|
||||
year: "2-digit",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
const formattedDate = new Date(date).toLocaleString("ru-RU", options);
|
||||
return formattedDate.replace(",", "");
|
||||
}
|
||||
|
||||
const alarmsData = alarms.rows.map((alarm) => {
|
||||
let type;
|
||||
switch (alarm.st) {
|
||||
case "0":
|
||||
type = "Усталость";
|
||||
break;
|
||||
case "1":
|
||||
type = "Отсутствие водителя";
|
||||
break;
|
||||
case "2":
|
||||
type = "Разговор по телефону";
|
||||
break;
|
||||
default:
|
||||
type = "Неизвестный тип";
|
||||
}
|
||||
return {
|
||||
id: alarm.id,
|
||||
cmdno: alarm.cmdno,
|
||||
time: formatDate(alarm.time),
|
||||
serial: alarm.serial,
|
||||
st: alarm.st,
|
||||
type: type,
|
||||
plate: alarm.plate,
|
||||
latitude: alarm.latitude,
|
||||
longitude: alarm.longitude,
|
||||
geo: alarm.latitude + "," + alarm.longitude,
|
||||
};
|
||||
});
|
||||
|
||||
const totalCountQuery = "SELECT COUNT(*) FROM alarms;";
|
||||
const totalCount = await pool.query(totalCountQuery);
|
||||
|
||||
const totalPages = Math.ceil(totalCount.rows[0].count / limit);
|
||||
|
||||
res.json({
|
||||
data: alarmsData,
|
||||
totalPages: totalPages,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error executing query:", error);
|
||||
res.status(500).json({ error: "Internal server error" });
|
||||
}
|
||||
});
|
||||
|
||||
function reports346(req, res) {
|
||||
res.sendFile(path.join(__dirname, "static/templates/reports/346.html"));
|
||||
}
|
||||
@ -380,6 +574,13 @@ app.post("/devicedata", async (req, res) => {
|
||||
});
|
||||
|
||||
app.post("/updatedevice", async (req, res) => {
|
||||
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 {
|
||||
@ -503,15 +704,267 @@ app.post("/updatedevice", async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
function drivers(req, res) {
|
||||
res.sendFile(path.join(__dirname, "static/templates/devices/drivers.html"));
|
||||
}
|
||||
function newdevice(req, res) {
|
||||
res.sendFile(path.join(__dirname, "static/templates/devices/newdevice.html"));
|
||||
}
|
||||
function newdriver(req, res) {
|
||||
res.sendFile(path.join(__dirname, "static/templates/devices/newdriver.html"));
|
||||
app.post("/updatedriver", upload.single("upload-file"), async (req, res) => {
|
||||
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) => {
|
||||
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) => {
|
||||
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("/deletedriver", async (req, res) => {
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
async function drivers(req, res) {
|
||||
let templateData = {
|
||||
Organisation: "Название организации",
|
||||
User: "Тестовое Имя",
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function update(req, res) {
|
||||
res.sendFile(path.join(__dirname, "static/templates/devices/update.html"));
|
||||
}
|
||||
|
||||
3
static/img/file.svg
Normal file
3
static/img/file.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path fill="#8086F9" d="M12 23.988c6.565 0 12-5.444 12-11.994C24 5.433 18.553 0 11.988 0 5.435 0 0 5.433 0 11.994c0 6.55 5.447 11.994 12 11.994Zm0-1.999a9.95 9.95 0 0 1-9.988-9.995C2.012 6.444 6.435 2 11.988 2A9.97 9.97 0 0 1 22 11.994a9.96 9.96 0 0 1-10 9.995ZM9.2 18.32h6.141c1.306 0 1.953-.67 1.953-1.987v-5.056h-4.659c-.812 0-1.2-.376-1.2-1.188V5.35H9.2c-1.294 0-1.953.67-1.953 1.988v8.995c0 1.329.659 1.987 1.953 1.987Zm3.53-7.996h4.494c-.036-.258-.224-.517-.53-.823L13.212 5.95c-.294-.306-.565-.494-.824-.53v4.563c0 .224.118.341.341.341Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 652 B |
114
static/scripts/drivers-form.js
Normal file
114
static/scripts/drivers-form.js
Normal file
@ -0,0 +1,114 @@
|
||||
$("#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) + "...";
|
||||
}
|
||||
}
|
||||
@ -1,115 +1,115 @@
|
||||
const devices = [
|
||||
{
|
||||
id: "2",
|
||||
group: "2-device-2",
|
||||
driverID: "233",
|
||||
name: "Иван",
|
||||
surname: "Спахов",
|
||||
numberTS: "008803559E",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "spahov@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
group: "2-device-1",
|
||||
driverID: "782",
|
||||
name: "Александр",
|
||||
surname: "Богаченко",
|
||||
numberTS: "0088036B78",
|
||||
phone: "+7 989 443 23 46",
|
||||
mail: "bogachenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
group: "2-device-4",
|
||||
driverID: "2943",
|
||||
name: "Михаил",
|
||||
surname: "Гукасян",
|
||||
numberTS: "009800852A",
|
||||
phone: "+7 909 133 55 67",
|
||||
mail: "agucasyan@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
group: "2-device-4",
|
||||
driverID: "87",
|
||||
name: "Марат",
|
||||
surname: "Шмидт",
|
||||
numberTS: "009800858D",
|
||||
phone: "+7 915 555 45 89",
|
||||
mail: "shmidt@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
group: "1-device-1",
|
||||
driverID: "823",
|
||||
name: "Никита",
|
||||
surname: "Ильяшенко",
|
||||
numberTS: "00980084FD",
|
||||
phone: "+7 909 123 45 67",
|
||||
mail: "iluashenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
group: "2-device-4",
|
||||
driverID: "15",
|
||||
name: "Валерий",
|
||||
surname: "Сараев",
|
||||
numberTS: "0088036B7F",
|
||||
phone: "+7 909 123 45 67",
|
||||
mail: "saraev@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
group: "2-device-3",
|
||||
driverID: "423",
|
||||
name: "Александр",
|
||||
surname: "Курочкин",
|
||||
numberTS: "00880302CD",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "curochkin@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
group: "1-device-2",
|
||||
driverID: "6456",
|
||||
name: "Екатерина",
|
||||
surname: "Миненко",
|
||||
numberTS: "008802A035",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "minenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
group: "3-device-1",
|
||||
driverID: "887",
|
||||
name: "Виталий",
|
||||
surname: "Гаспарян",
|
||||
numberTS: "008802A96A",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "gosparyan@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
group: "1-device-1",
|
||||
driverID: "742",
|
||||
name: "Светлана",
|
||||
surname: "Амусова",
|
||||
numberTS: "00880302C7",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "amusova@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
];
|
||||
// const devices = [
|
||||
// {
|
||||
// id: "2",
|
||||
// group: "2-device-2",
|
||||
// driverID: "233",
|
||||
// name: "Иван",
|
||||
// surname: "Спахов",
|
||||
// numberTS: "008803559E",
|
||||
// phone: "+7 999 123 45 67",
|
||||
// mail: "spahov@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "6",
|
||||
// group: "2-device-1",
|
||||
// driverID: "782",
|
||||
// name: "Александр",
|
||||
// surname: "Богаченко",
|
||||
// numberTS: "0088036B78",
|
||||
// phone: "+7 989 443 23 46",
|
||||
// mail: "bogachenko@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "7",
|
||||
// group: "2-device-4",
|
||||
// driverID: "2943",
|
||||
// name: "Михаил",
|
||||
// surname: "Гукасян",
|
||||
// numberTS: "009800852A",
|
||||
// phone: "+7 909 133 55 67",
|
||||
// mail: "agucasyan@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "8",
|
||||
// group: "2-device-4",
|
||||
// driverID: "87",
|
||||
// name: "Марат",
|
||||
// surname: "Шмидт",
|
||||
// numberTS: "009800858D",
|
||||
// phone: "+7 915 555 45 89",
|
||||
// mail: "shmidt@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "9",
|
||||
// group: "1-device-1",
|
||||
// driverID: "823",
|
||||
// name: "Никита",
|
||||
// surname: "Ильяшенко",
|
||||
// numberTS: "00980084FD",
|
||||
// phone: "+7 909 123 45 67",
|
||||
// mail: "iluashenko@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "10",
|
||||
// group: "2-device-4",
|
||||
// driverID: "15",
|
||||
// name: "Валерий",
|
||||
// surname: "Сараев",
|
||||
// numberTS: "0088036B7F",
|
||||
// phone: "+7 909 123 45 67",
|
||||
// mail: "saraev@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "11",
|
||||
// group: "2-device-3",
|
||||
// driverID: "423",
|
||||
// name: "Александр",
|
||||
// surname: "Курочкин",
|
||||
// numberTS: "00880302CD",
|
||||
// phone: "+7 999 123 45 67",
|
||||
// mail: "curochkin@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "12",
|
||||
// group: "1-device-2",
|
||||
// driverID: "6456",
|
||||
// name: "Екатерина",
|
||||
// surname: "Миненко",
|
||||
// numberTS: "008802A035",
|
||||
// phone: "+7 999 123 45 67",
|
||||
// mail: "minenko@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "13",
|
||||
// group: "3-device-1",
|
||||
// driverID: "887",
|
||||
// name: "Виталий",
|
||||
// surname: "Гаспарян",
|
||||
// numberTS: "008802A96A",
|
||||
// phone: "+7 999 123 45 67",
|
||||
// mail: "gosparyan@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// {
|
||||
// id: "15",
|
||||
// group: "1-device-1",
|
||||
// driverID: "742",
|
||||
// name: "Светлана",
|
||||
// surname: "Амусова",
|
||||
// numberTS: "00880302C7",
|
||||
// phone: "+7 999 123 45 67",
|
||||
// mail: "amusova@mail.ru",
|
||||
// driverCard: "RUD0000000000111",
|
||||
// },
|
||||
// ];
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
@ -151,7 +151,7 @@ const createTable = () => {
|
||||
|
||||
// Добавляем ячейки с данными
|
||||
const driverID = document.createElement("td");
|
||||
driverID.textContent = device.driverID;
|
||||
driverID.textContent = device.id;
|
||||
row.appendChild(driverID);
|
||||
const name = document.createElement("td");
|
||||
name.textContent = device.name;
|
||||
@ -177,9 +177,11 @@ const createTable = () => {
|
||||
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}`;
|
||||
|
||||
@ -1,105 +1,105 @@
|
||||
const devices = [
|
||||
{
|
||||
id: "1",
|
||||
group: "0001",
|
||||
name: "Разговор по телефону",
|
||||
reportID: "354",
|
||||
plate: "AO30877",
|
||||
numberTS: "008803559E",
|
||||
time: "12.03.23 17:33",
|
||||
place: "59.852371, 30.344543",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
group: "0001",
|
||||
name: "Водитель зевает",
|
||||
reportID: "353",
|
||||
plate: "AO64377",
|
||||
numberTS: "0088036B78",
|
||||
time: "12.03.23 14:26",
|
||||
place: "60.058236, 30.315283",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
group: "0002",
|
||||
name: "Усталость",
|
||||
reportID: "352",
|
||||
plate: "ГД44377",
|
||||
numberTS: "009800852A",
|
||||
time: "12.03.23 10:07",
|
||||
place: "59.878256, 30.31962",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
group: "0003",
|
||||
name: "Водитель зевает",
|
||||
reportID: "351",
|
||||
plate: "УА86577",
|
||||
numberTS: "009800858D",
|
||||
time: "12.03.23 09:56",
|
||||
place: "60.045981, 30.4134",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
group: "0003",
|
||||
name: "Разговор по телефону",
|
||||
reportID: "350",
|
||||
plate: "БВ74665",
|
||||
numberTS: "00980084FD",
|
||||
time: "11.03.23 20:43",
|
||||
place: "59.83257, 30.389893",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
group: "0004",
|
||||
name: "Разговор по телефону",
|
||||
reportID: "349",
|
||||
plate: "ЦУ445101",
|
||||
numberTS: "0088036B7F",
|
||||
time: "11.03.23 19:17",
|
||||
place: "59.959926, 30.42224",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
group: "0005",
|
||||
name: "Усталость",
|
||||
reportID: "348",
|
||||
plate: "КТ32376",
|
||||
numberTS: "00880302CD",
|
||||
time: "11.03.23 15:32",
|
||||
place: "60.046346, 30.405688",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
group: "0006",
|
||||
name: "Курение за рулём",
|
||||
reportID: "347",
|
||||
plate: "ОА33277",
|
||||
numberTS: "008802A035",
|
||||
time: "11.03.23 15:06",
|
||||
place: "59.956626, 30.234408",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
group: "0007",
|
||||
name: "Водитель отвлекся",
|
||||
reportID: "346",
|
||||
plate: "КЛ987102",
|
||||
numberTS: "008802A96A",
|
||||
time: "11.03.23 12:44",
|
||||
place: "59.956626, 30.234408",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
group: "0002",
|
||||
name: "Водитель отвлекся",
|
||||
reportID: "345",
|
||||
plate: "АУ22377",
|
||||
numberTS: "00880302C7",
|
||||
time: "11.03.23 11:40",
|
||||
place: "59.956626, 30.234408",
|
||||
},
|
||||
];
|
||||
// const devices = [
|
||||
// {
|
||||
// id: "1",
|
||||
// group: "0001",
|
||||
// name: "Разговор по телефону",
|
||||
// reportID: "354",
|
||||
// plate: "AO30877",
|
||||
// numberTS: "008803559E",
|
||||
// time: "12.03.23 17:33",
|
||||
// place: "59.852371, 30.344543",
|
||||
// },
|
||||
// {
|
||||
// id: "2",
|
||||
// group: "0001",
|
||||
// name: "Водитель зевает",
|
||||
// reportID: "353",
|
||||
// plate: "AO64377",
|
||||
// numberTS: "0088036B78",
|
||||
// time: "12.03.23 14:26",
|
||||
// place: "60.058236, 30.315283",
|
||||
// },
|
||||
// {
|
||||
// id: "3",
|
||||
// group: "0002",
|
||||
// name: "Усталость",
|
||||
// reportID: "352",
|
||||
// plate: "ГД44377",
|
||||
// numberTS: "009800852A",
|
||||
// time: "12.03.23 10:07",
|
||||
// place: "59.878256, 30.31962",
|
||||
// },
|
||||
// {
|
||||
// id: "4",
|
||||
// group: "0003",
|
||||
// name: "Водитель зевает",
|
||||
// reportID: "351",
|
||||
// plate: "УА86577",
|
||||
// numberTS: "009800858D",
|
||||
// time: "12.03.23 09:56",
|
||||
// place: "60.045981, 30.4134",
|
||||
// },
|
||||
// {
|
||||
// id: "5",
|
||||
// group: "0003",
|
||||
// name: "Разговор по телефону",
|
||||
// reportID: "350",
|
||||
// plate: "БВ74665",
|
||||
// numberTS: "00980084FD",
|
||||
// time: "11.03.23 20:43",
|
||||
// place: "59.83257, 30.389893",
|
||||
// },
|
||||
// {
|
||||
// id: "6",
|
||||
// group: "0004",
|
||||
// name: "Разговор по телефону",
|
||||
// reportID: "349",
|
||||
// plate: "ЦУ445101",
|
||||
// numberTS: "0088036B7F",
|
||||
// time: "11.03.23 19:17",
|
||||
// place: "59.959926, 30.42224",
|
||||
// },
|
||||
// {
|
||||
// id: "7",
|
||||
// group: "0005",
|
||||
// name: "Усталость",
|
||||
// reportID: "348",
|
||||
// plate: "КТ32376",
|
||||
// numberTS: "00880302CD",
|
||||
// time: "11.03.23 15:32",
|
||||
// place: "60.046346, 30.405688",
|
||||
// },
|
||||
// {
|
||||
// id: "8",
|
||||
// group: "0006",
|
||||
// name: "Курение за рулём",
|
||||
// reportID: "347",
|
||||
// plate: "ОА33277",
|
||||
// numberTS: "008802A035",
|
||||
// time: "11.03.23 15:06",
|
||||
// place: "59.956626, 30.234408",
|
||||
// },
|
||||
// {
|
||||
// id: "9",
|
||||
// group: "0007",
|
||||
// name: "Водитель отвлекся",
|
||||
// reportID: "346",
|
||||
// plate: "КЛ987102",
|
||||
// numberTS: "008802A96A",
|
||||
// time: "11.03.23 12:44",
|
||||
// place: "59.956626, 30.234408",
|
||||
// },
|
||||
// {
|
||||
// id: "10",
|
||||
// group: "0002",
|
||||
// name: "Водитель отвлекся",
|
||||
// reportID: "345",
|
||||
// plate: "АУ22377",
|
||||
// numberTS: "00880302C7",
|
||||
// time: "11.03.23 11:40",
|
||||
// place: "59.956626, 30.234408",
|
||||
// },
|
||||
// ];
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
@ -143,22 +143,22 @@ const createTable = () => {
|
||||
|
||||
// Добавляем ячейки с данными
|
||||
const name = document.createElement("td");
|
||||
name.textContent = device.name;
|
||||
name.textContent = device.type;
|
||||
row.appendChild(name);
|
||||
const reportID = document.createElement("td");
|
||||
reportID.textContent = device.reportID;
|
||||
reportID.textContent = device.id;
|
||||
row.appendChild(reportID);
|
||||
const plate = document.createElement("td");
|
||||
plate.textContent = device.plate;
|
||||
row.appendChild(plate);
|
||||
const numberTS = document.createElement("td");
|
||||
numberTS.textContent = device.numberTS;
|
||||
numberTS.textContent = device.serial;
|
||||
row.appendChild(numberTS);
|
||||
const time = document.createElement("td");
|
||||
time.textContent = device.time;
|
||||
row.appendChild(time);
|
||||
const place = document.createElement("td");
|
||||
place.textContent = device.place;
|
||||
place.textContent = device.geo;
|
||||
row.appendChild(place);
|
||||
|
||||
// Добавляем кнопку удаления после каждого ряда
|
||||
@ -243,7 +243,7 @@ const applyFilterAndSearch = () => {
|
||||
|
||||
filteredDevices = devices.filter((device) => {
|
||||
const searchString =
|
||||
`${device.group} ${device.name} ${device.reportID} ${device.place} ${device.numberTS} ${device.time} ${device.place}`.toLowerCase();
|
||||
`${device.group} ${device.name} ${device.id} ${device.place} ${device.numberTS} ${device.time} ${device.place} ${device.geo} ${device.serial}`.toLowerCase();
|
||||
const matchGroup =
|
||||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||||
const matchSearch = !searchValue || searchString.includes(searchValue);
|
||||
|
||||
@ -445,6 +445,27 @@ header h2 span {
|
||||
background-color: #8086f9;
|
||||
}
|
||||
|
||||
.organisation button {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
padding: 7px;
|
||||
border-radius: 6px;
|
||||
transition: 0.2s;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
bottom: 15px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.organisation button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.content .table {
|
||||
display: inline-block;
|
||||
width: calc(100% - 275px);
|
||||
@ -1054,6 +1075,69 @@ tr:nth-child(even) {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.upload-result {
|
||||
/* width: calc(100% - 200px); */
|
||||
width: 100%;
|
||||
/* float: right; */
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container #image-preview {
|
||||
margin-top: 5px;
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.upload-result #file-name {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
/* margin-right: 50px; */
|
||||
/* display: flex; */
|
||||
top: 6px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.upload-result #file-size {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 40px;
|
||||
/* display: flex; */
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.upload-result #file-icon {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.upload-result #clear-button {
|
||||
/* display: flex; */
|
||||
/* padding: 14px; */
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.drivers select {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<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>
|
||||
<title>Водители</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
@ -49,19 +49,30 @@
|
||||
</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}}
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a class="selected" href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</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">
|
||||
|
||||
@ -69,7 +80,7 @@
|
||||
<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>
|
||||
<!-- <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>
|
||||
@ -87,8 +98,10 @@
|
||||
<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>
|
||||
|
||||
<button onclick="openNew()">Добавить водителя</button>
|
||||
|
||||
</section>
|
||||
|
||||
@ -138,8 +151,543 @@
|
||||
</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>
|
||||
<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');
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
<nav>
|
||||
<a class="selected" href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</a>
|
||||
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
@ -404,8 +404,8 @@
|
||||
<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>
|
||||
<label for="parameters-device-description">Внешнее описание</label>
|
||||
<input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание ">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,367 +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>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><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="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a class="selected" 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-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">
|
||||
|
||||
<form>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/jquery.min.js"></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 src="../scripts/device-form.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,295 +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>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><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="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a class="selected" href="/devices/newdriver">Добавить водителя</a>
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
<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">
|
||||
|
||||
<form>
|
||||
|
||||
<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>
|
||||
<input id="input-upload-photo" type="file" 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 drivers">
|
||||
|
||||
<h1>Детальная информация</h1>
|
||||
<h2>Для удобства в идентификации</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
|
||||
<label for="driver-gender">Пол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="driverGender" id="driver-gender">
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
</select>
|
||||
|
||||
<label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
|
||||
|
||||
<label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPassport" type="text" id="driverPassport" placeholder="Номер удостоверения личности" required>
|
||||
|
||||
<label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
|
||||
|
||||
<label for="driver-description">Примечание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverDescription" type="text" id="driver-description" placeholder="Примечание" required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button>Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
const fileSelect = document.getElementById("upload-photo");
|
||||
const fileElem = document.getElementById("input-upload-photo");
|
||||
|
||||
fileSelect.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
if (fileElem) {
|
||||
fileElem.click();
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
</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>
|
||||
|
||||
$("#continue-main").click(function () {
|
||||
document.getElementById("stage-details").checked = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const container = document.getElementById('new-parameters');
|
||||
const content1 = document.getElementById('main');
|
||||
const content2 = document.getElementById('details');
|
||||
const btn1 = document.getElementById('continue-main');
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
for (let radioButton of radioButtons) {
|
||||
radioButton.addEventListener('change', () => {
|
||||
if (radioButton.value === 'main') {
|
||||
switchContent(content1);
|
||||
} else if (radioButton.value === 'details') {
|
||||
switchContent(content2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -55,8 +55,8 @@
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</a>
|
||||
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||
|
||||
<a class="update selected" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
|
||||
@ -278,6 +278,12 @@
|
||||
var signalsList = document.querySelector('.signals-list');
|
||||
var list = document.getElementById('list');
|
||||
|
||||
list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
|
||||
});
|
||||
window.addEventListener('resize', function() {
|
||||
var signalsList = document.querySelector('.signals-list');
|
||||
var list = document.getElementById('list');
|
||||
|
||||
list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
|
||||
});
|
||||
</script>
|
||||
@ -290,6 +296,14 @@
|
||||
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
||||
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function (event) {
|
||||
var mapContainer = document.querySelector('.map');
|
||||
var mapArea = document.getElementById('map');
|
||||
|
||||
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
||||
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- <script src="../scripts/table-reports.js"></script> -->
|
||||
@ -361,6 +375,8 @@ const selectedDevices = Array.from(checkboxes)
|
||||
console.log(data.devicesData);
|
||||
data.devicesData.forEach(device => {
|
||||
const { longitude, latitude, direction, speed } = device;
|
||||
var newDirection = direction + 90
|
||||
console.log(newDirection);
|
||||
|
||||
// Создание HTML-элемента для маркера
|
||||
const el = document.createElement('div');
|
||||
@ -393,6 +409,8 @@ function updateMapMarkers(devicesData) {
|
||||
// Создание новых маркеров на карте на основе полученных данных
|
||||
devicesData.forEach(device => {
|
||||
const { longitude, latitude, direction, speed } = device;
|
||||
var newDirection = direction + 90
|
||||
console.log(newDirection);
|
||||
|
||||
// Создание HTML-элемента для маркера
|
||||
const el = document.createElement('div');
|
||||
@ -429,73 +447,10 @@ setInterval(() => {
|
||||
.catch(error => {
|
||||
console.error('Ошибка при отправке запроса:', error);
|
||||
});
|
||||
}, 20000);
|
||||
}, 12000);
|
||||
{{/if}}
|
||||
// mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
|
||||
// const map = new mapboxgl.Map({
|
||||
// container: 'map',
|
||||
// // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
|
||||
// style: 'mapbox://styles/mapbox/streets-v12',
|
||||
// center: [12.550343, 55.665957],
|
||||
// zoom: 8
|
||||
// });
|
||||
|
||||
// // Create a default Marker and add it to the map.
|
||||
// const marker1 = new mapboxgl.Marker()
|
||||
// .setLngLat([12.554729, 55.70651])
|
||||
// .addTo(map);
|
||||
|
||||
// // Create a default Marker, colored black, rotated 45 degrees.
|
||||
// const marker2 = new mapboxgl.Marker({ color: 'black', rotation: 45 })
|
||||
// .setLngLat([12.65147, 55.608166])
|
||||
// .addTo(map);
|
||||
</script>
|
||||
|
||||
<!-- <style>
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> -->
|
||||
|
||||
<!-- <script>
|
||||
function initMap() {
|
||||
// Координаты начальной точки
|
||||
var startPoint = L.latLng(55.769042, 37.647840);
|
||||
// Координаты конечной точки
|
||||
var endPoint = L.latLng(55.769723, 37.659341);
|
||||
|
||||
// Создание объекта карты
|
||||
var map = L.map('map').setView(startPoint, 12);
|
||||
|
||||
// Добавление слоя OpenStreetMap
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Прокладка маршрута
|
||||
var control = L.Routing.control({
|
||||
waypoints: [
|
||||
startPoint,
|
||||
endPoint
|
||||
],
|
||||
routeWhileDragging: true,
|
||||
show: false,
|
||||
}).addTo(map);
|
||||
|
||||
// Удаление кнопки виджета маршрута
|
||||
document.querySelector('.leaflet-routing-container').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
<script>initMap();</script> -->
|
||||
|
||||
<script>
|
||||
const panel = document.getElementById('signals-list');
|
||||
const slider = document.getElementById('left-slider');
|
||||
@ -612,6 +567,7 @@ for (var i = 0; i < tableCheckboxes.length; i++) {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
@ -49,6 +49,16 @@
|
||||
</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}}
|
||||
<div class="name">
|
||||
<span>Отчёты</span>
|
||||
</div>
|
||||
@ -64,7 +74,7 @@
|
||||
<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>
|
||||
<!-- <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="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</label></li>
|
||||
@ -82,7 +92,7 @@
|
||||
<ul class="area-devices" id="devices-3">
|
||||
<li class="device"><img><input type="checkbox" id="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
|
||||
<div class="area-time-range">
|
||||
@ -126,6 +136,9 @@
|
||||
<div id="pagination">
|
||||
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<span style="opacity:50%">Временное ограничение: 100 последних предупреждений</span>
|
||||
|
||||
|
||||
|
||||
@ -135,7 +148,7 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- <script>
|
||||
<script>
|
||||
const devices = [
|
||||
{{#each Alarms}}
|
||||
{
|
||||
@ -144,10 +157,12 @@
|
||||
time: "{{this.time}}",
|
||||
serial: "{{this.serial}}",
|
||||
type: "{{this.type}}",
|
||||
geo: "{{this.geo}}",
|
||||
plate: "{{this.plate}}",
|
||||
},
|
||||
{{/each}}
|
||||
];
|
||||
</script> -->
|
||||
</script>
|
||||
|
||||
<script src="../scripts/table-reports.js"></script>
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user