fetching db errors, devices on map, fix upd page

.gitignore

@@ -9,3 +9,4 @@ static/.DS_Store
 .env
 package-lock.json
 package-lock.json
+package-lock.json

package-lock.json

@@ -13,11 +13,68 @@
         "express": "^4.18.2",
         "fs": "^0.0.1-security",
         "handlebars": "^4.7.7",
+        "mapbox-gl": "^2.15.0",
         "multer": "^1.4.5-lts.1",
         "path": "^0.12.7",
         "pg": "^8.11.1"
       }
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -135,6 +192,11 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -171,6 +233,11 @@
         "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -318,6 +385,11 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "node_modules/geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -332,6 +404,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "node_modules/handlebars": {
       "version": "4.7.7",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
@@ -411,6 +504,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -429,6 +541,40 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
+    "node_modules/mapbox-gl": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
+      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.1",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^8.0.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -521,6 +667,11 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -588,6 +739,18 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pg": {
       "version": "8.11.1",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.1.tgz",
@@ -706,6 +869,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -719,6 +887,11 @@
       "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/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -745,6 +918,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -772,6 +950,19 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -901,6 +1092,19 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -980,6 +1184,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -995,6 +1209,53 @@
     }
   },
   "dependencies": {
+    "@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "requires": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      }
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -1085,6 +1346,11 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1108,6 +1374,11 @@
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
       "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1232,6 +1503,11 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -1243,6 +1519,21 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+    },
+    "gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
+    "grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "handlebars": {
       "version": "4.7.7",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
@@ -1293,6 +1584,11 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -1308,6 +1604,40 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
+    "kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
+    "mapbox-gl": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
+      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.1",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^8.0.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -1373,6 +1703,11 @@
         "xtend": "^4.0.0"
       }
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -1425,6 +1760,15 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "pg": {
       "version": "8.11.1",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.1.tgz",
@@ -1510,6 +1854,11 @@
         "xtend": "^4.0.0"
       }
     },
+    "potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -1520,6 +1869,11 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1537,6 +1891,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -1563,6 +1922,19 @@
         }
       }
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1661,6 +2033,19 @@
         }
       }
     },
+    "supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "requires": {
+        "kdbush": "^4.0.2"
+      }
+    },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -1721,6 +2106,16 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
+    "vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "express": "^4.18.2",
     "fs": "^0.0.1-security",
     "handlebars": "^4.7.7",
+    "mapbox-gl": "^2.15.0",
     "multer": "^1.4.5-lts.1",
     "path": "^0.12.7",
     "pg": "^8.11.1"

server.js

