u
This commit is contained in:
sebseb7
14
dist/index.html
vendored
Normal file
14
dist/index.html
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tischlerei Dashboard</title>
|
||||
<script defer src="/ac/bundle.51c89fd2f2d5281a592b.js"></script></head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
265
package-lock.json
generated
265
package-lock.json
generated
@@ -32,6 +32,7 @@
|
||||
"react-dom": "^19.2.3",
|
||||
"style-loader": "^4.0.0",
|
||||
"telegraf": "^4.16.3",
|
||||
"tp-link-tapo-connect": "^2.0.8",
|
||||
"webpack": "^5.104.1",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-middleware": "^7.4.5"
|
||||
@@ -2512,6 +2513,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@network-utils/arp-lookup": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@network-utils/arp-lookup/-/arp-lookup-2.1.0.tgz",
|
||||
"integrity": "sha512-DFrRcGecVuouFW6KMOX4qnCWkCH44er/A5udIPW7j4aiHDyVjQB5SG9/+beeV7066iA5ZasbBzu162F9ofHNmA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
@@ -2938,6 +2948,21 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/any-promise": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
|
||||
"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/assert-plus": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
|
||||
"integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/auto-bind": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-5.0.1.tgz",
|
||||
@@ -2950,6 +2975,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
|
||||
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-10.0.0.tgz",
|
||||
@@ -3349,6 +3383,12 @@
|
||||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cidr-regex": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-1.0.7.tgz",
|
||||
"integrity": "sha512-4sQNVjJw/I3kHyb9FGSJ/dBT18BP7pf5zongGsEYExNvtTss24hgJxZr0JK1eWlumX/ij4yiR/vYlndRynnkDQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clean-css": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
|
||||
@@ -3540,6 +3580,12 @@
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cosmiconfig": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
||||
@@ -4123,6 +4169,15 @@
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/extsprintf": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
|
||||
"integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
|
||||
"engines": [
|
||||
"node >=0.6.0"
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@@ -4212,6 +4267,26 @@
|
||||
"flat": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@@ -4290,6 +4365,17 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-ip-range": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/get-ip-range/-/get-ip-range-2.1.1.tgz",
|
||||
"integrity": "sha512-n401kTpf57VhbW2UvInXxhw1DgTJSsZf24gpNhJrFU8Cv+Jk/sQ+qukP2x0EF4MUEjDWlDLeIhIY/f80IV0kqg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cidr-regex": "^1.0.7",
|
||||
"ip": "^1.1.5",
|
||||
"ip-address": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
@@ -4687,6 +4773,30 @@
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ip": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
|
||||
"integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ip-address": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-6.4.0.tgz",
|
||||
"integrity": "sha512-c5uxc2WUTuRBVHT/6r4m7HIr/DfV0bF6DvLH3iZGSK8wp8iMwwZSgIq2do0asFf8q9ECug0SE+6+1ACMe4sorA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jsbn": "1.1.0",
|
||||
"lodash.find": "4.6.0",
|
||||
"lodash.max": "4.0.1",
|
||||
"lodash.merge": "4.6.2",
|
||||
"lodash.padstart": "4.6.1",
|
||||
"lodash.repeat": "4.1.0",
|
||||
"sprintf-js": "1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||
@@ -4800,6 +4910,12 @@
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jsbn": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
|
||||
"integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jsesc": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
|
||||
@@ -4818,6 +4934,12 @@
|
||||
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json-schema": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
|
||||
"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
|
||||
"license": "(AFL-2.1 OR BSD-3-Clause)"
|
||||
},
|
||||
"node_modules/json-schema-traverse": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
@@ -4858,6 +4980,21 @@
|
||||
"npm": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/jsprim": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
|
||||
"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"assert-plus": "1.0.0",
|
||||
"extsprintf": "1.3.0",
|
||||
"json-schema": "0.4.0",
|
||||
"verror": "1.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jwa": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
|
||||
@@ -4907,6 +5044,20 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/local-devices": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/local-devices/-/local-devices-4.0.0.tgz",
|
||||
"integrity": "sha512-65EPltZW7bPRTmIiL9yuQcu0Om6dYl4dzRgiIYxl/cUO62FBW09ZpIVtpffXU8vryfGXEXxt68oWK/Kru12FEA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-ip-range": "^2.1.0",
|
||||
"ip": "^1.1.5",
|
||||
"mz": "^2.7.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.17"
|
||||
}
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
||||
@@ -4934,6 +5085,12 @@
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.find": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
|
||||
"integrity": "sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.includes": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
|
||||
@@ -4970,12 +5127,36 @@
|
||||
"integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.max": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.max/-/lodash.max-4.0.1.tgz",
|
||||
"integrity": "sha512-iykTDTb7PK33HSQmKy34zv+hh4WEu7WonJPXQcgODzUbbtradtNs8RsD/GI7XV++60KaKR1xhW56N4ISqHesfQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.once": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
|
||||
"integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.padstart": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.padstart/-/lodash.padstart-4.6.1.tgz",
|
||||
"integrity": "sha512-sW73O6S8+Tg66eY56DBk85aQzzUJDtpoXFBgELMd5P/SotAguo+1kYO6RuYgXxA4HJH3LFTFPASX6ET6bjfriw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.repeat": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.repeat/-/lodash.repeat-4.1.0.tgz",
|
||||
"integrity": "sha512-eWsgQW89IewS95ZOcr15HHCX6FVDxq3f2PNUIng3fyzsPev9imFQxIYdFZ6crl8L56UR6ZlGDLcEb3RZsCSSqw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@@ -5006,6 +5187,16 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/macaddr": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/macaddr/-/macaddr-0.1.1.tgz",
|
||||
"integrity": "sha512-GgNo6LbhjKCQ42DFgB7gUvbNmbccfFxP9WOf2zaA9bnya/5Fe0VpeA664WVbYELqLI4Bxdx9KKLXHwe4xglvIw==",
|
||||
"license": "MPL-2.0",
|
||||
"dependencies": {
|
||||
"assert-plus": "^1.0.0",
|
||||
"jsprim": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
@@ -5145,6 +5336,17 @@
|
||||
"node": "^20.17.0 || >=22.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
|
||||
"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"any-promise": "^1.0.0",
|
||||
"object-assign": "^4.0.1",
|
||||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
@@ -6405,6 +6607,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sprintf-js": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
|
||||
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/stack-utils": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
|
||||
@@ -6678,6 +6886,27 @@
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/thenify": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
|
||||
"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"any-promise": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/thenify-all": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
|
||||
"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"thenify": ">= 3.1.0 < 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/thingies": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz",
|
||||
@@ -6703,6 +6932,19 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tp-link-tapo-connect": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/tp-link-tapo-connect/-/tp-link-tapo-connect-2.0.8.tgz",
|
||||
"integrity": "sha512-2LcYhx/CEGWKQOMY3Cgb6s7HQ7oAzbgh7Z5BwDqm9D0R0RAa9z/H3F8eWZaBhj5wD69yrTE6b1uh0ib5G3Rv8w==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@network-utils/arp-lookup": "^2.1.0",
|
||||
"axios": "^0.21.4",
|
||||
"local-devices": "^4.0.0",
|
||||
"macaddr": "^0.1.1",
|
||||
"uuid": "^8.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/tr46": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
|
||||
@@ -6866,6 +7108,15 @@
|
||||
"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
@@ -6875,6 +7126,20 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/verror": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
|
||||
"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
|
||||
"engines": [
|
||||
"node >=0.6.0"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"assert-plus": "^1.0.0",
|
||||
"core-util-is": "1.0.2",
|
||||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
"react-dom": "^19.2.3",
|
||||
"style-loader": "^4.0.0",
|
||||
"telegraf": "^4.16.3",
|
||||
"tp-link-tapo-connect": "^2.0.8",
|
||||
"webpack": "^5.104.1",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-middleware": "^7.4.5"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -10,126 +10,132 @@ import {
|
||||
Tooltip
|
||||
} from '@mui/material';
|
||||
|
||||
export default function AlarmCard({ alarm, onEdit, onDelete, onToggle, onMoveUp, onMoveDown, colorTags, readOnly }) {
|
||||
// Parse trigger/action data to display summary
|
||||
const trigger = alarm.trigger || {};
|
||||
const action = alarm.action || {};
|
||||
|
||||
// Get color for tag
|
||||
const getTagColor = (tagId) => {
|
||||
class AlarmCard extends Component {
|
||||
getTagColor = (tagId) => {
|
||||
const { colorTags } = this.props;
|
||||
const tag = colorTags.find(t => t.id === tagId);
|
||||
return tag ? tag.color : 'transparent';
|
||||
};
|
||||
|
||||
const hasTags = alarm.colorTags && alarm.colorTags.length > 0;
|
||||
render() {
|
||||
const { alarm, onEdit, onDelete, onToggle, onMoveUp, onMoveDown, readOnly } = this.props;
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)',
|
||||
color: '#ebdbb2',
|
||||
border: '1px solid #504945',
|
||||
position: 'relative',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': {
|
||||
transform: readOnly ? 'none' : 'translateY(-2px)',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.3)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ pb: '16px !important', display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
// Parse trigger/action data to display summary
|
||||
const trigger = alarm.trigger || {};
|
||||
const action = alarm.action || {};
|
||||
|
||||
{/* Drag Handle / Sort indicators */}
|
||||
{!readOnly && (onMoveUp || onMoveDown) && (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<IconButton size="small" onClick={onMoveUp} disabled={!onMoveUp} sx={{ p: 0.5, color: '#a89984' }}>
|
||||
▲
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={onMoveDown} disabled={!onMoveDown} sx={{ p: 0.5, color: '#a89984' }}>
|
||||
▼
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
const hasTags = alarm.colorTags && alarm.colorTags.length > 0;
|
||||
|
||||
{/* Enabled Switch */}
|
||||
<Switch
|
||||
checked={!!alarm.enabled}
|
||||
onChange={onToggle}
|
||||
disabled={readOnly}
|
||||
color="success"
|
||||
/>
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)',
|
||||
color: '#ebdbb2',
|
||||
border: '1px solid #504945',
|
||||
position: 'relative',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': {
|
||||
transform: readOnly ? 'none' : 'translateY(-2px)',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.3)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ pb: '16px !important', display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{alarm.name}
|
||||
{/* Drag Handle / Sort indicators */}
|
||||
{!readOnly && (onMoveUp || onMoveDown) && (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<IconButton size="small" onClick={onMoveUp} disabled={!onMoveUp} sx={{ p: 0.5, color: '#a89984' }}>
|
||||
▲
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={onMoveDown} disabled={!onMoveDown} sx={{ p: 0.5, color: '#a89984' }}>
|
||||
▼
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Enabled Switch */}
|
||||
<Switch
|
||||
checked={!!alarm.enabled}
|
||||
onChange={onToggle}
|
||||
disabled={readOnly}
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{alarm.name}
|
||||
</Typography>
|
||||
|
||||
{/* Tags */}
|
||||
{hasTags && (
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{alarm.colorTags.map(tagId => (
|
||||
<Box
|
||||
key={tagId}
|
||||
sx={{
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: '50%',
|
||||
bgcolor: this.getTagColor(tagId),
|
||||
border: '1px solid #282828'
|
||||
}}
|
||||
title={tagId}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{action.severity && (
|
||||
<Chip
|
||||
label={action.severity.toUpperCase()}
|
||||
size="small"
|
||||
sx={{
|
||||
height: 20,
|
||||
fontSize: '0.65rem',
|
||||
fontWeight: 'bold',
|
||||
bgcolor: action.severity === 'critical' ? '#fb4934' :
|
||||
action.severity === 'warning' ? '#fe8019' : '#83a598',
|
||||
color: '#282828'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{/* Trigger Summary */}
|
||||
{trigger.scheduledTime ? (
|
||||
<span>⏰ {trigger.scheduledTime.time} ({trigger.scheduledTime.days.map(d => d.slice(0, 3)).join(',')})</span>
|
||||
) : trigger.timeRange ? (
|
||||
<span>⏰ {trigger.timeRange.start}-{trigger.timeRange.end}</span>
|
||||
) : trigger.sensors ? (
|
||||
<span>
|
||||
📊 {trigger.sensors.map(s => `${s.sensorLabel || s.sensor} ${s.operator} ${s.value}`).join(trigger.sensorLogic === 'or' ? ' OR ' : ' AND ')}
|
||||
</span>
|
||||
) : (
|
||||
<span>Unknown Trigger</span>
|
||||
)}
|
||||
<span style={{ margin: '0 8px', opacity: 0.5 }}>➜</span>
|
||||
<span>🔔 Telegram: "{action.message || 'Alert'}"</span>
|
||||
</Typography>
|
||||
|
||||
{/* Tags */}
|
||||
{hasTags && (
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{alarm.colorTags.map(tagId => (
|
||||
<Box
|
||||
key={tagId}
|
||||
sx={{
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: '50%',
|
||||
bgcolor: getTagColor(tagId),
|
||||
border: '1px solid #282828'
|
||||
}}
|
||||
title={tagId}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{action.severity && (
|
||||
<Chip
|
||||
label={action.severity.toUpperCase()}
|
||||
size="small"
|
||||
sx={{
|
||||
height: 20,
|
||||
fontSize: '0.65rem',
|
||||
fontWeight: 'bold',
|
||||
bgcolor: action.severity === 'critical' ? '#fb4934' :
|
||||
action.severity === 'warning' ? '#fe8019' : '#83a598',
|
||||
color: '#282828'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{/* Trigger Summary */}
|
||||
{trigger.scheduledTime ? (
|
||||
<span>⏰ {trigger.scheduledTime.time} ({trigger.scheduledTime.days.map(d => d.slice(0, 3)).join(',')})</span>
|
||||
) : trigger.timeRange ? (
|
||||
<span>⏰ {trigger.timeRange.start}-{trigger.timeRange.end}</span>
|
||||
) : trigger.sensors ? (
|
||||
<span>
|
||||
📊 {trigger.sensors.map(s => `${s.sensorLabel || s.sensor} ${s.operator} ${s.value}`).join(trigger.sensorLogic === 'or' ? ' OR ' : ' AND ')}
|
||||
</span>
|
||||
) : (
|
||||
<span>Unknown Trigger</span>
|
||||
)}
|
||||
<span style={{ margin: '0 8px', opacity: 0.5 }}>➜</span>
|
||||
<span>🔔 Telegram: "{action.message || 'Alert'}"</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Actions */}
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<IconButton onClick={onEdit} size="small" sx={{ color: '#8ec07c' }}>
|
||||
✎
|
||||
</IconButton>
|
||||
<IconButton onClick={onDelete} size="small" sx={{ color: '#fb4934' }}>
|
||||
🗑
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Actions */}
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<IconButton onClick={onEdit} size="small" sx={{ color: '#8ec07c' }}>
|
||||
✎
|
||||
</IconButton>
|
||||
<IconButton onClick={onDelete} size="small" sx={{ color: '#fb4934' }}>
|
||||
🗑
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AlarmCard;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
Chip,
|
||||
Alert
|
||||
} from '@mui/material';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
// Reusing some constants/components from RuleEditor logic if possible, but duplicating for isolation as per plan
|
||||
const DAYS_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
@@ -36,177 +36,170 @@ const OPERATORS = [
|
||||
{ value: '==', label: '=' }
|
||||
];
|
||||
|
||||
function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
return (
|
||||
<Paper sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.default' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 180 }}>
|
||||
<InputLabel>Sensor</InputLabel>
|
||||
<Select
|
||||
value={condition.sensor || ''}
|
||||
label="Sensor"
|
||||
onChange={(e) => {
|
||||
const newSensor = sensors.find(s => s.id === e.target.value);
|
||||
onChange({ ...condition, sensor: e.target.value, sensorLabel: newSensor?.label });
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
{sensors.map(s => (
|
||||
<MenuItem key={s.id} value={s.id}>{s.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
class SensorCondition extends Component {
|
||||
render() {
|
||||
const { condition, sensors, onChange, onRemove, disabled } = this.props;
|
||||
|
||||
<FormControl size="small" sx={{ minWidth: 70 }}>
|
||||
<Select
|
||||
value={condition.operator || '>'}
|
||||
onChange={(e) => onChange({ ...condition, operator: e.target.value })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<MenuItem key={op.value} value={op.value}>{op.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
value={condition.value ?? ''}
|
||||
onChange={(e) => onChange({ ...condition, value: Number(e.target.value) })}
|
||||
sx={{ width: 80 }}
|
||||
disabled={disabled}
|
||||
/>
|
||||
return (
|
||||
<Paper sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.default' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 180 }}>
|
||||
<InputLabel>Sensor</InputLabel>
|
||||
<Select
|
||||
value={condition.sensor || ''}
|
||||
label="Sensor"
|
||||
onChange={(e) => {
|
||||
const newSensor = sensors.find(s => s.id === e.target.value);
|
||||
onChange({ ...condition, sensor: e.target.value, sensorLabel: newSensor?.label });
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
{sensors.map(s => (
|
||||
<MenuItem key={s.id} value={s.id}>{s.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{onRemove && (
|
||||
<IconButton size="small" onClick={onRemove} disabled={disabled}>
|
||||
❌
|
||||
</IconButton>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
<FormControl size="small" sx={{ minWidth: 70 }}>
|
||||
<Select
|
||||
value={condition.operator || '>'}
|
||||
onChange={(e) => onChange({ ...condition, operator: e.target.value })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<MenuItem key={op.value} value={op.value}>{op.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
value={condition.value ?? ''}
|
||||
onChange={(e) => onChange({ ...condition, value: Number(e.target.value) })}
|
||||
sx={{ width: 80 }}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{onRemove && (
|
||||
<IconButton size="small" onClick={onRemove} disabled={disabled}>
|
||||
❌
|
||||
</IconButton>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function AlarmEditor({ open, alarm, onSave, onClose, sensors = [], outputs = [], colorTags: availableColorTags = [], saving }) {
|
||||
const { t } = useI18n();
|
||||
const [name, setName] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState([]);
|
||||
class AlarmEditor extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: '',
|
||||
selectedTags: [],
|
||||
triggerMode: 'sensor',
|
||||
outputTarget: '',
|
||||
outputState: 'on',
|
||||
useTimeRange: false,
|
||||
timeStart: '08:00',
|
||||
timeEnd: '18:00',
|
||||
timeRangeDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
|
||||
sensorConditions: [{ sensor: '', operator: '>', value: 25 }],
|
||||
sensorLogic: 'and',
|
||||
message: '',
|
||||
severity: 'warning'
|
||||
};
|
||||
}
|
||||
|
||||
// Trigger Mode: 'sensor' or 'output'
|
||||
const [triggerMode, setTriggerMode] = useState('sensor');
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.open !== prevProps.open || this.props.alarm !== prevProps.alarm) {
|
||||
this.initializeState();
|
||||
}
|
||||
}
|
||||
|
||||
// Output Change Config
|
||||
const [outputTarget, setOutputTarget] = useState('');
|
||||
const [outputState, setOutputState] = useState('on');
|
||||
componentDidMount() {
|
||||
this.initializeState();
|
||||
}
|
||||
|
||||
// Scheduled time (not commonly used for alarms, but keeping parity with rules engine if needed)
|
||||
// Actually, alarms are usually condition-based (Value > X). Time-based alarms remind you to do something?
|
||||
// Let's keep it simple: SENSORS ONLY for now described in plan ("triggers (based on sensors, time, etc.)")
|
||||
// I'll keep the UI structure but maybe default to Sensors.
|
||||
initializeState = () => {
|
||||
const { alarm, sensors } = this.props;
|
||||
|
||||
// Simplification: Alarms usually monitor state.
|
||||
// "Time Range" is valid (only alarm between 8am-8pm).
|
||||
// "Scheduled Time" (Alarm at 8am) is basically a Reminder.
|
||||
|
||||
// I will include: Time Range (Active Window) and Sensor Conditions.
|
||||
// I'll omit "Scheduled Time" as a trigger for now unless requested, to reduce complexity,
|
||||
// as "Alarm at 8am" is just an event. The user asked for "similar to alarms".
|
||||
|
||||
const [useTimeRange, setUseTimeRange] = useState(false);
|
||||
const [timeStart, setTimeStart] = useState('08:00');
|
||||
const [timeEnd, setTimeEnd] = useState('18:00');
|
||||
const [timeRangeDays, setTimeRangeDays] = useState(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
|
||||
const [sensorConditions, setSensorConditions] = useState([{ sensor: '', operator: '>', value: 25 }]);
|
||||
const [sensorLogic, setSensorLogic] = useState('and');
|
||||
|
||||
// Action State (Telegram)
|
||||
const [message, setMessage] = useState('');
|
||||
const [severity, setSeverity] = useState('warning');
|
||||
|
||||
useEffect(() => {
|
||||
if (alarm) {
|
||||
setName(alarm.name);
|
||||
const tags = alarm.colorTags || (alarm.colorTag ? [alarm.colorTag] : []);
|
||||
setSelectedTags(Array.isArray(tags) ? tags : []);
|
||||
|
||||
const trigger = alarm.trigger || {};
|
||||
|
||||
setUseTimeRange(!!trigger.timeRange);
|
||||
if (trigger.timeRange) {
|
||||
setTimeStart(trigger.timeRange.start || '08:00');
|
||||
setTimeEnd(trigger.timeRange.end || '18:00');
|
||||
setTimeRangeDays(trigger.timeRange.days || []);
|
||||
}
|
||||
|
||||
if (trigger.outputChange) {
|
||||
setTriggerMode('output');
|
||||
setOutputTarget(trigger.outputChange.target || '');
|
||||
setOutputState(trigger.outputChange.state || 'on');
|
||||
} else if (trigger.sensors && trigger.sensors.length > 0) {
|
||||
setTriggerMode('sensor');
|
||||
setSensorConditions(trigger.sensors);
|
||||
setSensorLogic(trigger.sensorLogic || 'and');
|
||||
} else {
|
||||
setTriggerMode('sensor');
|
||||
setSensorConditions([{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
}
|
||||
|
||||
const action = alarm.action || {};
|
||||
setMessage(action.message || '');
|
||||
setSeverity(action.severity || 'warning');
|
||||
|
||||
this.setState({
|
||||
name: alarm.name,
|
||||
selectedTags: Array.isArray(tags) ? tags : [],
|
||||
useTimeRange: !!trigger.timeRange,
|
||||
timeStart: trigger.timeRange?.start || '08:00',
|
||||
timeEnd: trigger.timeRange?.end || '18:00',
|
||||
timeRangeDays: trigger.timeRange?.days || [],
|
||||
triggerMode: trigger.outputChange ? 'output' : 'sensor',
|
||||
outputTarget: trigger.outputChange?.target || '',
|
||||
outputState: trigger.outputChange?.state || 'on',
|
||||
sensorConditions: trigger.sensors?.length > 0
|
||||
? trigger.sensors
|
||||
: [{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }],
|
||||
sensorLogic: trigger.sensorLogic || 'and',
|
||||
message: alarm.action?.message || '',
|
||||
severity: alarm.action?.severity || 'warning'
|
||||
});
|
||||
} else {
|
||||
setName('');
|
||||
setSelectedTags([]);
|
||||
setTriggerMode('sensor');
|
||||
setOutputTarget('');
|
||||
setOutputState('on');
|
||||
setUseTimeRange(false);
|
||||
setTimeStart('08:00');
|
||||
setTimeEnd('18:00');
|
||||
setTimeRangeDays(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
setSensorConditions([{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
setSensorLogic('and');
|
||||
setMessage('');
|
||||
setSeverity('warning');
|
||||
}
|
||||
}, [alarm, open, sensors]);
|
||||
|
||||
// Default sensor init
|
||||
useEffect(() => {
|
||||
if (sensorConditions[0]?.sensor === '' && sensors.length > 0) {
|
||||
setSensorConditions([{ ...sensorConditions[0], sensor: sensors[0].id }]);
|
||||
}
|
||||
}, [sensors, sensorConditions]);
|
||||
|
||||
const addSensorCondition = () => {
|
||||
setSensorConditions([...sensorConditions, { sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
};
|
||||
|
||||
const updateSensorCondition = (index, newCondition) => {
|
||||
const updated = [...sensorConditions];
|
||||
updated[index] = newCondition;
|
||||
setSensorConditions(updated);
|
||||
};
|
||||
|
||||
const removeSensorCondition = (index) => {
|
||||
if (sensorConditions.length > 1) {
|
||||
setSensorConditions(sensorConditions.filter((_, i) => i !== index));
|
||||
this.setState({
|
||||
name: '',
|
||||
selectedTags: [],
|
||||
triggerMode: 'sensor',
|
||||
outputTarget: '',
|
||||
outputState: 'on',
|
||||
useTimeRange: false,
|
||||
timeStart: '08:00',
|
||||
timeEnd: '18:00',
|
||||
timeRangeDays: ['mon', 'tue', 'wed', 'thu', 'fri'],
|
||||
sensorConditions: [{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }],
|
||||
sensorLogic: 'and',
|
||||
message: '',
|
||||
severity: 'warning'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
addSensorCondition = () => {
|
||||
const { sensors } = this.props;
|
||||
this.setState(prev => ({
|
||||
sensorConditions: [...prev.sensorConditions, { sensor: sensors[0]?.id || '', operator: '>', value: 25 }]
|
||||
}));
|
||||
};
|
||||
|
||||
updateSensorCondition = (index, newCondition) => {
|
||||
this.setState(prev => {
|
||||
const updated = [...prev.sensorConditions];
|
||||
updated[index] = newCondition;
|
||||
return { sensorConditions: updated };
|
||||
});
|
||||
};
|
||||
|
||||
removeSensorCondition = (index) => {
|
||||
this.setState(prev => {
|
||||
if (prev.sensorConditions.length > 1) {
|
||||
return { sensorConditions: prev.sensorConditions.filter((_, i) => i !== index) };
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
handleSave = () => {
|
||||
const { onSave, sensors } = this.props;
|
||||
const { name, selectedTags, triggerMode, outputTarget, outputState,
|
||||
useTimeRange, timeStart, timeEnd, timeRangeDays,
|
||||
sensorConditions, sensorLogic, message, severity } = this.state;
|
||||
|
||||
const trigger = {};
|
||||
|
||||
// Always require sensors for an Alarm (otherwise it's just a time-based notification, which is valid too)
|
||||
// Let's assume user wants to monitor something.
|
||||
|
||||
if (triggerMode === 'output') {
|
||||
trigger.outputChange = {
|
||||
target: outputTarget,
|
||||
state: outputState
|
||||
};
|
||||
} else {
|
||||
// Sensor Mode
|
||||
if (useTimeRange) {
|
||||
trigger.timeRange = { start: timeStart, end: timeEnd, days: timeRangeDays };
|
||||
}
|
||||
@@ -226,220 +219,229 @@ export default function AlarmEditor({ open, alarm, onSave, onClose, sensors = []
|
||||
onSave({ name, trigger, action, colorTags: selectedTags });
|
||||
};
|
||||
|
||||
const isValid = name.trim().length > 0 &&
|
||||
((triggerMode === 'sensor' && sensorConditions.every(c => c.sensor)) ||
|
||||
(triggerMode === 'output' && outputTarget)) &&
|
||||
message.trim().length > 0;
|
||||
render() {
|
||||
const { open, alarm, onClose, sensors = [], outputs = [], colorTags: availableColorTags = [], saving, i18n: { t } } = this.props;
|
||||
const { name, selectedTags, triggerMode, outputTarget, outputState,
|
||||
useTimeRange, timeStart, timeEnd, timeRangeDays,
|
||||
sensorConditions, sensorLogic, message, severity } = this.state;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #282828 100%)',
|
||||
border: '1px solid #504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle>
|
||||
{alarm ? 'Edit Alarm' : 'Create Alarm'}
|
||||
</DialogTitle>
|
||||
const isValid = name.trim().length > 0 &&
|
||||
((triggerMode === 'sensor' && sensorConditions.every(c => c.sensor)) ||
|
||||
(triggerMode === 'output' && outputTarget)) &&
|
||||
message.trim().length > 0;
|
||||
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, pt: 1 }}>
|
||||
<TextField
|
||||
label="Alarm Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
fullWidth
|
||||
disabled={saving}
|
||||
/>
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #282828 100%)',
|
||||
border: '1px solid #504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle>
|
||||
{alarm ? 'Edit Alarm' : 'Create Alarm'}
|
||||
</DialogTitle>
|
||||
|
||||
{/* Tags */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" color="text.secondary">Tags:</Typography>
|
||||
{availableColorTags.map(tag => (
|
||||
<Box
|
||||
key={tag.id}
|
||||
onClick={() => {
|
||||
if (selectedTags.includes(tag.id)) {
|
||||
setSelectedTags(selectedTags.filter(t => t !== tag.id));
|
||||
} else {
|
||||
setSelectedTags([...selectedTags, tag.id]);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
width: 24, height: 24, borderRadius: '50%',
|
||||
bgcolor: tag.color, cursor: 'pointer',
|
||||
border: selectedTags.includes(tag.id) ? '3px solid #ebdbb2' : '2px solid transparent',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
||||
}}
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, pt: 1 }}>
|
||||
<TextField
|
||||
label="Alarm Name"
|
||||
value={name}
|
||||
onChange={(e) => this.setState({ name: e.target.value })}
|
||||
fullWidth
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
{/* Tags */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" color="text.secondary">Tags:</Typography>
|
||||
{availableColorTags.map(tag => (
|
||||
<Box
|
||||
key={tag.id}
|
||||
onClick={() => {
|
||||
if (selectedTags.includes(tag.id)) {
|
||||
this.setState({ selectedTags: selectedTags.filter(t => t !== tag.id) });
|
||||
} else {
|
||||
this.setState({ selectedTags: [...selectedTags, tag.id] });
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
width: 24, height: 24, borderRadius: '50%',
|
||||
bgcolor: tag.color, cursor: 'pointer',
|
||||
border: selectedTags.includes(tag.id) ? '3px solid #ebdbb2' : '2px solid transparent',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
{selectedTags.includes(tag.id) && <span style={{ fontSize: '0.7rem' }}>✓</span>}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* TRIGGER */}
|
||||
<Typography variant="subtitle2" color="text.secondary">TRIGGER CONDITIONS</Typography>
|
||||
<Divider />
|
||||
|
||||
{/* Trigger Mode Selection */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Trigger Type</InputLabel>
|
||||
<Select
|
||||
value={triggerMode}
|
||||
label="Trigger Type"
|
||||
onChange={(e) => this.setState({ triggerMode: e.target.value })}
|
||||
>
|
||||
{selectedTags.includes(tag.id) && <span style={{ fontSize: '0.7rem' }}>✓</span>}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<MenuItem value="sensor">📊 Sensor Value Threshold</MenuItem>
|
||||
<MenuItem value="output">🔌 Output Turn ON/OFF</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* TRIGGER */}
|
||||
<Typography variant="subtitle2" color="text.secondary">TRIGGER CONDITIONS</Typography>
|
||||
<Divider />
|
||||
|
||||
{/* Trigger Mode Selection */}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Trigger Type</InputLabel>
|
||||
<Select
|
||||
value={triggerMode}
|
||||
label="Trigger Type"
|
||||
onChange={(e) => setTriggerMode(e.target.value)}
|
||||
>
|
||||
<MenuItem value="sensor">📊 Sensor Value Threshold</MenuItem>
|
||||
<MenuItem value="output">🔌 Output Turn ON/OFF</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{triggerMode === 'output' ? (
|
||||
<Paper sx={{ p: 2, bgcolor: 'action.selected', display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Alert severity="info" icon={false} sx={{ py: 0 }}>
|
||||
Trigger when a filtered rule changes a device state.
|
||||
</Alert>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Target Output</InputLabel>
|
||||
<Select
|
||||
value={outputTarget}
|
||||
label="Target Output"
|
||||
onChange={(e) => setOutputTarget(e.target.value)}
|
||||
>
|
||||
<MenuItem value="any">Any Output</MenuItem>
|
||||
{outputs.map(o => (
|
||||
<MenuItem key={o.id} value={o.id}>{o.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ minWidth: 120 }}>
|
||||
<InputLabel>State</InputLabel>
|
||||
<Select
|
||||
value={outputState}
|
||||
label="State"
|
||||
onChange={(e) => setOutputState(e.target.value)}
|
||||
>
|
||||
<MenuItem value="on">Turns ON</MenuItem>
|
||||
<MenuItem value="off">Turns OFF</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Paper>
|
||||
) : (
|
||||
<>
|
||||
{/* Time Window */}
|
||||
<Paper sx={{ p: 2, bgcolor: useTimeRange ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={useTimeRange} onChange={(e) => setUseTimeRange(e.target.checked)} disabled={saving} />
|
||||
}
|
||||
label="Active Time Window (Optional)"
|
||||
/>
|
||||
{useTimeRange && (
|
||||
<Box sx={{ mt: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<TextField
|
||||
label="From" type="time"
|
||||
value={timeStart} onChange={(e) => setTimeStart(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }} size="small"
|
||||
/>
|
||||
<Typography>to</Typography>
|
||||
<TextField
|
||||
label="Until" type="time"
|
||||
value={timeEnd} onChange={(e) => setTimeEnd(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }} size="small"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Sensors */}
|
||||
<Paper sx={{ p: 2, bgcolor: 'action.selected' }}>
|
||||
<Typography gutterBottom fontWeight="bold">📊 Sensor Thresholds</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{sensorConditions.length > 1 && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2">Logic:</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={sensorLogic} exclusive
|
||||
onChange={(e, v) => v && setSensorLogic(v)} size="small"
|
||||
>
|
||||
<ToggleButton value="and">AND</ToggleButton>
|
||||
<ToggleButton value="or">OR</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{sensorConditions.map((cond, i) => (
|
||||
<SensorCondition
|
||||
key={i}
|
||||
condition={cond}
|
||||
sensors={sensors}
|
||||
onChange={(newCond) => updateSensorCondition(i, newCond)}
|
||||
onRemove={sensorConditions.length > 1 ? () => removeSensorCondition(i) : null}
|
||||
disabled={saving}
|
||||
/>
|
||||
))}
|
||||
<Button size="small" onClick={addSensorCondition} disabled={saving} sx={{ alignSelf: 'flex-start' }}>
|
||||
+ Add Condition
|
||||
</Button>
|
||||
{triggerMode === 'output' ? (
|
||||
<Paper sx={{ p: 2, bgcolor: 'action.selected', display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Alert severity="info" icon={false} sx={{ py: 0 }}>
|
||||
Trigger when a filtered rule changes a device state.
|
||||
</Alert>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Target Output</InputLabel>
|
||||
<Select
|
||||
value={outputTarget}
|
||||
label="Target Output"
|
||||
onChange={(e) => this.setState({ outputTarget: e.target.value })}
|
||||
>
|
||||
<MenuItem value="any">Any Output</MenuItem>
|
||||
{outputs.map(o => (
|
||||
<MenuItem key={o.id} value={o.id}>{o.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ minWidth: 120 }}>
|
||||
<InputLabel>State</InputLabel>
|
||||
<Select
|
||||
value={outputState}
|
||||
label="State"
|
||||
onChange={(e) => this.setState({ outputState: e.target.value })}
|
||||
>
|
||||
<MenuItem value="on">Turns ON</MenuItem>
|
||||
<MenuItem value="off">Turns OFF</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
)}
|
||||
) : (
|
||||
<>
|
||||
{/* Time Window */}
|
||||
<Paper sx={{ p: 2, bgcolor: useTimeRange ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch checked={useTimeRange} onChange={(e) => this.setState({ useTimeRange: e.target.checked })} disabled={saving} />
|
||||
}
|
||||
label="Active Time Window (Optional)"
|
||||
/>
|
||||
{useTimeRange && (
|
||||
<Box sx={{ mt: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<TextField
|
||||
label="From" type="time"
|
||||
value={timeStart} onChange={(e) => this.setState({ timeStart: e.target.value })}
|
||||
InputLabelProps={{ shrink: true }} size="small"
|
||||
/>
|
||||
<Typography>to</Typography>
|
||||
<TextField
|
||||
label="Until" type="time"
|
||||
value={timeEnd} onChange={(e) => this.setState({ timeEnd: e.target.value })}
|
||||
InputLabelProps={{ shrink: true }} size="small"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* ACTION */}
|
||||
<Typography variant="subtitle2" color="text.secondary">ACTION (Telelegram Notification)</Typography>
|
||||
<Divider />
|
||||
{/* Sensors */}
|
||||
<Paper sx={{ p: 2, bgcolor: 'action.selected' }}>
|
||||
<Typography gutterBottom fontWeight="bold">📊 Sensor Thresholds</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{sensorConditions.length > 1 && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2">Logic:</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={sensorLogic} exclusive
|
||||
onChange={(e, v) => v && this.setState({ sensorLogic: v })} size="small"
|
||||
>
|
||||
<ToggleButton value="and">AND</ToggleButton>
|
||||
<ToggleButton value="or">OR</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Severity</InputLabel>
|
||||
<Select
|
||||
value={severity}
|
||||
label="Severity"
|
||||
onChange={(e) => setSeverity(e.target.value)}
|
||||
>
|
||||
<MenuItem value="info">ℹ️ Info</MenuItem>
|
||||
<MenuItem value="warning">⚠️ Warning</MenuItem>
|
||||
<MenuItem value="critical">🔥 Critical</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{sensorConditions.map((cond, i) => (
|
||||
<SensorCondition
|
||||
key={i}
|
||||
condition={cond}
|
||||
sensors={sensors}
|
||||
onChange={(newCond) => this.updateSensorCondition(i, newCond)}
|
||||
onRemove={sensorConditions.length > 1 ? () => this.removeSensorCondition(i) : null}
|
||||
disabled={saving}
|
||||
/>
|
||||
))}
|
||||
<Button size="small" onClick={this.addSensorCondition} disabled={saving} sx={{ alignSelf: 'flex-start' }}>
|
||||
+ Add Condition
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
label="Notification Message"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
placeholder="e.g. Temperature is too high!"
|
||||
disabled={saving}
|
||||
/>
|
||||
{/* ACTION */}
|
||||
<Typography variant="subtitle2" color="text.secondary">ACTION (Telelegram Notification)</Typography>
|
||||
<Divider />
|
||||
|
||||
<Alert severity="info" icon={false} sx={{ bgcolor: 'rgba(2, 136, 209, 0.1)' }}>
|
||||
This message will be sent to all users who have linked their Telegram ID in their profile.
|
||||
</Alert>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Severity</InputLabel>
|
||||
<Select
|
||||
value={severity}
|
||||
label="Severity"
|
||||
onChange={(e) => this.setState({ severity: e.target.value })}
|
||||
>
|
||||
<MenuItem value="info">ℹ️ Info</MenuItem>
|
||||
<MenuItem value="warning">⚠️ Warning</MenuItem>
|
||||
<MenuItem value="critical">🔥 Critical</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<TextField
|
||||
label="Notification Message"
|
||||
value={message}
|
||||
onChange={(e) => this.setState({ message: e.target.value })}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
placeholder="e.g. Temperature is too high!"
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
<DialogActions sx={{ px: 3, py: 2 }}>
|
||||
<Button onClick={onClose} color="inherit" disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
variant="contained"
|
||||
disabled={!isValid || saving}
|
||||
sx={{ background: 'linear-gradient(45deg, #8ec07c 30%, #b8bb26 90%)' }}
|
||||
>
|
||||
{saving ? <CircularProgress size={20} /> : (alarm ? 'Save Changes' : 'Create Alarm')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
<Alert severity="info" icon={false} sx={{ bgcolor: 'rgba(2, 136, 209, 0.1)' }}>
|
||||
This message will be sent to all users who have linked their Telegram ID in their profile.
|
||||
</Alert>
|
||||
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, py: 2 }}>
|
||||
<Button onClick={onClose} color="inherit" disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
onClick={this.handleSave}
|
||||
variant="contained"
|
||||
disabled={!isValid || saving}
|
||||
sx={{ background: 'linear-gradient(45deg, #8ec07c 30%, #b8bb26 90%)' }}
|
||||
>
|
||||
{saving ? <CircularProgress size={20} /> : (alarm ? 'Save Changes' : 'Create Alarm')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n(AlarmEditor);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
@@ -11,8 +11,9 @@ import {
|
||||
} from '@mui/material';
|
||||
import AlarmCard from './AlarmCard';
|
||||
import AlarmEditor from './AlarmEditor';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withAuth } from './AuthContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
import { withDevices } from './DevicesContext';
|
||||
|
||||
const COLOR_TAGS = [
|
||||
{ id: 'red', label: 'Red', color: '#fb4934' },
|
||||
@@ -25,162 +26,131 @@ const COLOR_TAGS = [
|
||||
{ id: 'gray', label: 'Gray', color: '#928374' }
|
||||
];
|
||||
|
||||
export default function AlarmManager() {
|
||||
const { isAdmin } = useAuth();
|
||||
const { t } = useI18n();
|
||||
const [alarms, setAlarms] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingAlarm, setEditingAlarm] = useState(null);
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [filterTag, setFilterTag] = useState(null);
|
||||
class AlarmManager extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
alarms: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
editorOpen: false,
|
||||
editingAlarm: null,
|
||||
saving: false,
|
||||
filterTag: null
|
||||
};
|
||||
}
|
||||
|
||||
const getAuthHeaders = useCallback(() => {
|
||||
componentDidMount() {
|
||||
this.fetchAlarms();
|
||||
}
|
||||
|
||||
getAuthHeaders = () => {
|
||||
const token = localStorage.getItem('authToken');
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
|
||||
const fetchAlarms = useCallback(async () => {
|
||||
fetchAlarms = async () => {
|
||||
try {
|
||||
const res = await fetch('api/alarms');
|
||||
if (!res.ok) throw new Error('Failed to fetch alarms');
|
||||
const data = await res.json();
|
||||
setAlarms(data);
|
||||
setError(null);
|
||||
this.setState({ alarms: data, error: null, loading: false });
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
this.setState({ error: err.message, loading: false });
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('api/devices');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDevices(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch devices:', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAlarms();
|
||||
fetchDevices();
|
||||
}, [fetchAlarms, fetchDevices]);
|
||||
|
||||
// Build available sensors (same usage as RuleManager)
|
||||
const availableSensors = [];
|
||||
const seenDevices = new Set();
|
||||
|
||||
devices.forEach(d => {
|
||||
if (!seenDevices.has(d.dev_name)) {
|
||||
seenDevices.add(d.dev_name);
|
||||
availableSensors.push({ id: `${d.dev_name}:temp`, label: `${d.dev_name} - Temperature`, type: 'temp' });
|
||||
availableSensors.push({ id: `${d.dev_name}:humidity`, label: `${d.dev_name} - Humidity`, type: 'humidity' });
|
||||
}
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:${d.port}:level`,
|
||||
label: `${d.dev_name} - ${d.port_name} Level`,
|
||||
type: 'level'
|
||||
});
|
||||
});
|
||||
|
||||
// Build available outputs
|
||||
const availableOutputs = [];
|
||||
devices.forEach(d => {
|
||||
availableOutputs.push({
|
||||
id: `${d.dev_name}:${d.port}:out`,
|
||||
label: `${d.dev_name} - ${d.port_name} (Output)`
|
||||
});
|
||||
});
|
||||
|
||||
const handleAddAlarm = () => {
|
||||
setEditingAlarm(null);
|
||||
setEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEditAlarm = (alarm) => {
|
||||
setEditingAlarm(alarm);
|
||||
setEditorOpen(true);
|
||||
handleAddAlarm = () => {
|
||||
this.setState({ editingAlarm: null, editorOpen: true });
|
||||
};
|
||||
|
||||
const handleDeleteAlarm = async (id) => {
|
||||
handleEditAlarm = (alarm) => {
|
||||
this.setState({ editingAlarm: alarm, editorOpen: true });
|
||||
};
|
||||
|
||||
handleDeleteAlarm = async (id) => {
|
||||
if (!confirm('Are you sure you want to delete this alarm?')) return;
|
||||
setSaving(true);
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
const res = await fetch(`api/alarms/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
headers: this.getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete alarm');
|
||||
setAlarms(alarms.filter(a => a.id !== id));
|
||||
this.setState(prev => ({
|
||||
alarms: prev.alarms.filter(a => a.id !== id),
|
||||
saving: false
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleAlarm = async (id) => {
|
||||
handleToggleAlarm = async (id) => {
|
||||
const { alarms } = this.state;
|
||||
const alarm = alarms.find(a => a.id === id);
|
||||
if (!alarm) return;
|
||||
setSaving(true);
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
const res = await fetch(`api/alarms/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...alarm, enabled: !alarm.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update alarm');
|
||||
const updated = await res.json();
|
||||
setAlarms(alarms.map(a => a.id === id ? updated : a));
|
||||
this.setState(prev => ({
|
||||
alarms: prev.alarms.map(a => a.id === id ? updated : a),
|
||||
saving: false
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveAlarm = async (alarmData) => {
|
||||
setSaving(true);
|
||||
handleSaveAlarm = async (alarmData) => {
|
||||
const { editingAlarm } = this.state;
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
if (editingAlarm) {
|
||||
const res = await fetch(`api/alarms/${editingAlarm.id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...alarmData, enabled: editingAlarm.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update alarm');
|
||||
const updated = await res.json();
|
||||
setAlarms(alarms.map(a => a.id === editingAlarm.id ? updated : a));
|
||||
this.setState(prev => ({
|
||||
alarms: prev.alarms.map(a => a.id === editingAlarm.id ? updated : a),
|
||||
editorOpen: false,
|
||||
editingAlarm: null,
|
||||
saving: false
|
||||
}));
|
||||
} else {
|
||||
const res = await fetch('api/alarms', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...alarmData, enabled: true })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create alarm');
|
||||
const newAlarm = await res.json();
|
||||
setAlarms([...alarms, newAlarm]);
|
||||
this.setState(prev => ({
|
||||
alarms: [...prev.alarms, newAlarm],
|
||||
editorOpen: false,
|
||||
editingAlarm: null,
|
||||
saving: false
|
||||
}));
|
||||
}
|
||||
setEditorOpen(false);
|
||||
setEditingAlarm(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveAlarm = async (id, direction) => {
|
||||
handleMoveAlarm = async (id, direction) => {
|
||||
const { alarms } = this.state;
|
||||
const idx = alarms.findIndex(a => a.id === id);
|
||||
if (idx === -1) return;
|
||||
if (direction === 'up' && idx === 0) return;
|
||||
@@ -189,117 +159,124 @@ export default function AlarmManager() {
|
||||
const newAlarms = [...alarms];
|
||||
const swapIdx = direction === 'up' ? idx - 1 : idx + 1;
|
||||
[newAlarms[idx], newAlarms[swapIdx]] = [newAlarms[swapIdx], newAlarms[idx]];
|
||||
setAlarms(newAlarms);
|
||||
this.setState({ alarms: newAlarms });
|
||||
|
||||
try {
|
||||
await fetch('api/alarms/reorder', {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ alarmIds: newAlarms.map(a => a.id) })
|
||||
});
|
||||
} catch (err) {
|
||||
setError('Failed to save order');
|
||||
this.setState({ error: 'Failed to save order' });
|
||||
}
|
||||
};
|
||||
|
||||
const filteredAlarms = filterTag
|
||||
? alarms.filter(a => (a.colorTags || []).includes(filterTag))
|
||||
: alarms;
|
||||
render() {
|
||||
const { auth: { isAdmin }, i18n: { t }, devicesCtx: { getAvailableSensors, getAvailableOutputs } } = this.props;
|
||||
const { alarms, loading, error, editorOpen, editingAlarm, saving, filterTag } = this.state;
|
||||
|
||||
if (loading) {
|
||||
return <Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}><CircularProgress /></Paper>;
|
||||
}
|
||||
const filteredAlarms = filterTag
|
||||
? alarms.filter(a => (a.colorTags || []).includes(filterTag))
|
||||
: alarms;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
mt: 4, ml: 4, mb: 4,
|
||||
p: 3,
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)', // Distinct background? Or same?
|
||||
border: '1px solid #504945'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
🚨 {t('alarms.title') || 'Alarms'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{isAdmin ? 'Manage system alarms and notifications.' : 'View active system alarms.'}
|
||||
</Typography>
|
||||
if (loading) {
|
||||
return <Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}><CircularProgress /></Paper>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
mt: 4, ml: 4, mb: 4,
|
||||
p: 3,
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)',
|
||||
border: '1px solid #504945'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
🚨 {t('alarms.title') || 'Alarms'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{isAdmin ? 'Manage system alarms and notifications.' : 'View active system alarms.'}
|
||||
</Typography>
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={this.handleAddAlarm}
|
||||
disabled={saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)',
|
||||
'&:hover': { background: 'linear-gradient(45deg, #e396a5 30%, #ff9029 90%)' }
|
||||
}}
|
||||
>
|
||||
Add Alarm
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleAddAlarm}
|
||||
disabled={saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)',
|
||||
'&:hover': { background: 'linear-gradient(45deg, #e396a5 30%, #ff9029 90%)' }
|
||||
}}
|
||||
>
|
||||
Add Alarm
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>Filter:</Typography>
|
||||
<Chip
|
||||
label="All" size="small" onClick={() => setFilterTag(null)}
|
||||
sx={{ bgcolor: filterTag === null ? '#ebdbb2' : '#504945', color: filterTag === null ? '#282828' : '#ebdbb2' }}
|
||||
/>
|
||||
{COLOR_TAGS.map(tag => (
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>Filter:</Typography>
|
||||
<Chip
|
||||
key={tag.id} size="small" onClick={() => setFilterTag(filterTag === tag.id ? null : tag.id)}
|
||||
sx={{
|
||||
bgcolor: filterTag === tag.id ? tag.color : '#504945',
|
||||
color: filterTag === tag.id ? '#282828' : tag.color,
|
||||
border: `2px solid ${tag.color}`,
|
||||
'&:hover': { bgcolor: tag.color, color: '#282828' }
|
||||
}}
|
||||
label="All" size="small" onClick={() => this.setState({ filterTag: null })}
|
||||
sx={{ bgcolor: filterTag === null ? '#ebdbb2' : '#504945', color: filterTag === null ? '#282828' : '#ebdbb2' }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>{error}</Alert>}
|
||||
|
||||
{filteredAlarms.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">No alarms found.</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{filteredAlarms.map((alarm, idx) => (
|
||||
<AlarmCard
|
||||
key={alarm.id}
|
||||
alarm={alarm}
|
||||
onEdit={isAdmin ? () => handleEditAlarm(alarm) : null}
|
||||
onDelete={isAdmin ? () => handleDeleteAlarm(alarm.id) : null}
|
||||
onToggle={isAdmin ? () => handleToggleAlarm(alarm.id) : null}
|
||||
onMoveUp={isAdmin && idx > 0 ? () => handleMoveAlarm(alarm.id, 'up') : null}
|
||||
onMoveDown={isAdmin && idx < filteredAlarms.length - 1 ? () => handleMoveAlarm(alarm.id, 'down') : null}
|
||||
colorTags={COLOR_TAGS}
|
||||
readOnly={!isAdmin}
|
||||
{COLOR_TAGS.map(tag => (
|
||||
<Chip
|
||||
key={tag.id} size="small" onClick={() => this.setState({ filterTag: filterTag === tag.id ? null : tag.id })}
|
||||
sx={{
|
||||
bgcolor: filterTag === tag.id ? tag.color : '#504945',
|
||||
color: filterTag === tag.id ? '#282828' : tag.color,
|
||||
border: `2px solid ${tag.color}`,
|
||||
'&:hover': { bgcolor: tag.color, color: '#282828' }
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<AlarmEditor
|
||||
open={editorOpen}
|
||||
alarm={editingAlarm}
|
||||
onSave={handleSaveAlarm}
|
||||
onClose={() => { setEditorOpen(false); setEditingAlarm(null); }}
|
||||
sensors={availableSensors}
|
||||
outputs={availableOutputs}
|
||||
colorTags={COLOR_TAGS}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
{error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => this.setState({ error: null })}>{error}</Alert>}
|
||||
|
||||
{filteredAlarms.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">No alarms found.</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{filteredAlarms.map((alarm, idx) => (
|
||||
<AlarmCard
|
||||
key={alarm.id}
|
||||
alarm={alarm}
|
||||
onEdit={isAdmin ? () => this.handleEditAlarm(alarm) : null}
|
||||
onDelete={isAdmin ? () => this.handleDeleteAlarm(alarm.id) : null}
|
||||
onToggle={isAdmin ? () => this.handleToggleAlarm(alarm.id) : null}
|
||||
onMoveUp={isAdmin && idx > 0 ? () => this.handleMoveAlarm(alarm.id, 'up') : null}
|
||||
onMoveDown={isAdmin && idx < filteredAlarms.length - 1 ? () => this.handleMoveAlarm(alarm.id, 'down') : null}
|
||||
colorTags={COLOR_TAGS}
|
||||
readOnly={!isAdmin}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<AlarmEditor
|
||||
open={editorOpen}
|
||||
alarm={editingAlarm}
|
||||
onSave={this.handleSaveAlarm}
|
||||
onClose={() => { this.setState({ editorOpen: false, editingAlarm: null }); }}
|
||||
sensors={getAvailableSensors()}
|
||||
outputs={getAvailableOutputs()}
|
||||
colorTags={COLOR_TAGS}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withDevices(withAuth(withI18n(AlarmManager)));
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box, Button, Chip } from '@mui/material';
|
||||
import Dashboard from './Dashboard';
|
||||
import RuleManager from './RuleManager';
|
||||
import AlarmManager from './AlarmManager';
|
||||
import LoginDialog from './LoginDialog';
|
||||
import ProfileDialog from './ProfileDialog';
|
||||
import { AuthProvider, useAuth } from './AuthContext';
|
||||
import { I18nProvider, useI18n } from './I18nContext';
|
||||
import { AuthProvider, withAuth } from './AuthContext';
|
||||
import { I18nProvider, withI18n } from './I18nContext';
|
||||
import { DevicesProvider } from './DevicesContext';
|
||||
import LanguageSwitcher from './LanguageSwitcher';
|
||||
|
||||
// Gruvbox Dark color palette
|
||||
@@ -46,107 +47,121 @@ const darkTheme = createTheme({
|
||||
},
|
||||
});
|
||||
|
||||
function AppContent() {
|
||||
const { user, loading, login, logout, isAuthenticated, isAdmin } = useAuth();
|
||||
const { t } = useI18n();
|
||||
const [showLogin, setShowLogin] = useState(false);
|
||||
const [showProfile, setShowProfile] = useState(false);
|
||||
class AppContent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showLogin: false,
|
||||
showProfile: false
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
{t('app.title')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<LanguageSwitcher />
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Chip
|
||||
label={user.username}
|
||||
onClick={() => setShowProfile(true)}
|
||||
color={isAdmin ? 'secondary' : 'default'}
|
||||
size="small"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
'&:hover': { opacity: 0.8 },
|
||||
...(isAdmin && {
|
||||
background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{isAdmin && (
|
||||
render() {
|
||||
const { auth: { user, logout, isAuthenticated, isAdmin }, i18n: { t } } = this.props;
|
||||
const { showLogin, showProfile } = this.state;
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
{t('app.title')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<LanguageSwitcher />
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Chip
|
||||
label={t('app.admin')}
|
||||
label={user.username}
|
||||
onClick={() => this.setState({ showProfile: true })}
|
||||
color={isAdmin ? 'secondary' : 'default'}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: gruvboxDark.purple,
|
||||
color: gruvboxDark.bg0,
|
||||
fontWeight: 700
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
'&:hover': { opacity: 0.8 },
|
||||
...(isAdmin && {
|
||||
background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Chip
|
||||
label={t('app.admin')}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: gruvboxDark.purple,
|
||||
color: gruvboxDark.bg0,
|
||||
fontWeight: 700
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={logout}
|
||||
size="small"
|
||||
>
|
||||
{t('app.logout')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={logout}
|
||||
onClick={() => this.setState({ showLogin: true })}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
sx={{ borderColor: gruvboxDark.aqua }}
|
||||
>
|
||||
{t('app.logout')}
|
||||
{t('app.adminLogin')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={() => setShowLogin(true)}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
sx={{ borderColor: gruvboxDark.aqua }}
|
||||
>
|
||||
{t('app.adminLogin')}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
|
||||
{/* Dashboard is always visible to everyone */}
|
||||
<Dashboard />
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
|
||||
{/* Dashboard is always visible to everyone */}
|
||||
<Dashboard />
|
||||
|
||||
{/* Rule Manager visible to everyone (guests read-only, admins can edit) */}
|
||||
<RuleManager />
|
||||
{/* Rule Manager visible to everyone (guests read-only, admins can edit) */}
|
||||
<RuleManager />
|
||||
|
||||
{/* Alarm Manager visible to everyone (guests read-only, admins can edit) */}
|
||||
<AlarmManager />
|
||||
</Container>
|
||||
{/* Alarm Manager visible to everyone (guests read-only, admins can edit) */}
|
||||
<AlarmManager />
|
||||
</Container>
|
||||
|
||||
{/* Login dialog - shown on demand */}
|
||||
<LoginDialog
|
||||
open={showLogin}
|
||||
onClose={() => setShowLogin(false)}
|
||||
/>
|
||||
{/* Login dialog - shown on demand */}
|
||||
<LoginDialog
|
||||
open={showLogin}
|
||||
onClose={() => this.setState({ showLogin: false })}
|
||||
/>
|
||||
|
||||
{/* Profile dialog */}
|
||||
<ProfileDialog
|
||||
open={showProfile}
|
||||
onClose={() => setShowProfile(false)}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
{/* Profile dialog */}
|
||||
<ProfileDialog
|
||||
open={showProfile}
|
||||
onClose={() => this.setState({ showProfile: false })}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<CssBaseline />
|
||||
<I18nProvider>
|
||||
<AuthProvider>
|
||||
<AppContent />
|
||||
</AuthProvider>
|
||||
</I18nProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
const WrappedAppContent = withAuth(withI18n(AppContent));
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<CssBaseline />
|
||||
<I18nProvider>
|
||||
<AuthProvider>
|
||||
<DevicesProvider>
|
||||
<WrappedAppContent />
|
||||
</DevicesProvider>
|
||||
</AuthProvider>
|
||||
</I18nProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -77,3 +77,11 @@ export function useAuth() {
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
// HOC for class components
|
||||
export function withAuth(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const auth = useAuth();
|
||||
return <Component {...props} auth={auth} />;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,15 +1,39 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Card, CardHeader, CardContent, Divider, Grid, Box, Typography } from '@mui/material';
|
||||
import EnvChart from './EnvChart';
|
||||
import LevelChart from './LevelChart';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
export default function ControllerCard({ controllerName, ports, range }) {
|
||||
const { t } = useI18n();
|
||||
const [envData, setEnvData] = useState([]);
|
||||
const [portData, setPortData] = useState({});
|
||||
class ControllerCard extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
envData: [],
|
||||
portData: {}
|
||||
};
|
||||
this.interval = null;
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
this.interval = setInterval(() => this.fetchData(), 60000);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.controllerName !== this.props.controllerName ||
|
||||
prevProps.range !== this.props.range) {
|
||||
this.fetchData();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData = async () => {
|
||||
const { controllerName, ports, range } = this.props;
|
||||
try {
|
||||
if (ports.length === 0) return;
|
||||
|
||||
@@ -27,12 +51,12 @@ export default function ControllerCard({ controllerName, ports, range }) {
|
||||
newPortData[item.port] = item.data;
|
||||
});
|
||||
|
||||
setPortData(newPortData);
|
||||
this.setState({ portData: newPortData });
|
||||
|
||||
// Use the data from the first port for the Environment Chart
|
||||
// This avoids a redundant network request
|
||||
if (results.length > 0) {
|
||||
setEnvData(results[0].data);
|
||||
this.setState({ envData: results[0].data });
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
@@ -40,55 +64,55 @@ export default function ControllerCard({ controllerName, ports, range }) {
|
||||
}
|
||||
};
|
||||
|
||||
// Initial Fetch & Auto-Refresh
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, [controllerName, range]); // Depend on range, controllerName changes rarely
|
||||
render() {
|
||||
const { controllerName, ports, range, i18n: { t } } = this.props;
|
||||
const { envData, portData } = this.state;
|
||||
|
||||
return (
|
||||
<Card sx={{ mb: 4, borderRadius: 2, boxShadow: 3 }}>
|
||||
<CardHeader
|
||||
title={controllerName}
|
||||
titleTypographyProps={{ variant: 'h5', fontWeight: 'bold', color: 'primary.main' }}
|
||||
sx={{ bgcolor: 'background.paper', borderLeft: '6px solid', borderLeftColor: 'primary.main' }}
|
||||
/>
|
||||
<CardContent>
|
||||
{/* Environment Chart */}
|
||||
<Box sx={{ height: 350, mb: 6 }}>
|
||||
<Typography variant="h6" color="text.secondary" gutterBottom>
|
||||
{t('controller.environment')}
|
||||
</Typography>
|
||||
<EnvChart data={envData} range={range} />
|
||||
</Box>
|
||||
return (
|
||||
<Card sx={{ mb: 4, borderRadius: 2, boxShadow: 3 }}>
|
||||
<CardHeader
|
||||
title={controllerName}
|
||||
titleTypographyProps={{ variant: 'h5', fontWeight: 'bold', color: 'primary.main' }}
|
||||
sx={{ bgcolor: 'background.paper', borderLeft: '6px solid', borderLeftColor: 'primary.main' }}
|
||||
/>
|
||||
<CardContent>
|
||||
{/* Environment Chart */}
|
||||
<Box sx={{ height: 350, mb: 6 }}>
|
||||
<Typography variant="h6" color="text.secondary" gutterBottom>
|
||||
{t('controller.environment')}
|
||||
</Typography>
|
||||
<EnvChart data={envData} range={range} />
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mt: 2, mb: 3 }} />
|
||||
<Divider sx={{ mt: 2, mb: 3 }} />
|
||||
|
||||
{/* Port Grid */}
|
||||
<Grid container spacing={3}>
|
||||
{ports.map((port) => {
|
||||
const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
|
||||
const isCO2 = port.port_name && port.port_name.toLowerCase().includes('co2');
|
||||
const pData = portData[port.port] || [];
|
||||
{/* Port Grid */}
|
||||
<Grid container spacing={3}>
|
||||
{ports.map((port) => {
|
||||
const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
|
||||
const isCO2 = port.port_name && port.port_name.toLowerCase().includes('co2');
|
||||
const pData = portData[port.port] || [];
|
||||
|
||||
return (
|
||||
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={port.port}>
|
||||
<Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{port.port_name || `${t('controller.port')} ${port.port}`}
|
||||
</Typography>
|
||||
<Box sx={{ height: 250 }}>
|
||||
<LevelChart data={pData} isLight={isLight} isCO2={isCO2} range={range} />
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={port.port}>
|
||||
<Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{port.port_name || `${t('controller.port')} ${port.port}`}
|
||||
</Typography>
|
||||
<Box sx={{ height: 250 }}>
|
||||
<LevelChart data={pData} isLight={isLight} isCO2={isCO2} range={range} />
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n(ControllerCard);
|
||||
|
||||
@@ -1,92 +1,67 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Grid, Typography, Button, ButtonGroup, Box, Alert } from '@mui/material';
|
||||
import ControllerCard from './ControllerCard';
|
||||
import OutputChart from './OutputChart';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
import { withDevices } from './DevicesContext';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { t } = useI18n();
|
||||
const [groupedDevices, setGroupedDevices] = useState({});
|
||||
const [allDevices, setAllDevices] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [range, setRange] = useState('day'); // 'day', 'week', 'month'
|
||||
class Dashboard extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
range: 'day' // 'day', 'week', 'month'
|
||||
};
|
||||
}
|
||||
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
// Robust API Base detection
|
||||
const baseUrl = window.location.pathname.endsWith('/') ? 'api/' : 'api/';
|
||||
// Actually, since we are serving from root or subpath, relative 'api/' is tricky if URL depth changes.
|
||||
// Better to use a relative path that works from the page root.
|
||||
// If page is /ac-dashboard/, fetch is /ac-dashboard/api/devices.
|
||||
setRange = (range) => {
|
||||
this.setState({ range });
|
||||
};
|
||||
|
||||
const res = await fetch('api/devices');
|
||||
if (!res.ok) throw new Error('Failed to fetch devices');
|
||||
render() {
|
||||
const { i18n: { t }, devicesCtx: { devices, groupedDevices, loading, error } } = this.props;
|
||||
const { range } = this.state;
|
||||
|
||||
const devices = await res.json();
|
||||
if (loading) return <Typography>{t('dashboard.loading')}</Typography>;
|
||||
if (error) return <Alert severity="error">{error}</Alert>;
|
||||
|
||||
// Group by dev_name
|
||||
const grouped = devices.reduce((acc, dev) => {
|
||||
if (!acc[dev.dev_name]) acc[dev.dev_name] = [];
|
||||
acc[dev.dev_name].push(dev);
|
||||
return acc;
|
||||
}, {});
|
||||
return (
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="flex-end" mb={3}>
|
||||
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
||||
<Button
|
||||
onClick={() => this.setRange('day')}
|
||||
color={range === 'day' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.hours24')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => this.setRange('week')}
|
||||
color={range === 'week' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.days7')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => this.setRange('month')}
|
||||
color={range === 'month' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.days30')}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
|
||||
setGroupedDevices(grouped);
|
||||
setAllDevices(devices);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
{Object.entries(groupedDevices).map(([controllerName, ports]) => (
|
||||
<ControllerCard
|
||||
key={controllerName}
|
||||
controllerName={controllerName}
|
||||
ports={ports}
|
||||
range={range}
|
||||
/>
|
||||
))}
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices();
|
||||
}, [fetchDevices]);
|
||||
|
||||
// Auto-refresh logic (basic rerender trigger could be added here,
|
||||
// but simpler to let ControllerCard handle data fetching internally based on props)
|
||||
|
||||
if (loading) return <Typography>{t('dashboard.loading')}</Typography>;
|
||||
if (error) return <Alert severity="error">{error}</Alert>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="flex-end" mb={3}>
|
||||
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
||||
<Button
|
||||
onClick={() => setRange('day')}
|
||||
color={range === 'day' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.hours24')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setRange('week')}
|
||||
color={range === 'week' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.days7')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setRange('month')}
|
||||
color={range === 'month' ? 'primary' : 'inherit'}
|
||||
>
|
||||
{t('dashboard.days30')}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<OutputChart range={range} devices={devices} />
|
||||
</Box>
|
||||
|
||||
{Object.entries(groupedDevices).map(([controllerName, ports]) => (
|
||||
<ControllerCard
|
||||
key={controllerName}
|
||||
controllerName={controllerName}
|
||||
ports={ports}
|
||||
range={range}
|
||||
/>
|
||||
))}
|
||||
|
||||
<OutputChart range={range} devices={allDevices} />
|
||||
</Box>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withDevices(withI18n(Dashboard));
|
||||
|
||||
135
src/client/DevicesContext.js
Normal file
135
src/client/DevicesContext.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import React, { Component, createContext, useContext } from 'react';
|
||||
|
||||
const DevicesContext = createContext(null);
|
||||
|
||||
export class DevicesProvider extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
devices: [],
|
||||
groupedDevices: {},
|
||||
loading: true,
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchDevices();
|
||||
}
|
||||
|
||||
fetchDevices = async () => {
|
||||
try {
|
||||
const res = await fetch('api/devices');
|
||||
if (!res.ok) throw new Error('Failed to fetch devices');
|
||||
|
||||
const devices = await res.json();
|
||||
|
||||
// Group by dev_name
|
||||
const grouped = devices.reduce((acc, dev) => {
|
||||
if (!acc[dev.dev_name]) acc[dev.dev_name] = [];
|
||||
acc[dev.dev_name].push(dev);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
this.setState({
|
||||
devices,
|
||||
groupedDevices: grouped,
|
||||
loading: false,
|
||||
error: null
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch devices:', err);
|
||||
this.setState({
|
||||
error: err.message,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Build available sensors from devices
|
||||
getAvailableSensors = () => {
|
||||
const { devices } = this.state;
|
||||
const availableSensors = [];
|
||||
const seenDevices = new Set();
|
||||
|
||||
devices.forEach(d => {
|
||||
if (!seenDevices.has(d.dev_name)) {
|
||||
seenDevices.add(d.dev_name);
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:temp`,
|
||||
label: `${d.dev_name} - Temperature`,
|
||||
type: 'temperature'
|
||||
});
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:humidity`,
|
||||
label: `${d.dev_name} - Humidity`,
|
||||
type: 'humidity'
|
||||
});
|
||||
}
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:${d.port}:level`,
|
||||
label: `${d.dev_name} - ${d.port_name} Level`,
|
||||
type: d.port_name.toLowerCase()
|
||||
});
|
||||
});
|
||||
|
||||
return availableSensors;
|
||||
};
|
||||
|
||||
// Build available outputs from devices
|
||||
getAvailableOutputs = () => {
|
||||
const { devices } = this.state;
|
||||
return [
|
||||
{ id: 'tapo-001', label: 'Tapo 001', type: 'plug' },
|
||||
{ id: 'tapo-002', label: 'Tapo 002', type: 'plug' },
|
||||
{ id: 'tapo-003', label: 'Tapo 003', type: 'plug' },
|
||||
{ id: 'tapo-004', label: 'Tapo 004', type: 'plug' },
|
||||
{ id: 'tapo-005', label: 'Tapo 005', type: 'plug' },
|
||||
...devices.map(d => ({
|
||||
id: `${d.dev_name}:${d.port}:out`,
|
||||
label: `${d.dev_name} - ${d.port_name}`,
|
||||
type: d.port_name.toLowerCase()
|
||||
})),
|
||||
{ id: 'virtual-1', label: 'Virtual Channel 1', type: 'virtual' },
|
||||
{ id: 'virtual-2', label: 'Virtual Channel 2', type: 'virtual' },
|
||||
{ id: 'virtual-3', label: 'Virtual Channel 3', type: 'virtual' },
|
||||
{ id: 'virtual-4', label: 'Virtual Channel 4', type: 'virtual' }
|
||||
];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { devices, groupedDevices, loading, error } = this.state;
|
||||
|
||||
const value = {
|
||||
devices,
|
||||
groupedDevices,
|
||||
loading,
|
||||
error,
|
||||
refreshDevices: this.fetchDevices,
|
||||
getAvailableSensors: this.getAvailableSensors,
|
||||
getAvailableOutputs: this.getAvailableOutputs
|
||||
};
|
||||
|
||||
return (
|
||||
<DevicesContext.Provider value={value}>
|
||||
{this.props.children}
|
||||
</DevicesContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function useDevices() {
|
||||
const context = useContext(DevicesContext);
|
||||
if (!context) {
|
||||
throw new Error('useDevices must be used within a DevicesProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
// HOC for class components
|
||||
export function withDevices(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const devices = useDevices();
|
||||
return <Component {...props} devicesCtx={devices} />;
|
||||
};
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
@@ -21,10 +21,9 @@ ChartJS.register(
|
||||
Legend
|
||||
);
|
||||
|
||||
export default function EnvChart({ data, range }) {
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
const formatDateLabel = (timestamp) => {
|
||||
class EnvChart extends Component {
|
||||
formatDateLabel = (timestamp) => {
|
||||
const { range } = this.props;
|
||||
const date = new Date(timestamp);
|
||||
if (range === 'day') {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
@@ -34,65 +33,73 @@ export default function EnvChart({ data, range }) {
|
||||
}
|
||||
};
|
||||
|
||||
const chartData = {
|
||||
labels: data.map(d => formatDateLabel(d.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperature (°C)',
|
||||
data: data.map(d => d.temp_c),
|
||||
borderColor: '#ff6384',
|
||||
backgroundColor: '#ff6384',
|
||||
yAxisID: 'y',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'Humidity (%)',
|
||||
data: data.map(d => d.humidity),
|
||||
borderColor: '#36a2eb',
|
||||
backgroundColor: '#36a2eb',
|
||||
yAxisID: 'y1',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
},
|
||||
],
|
||||
};
|
||||
render() {
|
||||
const { data } = this.props;
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 12
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: { display: true, text: 'Temp (°C)' },
|
||||
suggestedMin: 15,
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: { drawOnChartArea: false },
|
||||
title: { display: true, text: 'Humidity (%)' },
|
||||
suggestedMin: 30,
|
||||
suggestedMax: 80,
|
||||
},
|
||||
},
|
||||
};
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
return <Line data={chartData} options={options} />;
|
||||
const chartData = {
|
||||
labels: data.map(d => this.formatDateLabel(d.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperature (°C)',
|
||||
data: data.map(d => d.temp_c),
|
||||
borderColor: '#ff6384',
|
||||
backgroundColor: '#ff6384',
|
||||
yAxisID: 'y',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'Humidity (%)',
|
||||
data: data.map(d => d.humidity),
|
||||
borderColor: '#36a2eb',
|
||||
backgroundColor: '#36a2eb',
|
||||
yAxisID: 'y1',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 12
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: { display: true, text: 'Temp (°C)' },
|
||||
suggestedMin: 15,
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: { drawOnChartArea: false },
|
||||
title: { display: true, text: 'Humidity (%)' },
|
||||
suggestedMin: 30,
|
||||
suggestedMax: 80,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return <Line data={chartData} options={options} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default EnvChart;
|
||||
|
||||
@@ -80,3 +80,11 @@ export function useI18n() {
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
// HOC for class components
|
||||
export function withI18n(Component) {
|
||||
return function WrappedComponent(props) {
|
||||
const i18n = useI18n();
|
||||
return <Component {...props} i18n={i18n} />;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,42 +1,46 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Box, IconButton, Tooltip } from '@mui/material';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
// Flag emojis for language switching
|
||||
const FLAG_DE = '🇩🇪';
|
||||
const FLAG_EN = '🇬🇧';
|
||||
|
||||
export default function LanguageSwitcher() {
|
||||
const { language, setLanguage } = useI18n();
|
||||
class LanguageSwitcher extends Component {
|
||||
render() {
|
||||
const { i18n: { language, setLanguage } } = this.props;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title="English">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setLanguage('en')}
|
||||
sx={{
|
||||
opacity: language === 'en' ? 1 : 0.5,
|
||||
fontSize: '1.2rem',
|
||||
'&:hover': { opacity: 1 }
|
||||
}}
|
||||
>
|
||||
{FLAG_EN}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Deutsch">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setLanguage('de')}
|
||||
sx={{
|
||||
opacity: language === 'de' ? 1 : 0.5,
|
||||
fontSize: '1.2rem',
|
||||
'&:hover': { opacity: 1 }
|
||||
}}
|
||||
>
|
||||
{FLAG_DE}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title="English">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setLanguage('en')}
|
||||
sx={{
|
||||
opacity: language === 'en' ? 1 : 0.5,
|
||||
fontSize: '1.2rem',
|
||||
'&:hover': { opacity: 1 }
|
||||
}}
|
||||
>
|
||||
{FLAG_EN}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Deutsch">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setLanguage('de')}
|
||||
sx={{
|
||||
opacity: language === 'de' ? 1 : 0.5,
|
||||
fontSize: '1.2rem',
|
||||
'&:hover': { opacity: 1 }
|
||||
}}
|
||||
>
|
||||
{FLAG_DE}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n(LanguageSwitcher);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
@@ -21,10 +21,9 @@ ChartJS.register(
|
||||
Legend
|
||||
);
|
||||
|
||||
export default function LevelChart({ data, isLight, isCO2, range }) {
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
const formatDateLabel = (timestamp) => {
|
||||
class LevelChart extends Component {
|
||||
formatDateLabel = (timestamp) => {
|
||||
const { range } = this.props;
|
||||
const date = new Date(timestamp);
|
||||
if (range === 'day') {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
@@ -34,49 +33,57 @@ export default function LevelChart({ data, isLight, isCO2, range }) {
|
||||
}
|
||||
};
|
||||
|
||||
// Determine label and color based on sensor type
|
||||
const levelLabel = isCO2 ? 'CO2 (ppm)' : (isLight ? 'Brightness' : 'Fan Speed');
|
||||
const levelColor = isCO2 ? '#4caf50' : (isLight ? '#ffcd56' : '#9966ff');
|
||||
render() {
|
||||
const { data, isLight, isCO2 } = this.props;
|
||||
|
||||
const chartData = {
|
||||
labels: data.map(d => formatDateLabel(d.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: levelLabel,
|
||||
data: data.map(d => d.fan_speed),
|
||||
borderColor: levelColor,
|
||||
backgroundColor: levelColor,
|
||||
stepped: !isCO2, // CO2 uses smooth lines
|
||||
tension: isCO2 ? 0.4 : 0, // Smooth for CO2, stepped for others
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
// Determine label and color based on sensor type
|
||||
const levelLabel = isCO2 ? 'CO2 (ppm)' : (isLight ? 'Brightness' : 'Fan Speed');
|
||||
const levelColor = isCO2 ? '#4caf50' : (isLight ? '#ffcd56' : '#9966ff');
|
||||
|
||||
const chartData = {
|
||||
labels: data.map(d => this.formatDateLabel(d.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: levelLabel,
|
||||
data: data.map(d => d.fan_speed),
|
||||
borderColor: levelColor,
|
||||
backgroundColor: levelColor,
|
||||
stepped: !isCO2, // CO2 uses smooth lines
|
||||
tension: isCO2 ? 0.4 : 0, // Smooth for CO2, stepped for others
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// CO2 needs different Y-axis scale (ppm range)
|
||||
const yScale = isCO2
|
||||
? { suggestedMin: 200, suggestedMax: 900 }
|
||||
: { suggestedMin: 0, suggestedMax: 10, ticks: { stepSize: 1 } };
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// CO2 needs different Y-axis scale (ppm range)
|
||||
const yScale = isCO2
|
||||
? { suggestedMin: 200, suggestedMax: 900 }
|
||||
: { suggestedMin: 0, suggestedMax: 10, ticks: { stepSize: 1 } };
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 8
|
||||
}
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 8
|
||||
}
|
||||
},
|
||||
y: yScale
|
||||
},
|
||||
y: yScale
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
return <Line data={chartData} options={options} />;
|
||||
return <Line data={chartData} options={options} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default LevelChart;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -13,140 +13,152 @@ import {
|
||||
IconButton,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withAuth } from './AuthContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
// Simple eye icons using unicode
|
||||
const VisibilityIcon = () => <span style={{ fontSize: '1.2rem' }}>👁</span>;
|
||||
const VisibilityOffIcon = () => <span style={{ fontSize: '1.2rem' }}>👁🗨</span>;
|
||||
|
||||
export default function LoginDialog({ open, onClose }) {
|
||||
const { login } = useAuth();
|
||||
const { t } = useI18n();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
class LoginDialog extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
username: '',
|
||||
password: '',
|
||||
showPassword: false,
|
||||
error: '',
|
||||
loading: false
|
||||
};
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
const { auth: { login }, onClose } = this.props;
|
||||
const { username, password } = this.state;
|
||||
|
||||
this.setState({ error: '', loading: true });
|
||||
|
||||
try {
|
||||
await login(username, password);
|
||||
// Success - close dialog and reset form
|
||||
setUsername('');
|
||||
setPassword('');
|
||||
this.setState({ username: '', password: '' });
|
||||
if (onClose) onClose();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
this.setState({ error: err.message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setError('');
|
||||
handleClose = () => {
|
||||
const { onClose } = this.props;
|
||||
this.setState({ error: '' });
|
||||
if (onClose) onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #282828 100%)',
|
||||
borderRadius: 3,
|
||||
border: '1px solid #504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ textAlign: 'center', pb: 1 }}>
|
||||
<Typography variant="h5" component="div" sx={{ fontWeight: 600 }}>
|
||||
{t('login.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||||
{t('login.subtitle')}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
render() {
|
||||
const { open, i18n: { t } } = this.props;
|
||||
const { username, password, showPassword, error, loading } = this.state;
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogContent>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={this.handleClose}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #282828 100%)',
|
||||
borderRadius: 3,
|
||||
border: '1px solid #504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ textAlign: 'center', pb: 1 }}>
|
||||
<Typography variant="h5" component="div" sx={{ fontWeight: 600 }}>
|
||||
{t('login.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||||
{t('login.subtitle')}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
label={t('login.username')}
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
disabled={loading}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
margin="dense"
|
||||
label={t('login.password')}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
edge="end"
|
||||
size="small"
|
||||
>
|
||||
{showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 3 }}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="large"
|
||||
disabled={loading || !username || !password}
|
||||
sx={{
|
||||
py: 1.5,
|
||||
background: 'linear-gradient(45deg, #8ec07c 30%, #b8bb26 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #98c98a 30%, #c5c836 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CircularProgress size={20} color="inherit" />
|
||||
<span>{t('login.signingIn')}</span>
|
||||
</Box>
|
||||
) : (
|
||||
t('login.signIn')
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<DialogContent>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
label={t('login.username')}
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={username}
|
||||
onChange={(e) => this.setState({ username: e.target.value })}
|
||||
disabled={loading}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
margin="dense"
|
||||
label={t('login.password')}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={password}
|
||||
onChange={(e) => this.setState({ password: e.target.value })}
|
||||
disabled={loading}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => this.setState({ showPassword: !showPassword })}
|
||||
edge="end"
|
||||
size="small"
|
||||
>
|
||||
{showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 3 }}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="large"
|
||||
disabled={loading || !username || !password}
|
||||
sx={{
|
||||
py: 1.5,
|
||||
background: 'linear-gradient(45deg, #8ec07c 30%, #b8bb26 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #98c98a 30%, #c5c836 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CircularProgress size={20} color="inherit" />
|
||||
<span>{t('login.signingIn')}</span>
|
||||
</Box>
|
||||
) : (
|
||||
t('login.signIn')
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withAuth(withI18n(LoginDialog));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
} from 'chart.js';
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import { Box, Paper, CircularProgress } from '@mui/material';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
@@ -23,186 +23,210 @@ ChartJS.register(
|
||||
Legend
|
||||
);
|
||||
|
||||
export default function OutputChart({ range, devices = [] }) {
|
||||
const { t } = useI18n();
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await fetch('api/outputs/history');
|
||||
const logs = await res.json();
|
||||
setData(logs);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch output history', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
class OutputChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: [],
|
||||
loading: true
|
||||
};
|
||||
fetchData();
|
||||
this.interval = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
// Poll for updates every minute
|
||||
const interval = setInterval(fetchData, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
this.interval = setInterval(() => this.fetchData(), 60000);
|
||||
}
|
||||
|
||||
if (loading) return <CircularProgress size={20} />;
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
// Group data by "Device:Port"
|
||||
const groupedData = {};
|
||||
data.forEach(log => {
|
||||
const key = `${log.dev_name}:${log.port}`;
|
||||
if (!groupedData[key]) groupedData[key] = [];
|
||||
groupedData[key].push(log);
|
||||
});
|
||||
|
||||
// Gruvbox Palette
|
||||
const gruvboxColors = ['#fb4934', '#b8bb26', '#fabd2f', '#83a598', '#d3869b', '#8ec07c', '#fe8019', '#928374'];
|
||||
|
||||
// Generate datasets
|
||||
const datasets = Object.keys(groupedData).map((key, index) => {
|
||||
const logs = groupedData[key];
|
||||
const color = gruvboxColors[index % gruvboxColors.length];
|
||||
|
||||
// Resolve Label
|
||||
let label = key;
|
||||
const isTapo = key.includes('tapo') || key.includes('Plug'); // Simple check
|
||||
|
||||
if (devices && devices.length > 0) {
|
||||
const [dName, pNum] = key.split(':');
|
||||
const portNum = parseInt(pNum);
|
||||
const device = devices.find(d => d.dev_name === dName && d.port === portNum);
|
||||
if (device) {
|
||||
label = `${device.dev_name} - ${device.port_name}`;
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.range !== this.props.range) {
|
||||
this.fetchData();
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback friendly name for Tapo if not found in devices list (which comes from readings)
|
||||
// Check if key looks like "tapo-xxx:0"
|
||||
if (label === key && key.startsWith('tapo-')) {
|
||||
// "tapo-001:0" -> "Tapo Plug 001"
|
||||
const parts2 = key.split(':');
|
||||
const tapoId = parts2[0].replace('tapo-', '');
|
||||
label = `Tapo Plug ${tapoId}`;
|
||||
componentWillUnmount() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
label: label,
|
||||
data: logs.map(d => ({
|
||||
x: new Date(d.timestamp).getTime(),
|
||||
y: d.state === 0 ? 0 : (d.level || 10)
|
||||
})),
|
||||
borderColor: color,
|
||||
backgroundColor: color,
|
||||
stepped: true,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
// Custom property to identify binary devices in tooltip
|
||||
isBinary: isTapo
|
||||
};
|
||||
});
|
||||
|
||||
// Create a time axis based on the data range
|
||||
const allTimestamps = [...new Set(data.map(d => d.timestamp))].sort();
|
||||
|
||||
// We need to normalize data to these timestamps for "Line" chart
|
||||
const chartLabels = allTimestamps.map(ts => {
|
||||
const date = new Date(ts);
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
});
|
||||
|
||||
// We need to map *each* dataset's data to align with `chartLabels`.
|
||||
const alignedDatasets = datasets.map((ds, index) => {
|
||||
const alignedData = [];
|
||||
let lastValue = 0; // Default off
|
||||
const offset = index * 0.15; // Small offset to avoid overlap
|
||||
|
||||
// Populate alignedData matching `allTimestamps`
|
||||
allTimestamps.forEach(ts => {
|
||||
// Find if we have a log at this specific timestamp
|
||||
const timeMs = new Date(ts).getTime();
|
||||
const exactLog = ds.data.find(d => Math.abs(d.x - timeMs) < 1000); // 1s tolerance
|
||||
|
||||
if (exactLog) {
|
||||
lastValue = exactLog.y;
|
||||
}
|
||||
// Apply offset to the value for visualization
|
||||
// If value is 0 (OFF), we might still want to offset it?
|
||||
// Or only if ON? The user said "levels are on top of each other".
|
||||
// Even OFF lines might overlap. Let's offset everything.
|
||||
alignedData.push(lastValue + offset);
|
||||
});
|
||||
|
||||
return {
|
||||
...ds,
|
||||
data: alignedData
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 12
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
max: 12, // Increased max to accommodate offsets
|
||||
ticks: {
|
||||
stepSize: 1,
|
||||
callback: (val) => {
|
||||
const rVal = Math.round(val);
|
||||
if (rVal === 0) return 'OFF';
|
||||
if (rVal === 10) return 'MAX/ON';
|
||||
return rVal;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: { color: '#ebdbb2' }
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Output History (Levels & States)',
|
||||
color: '#ebdbb2'
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
// Round down to ignore the offset
|
||||
const val = Math.floor(context.raw);
|
||||
const ds = context.dataset;
|
||||
|
||||
if (val === 0) return `${ds.label}: OFF`;
|
||||
// If it's binary (Tapo) or max level, show ON
|
||||
if (val === 10 || ds.isBinary) return `${ds.label}: ON`;
|
||||
|
||||
return `${ds.label}: Level ${val}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
fetchData = async () => {
|
||||
const { range } = this.props;
|
||||
try {
|
||||
const res = await fetch(`api/outputs/history?range=${range || 'day'}`);
|
||||
const logs = await res.json();
|
||||
this.setState({ data: logs, loading: false });
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch output history', err);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper sx={{ p: 2, mt: 3, bgcolor: '#282828', color: '#ebdbb2' }}>
|
||||
<Box sx={{ height: 300 }}>
|
||||
<Line data={{ labels: chartLabels, datasets: alignedDatasets }} options={options} />
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
render() {
|
||||
const { devices = [] } = this.props;
|
||||
const { data, loading } = this.state;
|
||||
|
||||
if (loading) return <CircularProgress size={20} />;
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
// Group data by "Device:Port"
|
||||
const groupedData = {};
|
||||
data.forEach(log => {
|
||||
const key = `${log.dev_name}:${log.port}`;
|
||||
if (!groupedData[key]) groupedData[key] = [];
|
||||
groupedData[key].push(log);
|
||||
});
|
||||
|
||||
// Gruvbox Palette
|
||||
const gruvboxColors = ['#fb4934', '#b8bb26', '#fabd2f', '#83a598', '#d3869b', '#8ec07c', '#fe8019', '#928374'];
|
||||
|
||||
// Generate datasets
|
||||
const datasets = Object.keys(groupedData).map((key, index) => {
|
||||
const logs = groupedData[key];
|
||||
const color = gruvboxColors[index % gruvboxColors.length];
|
||||
|
||||
// Resolve Label
|
||||
let label = key;
|
||||
const isTapo = key.includes('tapo') || key.includes('Plug'); // Simple check
|
||||
|
||||
if (devices && devices.length > 0) {
|
||||
const [dName, pNum] = key.split(':');
|
||||
const portNum = parseInt(pNum);
|
||||
const device = devices.find(d => d.dev_name === dName && d.port === portNum);
|
||||
if (device) {
|
||||
label = `${device.dev_name} - ${device.port_name}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback friendly name for Tapo if not found in devices list (which comes from readings)
|
||||
// Check if key looks like "tapo-xxx:0"
|
||||
if (label === key && key.startsWith('tapo-')) {
|
||||
// "tapo-001:0" -> "Tapo Plug 001"
|
||||
const parts2 = key.split(':');
|
||||
const tapoId = parts2[0].replace('tapo-', '');
|
||||
label = `Tapo Plug ${tapoId}`;
|
||||
}
|
||||
|
||||
return {
|
||||
label: label,
|
||||
data: logs.map(d => ({
|
||||
x: new Date(d.timestamp).getTime(),
|
||||
y: d.state === 0 ? 0 : (d.level || 10)
|
||||
})),
|
||||
borderColor: color,
|
||||
backgroundColor: color,
|
||||
stepped: true,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
// Custom property to identify binary devices in tooltip
|
||||
isBinary: isTapo
|
||||
};
|
||||
});
|
||||
|
||||
// Create a time axis based on the data range
|
||||
const allTimestamps = [...new Set(data.map(d => d.timestamp))].sort();
|
||||
|
||||
// We need to normalize data to these timestamps for "Line" chart
|
||||
const chartLabels = allTimestamps.map(ts => {
|
||||
const date = new Date(ts);
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
});
|
||||
|
||||
// We need to map *each* dataset's data to align with `chartLabels`.
|
||||
const alignedDatasets = datasets.map((ds, index) => {
|
||||
const alignedData = [];
|
||||
let lastValue = 0; // Default off
|
||||
const offset = index * 0.15; // Small offset to avoid overlap
|
||||
|
||||
// Populate alignedData matching `allTimestamps`
|
||||
allTimestamps.forEach(ts => {
|
||||
// Find if we have a log at this specific timestamp
|
||||
const timeMs = new Date(ts).getTime();
|
||||
const exactLog = ds.data.find(d => Math.abs(d.x - timeMs) < 1000); // 1s tolerance
|
||||
|
||||
if (exactLog) {
|
||||
lastValue = exactLog.y;
|
||||
}
|
||||
// Apply offset to the value for visualization
|
||||
// If value is 0 (OFF), we might still want to offset it?
|
||||
// Or only if ON? The user said "levels are on top of each other".
|
||||
// Even OFF lines might overlap. Let's offset everything.
|
||||
alignedData.push(lastValue + offset);
|
||||
});
|
||||
|
||||
return {
|
||||
...ds,
|
||||
data: alignedData
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 12
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
max: 12, // Increased max to accommodate offsets
|
||||
ticks: {
|
||||
stepSize: 1,
|
||||
callback: (val) => {
|
||||
const rVal = Math.round(val);
|
||||
if (rVal === 0) return 'OFF';
|
||||
if (rVal === 10) return 'MAX/ON';
|
||||
return rVal;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: { color: '#ebdbb2' }
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Output History (Levels & States)',
|
||||
color: '#ebdbb2'
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
// Round down to ignore the offset
|
||||
const val = Math.floor(context.raw);
|
||||
const ds = context.dataset;
|
||||
|
||||
if (val === 0) return `${ds.label}: OFF`;
|
||||
// If it's binary (Tapo) or max level, show ON
|
||||
if (val === 10 || ds.isBinary) return `${ds.label}: ON`;
|
||||
|
||||
return `${ds.label}: Level ${val}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper sx={{ p: 2, mt: 3, bgcolor: '#282828', color: '#ebdbb2' }}>
|
||||
<Box sx={{ height: 300 }}>
|
||||
<Line data={{ labels: chartLabels, datasets: alignedDatasets }} options={options} />
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n(OutputChart);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
@@ -12,35 +12,29 @@ import {
|
||||
CircularProgress,
|
||||
Link
|
||||
} from '@mui/material';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { withAuth } from './AuthContext';
|
||||
|
||||
export default function ProfileDialog({ open, onClose }) {
|
||||
const { user, login } = useAuth(); // We need a way to refresh user data or update context.
|
||||
// Actually, AuthContext might not expose a "refreshUser" method.
|
||||
// For now we will update the local state and rely on next page load/auth check to refresh global state,
|
||||
// OR we should ideally update the user object in AuthContext.
|
||||
// Checking AuthContext... it has `user` state. It sets user on login/checkAuth.
|
||||
// `checkAuth` is not exposed in `useAuth` return typically?
|
||||
// Let's assume we can just modify the user locally or ignore it, as long as the server has it.
|
||||
class ProfileDialog extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
telegramId: '',
|
||||
loading: false,
|
||||
saving: false,
|
||||
error: null,
|
||||
success: false
|
||||
};
|
||||
}
|
||||
|
||||
// Better: Fetch the latest profile data when opening the dialog.
|
||||
|
||||
const [telegramId, setTelegramId] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchProfile();
|
||||
setSuccess(false);
|
||||
setError(null);
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.open && !prevProps.open) {
|
||||
this.fetchProfile();
|
||||
this.setState({ success: false, error: null });
|
||||
}
|
||||
}, [open]);
|
||||
}
|
||||
|
||||
const fetchProfile = async () => {
|
||||
setLoading(true);
|
||||
fetchProfile = async () => {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const res = await fetch('api/auth/me', {
|
||||
@@ -49,20 +43,21 @@ export default function ProfileDialog({ open, onClose }) {
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (data.user) {
|
||||
setTelegramId(data.user.telegramId || '');
|
||||
this.setState({ telegramId: data.user.telegramId || '' });
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
handleSave = async () => {
|
||||
const { onClose } = this.props;
|
||||
const { telegramId } = this.state;
|
||||
|
||||
this.setState({ saving: true, error: null, success: false });
|
||||
try {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const res = await fetch('api/auth/profile', {
|
||||
@@ -79,56 +74,63 @@ export default function ProfileDialog({ open, onClose }) {
|
||||
throw new Error(errData.error || 'Failed to update profile');
|
||||
}
|
||||
|
||||
setSuccess(true);
|
||||
this.setState({ success: true });
|
||||
setTimeout(() => onClose(), 1500);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
this.setState({ error: err.message });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>User Profile: {user?.username}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Link your Telegram account to receive alarm notifications.
|
||||
</Typography>
|
||||
render() {
|
||||
const { open, onClose, auth: { user } } = this.props;
|
||||
const { telegramId, loading, saving, error, success } = this.state;
|
||||
|
||||
<Alert severity="info" icon={false}>
|
||||
To get your Telegram ID:
|
||||
<ol style={{ margin: '8px 0', paddingLeft: 20 }}>
|
||||
<li>Search for <b>@TischlereiCtrlBot</b> on Telegram</li>
|
||||
<li>Start the bot (`/start`)</li>
|
||||
<li>It will reply with your ID. Copy it here.</li>
|
||||
</ol>
|
||||
</Alert>
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>User Profile: {user?.username}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Link your Telegram account to receive alarm notifications.
|
||||
</Typography>
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}><CircularProgress /></Box>
|
||||
) : (
|
||||
<TextField
|
||||
label="Telegram ID"
|
||||
value={telegramId}
|
||||
onChange={(e) => setTelegramId(e.target.value)}
|
||||
fullWidth
|
||||
placeholder="e.g. 123456789"
|
||||
helperText="Leave empty to disable notifications"
|
||||
/>
|
||||
)}
|
||||
<Alert severity="info" icon={false}>
|
||||
To get your Telegram ID:
|
||||
<ol style={{ margin: '8px 0', paddingLeft: 20 }}>
|
||||
<li>Search for <b>@TischlereiCtrlBot</b> on Telegram</li>
|
||||
<li>Start the bot (`/start`)</li>
|
||||
<li>It will reply with your ID. Copy it here.</li>
|
||||
</ol>
|
||||
</Alert>
|
||||
|
||||
{error && <Alert severity="error">{error}</Alert>}
|
||||
{success && <Alert severity="success">Profile updated successfully!</Alert>}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="inherit">Close</Button>
|
||||
<Button onClick={handleSave} variant="contained" disabled={saving || loading}>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}><CircularProgress /></Box>
|
||||
) : (
|
||||
<TextField
|
||||
label="Telegram ID"
|
||||
value={telegramId}
|
||||
onChange={(e) => this.setState({ telegramId: e.target.value })}
|
||||
fullWidth
|
||||
placeholder="e.g. 123456789"
|
||||
helperText="Leave empty to disable notifications"
|
||||
/>
|
||||
)}
|
||||
|
||||
{error && <Alert severity="error">{error}</Alert>}
|
||||
{success && <Alert severity="success">Profile updated successfully!</Alert>}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="inherit">Close</Button>
|
||||
<Button onClick={this.handleSave} variant="contained" disabled={saving || loading}>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withAuth(ProfileDialog);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
Chip,
|
||||
Tooltip
|
||||
} from '@mui/material';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
|
||||
// Simple icons using unicode/emoji
|
||||
const EditIcon = () => <span style={{ fontSize: '1rem' }}>✏️</span>;
|
||||
@@ -16,254 +16,263 @@ const DeleteIcon = () => <span style={{ fontSize: '1rem' }}>🗑️</span>;
|
||||
|
||||
const dayOrder = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
|
||||
function TriggerSummary({ trigger }) {
|
||||
const { t } = useI18n();
|
||||
const dayLabels = {
|
||||
mon: t('days.mon').charAt(0),
|
||||
tue: t('days.tue').charAt(0),
|
||||
wed: t('days.wed').charAt(0),
|
||||
thu: t('days.thu').charAt(0),
|
||||
fri: t('days.fri').charAt(0),
|
||||
sat: t('days.sat').charAt(0),
|
||||
sun: t('days.sun').charAt(0)
|
||||
};
|
||||
const parts = [];
|
||||
class TriggerSummary extends Component {
|
||||
render() {
|
||||
const { trigger, t } = this.props;
|
||||
const dayLabels = {
|
||||
mon: t('days.mon').charAt(0),
|
||||
tue: t('days.tue').charAt(0),
|
||||
wed: t('days.wed').charAt(0),
|
||||
thu: t('days.thu').charAt(0),
|
||||
fri: t('days.fri').charAt(0),
|
||||
sat: t('days.sat').charAt(0),
|
||||
sun: t('days.sun').charAt(0)
|
||||
};
|
||||
const parts = [];
|
||||
|
||||
// Scheduled time (trigger at exact time)
|
||||
if (trigger.scheduledTime) {
|
||||
const { time, days } = trigger.scheduledTime;
|
||||
const isEveryDay = days?.length === 7;
|
||||
const isWeekdays = days?.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days?.includes(d)).map(d => dayLabels[d]).join('');
|
||||
// Scheduled time (trigger at exact time)
|
||||
if (trigger.scheduledTime) {
|
||||
const { time, days } = trigger.scheduledTime;
|
||||
const isEveryDay = days?.length === 7;
|
||||
const isWeekdays = days?.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days?.includes(d)).map(d => dayLabels[d]).join('');
|
||||
|
||||
parts.push(
|
||||
<Box key="scheduled" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="🕐" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
{t('ruleCard.at')} <strong>{time}</strong> ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Time range (active during window)
|
||||
if (trigger.timeRange) {
|
||||
const { start, end, days } = trigger.timeRange;
|
||||
const isEveryDay = days?.length === 7;
|
||||
const isWeekdays = days?.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days?.includes(d)).map(d => dayLabels[d]).join('');
|
||||
|
||||
parts.push(
|
||||
<Box key="time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
{start}–{end} ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Sensor conditions
|
||||
if (trigger.sensors && trigger.sensors.length > 0) {
|
||||
const logic = trigger.sensorLogic || 'and';
|
||||
const sensorText = trigger.sensors.map((s, i) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <Chip label={logic.toUpperCase()} size="small" sx={{ mx: 0.5, bgcolor: logic === 'and' ? '#8ec07c' : '#fabd2f', color: '#282828', fontSize: '0.65rem' }} />}
|
||||
<strong>{s.sensorLabel || s.sensor}</strong> {s.operator} {s.value}
|
||||
</span>
|
||||
));
|
||||
|
||||
parts.push(
|
||||
<Box key="sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2" component="span">
|
||||
{sensorText}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Legacy support for old trigger format
|
||||
if (trigger.type === 'time' && !trigger.timeRange) {
|
||||
const days = trigger.days || [];
|
||||
const isEveryDay = days.length === 7;
|
||||
const isWeekdays = days.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days.includes(d)).map(d => dayLabels[d]).join(' ');
|
||||
|
||||
parts.push(
|
||||
<Box key="legacy-time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">{t('ruleCard.at')} {trigger.time} ({dayText})</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (trigger.type === 'sensor' && !trigger.sensors) {
|
||||
parts.push(
|
||||
<Box key="legacy-sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">
|
||||
{trigger.sensorLabel || trigger.sensor} {trigger.operator} {trigger.value}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (parts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{parts}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionSummary({ action }) {
|
||||
const { t } = useI18n();
|
||||
|
||||
if (action.type === 'toggle') {
|
||||
// Check if it's a level or binary action
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip
|
||||
label={hasLevel ? '🎚️' : (action.state ? '🔛' : '🔴')}
|
||||
size="small"
|
||||
sx={{ bgcolor: hasLevel ? '#83a598' : (action.state ? '#b8bb26' : '#fb4934'), color: '#282828', fontWeight: 600, minWidth: 32 }}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `${t('ruleCard.level')} ${action.level}` : (action.state ? t('ruleCard.on') : t('ruleCard.off'))}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (action.type === 'keepOn') {
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏱️" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `${t('ruleCard.level')} ${action.level}` : t('ruleCard.on')} {t('ruleCard.forMinutes', { duration: action.duration })}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function RuleCard({ rule, onEdit, onDelete, onToggle, onMoveUp, onMoveDown, colorTags = [], readOnly, activeInfo }) {
|
||||
const { t } = useI18n();
|
||||
// Get list of tag colors for this rule (handle array or backwards-compat single value)
|
||||
const ruleTagIds = rule.colorTags || (rule.colorTag ? [rule.colorTag] : []);
|
||||
const ruleTags = ruleTagIds.map(tagId => colorTags.find(t => t.id === tagId)).filter(Boolean);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
opacity: rule.enabled ? 1 : 0.6,
|
||||
transition: 'opacity 0.2s, transform 0.2s',
|
||||
border: '1px solid', // Standard border
|
||||
borderColor: rule.enabled ? '#504945' : '#3c3836',
|
||||
borderLeft: ruleTags.length > 0 ? `4px solid ${ruleTags[0].color}` : '1px solid #504945',
|
||||
boxShadow: activeInfo ? '0 0 0 2px #b8bb26' : 'none', // Active highlight
|
||||
'&:hover': {
|
||||
transform: readOnly ? 'none' : 'translateX(4px)',
|
||||
borderColor: rule.enabled ? '#8ec07c' : '#504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{rule.name}
|
||||
{/* ACTIVE INDICATOR */}
|
||||
{activeInfo && (
|
||||
<Chip
|
||||
label={`Active: Lvl ${activeInfo.level}`}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#b8bb26',
|
||||
color: '#282828',
|
||||
fontWeight: 'bold',
|
||||
height: 20
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
{ruleTags.length > 0 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
{ruleTags.map(tag => (
|
||||
<Box key={tag.id} sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
bgcolor: tag.color,
|
||||
flexShrink: 0
|
||||
}} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{!rule.enabled && (
|
||||
<Chip label={t('ruleCard.disabled')} size="small" sx={{ bgcolor: '#504945', fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<TriggerSummary trigger={rule.trigger} />
|
||||
<ActionSummary action={rule.action} />
|
||||
</Box>
|
||||
parts.push(
|
||||
<Box key="scheduled" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="🕐" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
{t('ruleCard.at')} <strong>{time}</strong> ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
{/* Move buttons */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Tooltip title="Move up">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveUp}
|
||||
// Time range (active during window)
|
||||
if (trigger.timeRange) {
|
||||
const { start, end, days } = trigger.timeRange;
|
||||
const isEveryDay = days?.length === 7;
|
||||
const isWeekdays = days?.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days?.includes(d)).map(d => dayLabels[d]).join('');
|
||||
|
||||
parts.push(
|
||||
<Box key="time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
{start}–{end} ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Sensor conditions
|
||||
if (trigger.sensors && trigger.sensors.length > 0) {
|
||||
const logic = trigger.sensorLogic || 'and';
|
||||
const sensorText = trigger.sensors.map((s, i) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <Chip label={logic.toUpperCase()} size="small" sx={{ mx: 0.5, bgcolor: logic === 'and' ? '#8ec07c' : '#fabd2f', color: '#282828', fontSize: '0.65rem' }} />}
|
||||
<strong>{s.sensorLabel || s.sensor}</strong> {s.operator} {s.value}
|
||||
</span>
|
||||
));
|
||||
|
||||
parts.push(
|
||||
<Box key="sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2" component="span">
|
||||
{sensorText}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Legacy support for old trigger format
|
||||
if (trigger.type === 'time' && !trigger.timeRange) {
|
||||
const days = trigger.days || [];
|
||||
const isEveryDay = days.length === 7;
|
||||
const isWeekdays = days.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? t('ruleCard.daily') : isWeekdays ? t('ruleCard.weekdays') :
|
||||
dayOrder.filter(d => days.includes(d)).map(d => dayLabels[d]).join(' ');
|
||||
|
||||
parts.push(
|
||||
<Box key="legacy-time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">{t('ruleCard.at')} {trigger.time} ({dayText})</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (trigger.type === 'sensor' && !trigger.sensors) {
|
||||
parts.push(
|
||||
<Box key="legacy-sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">
|
||||
{trigger.sensorLabel || trigger.sensor} {trigger.operator} {trigger.value}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (parts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{parts}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ActionSummary extends Component {
|
||||
render() {
|
||||
const { action, t } = this.props;
|
||||
|
||||
if (action.type === 'toggle') {
|
||||
// Check if it's a level or binary action
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip
|
||||
label={hasLevel ? '🎚️' : (action.state ? '🔛' : '🔴')}
|
||||
size="small"
|
||||
sx={{ bgcolor: hasLevel ? '#83a598' : (action.state ? '#b8bb26' : '#fb4934'), color: '#282828', fontWeight: 600, minWidth: 32 }}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `${t('ruleCard.level')} ${action.level}` : (action.state ? t('ruleCard.on') : t('ruleCard.off'))}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (action.type === 'keepOn') {
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏱️" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `${t('ruleCard.level')} ${action.level}` : t('ruleCard.on')} {t('ruleCard.forMinutes', { duration: action.duration })}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class RuleCard extends Component {
|
||||
render() {
|
||||
const { rule, onEdit, onDelete, onToggle, onMoveUp, onMoveDown, colorTags = [], readOnly, activeInfo, i18n: { t } } = this.props;
|
||||
|
||||
// Get list of tag colors for this rule (handle array or backwards-compat single value)
|
||||
const ruleTagIds = rule.colorTags || (rule.colorTag ? [rule.colorTag] : []);
|
||||
const ruleTags = ruleTagIds.map(tagId => colorTags.find(t => t.id === tagId)).filter(Boolean);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
opacity: rule.enabled ? 1 : 0.6,
|
||||
transition: 'opacity 0.2s, transform 0.2s',
|
||||
border: '1px solid', // Standard border
|
||||
borderColor: rule.enabled ? '#504945' : '#3c3836',
|
||||
borderLeft: ruleTags.length > 0 ? `4px solid ${ruleTags[0].color}` : '1px solid #504945',
|
||||
boxShadow: activeInfo ? '0 0 0 2px #b8bb26' : 'none', // Active highlight
|
||||
'&:hover': {
|
||||
transform: readOnly ? 'none' : 'translateX(4px)',
|
||||
borderColor: rule.enabled ? '#8ec07c' : '#504945'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{rule.name}
|
||||
{/* ACTIVE INDICATOR */}
|
||||
{activeInfo && (
|
||||
<Chip
|
||||
label={`Active: Lvl ${activeInfo.level}`}
|
||||
size="small"
|
||||
disabled={!onMoveUp}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▲
|
||||
</IconButton>
|
||||
</span>
|
||||
sx={{
|
||||
bgcolor: '#b8bb26',
|
||||
color: '#282828',
|
||||
fontWeight: 'bold',
|
||||
height: 20
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
{ruleTags.length > 0 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
{ruleTags.map(tag => (
|
||||
<Box key={tag.id} sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
bgcolor: tag.color,
|
||||
flexShrink: 0
|
||||
}} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{!rule.enabled && (
|
||||
<Chip label={t('ruleCard.disabled')} size="small" sx={{ bgcolor: '#504945', fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<TriggerSummary trigger={rule.trigger} t={t} />
|
||||
<ActionSummary action={rule.action} t={t} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
{/* Move buttons */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Tooltip title="Move up">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveUp}
|
||||
size="small"
|
||||
disabled={!onMoveUp}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▲
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="Move down">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveDown}
|
||||
size="small"
|
||||
disabled={!onMoveDown}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▼
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Tooltip title={rule.enabled ? t('ruleCard.disable') : t('ruleCard.enable')}>
|
||||
<Switch checked={rule.enabled} onChange={onToggle} color="primary" size="small" />
|
||||
</Tooltip>
|
||||
<Tooltip title="Move down">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveDown}
|
||||
size="small"
|
||||
disabled={!onMoveDown}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▼
|
||||
</IconButton>
|
||||
</span>
|
||||
<Tooltip title={t('ruleCard.edit')}>
|
||||
<IconButton onClick={onEdit} size="small"><EditIcon /></IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('ruleCard.delete')}>
|
||||
<IconButton onClick={onDelete} size="small" sx={{ '&:hover': { color: '#fb4934' } }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Tooltip title={rule.enabled ? t('ruleCard.disable') : t('ruleCard.enable')}>
|
||||
<Switch checked={rule.enabled} onChange={onToggle} color="primary" size="small" />
|
||||
</Tooltip>
|
||||
<Tooltip title={t('ruleCard.edit')}>
|
||||
<IconButton onClick={onEdit} size="small"><EditIcon /></IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('ruleCard.delete')}>
|
||||
<IconButton onClick={onDelete} size="small" sx={{ '&:hover': { color: '#fb4934' } }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n(RuleCard);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
@@ -12,8 +12,9 @@ import {
|
||||
} from '@mui/material';
|
||||
import RuleCard from './RuleCard';
|
||||
import RuleEditor from './RuleEditor';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { useI18n } from './I18nContext';
|
||||
import { withAuth } from './AuthContext';
|
||||
import { withI18n } from './I18nContext';
|
||||
import { withDevices } from './DevicesContext';
|
||||
|
||||
// 8 color tags
|
||||
const COLOR_TAGS = [
|
||||
@@ -27,227 +28,177 @@ const COLOR_TAGS = [
|
||||
{ id: 'gray', label: 'Gray', color: '#928374' }
|
||||
];
|
||||
|
||||
export default function RuleManager() {
|
||||
const { isAdmin } = useAuth();
|
||||
const { t } = useI18n();
|
||||
const [rules, setRules] = useState([]);
|
||||
const [activeRuleIds, setActiveRuleIds] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState(null);
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [filterTag, setFilterTag] = useState(null); // null = show all
|
||||
class RuleManager extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
rules: [],
|
||||
activeRuleIds: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
editorOpen: false,
|
||||
editingRule: null,
|
||||
saving: false,
|
||||
filterTag: null
|
||||
};
|
||||
this.activeRulesInterval = null;
|
||||
}
|
||||
|
||||
// Get auth token from localStorage
|
||||
const getAuthHeaders = useCallback(() => {
|
||||
componentDidMount() {
|
||||
this.fetchRules();
|
||||
this.fetchActiveRules();
|
||||
this.activeRulesInterval = setInterval(() => this.fetchActiveRules(), 5000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.activeRulesInterval) {
|
||||
clearInterval(this.activeRulesInterval);
|
||||
}
|
||||
}
|
||||
|
||||
getAuthHeaders = () => {
|
||||
const token = localStorage.getItem('authToken');
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Fetch rules from server (public endpoint)
|
||||
const fetchRules = useCallback(async () => {
|
||||
fetchRules = async () => {
|
||||
try {
|
||||
const res = await fetch('api/rules');
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch rules');
|
||||
}
|
||||
if (!res.ok) throw new Error('Failed to fetch rules');
|
||||
const data = await res.json();
|
||||
setRules(data);
|
||||
setError(null);
|
||||
this.setState({ rules: data, error: null, loading: false });
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
this.setState({ error: err.message, loading: false });
|
||||
}
|
||||
}, [setRules, setLoading, setError]);
|
||||
};
|
||||
|
||||
// Fetch devices for sensor/output selection
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('api/devices');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDevices(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch devices:', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchActiveRules = useCallback(async () => {
|
||||
fetchActiveRules = async () => {
|
||||
try {
|
||||
const res = await fetch('api/rules/active');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setActiveRuleIds(data); // "ids" is now a list of objects {id, level, state}
|
||||
this.setState({ activeRuleIds: data });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch active rules:', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRules();
|
||||
fetchDevices();
|
||||
fetchActiveRules();
|
||||
const interval = setInterval(fetchActiveRules, 5000); // 5s poll
|
||||
return () => clearInterval(interval);
|
||||
}, [fetchRules, fetchDevices, fetchActiveRules]);
|
||||
|
||||
// Build available sensors
|
||||
// - Environment sensors (Temp, Humidity) are per DEVICE
|
||||
// - Port values (Fan Speed, Brightness, CO2, etc.) are per PORT
|
||||
const availableSensors = [];
|
||||
const seenDevices = new Set();
|
||||
|
||||
devices.forEach(d => {
|
||||
// Add environment sensors once per device (temp, humidity)
|
||||
if (!seenDevices.has(d.dev_name)) {
|
||||
seenDevices.add(d.dev_name);
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:temp`,
|
||||
label: `${d.dev_name} - Temperature`,
|
||||
type: 'temperature'
|
||||
});
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:humidity`,
|
||||
label: `${d.dev_name} - Humidity`,
|
||||
type: 'humidity'
|
||||
});
|
||||
}
|
||||
|
||||
// Add each port as a sensor (Fan Speed 0-10, Brightness 0-10, CO2, etc.)
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:${d.port}:level`,
|
||||
label: `${d.dev_name} - ${d.port_name} Level`,
|
||||
type: d.port_name.toLowerCase()
|
||||
});
|
||||
});
|
||||
|
||||
// Build available outputs: Tapo plugs + ALL device ports + 4 virtual channels
|
||||
const availableOutputs = [
|
||||
// Tapo smart plugs
|
||||
{ id: 'tapo-001', label: 'Tapo 001', type: 'plug' },
|
||||
{ id: 'tapo-002', label: 'Tapo 002', type: 'plug' },
|
||||
{ id: 'tapo-003', label: 'Tapo 003', type: 'plug' },
|
||||
{ id: 'tapo-004', label: 'Tapo 004', type: 'plug' },
|
||||
{ id: 'tapo-005', label: 'Tapo 005', type: 'plug' },
|
||||
// All device ports as outputs
|
||||
...devices.map(d => ({
|
||||
id: `${d.dev_name}:${d.port}:out`,
|
||||
label: `${d.dev_name} - ${d.port_name}`,
|
||||
type: d.port_name.toLowerCase()
|
||||
})),
|
||||
// 4 virtual channels
|
||||
{ id: 'virtual-1', label: 'Virtual Channel 1', type: 'virtual' },
|
||||
{ id: 'virtual-2', label: 'Virtual Channel 2', type: 'virtual' },
|
||||
{ id: 'virtual-3', label: 'Virtual Channel 3', type: 'virtual' },
|
||||
{ id: 'virtual-4', label: 'Virtual Channel 4', type: 'virtual' }
|
||||
];
|
||||
|
||||
// Add Tapo and virtual channels as sensors (on/off state)
|
||||
[...availableOutputs.filter(o => o.type === 'plug' || o.type === 'virtual')].forEach(o => {
|
||||
availableSensors.push({
|
||||
id: `${o.id}:state`,
|
||||
label: `${o.label} (State)`,
|
||||
type: 'output-state'
|
||||
});
|
||||
});
|
||||
|
||||
const handleAddRule = () => {
|
||||
setEditingRule(null);
|
||||
setEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEditRule = (rule) => {
|
||||
setEditingRule(rule);
|
||||
setEditorOpen(true);
|
||||
getAvailableSensors = () => {
|
||||
const { devicesCtx: { getAvailableSensors, getAvailableOutputs } } = this.props;
|
||||
const sensors = getAvailableSensors();
|
||||
const outputs = getAvailableOutputs();
|
||||
|
||||
// Add Tapo and virtual channels as sensors (on/off state)
|
||||
outputs.filter(o => o.type === 'plug' || o.type === 'virtual').forEach(o => {
|
||||
sensors.push({
|
||||
id: `${o.id}:state`,
|
||||
label: `${o.label} (State)`,
|
||||
type: 'output-state'
|
||||
});
|
||||
});
|
||||
|
||||
return sensors;
|
||||
};
|
||||
|
||||
const handleDeleteRule = async (ruleId) => {
|
||||
handleAddRule = () => {
|
||||
this.setState({ editingRule: null, editorOpen: true });
|
||||
};
|
||||
|
||||
handleEditRule = (rule) => {
|
||||
this.setState({ editingRule: rule, editorOpen: true });
|
||||
};
|
||||
|
||||
handleDeleteRule = async (ruleId) => {
|
||||
const { i18n: { t } } = this.props;
|
||||
if (!confirm(t('rules.deleteConfirm'))) return;
|
||||
|
||||
setSaving(true);
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
const res = await fetch(`api/rules/${ruleId}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
headers: this.getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete rule');
|
||||
setRules(rules.filter(r => r.id !== ruleId));
|
||||
this.setState(prev => ({
|
||||
rules: prev.rules.filter(r => r.id !== ruleId),
|
||||
saving: false
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleRule = async (ruleId) => {
|
||||
handleToggleRule = async (ruleId) => {
|
||||
const { rules } = this.state;
|
||||
const rule = rules.find(r => r.id === ruleId);
|
||||
if (!rule) return;
|
||||
|
||||
setSaving(true);
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
const res = await fetch(`api/rules/${ruleId}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...rule, enabled: !rule.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update rule');
|
||||
const updated = await res.json();
|
||||
setRules(rules.map(r => r.id === ruleId ? updated : r));
|
||||
this.setState(prev => ({
|
||||
rules: prev.rules.map(r => r.id === ruleId ? updated : r),
|
||||
saving: false
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveRule = async (ruleData) => {
|
||||
setSaving(true);
|
||||
handleSaveRule = async (ruleData) => {
|
||||
const { editingRule } = this.state;
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
if (editingRule) {
|
||||
// Update existing rule - preserve enabled state
|
||||
const res = await fetch(`api/rules/${editingRule.id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...ruleData, enabled: editingRule.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update rule');
|
||||
const updated = await res.json();
|
||||
setRules(rules.map(r => r.id === editingRule.id ? updated : r));
|
||||
this.setState(prev => ({
|
||||
rules: prev.rules.map(r => r.id === editingRule.id ? updated : r),
|
||||
editorOpen: false,
|
||||
editingRule: null,
|
||||
saving: false
|
||||
}));
|
||||
} else {
|
||||
// Create new rule
|
||||
const res = await fetch('api/rules', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ...ruleData, enabled: true })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create rule');
|
||||
const newRule = await res.json();
|
||||
setRules([...rules, newRule]);
|
||||
this.setState(prev => ({
|
||||
rules: [...prev.rules, newRule],
|
||||
editorOpen: false,
|
||||
editingRule: null,
|
||||
saving: false
|
||||
}));
|
||||
}
|
||||
setEditorOpen(false);
|
||||
setEditingRule(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
this.setState({ error: err.message, saving: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseEditor = () => {
|
||||
setEditorOpen(false);
|
||||
setEditingRule(null);
|
||||
handleCloseEditor = () => {
|
||||
this.setState({ editorOpen: false, editingRule: null });
|
||||
};
|
||||
|
||||
// Move rule up or down
|
||||
const handleMoveRule = async (ruleId, direction) => {
|
||||
handleMoveRule = async (ruleId, direction) => {
|
||||
const { rules } = this.state;
|
||||
const idx = rules.findIndex(r => r.id === ruleId);
|
||||
if (idx === -1) return;
|
||||
if (direction === 'up' && idx === 0) return;
|
||||
@@ -256,145 +207,150 @@ export default function RuleManager() {
|
||||
const newRules = [...rules];
|
||||
const swapIdx = direction === 'up' ? idx - 1 : idx + 1;
|
||||
[newRules[idx], newRules[swapIdx]] = [newRules[swapIdx], newRules[idx]];
|
||||
setRules(newRules);
|
||||
this.setState({ rules: newRules });
|
||||
|
||||
// Save new order to server
|
||||
try {
|
||||
const ruleIds = newRules.map(r => r.id);
|
||||
await fetch('api/rules/reorder', {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
headers: this.getAuthHeaders(),
|
||||
body: JSON.stringify({ ruleIds })
|
||||
});
|
||||
} catch (err) {
|
||||
setError('Failed to save order');
|
||||
this.setState({ error: 'Failed to save order' });
|
||||
}
|
||||
};
|
||||
|
||||
// Filter rules by color tag
|
||||
const filteredRules = filterTag
|
||||
? rules.filter(r => (r.colorTags || []).includes(filterTag))
|
||||
: rules;
|
||||
render() {
|
||||
const { auth: { isAdmin }, i18n: { t }, devicesCtx: { getAvailableOutputs } } = this.props;
|
||||
const { rules, activeRuleIds, loading, error, editorOpen, editingRule, saving, filterTag } = this.state;
|
||||
|
||||
const filteredRules = filterTag
|
||||
? rules.filter(r => (r.colorTags || []).includes(filterTag))
|
||||
: rules;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
<Typography sx={{ mt: 2 }}>{t('rules.loading')}</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
<Typography sx={{ mt: 2 }}>{t('rules.loading')}</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
mt: 4,
|
||||
p: 3,
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)',
|
||||
border: '1px solid #504945'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{t('rules.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{isAdmin ? t('rules.adminDescription') : t('rules.guestDescription')}
|
||||
</Typography>
|
||||
<Paper
|
||||
sx={{
|
||||
mt: 4,
|
||||
p: 3,
|
||||
background: 'linear-gradient(145deg, #3c3836 0%, #32302f 100%)',
|
||||
border: '1px solid #504945'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{t('rules.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{isAdmin ? t('rules.adminDescription') : t('rules.guestDescription')}
|
||||
</Typography>
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={this.handleAddRule}
|
||||
disabled={saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #b8bb26 30%, #8ec07c 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #c5c836 30%, #98c98a 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('rules.addRule')}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleAddRule}
|
||||
disabled={saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #b8bb26 30%, #8ec07c 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #c5c836 30%, #98c98a 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('rules.addRule')}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
{/* Color tag filter */}
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>Filter:</Typography>
|
||||
<Chip
|
||||
label="All"
|
||||
size="small"
|
||||
onClick={() => setFilterTag(null)}
|
||||
sx={{
|
||||
bgcolor: filterTag === null ? '#ebdbb2' : '#504945',
|
||||
color: filterTag === null ? '#282828' : '#ebdbb2'
|
||||
}}
|
||||
/>
|
||||
{COLOR_TAGS.map(tag => (
|
||||
{/* Color tag filter */}
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>Filter:</Typography>
|
||||
<Chip
|
||||
key={tag.id}
|
||||
label="All"
|
||||
size="small"
|
||||
onClick={() => setFilterTag(filterTag === tag.id ? null : tag.id)}
|
||||
onClick={() => this.setState({ filterTag: null })}
|
||||
sx={{
|
||||
bgcolor: filterTag === tag.id ? tag.color : '#504945',
|
||||
color: filterTag === tag.id ? '#282828' : tag.color,
|
||||
border: `2px solid ${tag.color}`,
|
||||
'&:hover': { bgcolor: tag.color, color: '#282828' }
|
||||
bgcolor: filterTag === null ? '#ebdbb2' : '#504945',
|
||||
color: filterTag === null ? '#282828' : '#ebdbb2'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{filteredRules.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">
|
||||
{rules.length === 0
|
||||
? (isAdmin ? t('rules.noRules') + ' ' + t('rules.noRulesAdmin') : t('rules.noRules'))
|
||||
: 'No rules match the selected filter.'
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{filteredRules.map((rule, idx) => (
|
||||
<RuleCard
|
||||
key={rule.id}
|
||||
rule={rule}
|
||||
onEdit={isAdmin ? () => handleEditRule(rule) : null}
|
||||
onDelete={isAdmin ? () => handleDeleteRule(rule.id) : null}
|
||||
onToggle={isAdmin ? () => handleToggleRule(rule.id) : null}
|
||||
onMoveUp={isAdmin && idx > 0 ? () => handleMoveRule(rule.id, 'up') : null}
|
||||
onMoveDown={isAdmin && idx < filteredRules.length - 1 ? () => handleMoveRule(rule.id, 'down') : null}
|
||||
colorTags={COLOR_TAGS}
|
||||
readOnly={!isAdmin}
|
||||
activeInfo={activeRuleIds.find(r => r.id === rule.id)}
|
||||
{COLOR_TAGS.map(tag => (
|
||||
<Chip
|
||||
key={tag.id}
|
||||
size="small"
|
||||
onClick={() => this.setState({ filterTag: filterTag === tag.id ? null : tag.id })}
|
||||
sx={{
|
||||
bgcolor: filterTag === tag.id ? tag.color : '#504945',
|
||||
color: filterTag === tag.id ? '#282828' : tag.color,
|
||||
border: `2px solid ${tag.color}`,
|
||||
'&:hover': { bgcolor: tag.color, color: '#282828' }
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<RuleEditor
|
||||
open={editorOpen}
|
||||
rule={editingRule}
|
||||
onSave={handleSaveRule}
|
||||
onClose={handleCloseEditor}
|
||||
sensors={availableSensors}
|
||||
outputs={availableOutputs}
|
||||
colorTags={COLOR_TAGS}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => this.setState({ error: null })}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{filteredRules.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">
|
||||
{rules.length === 0
|
||||
? (isAdmin ? t('rules.noRules') + ' ' + t('rules.noRulesAdmin') : t('rules.noRules'))
|
||||
: 'No rules match the selected filter.'
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{filteredRules.map((rule, idx) => (
|
||||
<RuleCard
|
||||
key={rule.id}
|
||||
rule={rule}
|
||||
onEdit={isAdmin ? () => this.handleEditRule(rule) : null}
|
||||
onDelete={isAdmin ? () => this.handleDeleteRule(rule.id) : null}
|
||||
onToggle={isAdmin ? () => this.handleToggleRule(rule.id) : null}
|
||||
onMoveUp={isAdmin && idx > 0 ? () => this.handleMoveRule(rule.id, 'up') : null}
|
||||
onMoveDown={isAdmin && idx < filteredRules.length - 1 ? () => this.handleMoveRule(rule.id, 'down') : null}
|
||||
colorTags={COLOR_TAGS}
|
||||
readOnly={!isAdmin}
|
||||
activeInfo={activeRuleIds.find(r => r.id === rule.id)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<RuleEditor
|
||||
open={editorOpen}
|
||||
rule={editingRule}
|
||||
onSave={this.handleSaveRule}
|
||||
onClose={this.handleCloseEditor}
|
||||
sensors={this.getAvailableSensors()}
|
||||
outputs={getAvailableOutputs()}
|
||||
colorTags={COLOR_TAGS}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withDevices(withAuth(withI18n(RuleManager)));
|
||||
|
||||
9
tapotest.js
Normal file
9
tapotest.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { cloudLogin, loginDevice } from 'tp-link-tapo-connect';
|
||||
|
||||
const cloudApi = await cloudLogin('torosaw@gmail.com', 'HazeWolf99');
|
||||
|
||||
const devices = await cloudApi.listDevices();
|
||||
console.log(devices);
|
||||
|
||||
//const device = await loginDevice('torosaw@gmail.com', 'HazeWolf99', devices[0]);
|
||||
//console.log(device);
|
||||
Reference in New Issue
Block a user