init
This commit is contained in:
370
code/package-lock.json
generated
Executable file
370
code/package-lock.json
generated
Executable file
@@ -0,0 +1,370 @@
|
||||
{
|
||||
"name": "dashboard",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dashboard",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"node-gpsd": "^0.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.10"
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fill-range": "^7.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"supports-color": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore-by-default": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
||||
"integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-glob": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/node-gpsd": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/node-gpsd/-/node-gpsd-0.3.4.tgz",
|
||||
"integrity": "sha512-sI9hPfHiaWDmhjE1oJZnhMo7UF2vQVGl3qk0K4HbN1L8BkS0I+rd6V687eHOj/6ervXiHrhwXzYYsWdXxGy0Qg==",
|
||||
"engines": {
|
||||
"node": ">=v0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon": {
|
||||
"version": "3.1.10",
|
||||
"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
|
||||
"integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.5.2",
|
||||
"debug": "^4",
|
||||
"ignore-by-default": "^1.0.1",
|
||||
"minimatch": "^3.1.2",
|
||||
"pstree.remy": "^1.1.8",
|
||||
"semver": "^7.5.3",
|
||||
"simple-update-notifier": "^2.0.0",
|
||||
"supports-color": "^5.5.0",
|
||||
"touch": "^3.1.0",
|
||||
"undefsafe": "^2.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"nodemon": "bin/nodemon.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/nodemon"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pstree.remy": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
|
||||
"integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||
"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-update-notifier": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
|
||||
"integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"semver": "^7.5.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/touch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
|
||||
"integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"nodetouch": "bin/nodetouch.js"
|
||||
}
|
||||
},
|
||||
"node_modules/undefsafe": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
|
||||
"integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
19
code/package.json
Executable file
19
code/package.json
Executable file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "dashboard",
|
||||
"version": "1.0.0",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "node src/main.mjs",
|
||||
"start:prod": "nodemon src/main.mjs"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"description": "Dashboard",
|
||||
"dependencies": {
|
||||
"node-gpsd": "^0.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.10"
|
||||
}
|
||||
}
|
||||
BIN
code/public/downloads/ATAK_5.4.0.16.apk
Executable file
BIN
code/public/downloads/ATAK_5.4.0.16.apk
Executable file
Binary file not shown.
BIN
code/public/downloads/Element.apk
Executable file
BIN
code/public/downloads/Element.apk
Executable file
Binary file not shown.
BIN
code/public/downloads/Meshtastic_2.7.1.apk
Executable file
BIN
code/public/downloads/Meshtastic_2.7.1.apk
Executable file
Binary file not shown.
BIN
code/public/downloads/Remote Desktop 8_8.1.82.445.apk
Executable file
BIN
code/public/downloads/Remote Desktop 8_8.1.82.445.apk
Executable file
Binary file not shown.
BIN
code/public/downloads/SDRangel_7.21.3.1.apk
Executable file
BIN
code/public/downloads/SDRangel_7.21.3.1.apk
Executable file
Binary file not shown.
BIN
code/public/favicon.png
Executable file
BIN
code/public/favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
953
code/public/index.html
Executable file
953
code/public/index.html
Executable file
@@ -0,0 +1,953 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>MRS Dashboard</title>
|
||||
<link rel="icon" href="/favicon.png">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-areas: "logo status clocks";
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
grid-area: logo;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.logo-section img {
|
||||
height: 3rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.hostname {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
grid-area: clocks;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.network-status-wrapper {
|
||||
grid-area: status;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.network-status {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.network-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.network-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-toggle {
|
||||
cursor: pointer;
|
||||
padding: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expand-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #94a3b8;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.expanded-status {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.expanded-status.visible {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.status-tiles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 0;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.status-tiles::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.status-tiles::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.status-tiles::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-tiles::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.status-tile {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.tile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tile-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.tile-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.tile-info {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.tile-detail {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.network-item.disconnected .network-icon,
|
||||
.status-tile.disconnected .tile-icon {
|
||||
stroke: #64748b;
|
||||
}
|
||||
|
||||
.status-tile.disconnected .tile-name {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-tile.connected {
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.network-item.connected .network-icon,
|
||||
.status-tile.connected .tile-icon {
|
||||
stroke: #10b981;
|
||||
}
|
||||
|
||||
.status-tile.connected .tile-name {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-weight: 600;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #64748b;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.apps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.second-action {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
background: #5a6b63;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.second-action:hover {
|
||||
background: #6a7b73;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.second-action:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.second-action svg {
|
||||
stroke: white;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.app-badge svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.app-icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-item:hover .app-icon-wrapper {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.app-item:active .app-icon-wrapper {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
#temp {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tile-wide {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.system-metrics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.system-metric {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #cdd5e0;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.metric-label span {
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
height: 14px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: #10b981;
|
||||
border-radius: 6px;
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-bar-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive breakpoints */
|
||||
@media (max-width: 800px) {
|
||||
.header-content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"logo clocks"
|
||||
"status status";
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.network-status-wrapper {
|
||||
justify-self: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.header-content {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"logo"
|
||||
"clocks"
|
||||
"status";
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo-section">
|
||||
<img src="/favicon.png" alt="Logo">
|
||||
<div>
|
||||
<div class="logo">DASHBOARD</div>
|
||||
<div class="hostname">Hostname</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-info">
|
||||
<div class="time-display">
|
||||
<div class="time-block">
|
||||
<div class="time-label">Local</div>
|
||||
<div class="time-value" id="local-time">00:00:00</div>
|
||||
<div class="time-date" id="local-date">Jan 1, 2025</div>
|
||||
</div>
|
||||
<div class="time-block">
|
||||
<div class="time-label">Zulu / UTC</div>
|
||||
<div class="time-value" id="zulu-time">00:00:00</div>
|
||||
<div class="time-date" id="zulu-date">Jan 1, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-status-wrapper">
|
||||
<div class="network-status">
|
||||
<div class="network-item disconnected" id="gps-status">
|
||||
<svg class="network-icon" viewBox="0 0 24 24">
|
||||
<g transform="translate(2,2) rotate(-45 12 12)">
|
||||
<rect x="9.5" y="1" width="5" height="8.5" rx="1" ry="1" fill="transparent"/>
|
||||
<rect x="1" y="6" width="6" height="4"/>
|
||||
<rect x="17" y="6" width="6" height="4"/>
|
||||
<line x1="1" y1="8" x2="23" y2="8"/>
|
||||
<defs>
|
||||
<clipPath id="halfCircle">
|
||||
<rect x="0" y="5" width="100%" height="42%" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<circle cx="12" cy="17.5" r="6px" clip-path="url(#halfCircle)" fill="transparent" />
|
||||
<line x1="12" y1="12" x2="12" y2="17" stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="network-item connected" id="lora-status">
|
||||
<svg class="network-icon" viewBox="0 0 24 24">
|
||||
<line x1="0" y1="18" x2="8" y2="6"/>
|
||||
<line x1="8" y1="18" x2="16" y2="6"/>
|
||||
<line x1="16" y1="6" x2="24" y2="18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="network-item connected" id="mesh-status">
|
||||
<svg class="network-icon" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="5" cy="5" r="2" />
|
||||
<line x1="6" y1="6" x2="15" y2="4" />
|
||||
<line x1="6" y1="6" x2="20" y2="12" />
|
||||
<line x1="6" y1="6" x2="13.5" y2="19" />
|
||||
<line x1="6" y1="6" x2="5" y2="15" />
|
||||
<circle cx="15.5" cy="3" r="2" />
|
||||
<line x1="15" y1="4" x2="20" y2="12" />
|
||||
<line x1="15" y1="4" x2="13.5" y2="19" />
|
||||
<line x1="15" y1="4" x2="5" y2="15" />
|
||||
<circle cx="21" cy="12" r="2" />
|
||||
<line x1="20" y1="12" x2="13.5" y2="19" />
|
||||
<circle cx="14" cy="20.5" r="2" />
|
||||
<line x1="13.5" y1="19" x2="5" y2="15" />
|
||||
<circle cx="4" cy="16" r="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="network-item connected" id="wifi-status">
|
||||
<svg class="network-icon" viewBox="0 0 24 24">
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0"/>
|
||||
<path d="M1.42 9a16 16 0 0 1 21.16 0"/>
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
|
||||
<line x1="12" y1="20" x2="12.01" y2="20"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="network-item disconnected" id="ethernet-status">
|
||||
<svg class="network-icon" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="5" y="9" width="14" height="10" rx="1" ry="1"/>
|
||||
<rect x="9" y="5" width="6" height="4" rx="0.5" ry="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="expand-toggle" id="expand-toggle">
|
||||
<svg class="expand-icon" id="expand-icon" viewBox="0 0 24 24">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expanded-status" id="expanded-status">
|
||||
<div class="status-tiles">
|
||||
<div class="status-tile connected tile-wide" id="system-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
|
||||
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
|
||||
<line x1="6" y1="6" x2="6.01" y2="6"></line>
|
||||
<line x1="10" y1="6" x2="10.01" y2="6"></line>
|
||||
<line x1="6" y1="18" x2="6.01" y2="18"></line>
|
||||
<line x1="10" y1="18" x2="10.01" y2="18"></line>
|
||||
</svg>
|
||||
<div class="tile-name">System <span id="temp">?°C</span></div>
|
||||
</div>
|
||||
<div class="system-metrics">
|
||||
<div class="system-metric">
|
||||
<div class="metric-label">CPU <span id="load">- Load</span></div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-fill" id="cpu-usage-fill"></div>
|
||||
<div class="progress-bar-text" id="cpu-usage-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-metric">
|
||||
<div class="metric-label">Memory</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-fill" id="memory-usage-fill"></div>
|
||||
<div class="progress-bar-text" id="memory-usage-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-metric">
|
||||
<div class="metric-label">Disk</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-fill" id="disk-usage-fill"></div>
|
||||
<div class="progress-bar-text" id="disk-usage-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-tile disconnected" id="gps-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24">
|
||||
<g transform="translate(2,2) rotate(-45 12 12)">
|
||||
<rect x="9.5" y="1" width="5" height="8.5" rx="1" ry="1" fill="transparent" />
|
||||
<rect x="1" y="6" width="6" height="4"/>
|
||||
<rect x="17" y="6" width="6" height="4"/>
|
||||
<line x1="1" y1="8" x2="23" y2="8"/>
|
||||
<defs>
|
||||
<clipPath id="halfCircle">
|
||||
<rect x="0" y="5" width="100%" height="42%" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<circle cx="12" cy="17.5" r="6px" clip-path="url(#halfCircle)" fill="transparent" />
|
||||
<line x1="12" y1="12" x2="12" y2="17" stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="tile-name">GPS</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tile-info">39.2000, -49.0000</div>
|
||||
<div class="tile-detail">No Fix</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-tile disconnected" id="lora-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24">
|
||||
<line x1="0" y1="18" x2="8" y2="6"/>
|
||||
<line x1="8" y1="18" x2="16" y2="6"/>
|
||||
<line x1="16" y1="6" x2="24" y2="18"/>
|
||||
</svg>
|
||||
<div class="tile-name">LoRa</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tile-info">0 / 0 Online</div>
|
||||
<div class="tile-detail">Ch 0% Air 0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-tile connected" id="mesh-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="5" cy="5" r="2" />
|
||||
<line x1="6" y1="6" x2="15" y2="4" />
|
||||
<line x1="6" y1="6" x2="20" y2="12" />
|
||||
<line x1="6" y1="6" x2="13.5" y2="19" />
|
||||
<line x1="6" y1="6" x2="5" y2="15" />
|
||||
<circle cx="15.5" cy="3" r="2" />
|
||||
<line x1="15" y1="4" x2="20" y2="12" />
|
||||
<line x1="15" y1="4" x2="13.5" y2="19" />
|
||||
<line x1="15" y1="4" x2="5" y2="15" />
|
||||
<circle cx="21" cy="12" r="2" />
|
||||
<line x1="20" y1="12" x2="13.5" y2="19" />
|
||||
<circle cx="14" cy="20.5" r="2" />
|
||||
<line x1="13.5" y1="19" x2="5" y2="15" />
|
||||
<circle cx="4" cy="16" r="2" />
|
||||
</svg>
|
||||
<div class="tile-name">Mesh</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tile-info">Connected</div>
|
||||
<div class="tile-detail">900 Mhz -45 dBm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-tile connected" id="wifi-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24">
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0"/>
|
||||
<path d="M1.42 9a16 16 0 0 1 21.16 0"/>
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
|
||||
<line x1="12" y1="20" x2="12.01" y2="20"/>
|
||||
</svg>
|
||||
<div class="tile-name">WiFi</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tile-info">Access Point</div>
|
||||
<div class="tile-detail">SSID: Hostname</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-tile disconnected" id="ethernet-tile">
|
||||
<div class="tile-header">
|
||||
<svg class="tile-icon" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="5" y="9" width="14" height="10" rx="1" ry="1"/>
|
||||
<rect x="9" y="5" width="6" height="4" rx="0.5" ry="0.5"/>
|
||||
</svg>
|
||||
<div class="tile-name">Ethernet</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tile-info">Disconnected</div>
|
||||
<div class="tile-detail">No cable detected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="search-bar">
|
||||
<svg class="search-icon" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" class="search-input" placeholder="Search apps..." id="search-input">
|
||||
</div>
|
||||
|
||||
<div class="apps-grid" id="apps-grid">
|
||||
<a href=":1000" class="app-item" data-name="AI Assistant">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<rect x="6" y="6" width="12" height="12" rx="2" ry="2"/>
|
||||
<line x1="2" y1="9" x2="6" y2="9"/>
|
||||
<line x1="2" y1="12" x2="6" y2="12"/>
|
||||
<line x1="2" y1="15" x2="6" y2="15"/>
|
||||
<line x1="18" y1="9" x2="22" y2="9"/>
|
||||
<line x1="18" y1="12" x2="22" y2="12"/>
|
||||
<line x1="18" y1="15" x2="22" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">AI Assistant</div>
|
||||
</a>
|
||||
|
||||
<a href=":1100" class="app-item" data-name="ATAK">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<div class="second-action">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<line x1="12" y1="0" x2="12" y2="24" />
|
||||
<line x1="4" y1="11" x2="12" y2="21" />
|
||||
<line x1="20" y1="11" x2="12" y2="21" />
|
||||
<line x1="1" y1="22" x2="23" y2="22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">ATAK</div>
|
||||
</a>
|
||||
|
||||
<a href=":1200" class="app-item" data-name="Remote Desktop">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
<div class="second-action">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<line x1="12" y1="0" x2="12" y2="24" />
|
||||
<line x1="4" y1="11" x2="12" y2="21" />
|
||||
<line x1="20" y1="11" x2="12" y2="21" />
|
||||
<line x1="1" y1="22" x2="23" y2="22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">Desktop</div>
|
||||
</a>
|
||||
|
||||
<a href=":1300" class="app-item" data-name="File Browser">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">File Browser</div>
|
||||
</a>
|
||||
|
||||
<a href=":1400" class="app-item" data-name="Library">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||||
</svg>
|
||||
<div class="second-action" onclick="openKiwixm(event)">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<circle cx="12" cy="12" r="6.5" stroke-width="5" />
|
||||
<line x1="12" y1="7" x2="12" y2=".5" />
|
||||
<line x1="12" y1="17" x2="12" y2="23.5" />
|
||||
<line x1="0.5" y1="12" x2="7" y2="12" />
|
||||
<line x1="17" y1="12" x2="23.5" y2="12" />
|
||||
<line x1="15" y1="15" x2="20" y2="20" />
|
||||
<line x1="4" y1="4" x2="9" y2="9" />
|
||||
<line x1="20" y1="4" x2="15" y2="9" />
|
||||
<line x1="4" y1="20" x2="9" y2="15" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">Library</div>
|
||||
</a>
|
||||
|
||||
<a href=":1500" class="app-item" data-name="Maps">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z"/>
|
||||
<line x1="9" y1="4" x2="9" y2="17"/>
|
||||
<line x1="15" y1="7" x2="15" y2="20"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">Maps</div>
|
||||
</a>
|
||||
|
||||
<a href=":1600" class="app-item" data-name="Meshtastic">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<line x1="0" y1="18" x2="8" y2="6"/>
|
||||
<line x1="8" y1="18" x2="16" y2="6"/>
|
||||
<line x1="16" y1="6" x2="24" y2="18"/>
|
||||
</svg>
|
||||
<div class="second-action">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<line x1="12" y1="0" x2="12" y2="24" />
|
||||
<line x1="4" y1="11" x2="12" y2="21" />
|
||||
<line x1="20" y1="11" x2="12" y2="21" />
|
||||
<line x1="1" y1="22" x2="23" y2="22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">Meshtastic</div>
|
||||
</a>
|
||||
|
||||
<a href=":1700" class="app-item" data-name="Messages">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<div class="second-action">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<line x1="12" y1="0" x2="12" y2="24" />
|
||||
<line x1="4" y1="11" x2="12" y2="21" />
|
||||
<line x1="20" y1="11" x2="12" y2="21" />
|
||||
<line x1="1" y1="22" x2="23" y2="22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">Messages</div>
|
||||
</a>
|
||||
|
||||
<a href=":1800" class="app-item" data-name="Pentesting">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">Pentesting</div>
|
||||
</a>
|
||||
|
||||
<a href=":1900" class="app-item" data-name="Software Defined Radio">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<g transform="translate(0,-2)">
|
||||
<circle cx="12" cy="12" r="1.5"/>
|
||||
<path d="M16.24 7.76a6 6 0 0 1 0 8.49"/>
|
||||
<path d="M7.76 16.24a6 6 0 0 1 0-8.49"/>
|
||||
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
|
||||
<path d="M4.93 19.07a10 10 0 0 1 0-14.14"/>
|
||||
<line x1="12" y1="10" x2="12" y2="24"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="second-action">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
|
||||
<line x1="12" y1="0" x2="12" y2="24" />
|
||||
<line x1="4" y1="11" x2="12" y2="21" />
|
||||
<line x1="20" y1="11" x2="12" y2="21" />
|
||||
<line x1="1" y1="22" x2="23" y2="22" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-name">SDR</div>
|
||||
</a>
|
||||
|
||||
<a href=":2000" class="app-item" data-name="Speed Test">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<polygon points="8 1 16 1 14 15 10 15"/>
|
||||
<circle cx="12" cy="20" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">Situation Room</div>
|
||||
</a>
|
||||
|
||||
<a href=":2100" class="app-item" data-name="Speed Test">
|
||||
<div class="app-icon-wrapper">
|
||||
<svg class="app-icon" viewBox="0 0 24 24">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">Speed Test</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
368
code/public/index.js
Executable file
368
code/public/index.js
Executable file
@@ -0,0 +1,368 @@
|
||||
|
||||
class Dashboard {
|
||||
constructor() {
|
||||
this.statusCache = null;
|
||||
this.lastFetch = 0;
|
||||
this.hostname = 'localhost';
|
||||
this.serverTimeOffset = null; // Track difference between server and client time
|
||||
this.isTimeServerSynced = false; // Track if we're using server time
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.fetchHostname();
|
||||
this.updateHostname();
|
||||
this.startTimeUpdates(); // Start with client time immediately
|
||||
this.startStatusUpdates();
|
||||
this.initializeEventListeners();
|
||||
}
|
||||
|
||||
async fetchHostname() {
|
||||
try {
|
||||
const response = await fetch('/api/hostname');
|
||||
const data = await response.json();
|
||||
this.hostname = data.hostname.toLowerCase();
|
||||
} catch (error) {
|
||||
console.warn('Failed to fetch hostname:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updateHostname() {
|
||||
const hostnameElement = document.querySelector('.hostname');
|
||||
if (hostnameElement) {
|
||||
hostnameElement.textContent = this.hostname;
|
||||
}
|
||||
}
|
||||
|
||||
async fetchStatus() {
|
||||
try {
|
||||
// Record start time for latency calculation
|
||||
const requestStart = performance.now();
|
||||
const response = await fetch('/api/status');
|
||||
const requestEnd = performance.now();
|
||||
|
||||
if (!response.ok) throw new Error('Status fetch failed');
|
||||
|
||||
const status = await response.json();
|
||||
this.statusCache = status;
|
||||
this.updateUI(status, requestStart, requestEnd);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch status:', error);
|
||||
this.showOfflineStatus();
|
||||
}
|
||||
}
|
||||
|
||||
updateUI(status, requestStart, requestEnd) {
|
||||
this.updateSystemMetrics(status.system);
|
||||
this.updateGPSStatus(status.gps);
|
||||
this.updateNetworkStatus(status.network);
|
||||
this.updateLoRaStatus(status.lora);
|
||||
this.updateTimeSync(status.time, requestStart, requestEnd);
|
||||
}
|
||||
|
||||
updateSystemMetrics(system) {
|
||||
// Update temperature
|
||||
const tempElement = document.getElementById('temp');
|
||||
if (tempElement && system.temperature) {
|
||||
tempElement.textContent = `${system.temperature}°C`;
|
||||
}
|
||||
|
||||
// Update load average
|
||||
const loadElement = document.getElementById('load');
|
||||
if (loadElement && system.load !== undefined) {
|
||||
loadElement.textContent = `${system.load.toFixed(1)} Load`;
|
||||
}
|
||||
|
||||
// Update progress bars
|
||||
this.updateProgressBar('cpu-usage', system.cpu);
|
||||
this.updateProgressBar('memory-usage', system.memory);
|
||||
this.updateProgressBar('disk-usage', system.storage);
|
||||
}
|
||||
|
||||
updateProgressBar(id, percentage) {
|
||||
const fillElement = document.getElementById(`${id}-fill`);
|
||||
const textElement = document.getElementById(`${id}-text`);
|
||||
|
||||
if (fillElement && textElement) {
|
||||
const value = Math.round(percentage);
|
||||
fillElement.style.width = `${value}%`;
|
||||
textElement.textContent = `${value}%`;
|
||||
|
||||
// Update color based on usage
|
||||
if (value > 80) {
|
||||
fillElement.style.background = '#ef4444'; // Red
|
||||
} else if (value > 60) {
|
||||
fillElement.style.background = '#f59e0b'; // Orange
|
||||
} else {
|
||||
fillElement.style.background = '#10b981'; // Green
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateGPSStatus(gps) {
|
||||
const gpsStatus = document.getElementById('gps-status');
|
||||
const gpsTile = document.getElementById('gps-tile');
|
||||
|
||||
if (gpsStatus && gpsTile) {
|
||||
const hasValidFix = gps.fix !== 'No Fix' && gps.latitude !== null;
|
||||
|
||||
// Update status indicator
|
||||
if (hasValidFix) {
|
||||
gpsStatus.classList.remove('disconnected');
|
||||
gpsStatus.classList.add('connected');
|
||||
gpsTile.classList.remove('disconnected');
|
||||
gpsTile.classList.add('connected');
|
||||
} else {
|
||||
gpsStatus.classList.remove('connected');
|
||||
gpsStatus.classList.add('disconnected');
|
||||
gpsTile.classList.remove('connected');
|
||||
gpsTile.classList.add('disconnected');
|
||||
}
|
||||
|
||||
// Update GPS tile info
|
||||
const gpsInfo = gpsTile.querySelector('.tile-info');
|
||||
const gpsDetail = gpsTile.querySelector('.tile-detail');
|
||||
|
||||
if (gpsInfo && gpsDetail) {
|
||||
if (hasValidFix) {
|
||||
gpsInfo.textContent = `${gps.latitude.toFixed(4)}, ${gps.longitude.toFixed(4)}`;
|
||||
gpsDetail.textContent = `${gps.fix} • ${gps.satellites} sats • Alt: ${Math.round(gps.altitude)}m`;
|
||||
} else {
|
||||
gpsInfo.textContent = gps.satellites > 0 ? 'Acquiring Fix...' : 'No Signal';
|
||||
gpsDetail.textContent = `${gps.satellites} satellites`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateNetworkStatus(network) {
|
||||
// Update WiFi status
|
||||
const wifiTile = document.getElementById('wifi-tile');
|
||||
if (wifiTile) {
|
||||
const wifiInfo = wifiTile.querySelector('.tile-info');
|
||||
const wifiDetail = wifiTile.querySelector('.tile-detail');
|
||||
|
||||
if (wifiInfo && wifiDetail) {
|
||||
if (network.wifi.mode === 'ap') {
|
||||
wifiInfo.textContent = 'Access Point';
|
||||
wifiDetail.textContent = `SSID: ${network.wifi.ssid}`;
|
||||
} else {
|
||||
wifiInfo.textContent = 'Client Mode';
|
||||
wifiDetail.textContent = `SSID: ${network.wifi.ssid}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update Ethernet status
|
||||
const ethernetStatus = document.getElementById('ethernet-status');
|
||||
const ethernetTile = document.getElementById('ethernet-tile');
|
||||
|
||||
if (ethernetStatus && ethernetTile) {
|
||||
if (network.ethernet.connected) {
|
||||
ethernetStatus.classList.remove('disconnected');
|
||||
ethernetStatus.classList.add('connected');
|
||||
ethernetTile.classList.remove('disconnected');
|
||||
ethernetTile.classList.add('connected');
|
||||
|
||||
const ethernetInfo = ethernetTile.querySelector('.tile-info');
|
||||
const ethernetDetail = ethernetTile.querySelector('.tile-detail');
|
||||
if (ethernetInfo && ethernetDetail) {
|
||||
ethernetInfo.textContent = 'Connected';
|
||||
ethernetDetail.textContent = 'Link detected';
|
||||
}
|
||||
} else {
|
||||
ethernetStatus.classList.remove('connected');
|
||||
ethernetStatus.classList.add('disconnected');
|
||||
ethernetTile.classList.remove('connected');
|
||||
ethernetTile.classList.add('disconnected');
|
||||
|
||||
const ethernetInfo = ethernetTile.querySelector('.tile-info');
|
||||
const ethernetDetail = ethernetTile.querySelector('.tile-detail');
|
||||
if (ethernetInfo && ethernetDetail) {
|
||||
ethernetInfo.textContent = 'Disconnected';
|
||||
ethernetDetail.textContent = 'No cable detected';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateLoRaStatus(lora) {
|
||||
const loraStatus = document.getElementById('lora-status');
|
||||
const loraTile = document.getElementById('lora-tile');
|
||||
|
||||
if (loraStatus && loraTile) {
|
||||
if (lora.connected) {
|
||||
loraStatus.classList.remove('disconnected');
|
||||
loraStatus.classList.add('connected');
|
||||
loraTile.classList.remove('disconnected');
|
||||
loraTile.classList.add('connected');
|
||||
|
||||
const loraInfo = loraTile.querySelector('.tile-info');
|
||||
const loraDetail = loraTile.querySelector('.tile-detail');
|
||||
|
||||
if (loraInfo && loraDetail) {
|
||||
loraInfo.textContent = `${lora.onlineNodes}/${lora.totalNodes} Online`;
|
||||
loraDetail.textContent = `CH: ${lora.channelUtilization.toFixed(1)}% • Air: ${lora.airtimeUtilization.toFixed(1)}%`;
|
||||
}
|
||||
} else {
|
||||
loraStatus.classList.remove('connected');
|
||||
loraStatus.classList.add('disconnected');
|
||||
loraTile.classList.remove('connected');
|
||||
loraTile.classList.add('disconnected');
|
||||
|
||||
const loraInfo = loraTile.querySelector('.tile-info');
|
||||
const loraDetail = loraTile.querySelector('.tile-detail');
|
||||
|
||||
if (loraInfo && loraDetail) {
|
||||
loraInfo.textContent = 'Disconnected';
|
||||
loraDetail.textContent = 'No device found';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateTimeSync(serverTimeString, requestStart, requestEnd) {
|
||||
if (serverTimeString && requestStart && requestEnd) {
|
||||
// Calculate network latency (round-trip time / 2)
|
||||
const networkLatency = (requestEnd - requestStart) / 2;
|
||||
|
||||
// Parse server time and adjust for network latency
|
||||
const serverTime = new Date(serverTimeString);
|
||||
const adjustedServerTime = new Date(serverTime.getTime() + networkLatency);
|
||||
|
||||
// Calculate the offset between adjusted server time and client time
|
||||
const clientTime = new Date();
|
||||
this.serverTimeOffset = adjustedServerTime.getTime() - clientTime.getTime();
|
||||
this.isTimeServerSynced = true;
|
||||
|
||||
console.log(`Time synchronized with server (latency: ${networkLatency.toFixed(1)}ms, offset: ${this.serverTimeOffset.toFixed(1)}ms)`);
|
||||
}
|
||||
|
||||
// Update time displays
|
||||
this.updateCurrentTime();
|
||||
}
|
||||
|
||||
updateCurrentTime() {
|
||||
const now = new Date();
|
||||
let displayTime;
|
||||
|
||||
if (this.isTimeServerSynced && this.serverTimeOffset !== null) {
|
||||
// Use server-synchronized time
|
||||
displayTime = new Date(now.getTime() + this.serverTimeOffset);
|
||||
} else {
|
||||
// Use client time (default)
|
||||
displayTime = now;
|
||||
}
|
||||
|
||||
this.updateTimeDisplay('local', displayTime, false);
|
||||
this.updateTimeDisplay('zulu', displayTime, true);
|
||||
}
|
||||
|
||||
updateTimeDisplay(type, date, isUtc) {
|
||||
const timeElement = document.getElementById(`${type}-time`);
|
||||
const dateElement = document.getElementById(`${type}-date`);
|
||||
|
||||
if (timeElement && dateElement) {
|
||||
const displayDate = isUtc ? new Date(date.getTime()) : date;
|
||||
|
||||
const timeStr = isUtc ?
|
||||
displayDate.toUTCString().split(' ')[4] :
|
||||
displayDate.toLocaleTimeString();
|
||||
|
||||
const dateStr = isUtc ?
|
||||
displayDate.toUTCString().split(' ').slice(0, 4).join(' ') :
|
||||
displayDate.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
timeElement.textContent = timeStr;
|
||||
dateElement.textContent = dateStr;
|
||||
|
||||
// Color time orange when using client time, white when server-synced
|
||||
if (this.isTimeServerSynced) {
|
||||
timeElement.style.color = '#fff';
|
||||
dateElement.style.color = '#64748b';
|
||||
} else {
|
||||
timeElement.style.color = '#f59e0b';
|
||||
dateElement.style.color = '#f59e0b';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showOfflineStatus() {
|
||||
// Reset to client time and show orange color
|
||||
this.serverTimeOffset = null;
|
||||
this.isTimeServerSynced = false;
|
||||
console.warn('System appears offline - falling back to client time');
|
||||
}
|
||||
|
||||
startStatusUpdates() {
|
||||
// Initial fetch
|
||||
this.fetchStatus();
|
||||
|
||||
// Update every 60 seconds
|
||||
setInterval(() => {
|
||||
this.fetchStatus();
|
||||
}, 60000);
|
||||
}
|
||||
|
||||
startTimeUpdates() {
|
||||
// Start immediately with client time
|
||||
this.updateCurrentTime();
|
||||
|
||||
// Update time every second
|
||||
setInterval(() => {
|
||||
this.updateCurrentTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
initializeEventListeners() {
|
||||
// Expand/collapse status
|
||||
const expandToggle = document.getElementById('expand-toggle');
|
||||
const expandedStatus = document.getElementById('expanded-status');
|
||||
const expandIcon = document.getElementById('expand-icon');
|
||||
|
||||
if (expandToggle && expandedStatus && expandIcon) {
|
||||
expandToggle.addEventListener('click', () => {
|
||||
expandedStatus.classList.toggle('visible');
|
||||
expandIcon.classList.toggle('expanded');
|
||||
});
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const appsGrid = document.getElementById('apps-grid');
|
||||
|
||||
if (searchInput && appsGrid) {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value.toLowerCase();
|
||||
const apps = appsGrid.querySelectorAll('.app-item');
|
||||
|
||||
apps.forEach(app => {
|
||||
const name = app.getAttribute('data-name')?.toLowerCase() || '';
|
||||
app.style.display = name.includes(query) ? 'flex' : 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openKiwixm(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
window.location.href = window.location.origin.replace(/:\d+/g, '') + ':1300/admin';
|
||||
}
|
||||
|
||||
// Initialize dashboard when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new Dashboard();
|
||||
|
||||
document.querySelectorAll('.app-item[href^=":"]').forEach(link => {
|
||||
const port = link.getAttribute('href').substring(1); // Remove the ':'
|
||||
const url = new URL(location.origin);
|
||||
url.port = port;
|
||||
link.href = url.toString();
|
||||
});
|
||||
});
|
||||
19
code/public/manifest.json
Executable file
19
code/public/manifest.json
Executable file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "MRS",
|
||||
"short_name": "MRS",
|
||||
"description": "Multipurpose Radio Server",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#000000",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/favicon.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"lang": "en-US",
|
||||
"scope": "/"
|
||||
}
|
||||
0
code/src/config.json
Normal file
0
code/src/config.json
Normal file
51
code/src/main.mjs
Executable file
51
code/src/main.mjs
Executable file
@@ -0,0 +1,51 @@
|
||||
|
||||
import express from "express";
|
||||
import { join } from 'path';
|
||||
import {environment} from './services/environment.mjs';
|
||||
import { statusRouter } from './services/status.mjs';
|
||||
|
||||
(async () => {
|
||||
const app = express();
|
||||
|
||||
// Middleware
|
||||
app.use(express.json());
|
||||
app.use((err, req, res, next) => {
|
||||
console.error('Middleware error:', err);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
});
|
||||
|
||||
// Routes
|
||||
console.log(join(environment.root, '../public'));
|
||||
app.use(express.static(join(environment.root, '../public')));
|
||||
|
||||
app.use('/api', statusRouter);
|
||||
|
||||
// Error handler
|
||||
app.use((err, req, res, next) => {
|
||||
console.error('Unhandled error:', err);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
});
|
||||
|
||||
// Startup
|
||||
const server = app.listen(environment.port, () => {
|
||||
console.log(`Dashboard running on http://localhost:${environment.port}`);
|
||||
}).on('error', (err) => {
|
||||
console.error('Server startup error:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
// Shutdown
|
||||
const gracefulShutdown = (signal) => {
|
||||
console.log(`Received ${signal}, shutting down gracefully`);
|
||||
server.close((err) => {
|
||||
if (err) {
|
||||
console.error('Error during server shutdown:', err);
|
||||
process.exit(1);
|
||||
}
|
||||
console.log('Server closed');
|
||||
process.exit(0);
|
||||
});
|
||||
};
|
||||
process.on('SIGTERM', () => gracefulShutdown('SIGTERM'));
|
||||
process.on('SIGINT', () => gracefulShutdown('SIGINT'));
|
||||
})();
|
||||
38
code/src/services/environment.mjs
Executable file
38
code/src/services/environment.mjs
Executable file
@@ -0,0 +1,38 @@
|
||||
import dotenv from 'dotenv';
|
||||
import * as fs from 'node:fs';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname } from 'path';
|
||||
import { execSync } from "child_process";
|
||||
|
||||
dotenv.config();
|
||||
|
||||
export const environment = {
|
||||
config: process.env.CONFIG || 'config.json',
|
||||
hostname: process.env.HOSTNAME || execSync('hostname', { encoding: "utf-8" }) || 'localhost',
|
||||
gpsd: process.env.GPSD || 2947,
|
||||
port: process.env.PORT || 80,
|
||||
root: dirname(dirname(fileURLToPath(import.meta.url))),
|
||||
settings: {},
|
||||
}
|
||||
|
||||
if(!environment.config.startsWith('/')) environment.config = `${environment.root}/${environment.config}`;
|
||||
|
||||
export function loadSettings() {
|
||||
if(!fs.existsSync(environment.config)) fs.writeFileSync(environment.config, '', { flag: 'a' });
|
||||
const value = fs.readFileSync(environment.config, 'utf-8');
|
||||
try { return JSON.parse(value); }
|
||||
catch (e) {
|
||||
return {
|
||||
lora: {
|
||||
mode: 'MESH',
|
||||
telemetry: true,
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function saveSettings() {
|
||||
fs.writeFileSync(environment.config, JSON.stringify(environment.settings, null, 4));
|
||||
}
|
||||
|
||||
loadSettings();
|
||||
426
code/src/services/status.mjs
Executable file
426
code/src/services/status.mjs
Executable file
@@ -0,0 +1,426 @@
|
||||
|
||||
import express from 'express';
|
||||
import { exec } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import { readFileSync, existsSync } from 'fs';
|
||||
import pkg from 'node-gpsd';
|
||||
const { GPS } = pkg;
|
||||
import {environment} from './environment.mjs';
|
||||
|
||||
const router = express.Router();
|
||||
const execAsync = promisify(exec);
|
||||
|
||||
// Status cache with TTL
|
||||
let statusCache = null;
|
||||
let lastUpdate = 0;
|
||||
const CACHE_TTL = 15 * 1000; // 15 seconds
|
||||
|
||||
// GPS client setup
|
||||
let gpsClient = null;
|
||||
let gpsData = {
|
||||
fix: 'No Fix',
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
altitude: null,
|
||||
satellites: 0
|
||||
};
|
||||
|
||||
// Initialize GPS connection
|
||||
async function initGPS() {
|
||||
try {
|
||||
gpsClient = new GPS({ hostname: 'localhost', port: 2947 });
|
||||
|
||||
gpsClient.on('TPV', (data) => {
|
||||
gpsData.latitude = data.lat || null;
|
||||
gpsData.longitude = data.lon || null;
|
||||
gpsData.altitude = data.alt || null;
|
||||
gpsData.fix = data.mode === 3 ? '3D Fix' : data.mode === 2 ? '2D Fix' : 'No Fix';
|
||||
});
|
||||
|
||||
gpsClient.on('SKY', (data) => {
|
||||
gpsData.satellites = (data.satellites || []).length;
|
||||
});
|
||||
|
||||
gpsClient.on('error', (err) => {
|
||||
console.warn('GPS error:', err.message);
|
||||
});
|
||||
|
||||
await gpsClient.watch();
|
||||
console.log('GPS client initialized');
|
||||
} catch (error) {
|
||||
console.warn('GPS not available:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// CLI-based system information gathering
|
||||
async function getSystemInfo() {
|
||||
const info = {
|
||||
temperature: 0,
|
||||
load: 0,
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
storage: 0
|
||||
};
|
||||
|
||||
try {
|
||||
// CPU temperature (Raspberry Pi specific)
|
||||
if (existsSync('/sys/class/thermal/thermal_zone0/temp')) {
|
||||
const tempData = readFileSync('/sys/class/thermal/thermal_zone0/temp', 'utf8');
|
||||
info.temperature = Math.round(parseInt(tempData.trim()) / 1000);
|
||||
}
|
||||
|
||||
// Load average
|
||||
const { stdout: loadAvg } = await execAsync("cat /proc/loadavg | awk '{print $1}'");
|
||||
info.load = parseFloat(loadAvg.trim()) || 0;
|
||||
|
||||
// CPU usage
|
||||
const { stdout: cpuUsage } = await execAsync("grep 'cpu ' /proc/stat | awk '{usage=($2+$4)*100/($2+$3+$4+$5)} END {print usage}'");
|
||||
info.cpu = parseFloat(cpuUsage.trim()) || 0;
|
||||
|
||||
// Memory usage percentage
|
||||
const { stdout: memUsage } = await execAsync("free | awk 'NR==2{printf \"%.1f\", $3*100/$2}'");
|
||||
info.memory = parseFloat(memUsage.trim()) || 0;
|
||||
|
||||
// Disk usage percentage for root filesystem
|
||||
const { stdout: diskUsage } = await execAsync("df / | awk 'NR==2{printf \"%.1f\", $5}' | sed 's/%//'");
|
||||
info.storage = parseFloat(diskUsage.trim()) || 0;
|
||||
|
||||
} catch (error) {
|
||||
console.warn('System info error:', error.message);
|
||||
}
|
||||
|
||||
return info;
|
||||
}
|
||||
|
||||
async function getGPSInfo() {
|
||||
const gpsInfo = {
|
||||
satellites: 0,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
altitude: null
|
||||
};
|
||||
|
||||
try {
|
||||
// Check if gpsd is running
|
||||
await execAsync('systemctl is-active gpsd');
|
||||
|
||||
// Try to get GPS data using gpspipe
|
||||
const { stdout: gpsRaw } = await execAsync('timeout 3s gpspipe -w -n 5 | grep -E \'"class":"TPV"\' | head -1', { timeout: 4000 });
|
||||
|
||||
if (gpsRaw.trim()) {
|
||||
const gpsJson = JSON.parse(gpsRaw.trim());
|
||||
gpsInfo.latitude = gpsJson.lat || null;
|
||||
gpsInfo.longitude = gpsJson.lon || null;
|
||||
gpsInfo.altitude = gpsJson.alt || null;
|
||||
}
|
||||
|
||||
// Get satellite count
|
||||
try {
|
||||
const { stdout: skyRaw } = await execAsync('timeout 2s gpspipe -w -n 3 | grep -E \'"class":"SKY"\' | head -1', { timeout: 3000 });
|
||||
if (skyRaw.trim()) {
|
||||
const skyJson = JSON.parse(skyRaw.trim());
|
||||
gpsInfo.satellites = (skyJson.satellites || []).length;
|
||||
}
|
||||
} catch (skyError) { }
|
||||
} catch (error) {
|
||||
console.warn('GPS info error:', error.message);
|
||||
// Use cached GPS data from node-gpsd if available
|
||||
if (gpsData.latitude !== null) {
|
||||
return gpsData;
|
||||
}
|
||||
}
|
||||
|
||||
return gpsInfo;
|
||||
}
|
||||
|
||||
async function getNetworkInfo() {
|
||||
const networkInfo = {
|
||||
wifi: {
|
||||
mode: 'client',
|
||||
ssid: 'Unknown'
|
||||
},
|
||||
ethernet: {
|
||||
connected: false
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
// Check if hostapd is running (AP mode)
|
||||
try {
|
||||
await execAsync('systemctl is-active hostapd');
|
||||
networkInfo.wifi.mode = 'ap';
|
||||
|
||||
// Get AP SSID from hostapd config or use hostname
|
||||
try {
|
||||
const { stdout: hostname } = await execAsync('hostname');
|
||||
networkInfo.wifi.ssid = process.env.AP_SSID || hostname.trim();
|
||||
} catch {
|
||||
networkInfo.wifi.ssid = 'MRS-AP';
|
||||
}
|
||||
} catch {
|
||||
// Not in AP mode, check if connected to WiFi
|
||||
try {
|
||||
// First, try iwconfig directly since it's more reliable for ESSID
|
||||
const { stdout: iwconfig } = await execAsync("iwconfig wlan0 2>/dev/null");
|
||||
const essidMatch = iwconfig.match(/ESSID:"([^"]+)"/);
|
||||
|
||||
if (essidMatch && essidMatch[1] && essidMatch[1] !== 'off/any') {
|
||||
networkInfo.wifi.mode = 'client';
|
||||
networkInfo.wifi.ssid = essidMatch[1];
|
||||
} else {
|
||||
// Fallback to nmcli if iwconfig doesn't work
|
||||
try {
|
||||
const { stdout: activeWifi } = await execAsync("nmcli -t -f NAME,TYPE,DEVICE connection show --active | grep -E '(wifi|802-11-wireless)' | cut -d':' -f1 | head -1");
|
||||
if (activeWifi.trim()) {
|
||||
networkInfo.wifi.mode = 'client';
|
||||
networkInfo.wifi.ssid = activeWifi.trim();
|
||||
} else {
|
||||
// Try getting SSID from currently connected interface
|
||||
const { stdout: connectedSSID } = await execAsync("nmcli -t -f active,ssid dev wifi | grep '^yes' | cut -d':' -f2 | head -1");
|
||||
if (connectedSSID.trim()) {
|
||||
networkInfo.wifi.mode = 'client';
|
||||
networkInfo.wifi.ssid = connectedSSID.trim();
|
||||
} else {
|
||||
throw new Error('No active WiFi connection found');
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Final fallback: check if wlan0 interface is up and get info via ip
|
||||
const { stdout: wlanStatus } = await execAsync("ip addr show wlan0 2>/dev/null | grep 'inet ' | wc -l");
|
||||
if (parseInt(wlanStatus.trim()) > 0) {
|
||||
// Interface has IP but we can't determine SSID
|
||||
networkInfo.wifi.mode = 'client';
|
||||
networkInfo.wifi.ssid = 'Connected (Unknown SSID)';
|
||||
} else {
|
||||
networkInfo.wifi.mode = 'disconnected';
|
||||
networkInfo.wifi.ssid = 'Not Connected';
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('WiFi detection error:', error.message);
|
||||
networkInfo.wifi.mode = 'disconnected';
|
||||
networkInfo.wifi.ssid = 'Not Connected';
|
||||
}
|
||||
}
|
||||
|
||||
// Check Ethernet status
|
||||
try {
|
||||
const { stdout: ethStatus } = await execAsync("ip link show eth0 | grep 'state UP'");
|
||||
networkInfo.ethernet.connected = ethStatus.includes('state UP');
|
||||
} catch {
|
||||
networkInfo.ethernet.connected = false;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.warn('Network info error:', error.message);
|
||||
}
|
||||
|
||||
return networkInfo;
|
||||
}
|
||||
|
||||
let loraInfo = null;
|
||||
async function getLoRaInfo() {
|
||||
if(loraInfo) return loraInfo;
|
||||
|
||||
loraInfo = {
|
||||
connected: false,
|
||||
onlineNodes: 0,
|
||||
totalNodes: 0,
|
||||
channelUtilization: 0,
|
||||
airtimeUtilization: 0
|
||||
};
|
||||
|
||||
try {
|
||||
console.log('Getting LoRa/Meshtastic status...');
|
||||
|
||||
// Get node information first
|
||||
const { stdout: nodeList } = await execAsync('timeout 10s meshtastic --nodes 2>/dev/null', { timeout: 15000 });
|
||||
|
||||
if (nodeList && nodeList.trim()) {
|
||||
loraInfo.connected = true;
|
||||
|
||||
// Parse node list - look for actual node entries
|
||||
const lines = nodeList.split('\n');
|
||||
let totalNodes = 0;
|
||||
let onlineNodes = 0;
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmedLine = line.trim();
|
||||
|
||||
// Skip header lines and separators
|
||||
if (trimmedLine.includes('│') &&
|
||||
!trimmedLine.includes('User') &&
|
||||
!trimmedLine.includes('───') &&
|
||||
!trimmedLine.includes('Node') &&
|
||||
trimmedLine.length > 10) {
|
||||
|
||||
totalNodes++;
|
||||
|
||||
// Check if node is online (has recent lastHeard or SNR data)
|
||||
if (trimmedLine.includes('SNR') ||
|
||||
trimmedLine.match(/\d+[smh]/) || // Time indicators like 5m, 2h, 30s
|
||||
trimmedLine.includes('now')) {
|
||||
onlineNodes++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loraInfo.totalNodes = totalNodes;
|
||||
loraInfo.onlineNodes = onlineNodes;
|
||||
}
|
||||
|
||||
// Get channel and airtime utilization from --info
|
||||
try {
|
||||
const { stdout: meshInfo } = await execAsync('timeout 10s meshtastic --info 2>/dev/null', { timeout: 15000 });
|
||||
|
||||
if (meshInfo && meshInfo.trim()) {
|
||||
const lines = meshInfo.split('\n');
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmedLine = line.trim();
|
||||
|
||||
// Look for channel utilization (various formats)
|
||||
if (trimmedLine.includes('channelUtilization') || trimmedLine.includes('Channel utilization')) {
|
||||
const channelMatch = trimmedLine.match(/([\d.]+)%?/) || trimmedLine.match(/:\s*([\d.]+)/);
|
||||
if (channelMatch) {
|
||||
loraInfo.channelUtilization = parseFloat(channelMatch[1]);
|
||||
}
|
||||
}
|
||||
|
||||
// Look for airtime utilization (various formats)
|
||||
if (trimmedLine.includes('airUtilTx') || trimmedLine.includes('Air time') || trimmedLine.includes('Airtime')) {
|
||||
const airtimeMatch = trimmedLine.match(/([\d.]+)%?/) || trimmedLine.match(/:\s*([\d.]+)/);
|
||||
if (airtimeMatch) {
|
||||
loraInfo.airtimeUtilization = parseFloat(airtimeMatch[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (infoError) {
|
||||
console.warn('Failed to get mesh info:', infoError.message);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.warn('LoRa info error:', error.message);
|
||||
loraInfo.connected = false;
|
||||
}
|
||||
|
||||
setTimeout(() => loraInfo = null, 60000)
|
||||
return loraInfo;
|
||||
}
|
||||
|
||||
// Main status generation function - matches frontend expectations
|
||||
async function generateStatus() {
|
||||
try {
|
||||
console.log('Generating fresh status...');
|
||||
|
||||
const [systemInfo, gpsInfo, networkInfo, loraInfo] = await Promise.all([
|
||||
getSystemInfo(),
|
||||
getGPSInfo(),
|
||||
getNetworkInfo(),
|
||||
getLoRaInfo()
|
||||
]);
|
||||
|
||||
// Format exactly as the frontend expects
|
||||
const status = {
|
||||
system: {
|
||||
temperature: systemInfo.temperature,
|
||||
load: systemInfo.load,
|
||||
cpu: systemInfo.cpu,
|
||||
memory: systemInfo.memory,
|
||||
storage: systemInfo.storage
|
||||
},
|
||||
gps: {
|
||||
fix: gpsInfo.fix,
|
||||
satellites: gpsInfo.satellites,
|
||||
latitude: gpsInfo.latitude,
|
||||
longitude: gpsInfo.longitude,
|
||||
altitude: gpsInfo.altitude
|
||||
},
|
||||
network: {
|
||||
wifi: networkInfo.wifi,
|
||||
ethernet: networkInfo.ethernet
|
||||
},
|
||||
lora: loraInfo,
|
||||
time: new Date().toISOString()
|
||||
};
|
||||
|
||||
return status;
|
||||
} catch (error) {
|
||||
console.error('Status generation error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
router.get('/hostname', (req, res) => res.json({ hostname: environment.hostname }));
|
||||
|
||||
// Main status endpoint that matches frontend expectations
|
||||
router.get('/status', async (req, res) => {
|
||||
try {
|
||||
const now = Date.now();
|
||||
|
||||
// Return cached status if within TTL
|
||||
if (statusCache && (now - lastUpdate) < CACHE_TTL) {
|
||||
console.log('Returning cached status');
|
||||
return res.json(statusCache);
|
||||
}
|
||||
|
||||
// Generate fresh status
|
||||
statusCache = await generateStatus();
|
||||
lastUpdate = now;
|
||||
|
||||
console.log('Status updated successfully');
|
||||
res.json(statusCache);
|
||||
} catch (error) {
|
||||
console.error('Status API error:', error);
|
||||
res.status(500).json({
|
||||
error: 'Failed to get system status',
|
||||
message: error.message,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Individual debug endpoints
|
||||
router.get('/system', async (req, res) => {
|
||||
try {
|
||||
const systemInfo = await getSystemInfo();
|
||||
res.json(systemInfo);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/gps', async (req, res) => {
|
||||
try {
|
||||
const gpsInfo = await getGPSInfo();
|
||||
res.json(gpsInfo);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/network', async (req, res) => {
|
||||
try {
|
||||
const networkInfo = await getNetworkInfo();
|
||||
res.json(networkInfo);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Add individual LoRa endpoint
|
||||
router.get('/lora', async (req, res) => {
|
||||
try {
|
||||
const loraInfo = await getLoRaInfo();
|
||||
res.json(loraInfo);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize GPS on startup
|
||||
initGPS().catch(err => console.warn('GPS initialization failed:', err.message));
|
||||
|
||||
export { router as statusRouter };
|
||||
Reference in New Issue
Block a user