devices from DB, updating device info

.gitignore

@@ -6,3 +6,6 @@ static/img/.DS_Store
 static/.DS_Store
 .DS_Store
 .package-lock.json
+.env
+package-lock.json
+package-lock.json

package-lock.json

@@ -1,20 +1,19 @@
 {
-  "name": "datahunt-node",
+  "name": "argus",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "datahunt-node",
+      "name": "argus",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "body-parser": "^1.20.2",
+        "dotenv": "^16.3.1",
         "express": "^4.18.2",
         "fs": "^0.0.1-security",
         "handlebars": "^4.7.7",
-        "https": "^1.0.0",
+        "multer": "^1.4.5-lts.1",
-        "nodemailer": "^6.9.3",
         "path": "^0.12.7",
         "pg": "^8.11.1"
       }
@@ -31,33 +30,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
-    "node_modules/body-parser": {
+    "node_modules/buffer-from": {
-      "version": "1.20.2",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
     },
     "node_modules/buffer-writer": {
       "version": "2.0.0",
@@ -67,6 +53,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -87,6 +84,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -119,6 +130,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -144,6 +160,17 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -373,11 +400,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/https": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
-      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -402,6 +424,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -461,11 +488,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/multer": {
+      "version": "1.4.5-lts.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -479,12 +534,12 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
-    "node_modules/nodemailer": {
+    "node_modules/object-assign": {
-      "version": "6.9.3",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-fy9v3NgTzBngrMFkDsKEj0r02U7jm6XfC3b52eoNV+GCrGj+s8pt5OqhiJdWKuw51zCTdiNR/IUD1z33LIIGpg==",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/object-inspect": {
@@ -659,6 +714,11 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -693,20 +753,25 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/raw-body": {
+    "node_modules/readable-stream": {
-      "version": "2.5.2",
+      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dependencies": {
-        "bytes": "3.1.2",
+        "core-util-is": "~1.0.0",
-        "http-errors": "2.0.0",
+        "inherits": "~2.0.3",
-        "iconv-lite": "0.4.24",
+        "isarray": "~1.0.0",
-        "unpipe": "1.0.0"
+        "process-nextick-args": "~2.0.0",
-      },
+        "safe-buffer": "~5.1.1",
-      "engines": {
+        "string_decoder": "~1.1.1",
-        "node": ">= 0.8"
+        "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -815,6 +880,27 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -835,6 +921,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -863,6 +954,11 @@
         "inherits": "2.0.3"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/util/node_modules/inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
@@ -908,35 +1004,34 @@
         "negotiator": "0.6.3"
       }
     },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
-    "body-parser": {
+    "buffer-from": {
-      "version": "1.20.2",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-      "requires": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      }
     },
     "buffer-writer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
       "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw=="
     },
+    "busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "requires": {
+        "streamsearch": "^1.1.0"
+      }
+    },
     "bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -951,6 +1046,17 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -974,6 +1080,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -992,6 +1103,11 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
+    "dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1169,11 +1285,6 @@
         "toidentifier": "1.0.1"
       }
     },
