init
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
.idea
|
||||
node_modules
|
||||
21
LICENSE
Executable file
21
LICENSE
Executable file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 Zakary Timson
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
83
README.md
Executable file
83
README.md
Executable file
@@ -0,0 +1,83 @@
|
||||
# Multipurpose Radio Server (MRS)
|
||||
|
||||
---
|
||||
|
||||
###### By: Zakary Timson
|
||||
###### Date: September 16, 2025
|
||||
###### Version: 1.0
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
> Compact communication and information exchange server on Raspberry Pi for service-denied areas.
|
||||
> Ideal for disasters, unserviced environments, long-range tracking, and offline-first operations.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
- [Multipurpose Radio Server](#multipurpose-radio-server-mrs)
|
||||
- [Description](#description)
|
||||
- [Inspiration](#inspiration)
|
||||
- [Capabilities](#capabilities)
|
||||
- [Manual](#manual)
|
||||
- [Setup](docs/setup.md)
|
||||
- [Introduction](#introduction) <!-- Home + Settings page -->
|
||||
- [Connecting & Wifi](#connecting)
|
||||
- [Mesh Network](#mesh-network)
|
||||
- [LoRa Radio](#lora-radio)
|
||||
- [FileBrowser](#filebrowser)
|
||||
- [Desktop Environment](#desktop-environment)
|
||||
- Services
|
||||
- [AI Assistant](#ai-assistant)
|
||||
- [Archive](#archive)
|
||||
- [ATAK](#atak)
|
||||
- [Maps](docs/maps.md)
|
||||
- [Messaging](#messaging)
|
||||
- [Pentesting](#pentesting)
|
||||
- [SDR](#sdr)
|
||||
- [SSH](#ssh)
|
||||
- [VPN](#vpn)
|
||||
- [Todo](#todo)
|
||||
- [License](LICENSE)
|
||||
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
### Inspiration
|
||||
- [A.C.I.D](https://www.youtube.com/watch?v=nSrYmkGq9TM)
|
||||
- [Offline internet](https://www.youtube.com/watch?v=L5RJZmuRJKA)
|
||||
- [Meshtastic radios](https://morosx.com/ols/products/xtak-lora-mesh)
|
||||
- [HaLow mesh network](https://www.youtube.com/watch?v=ofR7GFNZzJY)
|
||||
- [Signal Intelligence](https://www.youtube.com/watch?v=Nam87B2u6bo&t=1942s)
|
||||
|
||||
### Capabilities
|
||||
|
||||
**Networking**
|
||||
- 900 MHz **HaLow** / 2.4 GHz / 5 GHz Mesh WiFi using **B.A.T.M.A.N.** (1 km +)
|
||||
- LoRa radio communication (1-100s of kms)
|
||||
- Connect to AP with QR code using **dnsmasq, hostapd**
|
||||
- Captive portal & device home page + settings page
|
||||
|
||||
**Communication**
|
||||
- Offline & federated text/voice/file chat using **Synapse** and **Element**
|
||||
- Built-in LoRa **Meshtastic** node (≈2–15 km)
|
||||
- GPS positioning & offline maps using **gpsd, chrony**
|
||||
- Track people & logistics with **ATAK**
|
||||
|
||||
**Information Archive**
|
||||
- Offline AI/LLM assistant using **Ollama** and **OpenWebUI**
|
||||
- Offline Wikipedia, Ghetesburg project & more using **Kiwix**
|
||||
- File sharing & syncing using **FileBrowser** and **Rclone**
|
||||
- Remote desktop usig **RDP** and **Apache Guacamole**
|
||||
|
||||
**Recon & Security**
|
||||
- WiFi & Bluetooth reconnaissance with **Bettercap, nmap, masscan** and more
|
||||
- Red team operations with **aircrack, nikto, Metasploit** and more
|
||||
- Radio frequency recon using **SDRAngel**
|
||||
- ADS-B plane tracking with **tar1090**
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [MIT License](LICENSE).
|
||||
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 };
|
||||
0
docs/library.md
Executable file
0
docs/library.md
Executable file
114
docs/maps.md
Executable file
114
docs/maps.md
Executable file
@@ -0,0 +1,114 @@
|
||||
# Maps
|
||||
|
||||
MRS comes with a self-hosted tile server to provide offline maps using [TileServer GL](https://github.com/maptiler/tileserver-gl).
|
||||
|
||||
While everything comes pre-configured this guide will walkthrough the setup + integration.
|
||||
|
||||
## Table of Contents
|
||||
- [MRS](../README.md)
|
||||
- [Maps](#maps)
|
||||
- [Usage]()
|
||||
- [Adding Maps]()
|
||||
- [Adding Contours]()
|
||||
|
||||
## Usage
|
||||
|
||||
The TileServer can be viewed at http://localhost:5000
|
||||
|
||||
Other applications can use the tileserver by configure the application to use:
|
||||
- **Raster**: http://localhost:8080/data/{id}/{z}/{x}/{y}.png
|
||||
- **Vector**: http://localhost:8080/data/{id}/{z}/{x}/{y}.pbf
|
||||
|
||||
|
||||
### Commands
|
||||
- **Setup:** `docker run -d --name maps --restart unless-stopped -p 5000:8080 -v /media/maps/tiles:/data -v /media/maps/styles:/styles maptiler/tileserver-gl:v4.11.0`
|
||||
- **Restart:** `docker restart maps`
|
||||
- **Start:** `docker start maps`
|
||||
- **Stop:** `docker stop maps`
|
||||
|
||||
## Adding Maps / Styles
|
||||
|
||||
TileServer GL works with both vector & raster map tiles.
|
||||
1. [Download](https://www.maptiler.com/on-prem-datasets/planet/) map tiles
|
||||
2. Upload tiles file to `/media/maps/tiles`
|
||||
3. Upload styles to `/media/maps/styles`
|
||||
4. Reboot TileServer GL: `docker restart maps`
|
||||
|
||||
## Adding Contours
|
||||
|
||||
All topographic maps I have found cost thousands of dollars. With that in mind, these instructions will compile our own topographic layer we can add to any tileset.
|
||||
|
||||
### 1. 📁 Download Topographic Data
|
||||
|
||||
Topography data sets can be downloaded from [OpenTopography](https://portal.opentopography.org/dataCatalog).
|
||||
|
||||
Follow the instructions to sign up & download **GEBCO Global Bathymetry and Topography**
|
||||
|
||||
### 2. 📦 Tooling Setup
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install -y gdal-bin build-essential sqlite3 libsqlite3-dev git wget unzip docker.io zlib1g-dev
|
||||
git clone https://github.com/mapbox/tippecanoe.git
|
||||
cd tippecanoe
|
||||
make -j$(nproc)
|
||||
sudo make install
|
||||
cd ..
|
||||
```
|
||||
|
||||
### 3. 🌄 Generate Global 50 m Contours
|
||||
|
||||
> This step is heavy, dont run on Pi — expect 60–90 GB raw GeoJSON before being compressed to ~2-4 GB
|
||||
|
||||
```bash
|
||||
gdal_contour -f GeoJSONSeq
|
||||
-a ele \ # elevation attribute
|
||||
-i 50 \ # interval (50 m)
|
||||
GEBCOIceTopo.vrt global_50.geojsonl
|
||||
|
||||
tippecanoe -o contours_50m.mbtiles \
|
||||
-Z0 -z12 \ # min/max zoom levels
|
||||
--drop-densest-as-needed \ # keep tiles small
|
||||
--extend-zooms-if-still-dropping \ # avoid data loss
|
||||
--layer=contour \ # layer name
|
||||
--read-parallel --reorder \ # faster + optimized
|
||||
global_50.geojsonl
|
||||
```
|
||||
|
||||
### 4. 🎨 Add contours to style
|
||||
|
||||
Create / Modify a style.json
|
||||
```json
|
||||
{
|
||||
"version": 8,
|
||||
"name": "Terrain",
|
||||
"sources": {
|
||||
...
|
||||
"contours": {
|
||||
"type": "vector",
|
||||
"url": "mbtiles://contours_50m.mbtiles"
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
...
|
||||
{
|
||||
"id": "contours-major",
|
||||
"type": "line",
|
||||
"source": "contours",
|
||||
"source-layer": "contour",
|
||||
"minzoom": 0,
|
||||
"maxzoom": 6,
|
||||
"filter": [">=", "ele", 1000],
|
||||
"paint": { "line-color": "#888", "line-width": 0.4 }
|
||||
},
|
||||
{
|
||||
"id": "contours-detailed",
|
||||
"type": "line",
|
||||
"source": "contours",
|
||||
"source-layer": "contour",
|
||||
"minzoom": 7,
|
||||
"paint": { "line-color": "#666", "line-width": 0.3 }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
76
docs/setup.md
Executable file
76
docs/setup.md
Executable file
@@ -0,0 +1,76 @@
|
||||
# Setup
|
||||
|
||||
### Hardware
|
||||
- Raspberry Pi 5
|
||||
- 4 GB - No AI
|
||||
- 8 GB - Small AI
|
||||
- 16GB - Medium AI
|
||||
- SD card (recommended 500 GB - 1 TB)
|
||||
- Gutenberg Project (~80 GB)
|
||||
- Khan Academy (~180 GB)
|
||||
- Satellite Maps (150-300 GB)
|
||||
- Vector Maps (60 - 100 GB)
|
||||
- Wikipedia (~120 GB)
|
||||
- [Duel M.2 NVMe hat](https://www.amazon.ca/dp/B0D83784HS?ref=ppx_yo2ov_dt_b_fed_asin_title)
|
||||
- [M.2 A+E key to M key adapter](https://www.amazon.ca/dp/B0CP7F55S8?ref=ppx_yo2ov_dt_b_fed_asin_title)
|
||||
- [Intel AX210 WiFi modem](https://www.amazon.ca/dp/B0B39631G1?ref=ppx_yo2ov_dt_b_fed_asin_title)
|
||||
- [M.2 HaLow modem](https://www.seeedstudio.com/Wio-WM6180-Wi-Fi-HaLow-mini-PCIe-Module-p-6394.html?srsltid=AfmBOopb8Phtr-IBBvYRn5AB5NQNuGIK2tC3we4ceaA_0QiX1JD78-Qs)
|
||||
- BE-180 GPS Module or [BE-220 GPS Module](https://www.amazon.ca/Geekstory-Navigation-38400bps-Raspberry-Controller/dp/B0BV2MV2GN/ref=sr_1_16_sspa?crid=3N5GO07PGL65Y&dib=eyJ2IjoiMSJ9.Co3Uo8H4Xww9Sh693R4fJJokreDApWile1X8epOqTfZqvQbix_mZr566DdLs_cTuWwurRGQZHlt2nFhdAiW4SZZ1HvsdLlBsqUWOEF7gav47G8Z6xFNT97E1jQLuc0j-PuSRGgMPd0gktZenNz4PkQ.Jma35qmqkNfqByw4Rdk4N7H0eM4CILfcf67G4gV2CD4&dib_tag=se&keywords=gms%2Buart&qid=1758982047&sprefix=gms%2Buart%2Caps%2C84&sr=8-16-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9idGY&th=1)
|
||||
- [Lora WisBlock Mini](https://www.amazon.ca/RAKwireless-WisBlock-Meshtastic-Starter-RAK19003/dp/B0DFMMTQZM/ref=sr_1_3?crid=QS5X4FYBC5H4&dib=eyJ2IjoiMSJ9.yzgzN2wMOGRfrwlfFeUwsCia4FERbPXPTBnq2WddC2An9Ni_Z2GAgGhquS96QFbSDzvlGu2X070zss9ggbEKGSLgrvRwvmF_mueX5aukwK_xB3S0VFJCsagWRIXdIIrX3k5cF0Seo_NoyuhmfD5wZkR9b0MInx5oRSrJ37Pd0BjERXpxZ3udlIJYf4mBgaGjNDrWc5rYu31deOGOdBfD54lbsrogePm4lb1nhz5Bs81wZTuCCDIm7V0QzO-2mq3Aj2_TLjY-F4F09C1zUm7_fYs9bGPEFmZ6N-syZFNoV6A.oUArviz-pLwgnF9wPrvf-MNKLIyQxwe0hy7uWhXqOVo&dib_tag=se&keywords=wisblock&qid=1758982932&s=electronics&sprefix=wisblock%2Celectronics%2C79&sr=1-3&th=1)
|
||||
- [E-ink display & momentary switch](https://www.amazon.ca/dp/B0D5DGZXG3?ref=ppx_yo2ov_dt_b_fed_asin_title)
|
||||
- Rotary Encoder
|
||||
- USB C 4-pin breakout + 22 AWG wire
|
||||
- 4x SMA connectors + pigtails 6"
|
||||
- *Optional: Power bank - Off grid power*
|
||||
- *Optional: Copper tape - Increases reception*
|
||||
- *Optional: [SDR](https://www.amazon.ca/dp/B0747LVW59/ref=sspa_dk_detail_1?psc=1&pd_rd_i=B0747LVW59&pd_rd_w=N68sx&content-id=amzn1.sym.516c2169-755e-413a-a38a-68230f4ab66f&pf_rd_p=516c2169-755e-413a-a38a-68230f4ab66f&pf_rd_r=Z9QJD2SRSYTG0HNFHKWP&pd_rd_wg=NBvG6&pd_rd_r=32aa78ce-63df-481d-bc40-f802b5dbd8f2&sp_csd=d2lkZ2V0TmFtZT1zcF9kZXRhaWw) - RF/ADS-B Monitoring*
|
||||
- *Optional: [Extra WiFi Dongle](https://www.amazon.ca/dp/B01GC8XH0S?ref=ppx_yo2ov_dt_b_fed_asin_title) - Wireless monitoring without sacrificing mesh or AP*
|
||||
- *Optional: [NRF24LU1 2.4GHz transceiver](https://www.amazon.ca/dp/B09GCLCWYL?ref=ppx_yo2ov_dt_b_fed_asin_title) - HID hacking*
|
||||
|
||||
|
||||
### Instructions
|
||||
1) Flash your wisblock with meshtastic: https://flasher.meshtastic.org/
|
||||
2) Flash SD card with Raspbian, ensure Hostname/User/Wifi/SSH is setup
|
||||
3) Configure OS/Kernal & reboot: `raspi-config`
|
||||
1) Update
|
||||
2) Interface Options > SSH > Enable
|
||||
3) Interface Options > VNC > Disable
|
||||
4) Interface Options > SPI > Enable
|
||||
5) Interface Options > Serial Port > Disable Login Shell > Enable Hardware
|
||||
6) Advanced > Wayland > X11
|
||||
7) Advanced > Expand Filesystem
|
||||
4) Run setup script: 'chmod +x setup.sh && ./setup.sh'
|
||||
5) Configure Guacamole
|
||||
1) Login: `guacadmin/guacadmin`
|
||||
2) guacadmin > settings
|
||||
3) Users > Create user & delete guacadmin
|
||||
4) Connections
|
||||
1) Desktop
|
||||
- Name: `Desktop`
|
||||
- Protocol: `RDP`
|
||||
- Network > Host: `127.0.0.1`
|
||||
- Network > Port: `3389`
|
||||
- Authentication > Security mode: `RDP Encryption`
|
||||
- Performance > Disable Graphics Pipeline Extension: `true`
|
||||
- *Optional: username / password*
|
||||
2) Terminal
|
||||
- Name: `Terminal`
|
||||
- Protocol: `SSH`
|
||||
- Network > Host: `127.0.0.1`
|
||||
- Network > Port: `22`
|
||||
- *Optional: username / password*
|
||||
6) Update filebrowser password
|
||||
7) Create open-webui admin account & allow registration
|
||||
8) Create element admin account
|
||||
9) Download [Kiwix](https://library.kiwix.com) zims
|
||||
|
||||
##
|
||||
|
||||
## TODO
|
||||
- Create a captive portal with onboarding, PWA, links to all tools
|
||||
- Create settings page for managing lora, mesh, wifi & AP
|
||||
- Create a proxy for the [kiwix library](https://library.kiwix.org) that downloads zim files straight to the archive
|
||||
- Also create a page for making custom zim files and uploading them straight to the archive
|
||||
```bash
|
||||
docker run --rm -it -v $(pwd)/output:/output openzim/zimit https://example.com mysite
|
||||
```
|
||||
17
maps/config.json
Executable file
17
maps/config.json
Executable file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"options": {
|
||||
"paths": {
|
||||
"root": "/data",
|
||||
"styles": "/styles"
|
||||
}
|
||||
},
|
||||
"styles": {
|
||||
"dark": { "style": "/styles/dark.json" },
|
||||
"light": { "style": "/styles/light.json" }
|
||||
},
|
||||
"data": {
|
||||
"contours": { "mbtiles": "/data/contours_50m.mbtiles" },
|
||||
"osm": { "mbtiles": "/data/osm.mbtiles" },
|
||||
"satellite": { "mbtiles": "/data/satellite-2017.mbtiles" }
|
||||
}
|
||||
}
|
||||
381
maps/dark.json
Executable file
381
maps/dark.json
Executable file
@@ -0,0 +1,381 @@
|
||||
{
|
||||
"version": 8,
|
||||
"name": "Dark Topographic",
|
||||
"sources": {
|
||||
"osm": {
|
||||
"type": "vector",
|
||||
"url": "mbtiles://osm"
|
||||
},
|
||||
"contours": {
|
||||
"type": "vector",
|
||||
"url": "mbtiles://contours"
|
||||
}
|
||||
},
|
||||
"glyphs": "/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
{
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": { "background-color": "rgb(12,12,12)" }
|
||||
},
|
||||
{
|
||||
"id": "water",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "water",
|
||||
"paint": { "fill-color": "rgb(27,27,29)" }
|
||||
},
|
||||
{
|
||||
"id": "residential",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landuse",
|
||||
"filter": ["==", "class", "residential"],
|
||||
"paint": { "fill-color": "hsl(0,2%,5%)", "fill-opacity": 0.4 }
|
||||
},
|
||||
{
|
||||
"id": "landcover-wood",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "wood"],
|
||||
"paint": { "fill-color": "rgb(170,170,170)", "fill-opacity": 0.075 }
|
||||
},
|
||||
{
|
||||
"id": "landcover-wetland",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "wetland"],
|
||||
"paint": { "fill-color": "rgb(150,150,150)", "fill-opacity": 0.075 }
|
||||
},
|
||||
{
|
||||
"id": "parks",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landuse",
|
||||
"filter": ["==", "class", "park"],
|
||||
"paint": {
|
||||
"fill-color": "rgb(0,180,0)",
|
||||
"fill-opacity": 0.075,
|
||||
"fill-outline-color": "rgb(0,120,0)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-small",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "residential", "service", "track", "path"],
|
||||
"minzoom": 5,
|
||||
"paint": {
|
||||
"line-color": "#1f1f1f",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
5, 0.15,
|
||||
7, 0.25,
|
||||
12, 0.6,
|
||||
16, 1
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
5, 0.1,
|
||||
7, 0.2,
|
||||
12, 0.6
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-local",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["==", "class", "minor"],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "#2a2a2a",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.15,
|
||||
8, 0.3,
|
||||
12, 0.8,
|
||||
16, 1.2
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.1,
|
||||
8, 0.3,
|
||||
12, 0.6
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-primary",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "primary", "secondary"],
|
||||
"minzoom": 7,
|
||||
"paint": {
|
||||
"line-color": "#333333",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
7, 0.3,
|
||||
12, 1.5,
|
||||
16, 3
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-motorway",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "motorway", "trunk"],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "#555555",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.5,
|
||||
10, 2,
|
||||
14, 5
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-country",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 2], ["!=", "maritime", 1]],
|
||||
"paint": {
|
||||
"line-color": "#888",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
0, 0.5,
|
||||
4, 1.5,
|
||||
6, 2
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
0, 0.3,
|
||||
3, 0.6,
|
||||
5, 0.8
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-state",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 4], ["!=", "maritime", 1]],
|
||||
"minzoom": 2,
|
||||
"paint": {
|
||||
"line-color": "#666",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
2, 0.5,
|
||||
5, 1,
|
||||
8, 2
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
2, 0,
|
||||
4, 0.5,
|
||||
6, 0.8
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-local",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 6], ["!=", "maritime", 1]],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "#444",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.5,
|
||||
10, 1.2
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0,
|
||||
8, 0.5,
|
||||
12, 0.8
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "buildings",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "building",
|
||||
"minzoom": 14,
|
||||
"paint": {
|
||||
"fill-color": "#222222",
|
||||
"fill-opacity": 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "places",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "place",
|
||||
"minzoom": 2,
|
||||
"layout": {
|
||||
"text-size": 12,
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name_en"], ["get", "name"]]
|
||||
},
|
||||
"filter": ["!=", "class", "continent"],
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "road-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation_name",
|
||||
"minzoom": 13,
|
||||
"layout": {
|
||||
"symbol-placement": "line",
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
13, 10,
|
||||
16, 14
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "poi-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "poi",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name_en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
14, 9,
|
||||
18, 13
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "airport-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "aeroway",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 12
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rail-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["==", "class", "rail"],
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"symbol-placement": "line",
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 11
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "natural-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "natural",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 11
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.4)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "house-numbers",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "housenumber",
|
||||
"minzoom": 15,
|
||||
"layout": {
|
||||
"text-field": "{housenumber}",
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
15, 10,
|
||||
29, 14
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(200,200,200,0.2)",
|
||||
"text-halo-color": "rgba(0,0,0,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "contours-line",
|
||||
"type": "line",
|
||||
"source": "contours",
|
||||
"source-layer": "contour",
|
||||
"minzoom": 10,
|
||||
"paint": {
|
||||
"line-color": "#555555",
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
10, 0.2,
|
||||
14, 0.6
|
||||
],
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
10, 0.5,
|
||||
14, 1.5
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"id": "dark-matter-slim"
|
||||
}
|
||||
368
maps/light.json
Executable file
368
maps/light.json
Executable file
@@ -0,0 +1,368 @@
|
||||
{
|
||||
"version": 8,
|
||||
"name": "Light Topographic",
|
||||
"sources": {
|
||||
"osm": {
|
||||
"type": "vector",
|
||||
"url": "mbtiles://osm"
|
||||
},
|
||||
"contours": {
|
||||
"type": "vector",
|
||||
"url": "mbtiles://contours"
|
||||
}
|
||||
},
|
||||
"glyphs": "/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
{
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": { "background-color": "hsl(47, 26%, 88%)" }
|
||||
},
|
||||
{
|
||||
"id": "water",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "water",
|
||||
"paint": { "fill-color": "hsl(205, 56%, 73%)" }
|
||||
},
|
||||
{
|
||||
"id": "residential",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landuse",
|
||||
"filter": ["==", "class", "residential"],
|
||||
"paint": { "fill-color": "hsl(47, 13%, 86%)", "fill-opacity": 0.7 }
|
||||
},
|
||||
{
|
||||
"id": "landcover-wood",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "wood"],
|
||||
"paint": {
|
||||
"fill-color": "hsl(82, 46%, 72%)",
|
||||
"fill-opacity": { "base": 1, "stops": [[8, 0.6], [22, 1]] }
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "landcover-wetland",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landcover",
|
||||
"filter": ["==", "class", "wetland"],
|
||||
"paint": { "fill-color": "hsl(82, 46%, 72%)", "fill-opacity": 0.45 }
|
||||
},
|
||||
{
|
||||
"id": "parks",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "landuse",
|
||||
"filter": ["==", "class", "park"],
|
||||
"paint": {
|
||||
"fill-color": "#E1EBB0",
|
||||
"fill-opacity": { "base": 1, "stops": [[5, 0], [9, 0.75]] }
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-small",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "residential", "service", "track", "path"],
|
||||
"minzoom": 5,
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 97%)",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
5, 0.15,
|
||||
7, 0.25,
|
||||
12, 0.6,
|
||||
16, 1
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
5, 0.1,
|
||||
7, 0.2,
|
||||
12, 0.6
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-local",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["==", "class", "minor"],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 97%)",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.15,
|
||||
8, 0.3,
|
||||
12, 0.8,
|
||||
16, 1.2
|
||||
],
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.1,
|
||||
8, 0.3,
|
||||
12, 0.6
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-primary",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "primary", "secondary"],
|
||||
"minzoom": 7,
|
||||
"paint": {
|
||||
"line-color": "#fff",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
7, 0.3,
|
||||
12, 1.5,
|
||||
16, 3
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads-motorway",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["in", "class", "motorway", "trunk"],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 100%)",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.5,
|
||||
10, 2,
|
||||
14, 5
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-country",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 2], ["!=", "maritime", 1]],
|
||||
"paint": {
|
||||
"line-color": "hsl(0, 0%, 60%)",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
0, 0.5,
|
||||
4, 1.5,
|
||||
6, 2
|
||||
],
|
||||
"line-opacity": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-state",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 4], ["!=", "maritime", 1]],
|
||||
"minzoom": 2,
|
||||
"paint": {
|
||||
"line-color": "hsla(0, 0%, 60%, 0.5)",
|
||||
"line-dasharray": [2, 1],
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
2, 0.5,
|
||||
5, 1,
|
||||
8, 2
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "boundary-local",
|
||||
"type": "line",
|
||||
"source": "osm",
|
||||
"source-layer": "boundary",
|
||||
"filter": ["all", ["==", "admin_level", 6], ["!=", "maritime", 1]],
|
||||
"minzoom": 6,
|
||||
"paint": {
|
||||
"line-color": "#bbbbbb",
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
6, 0.5,
|
||||
10, 1.2
|
||||
],
|
||||
"line-opacity": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "buildings",
|
||||
"type": "fill",
|
||||
"source": "osm",
|
||||
"source-layer": "building",
|
||||
"minzoom": 14,
|
||||
"paint": {
|
||||
"fill-color": "rgba(222, 211, 190, 1)",
|
||||
"fill-opacity": { "base": 1, "stops": [[13, 0], [15, 1]] }
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "places",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "place",
|
||||
"minzoom": 2,
|
||||
"filter": ["!=", "class", "continent"],
|
||||
"layout": {
|
||||
"text-size": 12,
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name_en"], ["get", "name"]]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "#444",
|
||||
"text-halo-color": "#ffffff",
|
||||
"text-halo-width": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "road-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation_name",
|
||||
"minzoom": 13,
|
||||
"layout": {
|
||||
"symbol-placement": "line",
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
13, 10,
|
||||
16, 14
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "#444",
|
||||
"text-halo-color": "#ffffff",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "poi-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "poi",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name_en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
14, 9,
|
||||
18, 13
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(100,100,100,0.6)",
|
||||
"text-halo-color": "rgba(255,255,255,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "airport-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "aeroway",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 12
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(100,100,100,0.6)",
|
||||
"text-halo-color": "rgba(255,255,255,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rail-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "transportation",
|
||||
"filter": ["==", "class", "rail"],
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"symbol-placement": "line",
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 11
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(100,100,100,0.6)",
|
||||
"text-halo-color": "rgba(255,255,255,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "natural-labels",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "natural",
|
||||
"minzoom": 14,
|
||||
"layout": {
|
||||
"text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": 11
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(100,100,100,0.6)",
|
||||
"text-halo-color": "rgba(255,255,255,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "house-numbers",
|
||||
"type": "symbol",
|
||||
"source": "osm",
|
||||
"source-layer": "housenumber",
|
||||
"minzoom": 15,
|
||||
"layout": {
|
||||
"text-field": "{housenumber}",
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"text-size": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
15, 10,
|
||||
29, 14
|
||||
]
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "rgba(100,100,100,0.5)",
|
||||
"text-halo-color": "rgba(255,255,255,0.6)",
|
||||
"text-halo-width": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "contours-line",
|
||||
"type": "line",
|
||||
"source": "contours",
|
||||
"source-layer": "contour",
|
||||
"minzoom": 10,
|
||||
"paint": {
|
||||
"line-color": "#999",
|
||||
"line-opacity": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
10, 0.2,
|
||||
14, 0.5
|
||||
],
|
||||
"line-width": [
|
||||
"interpolate", ["linear"], ["zoom"],
|
||||
10, 0.5,
|
||||
14, 1.2
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"id": "light-matter-basic"
|
||||
}
|
||||
BIN
public/favicon.png
Executable file
BIN
public/favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
939
public/index.html
Executable file
939
public/index.html
Executable file
@@ -0,0 +1,939 @@
|
||||
<!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;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
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;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.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;
|
||||
}
|
||||
|
||||
.network-status-wrapper {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</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</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="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=":1300" 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=":1400" 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=":1500" 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=":1600" 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=":1700" 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=":1800" 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>
|
||||
<div class="app-name">Remote Desktop</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">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-name">SDR</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">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</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
public/index.js
Executable file
368
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;
|
||||
} 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
public/manifest.json
Executable file
19
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": "/"
|
||||
}
|
||||
178
setup.sh
Executable file
178
setup.sh
Executable file
@@ -0,0 +1,178 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Check permissions
|
||||
if [ "$UID" != "0" ]; then
|
||||
echo "This script must be run as root / with sudo" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Get settings
|
||||
read -rsp "User Password: " pass; echo
|
||||
RID=$(cat /etc/radio_id)
|
||||
read -rp "Radio ID (${RID:-1-254}): " ip
|
||||
ip=${ip:-$RID}
|
||||
echo $ip > /etc/radio_id
|
||||
read -rp "Radio Name ($HOSTNAME): " name
|
||||
name=${name:-$HOSTNAME}
|
||||
read -rp "Mesh Name: " mesh_ssid
|
||||
read -rsp "Mesh Password: " mesh_pass; echo
|
||||
read -rsp "Hotspot Password: " ap_pass; echo
|
||||
read -p "Enable wireguard (Y/N): " wireguard
|
||||
if [ "${wireguard,,}" == "y" ]; then
|
||||
while [ ! -f "/etc/wireguard/wg0.conf" ]; do
|
||||
read -n 1 -s -p "Add '/etc/wireguard/wg0.conf' then press any key to continue..."
|
||||
done
|
||||
fi
|
||||
|
||||
# Install updates & packages
|
||||
export DEBIAN_FRONTEND=noninteractive
|
||||
apt update && apt upgrade -y && apt install -y \
|
||||
build-essential libpcap-dev libusb-1.0-0-dev libnetfilter-queue-dev \
|
||||
btop jq tmux unzip zip
|
||||
|
||||
# Update hostname
|
||||
hostnamectl set-hostname "${name}"
|
||||
sed -i "s/$HOSTNAME/$name" /etc/hostname
|
||||
sed -i "s/$HOSTNAME/$name" /etc/hosts
|
||||
|
||||
# Update banner
|
||||
cat <<EOF >> /etc/motd
|
||||
|
||||
██████ ██████ ███████████ █████████
|
||||
░░██████ ██████ ░░███░░░░░███ ███░░░░░███
|
||||
░███░█████░███ ░███ ░███ ░███ ░░░
|
||||
░███░░███ ░███ ░██████████ ░░█████████
|
||||
░███ ░░░ ░███ ░███░░░░░███ ░░░░░░░░███
|
||||
░███ ░███ ░███ ░███ ███ ░███
|
||||
█████ █████ █████ █████░░█████████
|
||||
░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░░░░░
|
||||
|
||||
EOF
|
||||
|
||||
# Setup wireguard
|
||||
if [ "${wireguard,,}" == "y" ]; then
|
||||
apt install wireguard -y
|
||||
systemctl enable wg-quick@wg0
|
||||
systemctl start wg-quick@wg0
|
||||
fi
|
||||
|
||||
# Setup GPS - gpsmon
|
||||
sed -i '/^enable_uart=/d' /boot/firmware/config.txt
|
||||
echo "enable_uart=1" >> /boot/firmware/config.txt
|
||||
apt install -y gpsd gpsd-clients chrony
|
||||
tee /etc/default/gpsd > /dev/null <<'EOF'
|
||||
START_DAEMON="true"
|
||||
GPSD_OPTIONS="-n"
|
||||
DEVICES="/dev/serial0"
|
||||
USBAUTO="false"
|
||||
GPSD_SOCKET="/var/run/gpsd.sock"
|
||||
EOF
|
||||
tee -a /etc/chrony/chrony.conf > /dev/null <<'EOF'
|
||||
refclock SHM 0 offset 0.5 delay 0.2 refid NMEA
|
||||
EOF
|
||||
systemctl enable --now gpsd chrony
|
||||
|
||||
# Setup DNS
|
||||
# TODO: Setup AP management
|
||||
apt install -y dnsmasq
|
||||
tee -a /etc/dnsmasq.d/local.conf > /dev/null <<'EOF'
|
||||
server=1.1.1.1
|
||||
server=1.0.0.1
|
||||
address=/$HOSTNAME/$IP
|
||||
address=/.$HOSTNAME/$IP
|
||||
EOF
|
||||
|
||||
# Install docker
|
||||
apt install -y qemu-user-static
|
||||
curl -fsSL https://get.docker.com | sh
|
||||
usermod -aG docker $USER
|
||||
newgrp docker
|
||||
|
||||
# Setup Guacamole - http://localhost:8080
|
||||
sed -i 's/^#\?PasswordAuthentication .*/PasswordAuthentication yes/' /etc/ssh/sshd_config
|
||||
systemctl restart ssh
|
||||
apt-get install -y xrdp
|
||||
tee /etc/xrdp/startwm.sh > /dev/null <<'EOF'
|
||||
#!/bin/sh
|
||||
unset DBUS_SESSION_BUS_ADDRESS
|
||||
unset XDG_RUNTIME_DIR
|
||||
exec startlxde-pi
|
||||
EOF
|
||||
mkdir -p /etc/polkit-1/rules.d
|
||||
tee /etc/polkit-1/rules.d/49-nopasswd.rules > /dev/null <<'EOF'
|
||||
polkit.addRule(function(action, subject) {
|
||||
return polkit.Result.YES;
|
||||
});
|
||||
EOF
|
||||
systemctl restart polkit
|
||||
systemctl enable --now xrdp
|
||||
docker run -d --name guacamole --network host --restart unless-stopped -v guacamole:/config flcontainers/guacamole:latest
|
||||
|
||||
# Setup Automount + FileBrowser - http://localhost:1200
|
||||
mkdir -p /etc/udev/rules.d/
|
||||
echo 'ENV{ID_FS_USAGE}=="filesystem", ENV{UDISKS_FILESYSTEM_SHARED}="1"' > /etc/udev/rules.d/99-udisks2.rules
|
||||
docker run -d --name filebrowser --restart unless-stopped -p 1200:8080 -e FB_USERNAME=$USER -v filebrowser:/config -v /media:/data hurlenko/filebrowser:latest
|
||||
sleep 3
|
||||
fb_pass=$(docker logs filebrowser 2>&1 | grep -oP 'randomly generated password: \K.*'); echo $fb_pass
|
||||
|
||||
# Setup Kiwix - http://localhost:1300
|
||||
mkdir -p /media/library/archive
|
||||
mkdir -p /media/library/zim
|
||||
docker run -d --name kiwix --restart unless-stopped -p 1300:3000 -v /media/library:/data ztimson/kiwixm:latest
|
||||
|
||||
# Maps - http://localhost:1400
|
||||
mkdir -p /media/maps/tiles
|
||||
mkdir -p /media/maps/styles
|
||||
docker run -d --name maps --restart unless-stopped -p 1400:8080 -v /media/maps/config.json:/config.json -v /media/maps/tiles:/data -v /media/maps/styles:/styles maptiler/tileserver-gl:v4.11.0
|
||||
|
||||
# Setup Ollama + OpenWebUI - http://localhost:1000
|
||||
docker run -d --name ollama --restart unless-stopped -p 11434:11434 -v ollama:/root/.ollama ollama/ollama:latest
|
||||
docker exec -d ollama ollama pull llama3.2:1b-instruct-q4_K_M # Works best on Pi5 (High TPS, Low memory)
|
||||
docker run -d --name open-webui --restart unless-stopped -p 1000:8080 -e OLLAMA_BASE_URL=http://ollama:11434 --link ollama -v open-webui:/app/backend/data ghcr.io/open-webui/open-webui:main
|
||||
|
||||
# LoRa - http://localhost:4403
|
||||
pip install --upgrade --break-system-packages meshtastic
|
||||
LORA_DEVICE=$(ls /dev/serial/by-id | grep RAK)
|
||||
apt install -y ser2net
|
||||
rm /etc/ser2net.yaml || echo
|
||||
tee /etc/ser2net.conf <<EOF
|
||||
4403:raw:0:/dev/serial/by-id/$LORA_DEVICE:115200 8DATABITS NONE 1STOPBIT
|
||||
EOF
|
||||
sed -i 's|\$CONFFILE|/etc/ser2net.conf|g' /lib/systemd/system/ser2net.service
|
||||
systemctl daemon-reload
|
||||
systemctl restart ser2net
|
||||
|
||||
# Federated chat - http://localhost:1500
|
||||
docker run -it --rm -v synapse:/data -e SYNAPSE_SERVER_NAME=server.local -e SYNAPSE_REPORT_STATS=no matrixdotorg/synapse:latest generate
|
||||
tee -a /var/lib/docker/volumes/synapse/_data/homeserver.yaml <<EOF
|
||||
enable_registration: true
|
||||
enable_registration_without_verification: true
|
||||
EOF
|
||||
docker run -d --name synapse --restart unless-stopped -e SYNAPSE_SERVER_NAME=server.local -e SYNAPSE_REPORT_STATS=no -v synapse:/data -p 8008:8008 matrixdotorg/synapse:latest
|
||||
mkdir -p /etc/element
|
||||
echo "{\"default_server_config\":{\"m.homeserver\":{\"base_url\":\"http://$IP:8008\",\"server_name\":\"server.local\"}}}" > /etc/element/config.json
|
||||
docker run -d --name element --restart unless-stopped -p 1500:80 -v /etc/element/config.json:/app/config.json vectorim/element-web:latest
|
||||
|
||||
# Setup pentest suite - http:localhost:1600
|
||||
sudo apt install -y arp-scan aircrack-ng gobuster hashcat hcxtools hydra john netcat-openbsd nikto nmap masscan reaver sqlmap tcpdump wireshark
|
||||
curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit-framework-wrappers/msfupdate.erb > msfinstall
|
||||
chmod +x msfinstall
|
||||
./msfinstall
|
||||
rm msfinstall
|
||||
docker run -d --name bettercap --restart unless-stopped --privileged --net=host bettercap/bettercap -eval "set api.rest.address 0.0.0.0; set ui.address 0.0.0.0; set ui.port 1600; ui on; set gps.device localhost:2947;"
|
||||
|
||||
# ATAK - http://localhost:1100 (XMPP - 5222, API - 8089)
|
||||
docker run -d --name atak --restart unless-stopped --platform=linux/amd64 -p 8089:8080 -p 5222:8999 -p 1100:8088 -v atak:/app kdudkov/goatak_server:latest
|
||||
|
||||
# TODO: SDR tools (SDRangel, dump1060)
|
||||
#docker run -d --name sdrserver --restart unless-stopped --device /dev/bus/usb:/dev/bus/usb -p 8091:8091 -p 8092:8092 f4exb06/sdrangelsrv:v7.22.7 --bind 0.0.0.0
|
||||
#docker run -d --name sdrcli --restart unless-stopped -p 1000:8080 -e SDRANGEL_SERVER_URL=http://10.69.5.108:8091 f4exb06/sdrangelcli:v4.0.2
|
||||
|
||||
# Speedtest - http://localhost:1900
|
||||
docker run -d --name speedtest --restart unless-stopped -p 1900:80 lscr.io/linuxserver/librespeed:latest
|
||||
|
||||
# TODO: Captive Portal + PWA & Caddy
|
||||
# TODO: E-Ink + QR Join AP
|
||||
# TODO: Mesh
|
||||
51
src/main.mjs
Executable file
51
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
src/services/environment.mjs
Executable file
38
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 || 3000,
|
||||
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
src/services/status.mjs
Executable file
426
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