@@ -22,26 +22,36 @@ 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 pool = new Pool({
+// const DB_User = process.env.DB_USER;
-//   user: process.env.DB_USER,
+// const DB_Password = process.env.DB_PASSWORD;
-//   host: process.env.DB_HOST,
+// const DB_Host = process.env.DB_HOST;
-//   database: process.env.DB_NAME,
+// const DB_Port = process.env.DB_PORT;
-//   password: process.env.DB_PASSWORD,
+// const DB_Name = process.env.DB_NAME;
-//   port: process.env.DB_PORT,
-// });
 
-const pool = new Pool({
+const DB_User = "postgres";
-  user: "postgres",
+const DB_Password = "password";
-  host: "postgres",
+const DB_Host = "postgres";
-  database: "postgres",
+const DB_Port = "5432";
-  password: "password",
+const DB_Name = "postgres";
-  port: "5432",
-});
 
 async function index(req, res) {
-  const client = await pool.connect();
+  var templateData = {
+    Organisation: "Название организации",
+    User: "Тестовое Имя",
+    ifDBError: false,
+    Count: "",
+  };
   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();
     // Выполняем запрос и получаем результат
     const query = `
       SELECT COUNT(*) AS count 
@@ -49,11 +59,7 @@ async function index(req, res) {
     `;
     const registrars = await client.query(query);
 
-    var templateData = {
+    templateData.Count = registrars.rows[0].count;
-      Organisation: "Название организации",
-      User: "Тестовое Имя",
-      Count: registrars.rows[0].count,
-    };
 
     console.log(templateData);
 
@@ -63,8 +69,14 @@ async function index(req, res) {
 
     const resultT = template(templateData);
     res.send(resultT);
-  } finally {
+  } catch (error) {
-    client.release();
+    console.error(error);
+    templateData.ifDBError = true;
+
+    const source = fs.readFileSync("static/templates/index.html", "utf8");
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
   }
   // res.sendFile(path.join(__dirname, "static/templates/index.html"));
 }
@@ -74,16 +86,118 @@ function login(req, res) {
 function register(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/register.html"));
 }
-function live(req, res) {
+
-  res.sendFile(path.join(__dirname, "static/templates/live.html"));
+async function live(req, res) {
-}
+  let templateData = {
-async function reports(req, res) {
+    Organisation: "Название организации",
-  const client = await pool.connect();
+    User: "Тестовое Имя",
+    ifDBError: false,
+    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();
+
+    const query = `
+    SELECT id FROM registrars ORDER BY id ASC
+    `;
+    const registrars = await client.query(query);
+
+    templateData.Registrars = registrars.rows.map((row) => row.id);
+
+    console.log(templateData);
+
+    const source = fs.readFileSync("static/templates/live.html", "utf8");
+    const template = handlebars.compile(source);
+    const resultHTML = template(templateData);
+    res.send(resultHTML);
+
+    client.release();
+  } catch (error) {
+    console.error(error);
+    templateData.ifDBError = true;
+
+    const source = fs.readFileSync("static/templates/live.html", "utf8");
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
+  }
+}
+
+app.post("/devices-geo", async (req, res) => {
+  const selectedDevices = req.body.devices;
+
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
+
+  console.log(selectedDevices);
+
+  const placeholders = selectedDevices
+    .map((_, index) => `$${index + 1}`)
+    .join(",");
+  const subquery = `
+    SELECT MAX(time) AS time, serial
+    FROM geo
+    WHERE serial IN (
+      SELECT serial
+      FROM registrars
+      WHERE id IN (${placeholders})
+    )
+    GROUP BY serial
+  `;
+  const query = `
+    SELECT g.serial, g.longitude, g.latitude, g.direction, g.speed
+    FROM geo g
+    INNER JOIN (${subquery}) s
+    ON g.serial = s.serial AND g.time = s.time
+  `;
+
+  pool.query(query, selectedDevices, (err, result) => {
+    if (err) {
+      console.error("Ошибка выполнения запроса:", err);
+      res.status(500).json({ error: "Ошибка сервера" });
+      return;
+    }
+
+    console.log(result.rows);
+
+    const devicesData = result.rows;
+    res.json({ devicesData });
+  });
+});
+
+async function reports(req, res) {
+  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();
     // Выполняем запрос и получаем результат
     const query = `
-      SELECT id, cmdno, time, serial, st 
+    SELECT id, cmdno, time, serial, st
-      FROM alarms
+    FROM (
+    SELECT id, cmdno, time, serial, st
+    FROM alarms
+    ORDER BY time DESC
+    LIMIT 100
+    ) AS subquery
+    ORDER BY time ASC;
     `;
     const alarms = await client.query(query);
 
@@ -139,8 +253,17 @@ async function reports(req, res) {
 
     const resultT = template(templateData);
     res.send(resultT);
-  } finally {
+  } catch (error) {
-    client.release();
+    console.error(error);
+    // templateData.ifDBError = true;
+
+    const source = fs.readFileSync(
+      "static/templates/reports/index.html",
+      "utf8"
+    );
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
   }
   // res.sendFile(path.join(__dirname, "static/templates/reports/index.html"));
 }
@@ -148,8 +271,23 @@ function reports346(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/reports/346.html"));
 }
 async function devices(req, res) {
-  const client = await pool.connect();
+  let templateData = {
+    Organisation: "Название организации",
+    User: "Тестовое Имя",
+    ifDBError: false,
+    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();
+
     // Выполняем два запроса и получаем результаты
     const queryConnected = `
       SELECT id, serial, connected, name, "group", plate, sim, ip, port 
@@ -166,34 +304,30 @@ async function devices(req, res) {
     const connectedRegistrars = await client.query(queryConnected);
     const disconnectedRegistrars = await client.query(queryDisconnected);
 
-    const templateData = {
+    templateData.Registrars = [
-      Organisation: "Название организации",
+      ...connectedRegistrars.rows.map((registrar) => ({
-      User: "Тестовое Имя",
+        id: registrar.id,
-      Registrars: [
+        serial: registrar.serial,
-        ...connectedRegistrars.rows.map((registrar) => ({
+        status: registrar.connected,
-          id: registrar.id,
+        name: registrar.name,
-          serial: registrar.serial,
+        group: registrar.group,
-          status: registrar.connected,
+        plate: registrar.plate,
-          name: registrar.name,
+        sim: registrar.sim,
-          group: registrar.group,
+        ip: registrar.ip,
-          plate: registrar.plate,
+        port: registrar.port,
-          sim: registrar.sim,
+      })),
-          ip: registrar.ip,
+      ...disconnectedRegistrars.rows.map((registrar) => ({
-          port: registrar.port,
+        id: registrar.id,
-        })),
+        serial: registrar.serial,
-        ...disconnectedRegistrars.rows.map((registrar) => ({
+        status: registrar.connected,
-          id: registrar.id,
+        name: registrar.name,
-          serial: registrar.serial,
+        group: registrar.group,
-          status: registrar.connected,
+        plate: registrar.plate,
-          name: registrar.name,
+        sim: registrar.sim,
-          group: registrar.group,
+        ip: registrar.ip,
-          plate: registrar.plate,
+        port: registrar.port,
-          sim: registrar.sim,
+      })),
-          ip: registrar.ip,
+    ];
-          port: registrar.port,
-        })),
-      ],
-    };
 
     console.log(templateData);
 
@@ -201,20 +335,37 @@ async function devices(req, res) {
       "static/templates/devices/index.html",
       "utf8"
     );
-
     const template = handlebars.compile(source);
-
     const resultT = template(templateData);
     res.send(resultT);
-  } finally {
+
     client.release();
+  } catch (error) {
+    console.error(error);
+    templateData.ifDBError = true;
+
+    const source = fs.readFileSync(
+      "static/templates/devices/index.html",
+      "utf8"
+    );
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
   }
 }
 
 app.post("/devicedata", 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 registrars WHERE id = $1;";
@@ -361,6 +512,9 @@ function newdevice(req, res) {
 function newdriver(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/devices/newdriver.html"));
 }
+function update(req, res) {
+  res.sendFile(path.join(__dirname, "static/templates/devices/update.html"));
+}
 
 const port = 8081;
 app.listen(port, () => {

static/img/warning.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="20.4688" height="18.6621">
+ <g>
+  <rect height="18.6621" opacity="0" width="20.4688" x="0" y="0"/>
+  <path d="M2.66602 18.5547L17.8027 18.5547C19.4629 18.5547 20.4688 17.4023 20.4688 15.9082C20.4688 15.4492 20.332 14.9707 20.0879 14.541L12.5098 1.33789C12.002 0.449219 11.1328 0 10.2344 0C9.33594 0 8.45703 0.449219 7.95898 1.33789L0.380859 14.541C0.117188 14.9805 0 15.4492 0 15.9082C0 17.4023 1.00586 18.5547 2.66602 18.5547ZM2.67578 17.0215C1.99219 17.0215 1.58203 16.4941 1.58203 15.8984C1.58203 15.7129 1.62109 15.4785 1.72852 15.2734L9.29688 2.08008C9.50195 1.71875 9.87305 1.5625 10.2344 1.5625C10.5957 1.5625 10.957 1.71875 11.1621 2.08008L18.7305 15.2832C18.8379 15.4883 18.8867 15.7129 18.8867 15.8984C18.8867 16.4941 18.457 17.0215 17.7832 17.0215ZM10.2344 11.9727C10.7031 11.9727 10.9766 11.6992 10.9863 11.1914L11.123 6.04492C11.1328 5.54688 10.7422 5.17578 10.2246 5.17578C9.69727 5.17578 9.32617 5.53711 9.33594 6.03516L9.46289 11.1914C9.47266 11.6895 9.74609 11.9727 10.2344 11.9727ZM10.2344 15.1465C10.8008 15.1465 11.2891 14.6973 11.2891 14.1309C11.2891 13.5547 10.8105 13.1152 10.2344 13.1152C9.6582 13.1152 9.17969 13.5645 9.17969 14.1309C9.17969 14.6875 9.66797 15.1465 10.2344 15.1465Z" fill="#ff3b30"/>
+ </g>
+</svg>

static/styles/main.css

@@ -18,6 +18,7 @@ body {
   margin: 0;
   width: 100%;
   min-height: 100%;
+  overflow-y: hidden;
 }
 
 header {
@@ -751,7 +752,21 @@ tr:nth-child(even) {
   transition: 0.1s;
 }
 
-.form button:hover {
+.erorr-container button {
+  font-weight: 500;
+  font-size: 16px;
+  margin-top: 15px;
+  width: auto;
+  background-color: #8086f9;
+  color: white;
+  padding: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  transition: 0.1s;
+}
+
+.form button:hover,
+.erorr-container button:hover {
   cursor: pointer;
   opacity: 80%;
 }
@@ -1374,6 +1389,7 @@ video {
   transition: 1s;
   position: relative;
   float: left;
+  z-index: 10;
 }
 
 .signals-list.hide {
@@ -1418,8 +1434,10 @@ video {
   width: 100%;
   list-style: none;
   padding: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
   white-space: nowrap;
+  height: 150px;
+  padding-bottom: 50px;
 }
 
 .signals-list li {
@@ -1497,13 +1515,20 @@ video {
 }
 
 .map {
-  background-color: #ff443a2f;
+  /* background-color: #ff443a2f; */
   width: 100%;
   height: 100%;
   display: block;
   /* float: right; */
 }
 
+#map {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 29px;
+}
+
 .edit-container {
   position: fixed;
   width: 100%;
@@ -1516,6 +1541,7 @@ video {
   justify-content: center;
   align-items: center;
   transition: opacity 0.4s ease-in-out;
+  overflow: hidden;
 }
 
 .edit-container.active {
@@ -1559,6 +1585,41 @@ video {
   height: 20px;
 }
 
+.dberror {
+  background-color: #00000039;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 62px;
+  z-index: 1000;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.erorr-container {
+  width: 633px;
+  height: 362px;
+  border-radius: 20px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.erorr-container img {
+  width: 110px;
+}
+
+.erorr-container h1 {
+  font-size: 30px;
+  font-weight: 600;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
 @media (max-width: 1950px) {
   /* при разрешении монитора до 1950 пикселей */
 

static/templates/devices/index.html

@@ -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>

static/templates/devices/update.html

@@ -0,0 +1,312 @@
+<!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 href="/devices/newdriver">Добавить водителя</a>
+
+            <a class="update selected" href="/devices/update">Обновление ПО</a>
+        </nav>
+        <section class="bg">
+            <section class="content">
+
+                <section class="for-table">
+
+                    <section class="organisation update">
+                      <div class="update-org">
+                        <h1>Организация</h1>
+
+                        <ul class="area">
+                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
+                            <ul class="area-devices" id="devices-1">
+                              <li class="device"><img><input type="checkbox" id="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>
+                            </ul>
+                          </li>
+                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label>
+                            <ul class="area-devices" id="devices-2">
+                              <li class="device"><img><input type="checkbox" id="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li>
+                              <li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li>
+                              <li class="device"><img><input type="checkbox" id="0005" class="checkbox-input device-filter" value="0005" hidden checked><label for="0005" class="checkbox-label"><div class="checkmark"></div>0005</label></li>
+                              <li class="device"><img><input type="checkbox" id="0006" class="checkbox-input device-filter" value="0006" hidden checked><label for="0006" class="checkbox-label"><div class="checkmark"></div>0006</label></li>
+                            </ul>
+                          </li>
+                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
+                            <ul class="area-devices" id="devices-3">
+                              <li class="device"><img><input type="checkbox" id="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>
+                        </ul>
+                      </div>
+                          
+                    
+
+                    <section class="update-info">
+                      <h1>Новое обновление</h1>
+
+                      <div class="update-info-area">
+
+                        <div id="upload-file" class="upload-input">
+                          <img src="../img/upload.svg">
+                          <span class="upload-text">Загрузить файл обновления</span>
+                          <span class="upload-description">ZIP, RAR, TAR (макс 100 мб)</span>
+                        </div>
+                        <input id="input-upload-file" type="file" name="updateFile" style="display: none;">
+
+                        <label for="update-name">Название<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                        <input name="updateName" type="text" id="update-name" placeholder="Название обновления" required>
+
+                        <span class="input-name">Время обновления</span>
+                        <ul id="time-picker">
+                          <li><input type="radio" name="updateTimeRadio" id="update-time-now" value="now" checked><label class="input-radio" for="update-time-now">Сейчас</label></li>
+                          <li><input type="radio" name="updateTimeRadio" id="update-time-later" value="later"><label class="input-radio" for="update-time-later">Ко времени</label></li>
+                        </ul>
+
+                        <input name="updateTime" type="datetime-local" id="update-time">
+
+                        <button>Отправить</button>
+
+                      </div>
+                    </section>
+
+                  </section>
+
+                
+
+                    <section id="table-area" class="table update">
+                        <h1>Список водителей</h1>
+                        <input id="table-search" class="search" type="text" placeholder="Поиск">
+
+                          
+                          <table id="deviceTable">
+                            <thead>
+                              <tr>
+                                <th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
+                                <th>Группа</th>
+                                <th>Номер ТС</th>
+                                <th>Статус</th>
+                                <th>Время</th>
+                                <th>Файл</th>
+                                <th></th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <!-- Сюда будут добавляться строки таблицы -->
+                            </tbody>
+                          </table>
+                          
+                          
+                          
+                          
+                    </section>
+
+                    <div id="count">
+                        <!-- Сюда добавится итоговое количество результатов -->
+                    </div>
+                    <div id="pagination">
+                        <!-- Сюда будут добавляться ссылки для переключения между страницами -->
+                      </div>
+                      
+                      
+
+                </section>
+
+
+            </section>
+        </section>
+    </section>
+
+    <script src="../scripts/table-updates.js"></script>
+    <script src="../scripts/jquery.min.js"></script>
+
+    <script>
+      const fileSelect = document.getElementById("upload-file");
+      const fileElem = document.getElementById("input-upload-file");
+
+      fileSelect.addEventListener(
+              "click",
+              (e) => {
+                      if (fileElem) {
+                              fileElem.click();
+                      }
+              },
+              false
+      );
+  </script>
+
+  <script>
+
+      $("#update-time").hide();
+      $("#time-picker").click(function () {
+        if ($("#update-time-later").is(":checked")) {
+          $("#update-time").show(50);
+        } else {
+          $("#update-time").hide(50);
+        }
+      });
+
+  </script>
+
+
+    <script>
+        // Скрытие/Показ дополнительных меню аккаунта
+        const accountMain = document.getElementById('account-main');
+        const accountAdditional = document.getElementById('account-additional');
+        const accountUp = document.getElementById('up');
+        const accountDown = document.getElementById('down');
+        accountAdditional.style.display = 'none';
+        accountUp.style.display = 'none';
+        
+        accountMain.addEventListener('click', () => {
+          if (accountAdditional.style.display === 'none') {
+            accountAdditional.style.display = 'flex';
+            accountUp.style.display = 'unset';
+            accountDown.style.display = 'none';
+          } else {
+            accountAdditional.style.display = 'none';
+            accountUp.style.display = 'none';
+            accountDown.style.display = 'unset';
+          }
+        });
+      </script>
+      
+
+      <script>
+        const checkboxes = document.querySelectorAll('.organisation .checkbox-input');
+
+checkboxes.forEach((checkbox) => {
+    applyFilterAndSearch();
+  checkbox.addEventListener('change', function() {
+    document.querySelector('#device-all').checked = false;
+    applyFilterAndSearch();
+    const devices = this.parentNode.querySelector('.area-devices');
+    if (this.checked) {
+      devices.style.display = 'block';
+
+      // Активируем дочерние чекбоксы
+      const childCheckboxes = devices.querySelectorAll('.device-filter');
+      childCheckboxes.forEach((childCheckbox) => {
+        childCheckbox.checked = true;
+        applyFilterAndSearch();
+      });
+    } else {
+      devices.style.display = 'none';
+      applyFilterAndSearch();
+
+      // Деактивируем дочерние чекбоксы
+      const childCheckboxes = devices.querySelectorAll('.device-filter');
+      childCheckboxes.forEach((childCheckbox) => {
+        childCheckbox.checked = false;
+        applyFilterAndSearch();
+      });
+    }
+
+    // Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
+    if (!this.checked) {
+      const childCheckboxes = devices.querySelectorAll('.device-filter');
+      childCheckboxes.forEach((childCheckbox) => {
+        childCheckbox.checked = false;
+        applyFilterAndSearch();
+      });
+      devices.style.display = 'none';
+    }
+  });
+});
+
+      </script>
+
+      <script>
+
+var table = document.querySelector('#deviceTable');
+var tableCheckboxAll = table.querySelector('#device-all');
+var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
+
+tableCheckboxAll.addEventListener('click', function(event) {
+    table = document.querySelector('#deviceTable');
+    tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
+    if (tableCheckboxAll.checked) {
+    tableCheckboxes.forEach((tableCheckbox) => {
+        tableCheckbox.checked = true;
+      });
+    } else {
+        tableCheckboxes.forEach((tableCheckbox) => {
+        tableCheckbox.checked = false;
+      });
+    }
+});
+
+$('#deviceTable').click( function(event) {
+    table = document.querySelector('#deviceTable');
+    tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
+
+
+for (var i = 0; i < tableCheckboxes.length; i++) {
+    tableCheckboxes[i].addEventListener('click', function(event) {
+    for (var j = 0; j < tableCheckboxes.length; j++) {
+      if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
+        tableCheckboxAll.checked = false;
+        return;
+      }
+    }
+    tableCheckboxAll.checked = true;
+  });
+}
+});
+
+      </script>
+    
+</body>
+</html>

static/templates/index.html

@@ -51,6 +51,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">
             <img src="../img/cars.svg"><span>Сводка по {{Count}} ТС</span>
         </div>

static/templates/live.html

@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Трансляция</title>
     <link rel="stylesheet" href="../styles/main.css" />
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
+
 </head>
 <body>
 
@@ -49,6 +52,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>
@@ -66,11 +79,21 @@
                         <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="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
+                              {{#each Registrars}}
-                              <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>
+                                <li class="device">
+                                  <img>
+                                  <input type="checkbox" name="devices" id="{{this}}" class="checkbox-input device-filter" value="{{this}}" hidden checked>
+                                  <label for="{{this}}" class="checkbox-label">
+                                    <div class="checkmark"></div>
+                                    {{this}}
+                                  </label>
+                                </li>
+                              {{/each}}
+                              <!-- <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> -->
                             </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="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li>
                               <li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li>
@@ -82,7 +105,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>
 
                           
@@ -98,7 +121,7 @@
                         </svg>
                         <input class="search" type="text" placeholder="Поиск">
 
-                        <ul>
+                        <ul id="list">
                           <li>
                             <input type="radio" name="signal" id="signal-1" hidden checked>
                             <label for="signal-1">
@@ -175,7 +198,7 @@
                               </svg>+7 909 133 55 67</p>
                             </label>
                           </li>
-                          <!-- <li>
+                          <li>
                             <input type="radio" name="signal" id="signal-5" hidden>
                             <label for="signal-5">
                               <h2>Водитель отвлекся</h2>
@@ -231,7 +254,7 @@
                                 <path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
                               </svg>+7 999 123 45 67</p>
                             </label>
-                          </li> -->
+                          </li>
                         </ul>
 
                       </div>
@@ -250,9 +273,184 @@
         </section>
     </section>
 
-    <script src="../scripts/table-reports.js"></script>
+    <script>
+      window.addEventListener('DOMContentLoaded', function() {
+        var signalsList = document.querySelector('.signals-list');
+        var list = document.getElementById('list');
+    
+        list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
+      });
+    </script>
+
+<script>
+  window.addEventListener('DOMContentLoaded', function() {
+    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> -->
     <script src="../scripts/jquery.min.js"></script>
 
+
+    <script>
+
+      var checkboxes = document.querySelectorAll('.checkbox-input');
+      const form = document.getElementById('devices-1');
+
+      form.addEventListener('change', () => {
+        const selectedDevices = Array.from(checkboxes)
+          .filter(checkbox => checkbox.checked && checkbox.value !== 'on')
+          .map(checkbox => checkbox.value);
+
+          console.log(selectedDevices);
+
+        fetch('/devices-geo', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ devices: selectedDevices }),
+        })
+          .then(response => response.json())
+          .then(data => {
+            console.log(data.devicesData);
+            updateMapMarkers(data.devicesData);
+          })
+          .catch(error => {
+            console.error('Ошибка при отправке запроса:', error);
+          });
+      });
+
+    </script>
+
+
+    <script>
+      mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v12',
+  center: [30.282995, 59.855198], // Задайте начальные координаты карты
+  zoom: 10, // Задайте начальный уровень масштабирования карты
+});
+
+// Хранение текущих маркеров на карте
+const markers = [];
+{{#if ifDBError}}
+{{else}}
+
+
+const selectedDevices = Array.from(checkboxes)
+          .filter(checkbox => checkbox.checked && checkbox.value !== 'on')
+          .map(checkbox => checkbox.value);
+
+          console.log(selectedDevices);
+
+        fetch('/devices-geo', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ devices: selectedDevices }),
+        })
+          .then(response => response.json())
+          .then(data => {
+            console.log(data.devicesData);
+            data.devicesData.forEach(device => {
+    const { longitude, latitude, direction, speed } = device;
+    
+    // Создание HTML-элемента для маркера
+    const el = document.createElement('div');
+    el.className = 'marker';
+    // el.style.transform = `rotate(${direction / 100}deg)`;
+    el.innerHTML = `<svg style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+  <path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
+  <path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
+</svg><br><span class="speed">${speed} км/ч</span>`;
+
+    // Создание нового маркера на карте
+    const marker = new mapboxgl.Marker(el)
+      .setLngLat([longitude, latitude])
+      .addTo(map);
+
+    // Добавление маркера в массив markers
+    markers.push(marker);
+  });
+          })
+          .catch(error => {
+            console.error('Ошибка при отправке запроса:', error);
+          });
+
+// Функция для обновления маркеров на карте
+function updateMapMarkers(devicesData) {
+  // Очистка существующих маркеров на карте
+  markers.forEach(marker => marker.remove());
+  markers.length = 0;
+
+  // Создание новых маркеров на карте на основе полученных данных
+  devicesData.forEach(device => {
+    const { longitude, latitude, direction, speed } = device;
+    
+    // Создание HTML-элемента для маркера
+    const el = document.createElement('div');
+    el.className = 'marker';
+    // el.style.transform = `rotate(${direction}deg)`;
+    el.innerHTML = `<svg style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+  <path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
+  <path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
+</svg><br><span class="speed">${speed} км/ч</span>`;
+
+    // Создание нового маркера на карте
+    const marker = new mapboxgl.Marker(el)
+      .setLngLat([longitude, latitude])
+      .addTo(map);
+
+    // Добавление маркера в массив markers
+    markers.push(marker);
+  });
+}
+
+setInterval(() => {
+  fetch('/devices-geo', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ devices: selectedDevices }),
+        })
+          .then(response => response.json())
+          .then(data => {
+            console.log(data.devicesData);
+            updateMapMarkers(data.devicesData);
+          })
+          .catch(error => {
+            console.error('Ошибка при отправке запроса:', error);
+          });
+}, 20000);
+{{/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%;
@@ -262,12 +460,12 @@
       }
     </style> -->
   
-    <script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>
+    <!-- <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" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> -->
   
-    <script>
+    <!-- <script>
       function initMap() {
         // Координаты начальной точки
         var startPoint = L.latLng(55.769042, 37.647840);
@@ -296,7 +494,7 @@
         document.querySelector('.leaflet-routing-container').style.display = 'none';
       }
     </script>
-    <script>initMap();</script>
+    <script>initMap();</script> -->
 
     <script>
       const panel = document.getElementById('signals-list');
@@ -332,7 +530,7 @@
       </script>
 
       <script>
-        const checkboxes = document.querySelectorAll('.organisation .checkbox-input');
+        var checkboxes = document.querySelectorAll('.organisation .checkbox-input');
 
 checkboxes.forEach((checkbox) => {
     applyFilterAndSearch();