-    "https": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
-      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -1192,6 +1303,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -1230,11 +1346,33 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
     },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "multer": {
+      "version": "1.4.5-lts.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -1245,10 +1383,10 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
-    "nodemailer": {
+    "object-assign": {
-      "version": "6.9.3",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-fy9v3NgTzBngrMFkDsKEj0r02U7jm6XfC3b52eoNV+GCrGj+s8pt5OqhiJdWKuw51zCTdiNR/IUD1z33LIIGpg=="
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -1377,6 +1515,11 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1399,15 +1542,25 @@
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
-    "raw-body": {
+    "readable-stream": {
-      "version": "2.5.2",
+      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "requires": {
-        "bytes": "3.1.2",
+        "core-util-is": "~1.0.0",
-        "http-errors": "2.0.0",
+        "inherits": "~2.0.3",
-        "iconv-lite": "0.4.24",
+        "isarray": "~1.0.0",
-        "unpipe": "1.0.0"
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
       }
     },
     "safe-buffer": {
@@ -1488,6 +1641,26 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
     "toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -1502,6 +1675,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
     "uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -1528,6 +1706,11 @@
         }
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

package.json

@@ -10,7 +10,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "dotenv": "^16.3.1",
     "express": "^4.18.2",
-    "path": "^0.12.7"
+    "fs": "^0.0.1-security",
+    "handlebars": "^4.7.7",
+    "multer": "^1.4.5-lts.1",
+    "path": "^0.12.7",
+    "pg": "^8.11.1"
   }
 }

server.js

@@ -1,8 +1,16 @@
 const express = require("express");
 const app = express();
 const path = require("path");
+const { Pool } = require("pg");
+const fs = require("fs");
+const handlebars = require("handlebars");
+require("dotenv").config();
+const multer = require("multer");
+
+const upload = multer();
 
 app.use(express.static(path.join(__dirname, "static")));
+app.use(express.json());
 
 app.get("/", index);
 app.get("/login", login);
@@ -15,8 +23,42 @@ app.get("/devices/drivers", drivers);
 app.get("/devices/newdevice", newdevice);
 app.get("/devices/newdriver", newdriver);
 
-function index(req, res) {
+const pool = new Pool({
-  res.sendFile(path.join(__dirname, "static/templates/index.html"));
+  user: process.env.DB_USER,
+  host: process.env.DB_HOST,
+  database: process.env.DB_NAME,
+  password: process.env.DB_PASSWORD,
+  port: process.env.DB_PORT,
+});
+
+async function index(req, res) {
+  const client = await pool.connect();
+  try {
+    // Выполняем запрос и получаем результат
+    const query = `
+      SELECT COUNT(*) AS count 
+      FROM registrars
+    `;
+    const registrars = await client.query(query);
+
+    var templateData = {
+      Organisation: "Название организации",
+      User: "Тестовое Имя",
+      Count: registrars.rows[0].count,
+    };
+
+    console.log(templateData);
+
+    const source = fs.readFileSync("static/templates/index.html", "utf8");
+
+    const template = handlebars.compile(source);
+
+    const resultT = template(templateData);
+    res.send(resultT);
+  } finally {
+    client.release();
+  }
+  // res.sendFile(path.join(__dirname, "static/templates/index.html"));
 }
 function login(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/login.html"));
@@ -27,15 +69,281 @@ function register(req, res) {
 function live(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/live.html"));
 }
-function reports(req, res) {
+async function reports(req, res) {
-  res.sendFile(path.join(__dirname, "static/templates/reports/index.html"));
+  const client = await pool.connect();
+  try {
+    // Выполняем запрос и получаем результат
+    const query = `
+      SELECT id, cmdno, time, serial, st 
+      FROM alarms
+    `;
+    const alarms = await client.query(query);
+
+    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(",", "");
+    }
+
+    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,
+        };
+      }),
+    };
+
+    console.log(templateData);
+
+    const source = fs.readFileSync(
+      "static/templates/reports/index.html",
+      "utf8"
+    );
+
+    const template = handlebars.compile(source);
+
+    const resultT = template(templateData);
+    res.send(resultT);
+  } finally {
+    client.release();
+  }
+  // res.sendFile(path.join(__dirname, "static/templates/reports/index.html"));
 }
 function reports346(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/reports/346.html"));
 }
-function devices(req, res) {
+async function devices(req, res) {
-  res.sendFile(path.join(__dirname, "static/templates/devices/index.html"));
+  const client = await pool.connect();
+  try {
+    // Выполняем два запроса и получаем результаты
+    const queryConnected = `
+      SELECT id, serial, connected, name, "group", plate, sim, ip, port 
+      FROM registrars
+      WHERE connected = true
+      ORDER BY id
+    `;
+    const queryDisconnected = `
+      SELECT id, serial, connected, name, "group", plate, sim, ip, port 
+      FROM registrars
+      WHERE connected = false
+      ORDER BY id
+    `;
+    const connectedRegistrars = await client.query(queryConnected);
+    const disconnectedRegistrars = await client.query(queryDisconnected);
+
+    const templateData = {
+      Organisation: "Название организации",
+      User: "Тестовое Имя",
+      Registrars: [
+        ...connectedRegistrars.rows.map((registrar) => ({
+          id: registrar.id,
+          serial: registrar.serial,
+          status: registrar.connected,
+          name: registrar.name,
+          group: registrar.group,
+          plate: registrar.plate,
+          sim: registrar.sim,
+          ip: registrar.ip,
+          port: registrar.port,
+        })),
+        ...disconnectedRegistrars.rows.map((registrar) => ({
+          id: registrar.id,
+          serial: registrar.serial,
+          status: registrar.connected,
+          name: registrar.name,
+          group: registrar.group,
+          plate: registrar.plate,
+          sim: registrar.sim,
+          ip: registrar.ip,
+          port: registrar.port,
+        })),
+      ],
+    };
+
+    console.log(templateData);
+
+    const source = fs.readFileSync(
+      "static/templates/devices/index.html",
+      "utf8"
+    );
+
+    const template = handlebars.compile(source);
+
+    const resultT = template(templateData);
+    res.send(resultT);
+  } finally {
+    client.release();
   }
+}
+
+app.post("/devicedata", async (req, res) => {
+  const id = req.body.id;
+
+  const client = await pool.connect();
+  try {
+    // Выполняем запрос и получаем результат
+    const query = "SELECT * FROM registrars WHERE id = $1;";
+    const devicedata = await client.query(query, [id]);
+
+    // Формирование и отправка ответа
+    const response = devicedata.rows[0];
+    res.json(response);
+  } finally {
+    client.release();
+  }
+});
+
+app.post("/updatedevice", async (req, res) => {
+  const client = await pool.connect();
+
+  var {
+    plateNumber,
+    plateColor,
+    serialNumber,
+    channelsAmount,
+    connectionProtocol,
+    IPAddress,
+    deviceGroup,
+    serverPort,
+    sumNumber,
+    simIMEI,
+    simIMSI,
+    simModule,
+    transportType,
+    transportFactory,
+    transportStrength,
+    transportEngine,
+    transportStanina,
+    transportFuel,
+    transportCertificate,
+    transportCategory,
+    transportExpire,
+    transportConsumption,
+    transportProvince,
+    transportCity,
+    equipmentName,
+    equipmentPassword,
+    equipmentNumber,
+    equipmentReleased,
+    equipmentInstaller,
+    equipmentInstalled,
+    equipmentDescription,
+  } = req.body;
+
+  try {
+    // Обновление строки в таблице registrars
+    const query = `
+      UPDATE registrars
+      SET
+        plate = $1,
+        plate_color = $2,
+        channels = $3,
+        protocol = $4,
+        ip = $5,
+        "group" = $6,
+        port = $7,
+        sim = $8,
+        imei = $9,
+        imsi = $10,
+        module = $11,
+        auto = $12,
+        factory = $13,
+        capacity = $14,
+        engine = $15,
+        stanina = $16,
+        fuel = $17,
+        certificate = $18,
+        category = $19,
+        certificate_exp = $20,
+        consumption = $21,
+        region = $22,
+        city = $23,
+        name = $24,
+        password = $25,
+        batch = $26,
+        release = $27,
+        installer = $28,
+        installation = $29,
+        description = $30
+      WHERE serial = $31
+      RETURNING *;
+    `;
+
+    const values = [
+      plateNumber,
+      plateColor,
+      channelsAmount,
+      connectionProtocol,
+      IPAddress,
+      deviceGroup,
+      serverPort,
+      sumNumber,
+      simIMEI,
+      simIMSI,
+      simModule,
+      transportType,
+      transportFactory,
+      transportStrength,
+      transportEngine,
+      transportStanina,
+      transportFuel,
+      transportCertificate,
+      transportCategory,
+      transportExpire,
+      transportConsumption,
+      transportProvince,
+      transportCity,
+      equipmentName,
+      equipmentPassword,
+      equipmentNumber,
+      equipmentReleased,
+      equipmentInstaller,
+      equipmentInstalled,
+      equipmentDescription,
+      serialNumber,
+    ];
+
+    const result = await client.query(query, values);
+
+    const updatedRow = result.rows[0];
+    console.log("Updated row:", updatedRow);
+
+    res.send("Data updated successfully");
+  } catch (error) {
+    console.error("Error updating data:", error);
+    res.status(500).send("An error occurred while updating data");
+  } finally {
+    client.release();
+  }
+});
+
 function drivers(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/devices/drivers.html"));
 }
@@ -46,11 +354,6 @@ function newdriver(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/devices/newdriver.html"));
 }
 
-// function unauthorized(req, res) {
-//   const td = {};
-//   res.sendFile(path.join(__dirname, "static/templates/unauthorized.html"));
-// }
-
 const port = 8081;
 app.listen(port, () => {
   console.log(`Server is running on port ${port}`);

static/img/xmark.svg

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

static/scripts/device-form.js

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

static/scripts/table.js

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

static/styles/main.css

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

static/templates/devices/index.html

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

static/templates/devices/newdevice.html

@@ -94,9 +94,9 @@
                     <div class="parameters-input">
                         <label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
                         <select name="plateColor" id="parameters-plateColor">
+                            <option value="white">Белый</option>
                             <option value="blue">Синий</option>
                             <option value="yellow">Жёлтый</option>
-                            <option value="white">Белый</option>
                         </select>
                     </div>
                     <div class="parameters-input">
@@ -358,130 +358,7 @@
         });
       </script>
 
-      <script>
+    <script src="../scripts/device-form.js"></script>
-
-        $("#continue-details").click(function () {
-            document.getElementById("stage-sim").checked = true;
-        });
-        $("#continue-sim").click(function () {
-            document.getElementById("stage-ts").checked = true;
-        });
-        $("#continue-ts").click(function () {
-            document.getElementById("stage-equipment").checked = true;
-        });
-        
-      </script>
-
-      <script>
-        const container = document.getElementById('new-parameters');
-        const content1 = document.getElementById('details');
-        const content2 = document.getElementById('sim');
-        const content3 = document.getElementById('ts');
-        const content4 = document.getElementById('equipment');
-        const btn1 = document.getElementById('continue-details');
-        const btn2 = document.getElementById('continue-sim');
-        const btn3 = document.getElementById('continue-ts');
-        const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
-        const duration = 100;
-
-        let activeContent = content1;
-
-        function switchContent(newContent) {
-        fadeOut(activeContent, () => {
-            fadeIn(newContent);
-            activeContent = newContent;
-        });
-        }
-
-        function fadeIn(element) {
-        element.style.opacity = 0;
-        element.style.display = 'block';
-        let start = performance.now();
-
-        function animate(time) {
-            let timeFraction = (time - start) / duration;
-            if (timeFraction > 1) {
-            element.style.opacity = 1;
-            } else {
-            element.style.opacity = timeFraction;
-            requestAnimationFrame(animate);
-            }
-        }
-
-        requestAnimationFrame(animate);
-        }
-
-        function fadeOut(element, callback) {
-        element.style.opacity = 1;
-        let start = performance.now();
-
-        function animate(time) {
-            let timeFraction = (time - start) / duration;
-            if (timeFraction > 1) {
-            element.style.opacity = 0;
-            element.style.display = 'none';
-            if (callback) {
-                callback();
-            }
-            } else {
-            element.style.opacity = 1 - timeFraction;
-            requestAnimationFrame(animate);
-            }
-        }
-
-        requestAnimationFrame(animate);
-        }
-
-        btn1.addEventListener('click', () => {
-        if (activeContent === content1) {
-            switchContent(content2);
-        } else {
-            switchContent(content1);
-        }
-        });
-
-        btn2.addEventListener('click', () => {
-        if (activeContent === content2) {
-            switchContent(content3);
-        } else {
-            switchContent(content2);
-        }
-        });
-
-        btn3.addEventListener('click', () => {
-        if (activeContent === content3) {
-            switchContent(content4);
-        } else {
-            switchContent(content3);
-        }
-        });
-
-        for (let radioButton of radioButtons) {
-        radioButton.addEventListener('change', () => {
-            if (radioButton.value === 'details') {
-            switchContent(content1);
-            } else if (radioButton.value === 'sim') {
-            switchContent(content2);
-            } else if (radioButton.value === 'ts') {
-            switchContent(content3);
-            } else if (radioButton.value === 'equipment') {
-            switchContent(content4);
-            }
-        });
-        }
-
-      </script>
-
-<script>
-    function truncateText(select) {
-  var maxLength = 30;
-  var option = select.options[select.selectedIndex];
-  if (option.text.length > maxLength) {
-    option.text = option.text.substring(0, maxLength) + '...';
-  }
-}
-
-    </script>
 
     
 

static/templates/index.html

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

static/templates/reports/index.html

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