added Guide Tour button on Monitor to help the user navigate different tabs
This commit is contained in:
parent
98abd68366
commit
57ee8be520
|
|
@ -42,6 +42,7 @@
|
|||
"react-icons": "^4.11.0",
|
||||
"react-icons-converter": "^1.1.4",
|
||||
"react-intl": "^6.4.4",
|
||||
"react-joyride": "^2.9.3",
|
||||
"react-redux": "^8.1.3",
|
||||
"react-router": "6.3.0",
|
||||
"react-router-dom": "6.3.0",
|
||||
|
|
@ -2876,6 +2877,11 @@
|
|||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@gilbarbara/deep-equal": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
|
||||
"integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
|
||||
|
|
@ -8195,6 +8201,12 @@
|
|||
"integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/deep-diff": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
|
||||
"integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==",
|
||||
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
|
|
@ -8205,7 +8217,6 @@
|
|||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -11465,6 +11476,11 @@
|
|||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
|
||||
},
|
||||
"node_modules/is-lite": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
|
||||
"integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="
|
||||
},
|
||||
"node_modules/is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
|
|
@ -15414,6 +15430,16 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
||||
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/possible-typed-array-names": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
|
||||
|
|
@ -17273,6 +17299,41 @@
|
|||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
|
||||
},
|
||||
"node_modules/react-floater": {
|
||||
"version": "0.7.9",
|
||||
"resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
|
||||
"integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.3.1",
|
||||
"is-lite": "^0.8.2",
|
||||
"popper.js": "^1.16.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"tree-changes": "^0.9.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "15 - 18",
|
||||
"react-dom": "15 - 18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-floater/node_modules/@gilbarbara/deep-equal": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
|
||||
"integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA=="
|
||||
},
|
||||
"node_modules/react-floater/node_modules/is-lite": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
|
||||
"integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
|
||||
},
|
||||
"node_modules/react-floater/node_modules/tree-changes": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
|
||||
"integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
|
||||
"dependencies": {
|
||||
"@gilbarbara/deep-equal": "^0.1.1",
|
||||
"is-lite": "^0.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-flow-renderer": {
|
||||
"version": "10.3.17",
|
||||
"resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
|
||||
|
|
@ -17392,6 +17453,15 @@
|
|||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-innertext": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
|
||||
"integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=0.0.0 <=99",
|
||||
"react": ">=0.0.0 <=99"
|
||||
}
|
||||
},
|
||||
"node_modules/react-intl": {
|
||||
"version": "6.6.8",
|
||||
"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
|
||||
|
|
@ -17423,6 +17493,44 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-joyride": {
|
||||
"version": "2.9.3",
|
||||
"resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
|
||||
"integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
|
||||
"dependencies": {
|
||||
"@gilbarbara/deep-equal": "^0.3.1",
|
||||
"deep-diff": "^1.0.2",
|
||||
"deepmerge": "^4.3.1",
|
||||
"is-lite": "^1.2.1",
|
||||
"react-floater": "^0.7.9",
|
||||
"react-innertext": "^1.1.5",
|
||||
"react-is": "^16.13.1",
|
||||
"scroll": "^3.0.1",
|
||||
"scrollparent": "^2.1.0",
|
||||
"tree-changes": "^0.11.2",
|
||||
"type-fest": "^4.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "15 - 18",
|
||||
"react-dom": "15 - 18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-joyride/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-joyride/node_modules/type-fest": {
|
||||
"version": "4.41.0",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
|
||||
"integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
|
||||
|
|
@ -18263,6 +18371,16 @@
|
|||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/scroll": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
|
||||
"integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="
|
||||
},
|
||||
"node_modules/scrollparent": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
|
||||
"integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
|
|
@ -19771,6 +19889,15 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/tree-changes": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
|
||||
"integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
|
||||
"dependencies": {
|
||||
"@gilbarbara/deep-equal": "^0.3.1",
|
||||
"is-lite": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/tryer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
|
||||
|
|
@ -23174,6 +23301,11 @@
|
|||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"@gilbarbara/deep-equal": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
|
||||
"integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
|
||||
|
|
@ -27055,6 +27187,11 @@
|
|||
"integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
|
||||
"dev": true
|
||||
},
|
||||
"deep-diff": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
|
||||
"integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg=="
|
||||
},
|
||||
"deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
|
|
@ -27064,8 +27201,7 @@
|
|||
"deepmerge": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
|
||||
},
|
||||
"default-gateway": {
|
||||
"version": "6.0.3",
|
||||
|
|
@ -29458,6 +29594,11 @@
|
|||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
|
||||
},
|
||||
"is-lite": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
|
||||
"integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="
|
||||
},
|
||||
"is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
|
|
@ -32446,6 +32587,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
|
||||
},
|
||||
"possible-typed-array-names": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
|
||||
|
|
@ -33627,6 +33773,39 @@
|
|||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
|
||||
},
|
||||
"react-floater": {
|
||||
"version": "0.7.9",
|
||||
"resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
|
||||
"integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
|
||||
"requires": {
|
||||
"deepmerge": "^4.3.1",
|
||||
"is-lite": "^0.8.2",
|
||||
"popper.js": "^1.16.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"tree-changes": "^0.9.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gilbarbara/deep-equal": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
|
||||
"integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA=="
|
||||
},
|
||||
"is-lite": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
|
||||
"integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
|
||||
},
|
||||
"tree-changes": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
|
||||
"integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
|
||||
"requires": {
|
||||
"@gilbarbara/deep-equal": "^0.1.1",
|
||||
"is-lite": "^0.8.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-flow-renderer": {
|
||||
"version": "10.3.17",
|
||||
"resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
|
||||
|
|
@ -33725,6 +33904,12 @@
|
|||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"react-innertext": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
|
||||
"integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-intl": {
|
||||
"version": "6.6.8",
|
||||
"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
|
||||
|
|
@ -33747,6 +33932,36 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-joyride": {
|
||||
"version": "2.9.3",
|
||||
"resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
|
||||
"integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
|
||||
"requires": {
|
||||
"@gilbarbara/deep-equal": "^0.3.1",
|
||||
"deep-diff": "^1.0.2",
|
||||
"deepmerge": "^4.3.1",
|
||||
"is-lite": "^1.2.1",
|
||||
"react-floater": "^0.7.9",
|
||||
"react-innertext": "^1.1.5",
|
||||
"react-is": "^16.13.1",
|
||||
"scroll": "^3.0.1",
|
||||
"scrollparent": "^2.1.0",
|
||||
"tree-changes": "^0.11.2",
|
||||
"type-fest": "^4.27.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"type-fest": {
|
||||
"version": "4.41.0",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
|
||||
"integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
|
||||
|
|
@ -34334,6 +34549,16 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"scroll": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
|
||||
"integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="
|
||||
},
|
||||
"scrollparent": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
|
||||
"integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
|
|
@ -35520,6 +35745,15 @@
|
|||
"punycode": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"tree-changes": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
|
||||
"integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
|
||||
"requires": {
|
||||
"@gilbarbara/deep-equal": "^0.3.1",
|
||||
"is-lite": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"tryer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
"react-icons": "^4.11.0",
|
||||
"react-icons-converter": "^1.1.4",
|
||||
"react-intl": "^6.4.4",
|
||||
"react-joyride": "^2.9.3",
|
||||
"react-redux": "^8.1.3",
|
||||
"react-router": "6.3.0",
|
||||
"react-router-dom": "6.3.0",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import AccessContextProvider from './contexts/AccessContextProvider';
|
|||
import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations';
|
||||
import SodioHomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
|
||||
import { ProductIdContext } from './contexts/ProductIdContextProvider';
|
||||
import { TourProvider } from './contexts/TourContext';
|
||||
|
||||
function App() {
|
||||
const context = useContext(UserContext);
|
||||
|
|
@ -127,22 +128,28 @@ function App() {
|
|||
if (!token) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<CssBaseline />
|
||||
<Routes>
|
||||
<Route
|
||||
path={''}
|
||||
element={<Navigate to={routes.login}></Navigate>}
|
||||
></Route>
|
||||
<Route path={routes.login} element={<Login></Login>}></Route>
|
||||
<Route
|
||||
path={routes.forgotPassword}
|
||||
element={<ForgotPassword />}
|
||||
></Route>
|
||||
<Route
|
||||
path={'*'}
|
||||
element={<Navigate to={routes.login}></Navigate>}
|
||||
></Route>
|
||||
</Routes>
|
||||
<IntlProvider
|
||||
messages={getTranslations()}
|
||||
locale={language}
|
||||
defaultLocale="en"
|
||||
>
|
||||
<CssBaseline />
|
||||
<Routes>
|
||||
<Route
|
||||
path={''}
|
||||
element={<Navigate to={routes.login}></Navigate>}
|
||||
></Route>
|
||||
<Route path={routes.login} element={<Login></Login>}></Route>
|
||||
<Route
|
||||
path={routes.forgotPassword}
|
||||
element={<ForgotPassword />}
|
||||
></Route>
|
||||
<Route
|
||||
path={'*'}
|
||||
element={<Navigate to={routes.login}></Navigate>}
|
||||
></Route>
|
||||
</Routes>
|
||||
</IntlProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -163,6 +170,7 @@ function App() {
|
|||
locale={language}
|
||||
defaultLocale="en"
|
||||
>
|
||||
<TourProvider>
|
||||
<InstallationsContextProvider>
|
||||
<CssBaseline />
|
||||
<Routes>
|
||||
|
|
@ -237,6 +245,7 @@ function App() {
|
|||
</Route>
|
||||
</Routes>
|
||||
</InstallationsContextProvider>
|
||||
</TourProvider>
|
||||
</IntlProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
import { Step } from 'react-joyride';
|
||||
import { IntlShape } from 'react-intl';
|
||||
|
||||
// --- Build a single step with i18n ---
|
||||
|
||||
function makeStep(
|
||||
intl: IntlShape,
|
||||
target: string,
|
||||
titleId: string,
|
||||
contentId: string,
|
||||
placement: Step['placement'] = 'bottom',
|
||||
disableBeacon = false
|
||||
): Step {
|
||||
return {
|
||||
target,
|
||||
title: intl.formatMessage({ id: titleId }),
|
||||
content: intl.formatMessage({ id: contentId }),
|
||||
placement,
|
||||
...(disableBeacon ? { disableBeacon: true } : {})
|
||||
};
|
||||
}
|
||||
|
||||
// --- Tab key → i18n key mapping ---
|
||||
|
||||
const tabConfig: Record<string, { titleId: string; contentId: string }> = {
|
||||
list: { titleId: 'tourListTitle', contentId: 'tourListContent' },
|
||||
tree: { titleId: 'tourTreeTitle', contentId: 'tourTreeContent' },
|
||||
live: { titleId: 'tourLiveTitle', contentId: 'tourLiveContent' },
|
||||
overview: { titleId: 'tourOverviewTitle', contentId: 'tourOverviewContent' },
|
||||
batteryview: { titleId: 'tourBatteryviewTitle', contentId: 'tourBatteryviewContent' },
|
||||
pvview: { titleId: 'tourPvviewTitle', contentId: 'tourPvviewContent' },
|
||||
log: { titleId: 'tourLogTitle', contentId: 'tourLogContent' },
|
||||
information: { titleId: 'tourInformationTitle', contentId: 'tourInformationContent' },
|
||||
report: { titleId: 'tourReportTitle', contentId: 'tourReportContent' },
|
||||
manage: { titleId: 'tourManageTitle', contentId: 'tourManageContent' },
|
||||
configuration: { titleId: 'tourConfigurationTitle', contentId: 'tourConfigurationContent' },
|
||||
history: { titleId: 'tourHistoryTitle', contentId: 'tourHistoryContent' }
|
||||
};
|
||||
|
||||
// Steps to skip inside a specific installation (already covered in the list-page tour)
|
||||
const listPageOnlyTabs = new Set(['list', 'tree']);
|
||||
|
||||
// --- Build tour steps from tab value list ---
|
||||
|
||||
function buildTourSteps(intl: IntlShape, tabValues: string[], includeInstallationHint = false, isInsideInstallation = false): Step[] {
|
||||
const steps: Step[] = [];
|
||||
if (!isInsideInstallation) {
|
||||
steps.push(makeStep(intl, '[data-tour="language-selector"]', 'tourLanguageTitle', 'tourLanguageContent', 'bottom', true));
|
||||
}
|
||||
for (const value of tabValues) {
|
||||
if (isInsideInstallation && listPageOnlyTabs.has(value)) continue;
|
||||
const cfg = tabConfig[value];
|
||||
if (cfg) {
|
||||
steps.push(makeStep(intl, `#tour-tab-${value}`, cfg.titleId, cfg.contentId, 'bottom', steps.length === 0));
|
||||
}
|
||||
}
|
||||
if (includeInstallationHint && !isInsideInstallation) {
|
||||
steps.push(makeStep(intl, '#tour-tab-list', 'tourExploreTitle', 'tourExploreContent'));
|
||||
}
|
||||
return steps;
|
||||
}
|
||||
|
||||
// --- Sodistore Home (product 2) ---
|
||||
|
||||
export const buildSodiohomeCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'live', 'overview', 'information', 'report'
|
||||
], false, inside);
|
||||
|
||||
export const buildSodiohomePartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'log', 'information', 'report'
|
||||
], true, inside);
|
||||
|
||||
export const buildSodiohomeAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'log', 'manage', 'information', 'configuration', 'history', 'report'
|
||||
], true, inside);
|
||||
|
||||
// --- Salimax (product 0) / Sodistore Max (product 3) ---
|
||||
|
||||
export const buildSalimaxCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'live', 'overview', 'information'
|
||||
], false, inside);
|
||||
|
||||
export const buildSalimaxPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'pvview', 'information'
|
||||
], true, inside);
|
||||
|
||||
export const buildSalimaxAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'manage', 'log', 'information', 'configuration', 'history', 'pvview'
|
||||
], true, inside);
|
||||
|
||||
// --- Sodistore Grid (product 4) — same as Salimax but no PV View ---
|
||||
|
||||
export const buildSodistoregridCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'live', 'overview', 'information'
|
||||
], false, inside);
|
||||
|
||||
export const buildSodistoregridPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'information'
|
||||
], true, inside);
|
||||
|
||||
export const buildSodistoregridAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'live', 'overview', 'batteryview', 'manage', 'log', 'information', 'configuration', 'history'
|
||||
], true, inside);
|
||||
|
||||
// --- Salidomo (product 1) ---
|
||||
|
||||
export const buildSalidomoCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'batteryview', 'overview', 'information'
|
||||
], false, inside);
|
||||
|
||||
export const buildSalidomoPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'batteryview', 'overview', 'information'
|
||||
], true, inside);
|
||||
|
||||
export const buildSalidomoAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
|
||||
'list', 'tree', 'batteryview', 'overview', 'log', 'manage', 'information', 'history'
|
||||
], true, inside);
|
||||
|
|
@ -412,6 +412,7 @@ function InstallationTabs(props: InstallationTabsProps) {
|
|||
? routes[tab.value]
|
||||
: navigateToTabPath(location.pathname, routes[tab.value])
|
||||
}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
@ -480,6 +481,7 @@ function InstallationTabs(props: InstallationTabsProps) {
|
|||
component={Link}
|
||||
label={tab.label}
|
||||
to={routes[tab.value]}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -288,6 +288,7 @@ function SalidomoInstallationTabs(props: InstallationTabsProps) {
|
|||
? routes[tab.value]
|
||||
: navigateToTabPath(location.pathname, routes[tab.value])
|
||||
}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
@ -349,6 +350,7 @@ function SalidomoInstallationTabs(props: InstallationTabsProps) {
|
|||
component={Link}
|
||||
label={tab.label}
|
||||
to={routes[tab.value]}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -416,6 +416,7 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
|
|||
icon={tab.icon}
|
||||
component={Link}
|
||||
label={tab.label}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
to={
|
||||
tab.value === 'list' || tab.value === 'tree'
|
||||
? routes[tab.value]
|
||||
|
|
@ -482,6 +483,7 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
|
|||
component={Link}
|
||||
label={tab.label}
|
||||
to={routes[tab.value]}
|
||||
id={`tour-tab-${tab.value}`}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
|
||||
interface TourContextType {
|
||||
runTour: boolean;
|
||||
startTour: () => void;
|
||||
stopTour: () => void;
|
||||
}
|
||||
|
||||
const TourContext = createContext<TourContextType>({
|
||||
runTour: false,
|
||||
startTour: () => {},
|
||||
stopTour: () => {}
|
||||
});
|
||||
|
||||
export const useTour = () => useContext(TourContext);
|
||||
|
||||
interface TourProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function TourProvider({ children }: TourProviderProps) {
|
||||
const [runTour, setRunTour] = useState(false);
|
||||
|
||||
const startTour = useCallback(() => setRunTour(true), []);
|
||||
const stopTour = useCallback(() => setRunTour(false), []);
|
||||
|
||||
return (
|
||||
<TourContext.Provider value={{ runTour, startTour, stopTour }}>
|
||||
{children}
|
||||
</TourContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
@ -469,5 +469,33 @@
|
|||
"powerW": "Leistung (W)",
|
||||
"enterPowerValue": "Positiven oder negativen Leistungswert eingeben",
|
||||
"startDateTime": "Startdatum und -zeit (Startzeit < Stoppzeit)",
|
||||
"stopDateTime": "Stoppdatum und -zeit (Startzeit < Stoppzeit)"
|
||||
"stopDateTime": "Stoppdatum und -zeit (Startzeit < Stoppzeit)",
|
||||
"tourLanguageTitle": "Sprache",
|
||||
"tourLanguageContent": "Wählen Sie Ihre bevorzugte Sprache. Die Oberfläche unterstützt Englisch, Deutsch, Französisch und Italienisch.",
|
||||
"tourExploreTitle": "Installation erkunden",
|
||||
"tourExploreContent": "Klicken Sie auf eine Installation, um sie zu öffnen. Klicken Sie darin erneut auf die Tour-Schaltfläche für eine detaillierte Anleitung aller verfügbaren Tabs.",
|
||||
"tourListTitle": "Installationsliste",
|
||||
"tourListContent": "Suchen und durchsuchen Sie alle Ihre Installationen. Klicken Sie auf eine Installation, um deren Dashboard zu öffnen.",
|
||||
"tourTreeTitle": "Ordneransicht",
|
||||
"tourTreeContent": "Ihre Installationen nach Ordnern organisiert. Erweitern Sie Ordner, um Installationen nach Standort zu finden.",
|
||||
"tourLiveTitle": "Live-Daten",
|
||||
"tourLiveContent": "Echtzeitdaten Ihres Systems — Batteriestatus, Energiefluss und Systemstatus, kontinuierlich aktualisiert.",
|
||||
"tourOverviewTitle": "Überblick",
|
||||
"tourOverviewContent": "Visuelle Zusammenfassung mit Diagrammen — Produktion, Verbrauch und Batterieladung im Zeitverlauf. Verwenden Sie die Datumssteuerung, um einen bestimmten Tag oder Zeitraum anzuzeigen.",
|
||||
"tourBatteryviewTitle": "Batterieansicht",
|
||||
"tourBatteryviewContent": "Detaillierte Batterieüberwachung — Ladezustand (%), Energiefluss (kW), Spannung und Strom pro Batterieeinheit.",
|
||||
"tourPvviewTitle": "PV-Ansicht",
|
||||
"tourPvviewContent": "Solaranlagen-Überwachung — Produktionsdaten Ihrer Photovoltaikanlage.",
|
||||
"tourLogTitle": "Protokoll",
|
||||
"tourLogContent": "Geräte-Ereignisprotokolle — Systemereignisse, Warnungen und Fehler im Zeitverlauf.",
|
||||
"tourInformationTitle": "Systeminformationen",
|
||||
"tourInformationContent": "Installationsdetails — Standort, Geräteseriennummern und Firmware-Versionen. Nutzen Sie dies als Referenz bei Kontakt mit dem Support.",
|
||||
"tourReportTitle": "Energieberichte",
|
||||
"tourReportContent": "Energiedaten in kWh anzeigen. Wechseln Sie zwischen wöchentlichen (Montag–Sonntag), monatlichen und jährlichen Berichten, um zu sehen, wie viel Energie produziert, verbraucht oder gespeichert wurde.",
|
||||
"tourManageTitle": "Zugriffsverwaltung",
|
||||
"tourManageContent": "Verwalten Sie, welche Benutzer Zugriff auf diese Installation haben, und legen Sie deren Berechtigungen fest.",
|
||||
"tourConfigurationTitle": "Konfiguration",
|
||||
"tourConfigurationContent": "Geräteeinstellungen für diese Installation anzeigen und ändern.",
|
||||
"tourHistoryTitle": "Verlauf",
|
||||
"tourHistoryContent": "Protokoll der Aktionen an dieser Installation — wer hat was und wann geändert."
|
||||
}
|
||||
|
|
@ -217,5 +217,33 @@
|
|||
"powerW": "Power (W)",
|
||||
"enterPowerValue": "Enter a positive or negative power value",
|
||||
"startDateTime": "Start Date and Time (Start Time < Stop Time)",
|
||||
"stopDateTime": "Stop Date and Time (Start Time < Stop Time)"
|
||||
"stopDateTime": "Stop Date and Time (Start Time < Stop Time)",
|
||||
"tourLanguageTitle": "Language",
|
||||
"tourLanguageContent": "Choose your preferred language. The interface supports English, German, French, and Italian.",
|
||||
"tourExploreTitle": "Explore an Installation",
|
||||
"tourExploreContent": "Click any installation to open it. Once inside, click the tour button again for a detailed guide of all available tabs.",
|
||||
"tourListTitle": "Installation List",
|
||||
"tourListContent": "Search and browse all your installations. Click any installation to open its dashboard.",
|
||||
"tourTreeTitle": "Folder View",
|
||||
"tourTreeContent": "Your installations organised in folders. Expand folders to find installations by site or location.",
|
||||
"tourLiveTitle": "Live Data",
|
||||
"tourLiveContent": "Real-time data from your system — battery state, power flow, and system status, updated continuously.",
|
||||
"tourOverviewTitle": "Overview",
|
||||
"tourOverviewContent": "Visual summary with charts — production, consumption, and battery charge over time. Use the date controls to view a specific day or custom range.",
|
||||
"tourBatteryviewTitle": "Battery View",
|
||||
"tourBatteryviewContent": "Detailed battery monitoring — state of charge (%), power flow (kW), voltage, and current per battery unit.",
|
||||
"tourPvviewTitle": "PV View",
|
||||
"tourPvviewContent": "Solar panel monitoring — see production data from your photovoltaic system.",
|
||||
"tourLogTitle": "Log",
|
||||
"tourLogContent": "Device event logs — view system events, warnings, and errors over time.",
|
||||
"tourInformationTitle": "System Information",
|
||||
"tourInformationContent": "Installation details — location, device serial numbers, and firmware versions. Use this as reference if you contact support.",
|
||||
"tourReportTitle": "Energy Reports",
|
||||
"tourReportContent": "View energy data in kWh. Switch between weekly (Monday–Sunday), monthly, and yearly reports to see how much energy was produced, consumed, or stored.",
|
||||
"tourManageTitle": "Access Management",
|
||||
"tourManageContent": "Manage which users have access to this installation and set their permissions.",
|
||||
"tourConfigurationTitle": "Configuration",
|
||||
"tourConfigurationContent": "View and modify device settings for this installation.",
|
||||
"tourHistoryTitle": "History",
|
||||
"tourHistoryContent": "Audit trail of actions performed on this installation — who changed what and when."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -469,5 +469,33 @@
|
|||
"powerW": "Puissance (W)",
|
||||
"enterPowerValue": "Entrez une valeur de puissance positive ou négative",
|
||||
"startDateTime": "Date et heure de début (Début < Fin)",
|
||||
"stopDateTime": "Date et heure de fin (Début < Fin)"
|
||||
"stopDateTime": "Date et heure de fin (Début < Fin)",
|
||||
"tourLanguageTitle": "Langue",
|
||||
"tourLanguageContent": "Choisissez votre langue préférée. L'interface est disponible en anglais, allemand, français et italien.",
|
||||
"tourExploreTitle": "Explorer une installation",
|
||||
"tourExploreContent": "Cliquez sur une installation pour l'ouvrir. Une fois à l'intérieur, cliquez à nouveau sur le bouton de visite pour un guide détaillé de tous les onglets disponibles.",
|
||||
"tourListTitle": "Liste des installations",
|
||||
"tourListContent": "Recherchez et parcourez toutes vos installations. Cliquez sur une installation pour ouvrir son tableau de bord.",
|
||||
"tourTreeTitle": "Vue par dossiers",
|
||||
"tourTreeContent": "Vos installations organisées en dossiers. Développez les dossiers pour trouver les installations par site ou emplacement.",
|
||||
"tourLiveTitle": "Données en direct",
|
||||
"tourLiveContent": "Données en temps réel de votre système — état de la batterie, flux d'énergie et état du système, mis à jour en continu.",
|
||||
"tourOverviewTitle": "Aperçu",
|
||||
"tourOverviewContent": "Résumé visuel avec graphiques — production, consommation et charge de la batterie au fil du temps. Utilisez les contrôles de date pour afficher un jour spécifique ou une plage personnalisée.",
|
||||
"tourBatteryviewTitle": "Vue batterie",
|
||||
"tourBatteryviewContent": "Surveillance détaillée de la batterie — état de charge (%), flux d'énergie (kW), tension et courant par unité de batterie.",
|
||||
"tourPvviewTitle": "Vue PV",
|
||||
"tourPvviewContent": "Surveillance des panneaux solaires — consultez les données de production de votre système photovoltaïque.",
|
||||
"tourLogTitle": "Journal",
|
||||
"tourLogContent": "Journaux d'événements — événements système, avertissements et erreurs au fil du temps.",
|
||||
"tourInformationTitle": "Informations système",
|
||||
"tourInformationContent": "Détails de l'installation — emplacement, numéros de série des appareils et versions du firmware. Utilisez ceci comme référence si vous contactez le support.",
|
||||
"tourReportTitle": "Rapports énergétiques",
|
||||
"tourReportContent": "Afficher les données énergétiques en kWh. Basculez entre les rapports hebdomadaires (lundi–dimanche), mensuels et annuels pour voir combien d'énergie a été produite, consommée ou stockée.",
|
||||
"tourManageTitle": "Gestion des accès",
|
||||
"tourManageContent": "Gérez quels utilisateurs ont accès à cette installation et définissez leurs autorisations.",
|
||||
"tourConfigurationTitle": "Configuration",
|
||||
"tourConfigurationContent": "Afficher et modifier les paramètres de l'appareil pour cette installation.",
|
||||
"tourHistoryTitle": "Historique",
|
||||
"tourHistoryContent": "Journal des actions effectuées sur cette installation — qui a changé quoi et quand."
|
||||
}
|
||||
|
|
@ -469,5 +469,33 @@
|
|||
"powerW": "Potenza (W)",
|
||||
"enterPowerValue": "Inserire un valore di potenza positivo o negativo",
|
||||
"startDateTime": "Data e ora di inizio (Inizio < Fine)",
|
||||
"stopDateTime": "Data e ora di fine (Inizio < Fine)"
|
||||
"stopDateTime": "Data e ora di fine (Inizio < Fine)",
|
||||
"tourLanguageTitle": "Lingua",
|
||||
"tourLanguageContent": "Scegli la tua lingua preferita. L'interfaccia supporta inglese, tedesco, francese e italiano.",
|
||||
"tourExploreTitle": "Esplora un'installazione",
|
||||
"tourExploreContent": "Clicca su un'installazione per aprirla. Una volta dentro, clicca nuovamente sul pulsante del tour per una guida dettagliata di tutte le schede disponibili.",
|
||||
"tourListTitle": "Elenco installazioni",
|
||||
"tourListContent": "Cerca e sfoglia tutte le tue installazioni. Clicca su un'installazione per aprire la sua dashboard.",
|
||||
"tourTreeTitle": "Vista cartelle",
|
||||
"tourTreeContent": "Le tue installazioni organizzate in cartelle. Espandi le cartelle per trovare le installazioni per sito o posizione.",
|
||||
"tourLiveTitle": "Dati in tempo reale",
|
||||
"tourLiveContent": "Dati in tempo reale dal tuo sistema — stato della batteria, flusso di energia e stato del sistema, aggiornati continuamente.",
|
||||
"tourOverviewTitle": "Panoramica",
|
||||
"tourOverviewContent": "Riepilogo visivo con grafici — produzione, consumo e carica della batteria nel tempo. Usa i controlli della data per visualizzare un giorno specifico o un intervallo personalizzato.",
|
||||
"tourBatteryviewTitle": "Vista batteria",
|
||||
"tourBatteryviewContent": "Monitoraggio dettagliato della batteria — stato di carica (%), flusso di energia (kW), tensione e corrente per unità di batteria.",
|
||||
"tourPvviewTitle": "Vista PV",
|
||||
"tourPvviewContent": "Monitoraggio dei pannelli solari — visualizza i dati di produzione del tuo impianto fotovoltaico.",
|
||||
"tourLogTitle": "Registro",
|
||||
"tourLogContent": "Registri degli eventi — eventi di sistema, avvisi ed errori nel tempo.",
|
||||
"tourInformationTitle": "Informazioni di sistema",
|
||||
"tourInformationContent": "Dettagli dell'installazione — posizione, numeri di serie dei dispositivi e versioni firmware. Usa come riferimento se contatti l'assistenza.",
|
||||
"tourReportTitle": "Rapporti energetici",
|
||||
"tourReportContent": "Visualizza i dati energetici in kWh. Passa tra rapporti settimanali (lunedì–domenica), mensili e annuali per vedere quanta energia è stata prodotta, consumata o immagazzinata.",
|
||||
"tourManageTitle": "Gestione accessi",
|
||||
"tourManageContent": "Gestisci quali utenti hanno accesso a questa installazione e imposta i loro permessi.",
|
||||
"tourConfigurationTitle": "Configurazione",
|
||||
"tourConfigurationContent": "Visualizza e modifica le impostazioni del dispositivo per questa installazione.",
|
||||
"tourHistoryTitle": "Cronologia",
|
||||
"tourHistoryContent": "Registro delle azioni eseguite su questa installazione — chi ha cambiato cosa e quando."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ function HeaderMenu(props: HeaderButtonsProps) {
|
|||
sx={{
|
||||
color: isMobile ? 'white' : ''
|
||||
}}
|
||||
data-tour="language-selector"
|
||||
>
|
||||
<List disablePadding component={Box} display="flex">
|
||||
<ListItem
|
||||
|
|
|
|||
|
|
@ -13,10 +13,12 @@ import {
|
|||
useTheme
|
||||
} from '@mui/material';
|
||||
import MenuTwoToneIcon from '@mui/icons-material/MenuTwoTone';
|
||||
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
||||
import { SidebarContext } from 'src/contexts/SidebarContext';
|
||||
import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
|
||||
import HeaderUserbox from './Userbox';
|
||||
import HeaderMenu from './Menu';
|
||||
import { useTour } from 'src/contexts/TourContext';
|
||||
|
||||
const HeaderWrapper = styled(Box)(
|
||||
({ theme }) => `
|
||||
|
|
@ -44,6 +46,7 @@ interface HeaderProps {
|
|||
|
||||
function Header(props: HeaderProps) {
|
||||
const { sidebarToggle, toggleSidebar } = useContext(SidebarContext);
|
||||
const { startTour } = useTour();
|
||||
const theme = useTheme();
|
||||
const isMobile = window.innerWidth <= 1280;
|
||||
|
||||
|
|
@ -96,6 +99,14 @@ function Header(props: HeaderProps) {
|
|||
></Stack>
|
||||
|
||||
<Box display="flex" alignItems="center">
|
||||
<Tooltip arrow title="Take a Tour">
|
||||
<IconButton
|
||||
sx={{ color: isMobile ? 'white' : theme.header.textColor }}
|
||||
onClick={startTour}
|
||||
>
|
||||
<HelpOutlineIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<HeaderMenu
|
||||
language={props.language}
|
||||
onSelectLanguage={props.onSelectLanguage}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { ReactNode, useContext, useEffect, useState } from 'react';
|
||||
import { alpha, Box, lighten, useTheme } from '@mui/material';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Outlet, useLocation } from 'react-router-dom';
|
||||
import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
|
||||
import { useIntl, IntlShape } from 'react-intl';
|
||||
import { useTour } from 'src/contexts/TourContext';
|
||||
import { UserContext } from 'src/contexts/userContext';
|
||||
import { UserType } from 'src/interfaces/UserTypes';
|
||||
import {
|
||||
buildSodiohomeCustomerTourSteps, buildSodiohomePartnerTourSteps, buildSodiohomeAdminTourSteps,
|
||||
buildSalimaxCustomerTourSteps, buildSalimaxPartnerTourSteps, buildSalimaxAdminTourSteps,
|
||||
buildSodistoregridCustomerTourSteps, buildSodistoregridPartnerTourSteps, buildSodistoregridAdminTourSteps,
|
||||
buildSalidomoCustomerTourSteps, buildSalidomoPartnerTourSteps, buildSalidomoAdminTourSteps
|
||||
} from 'src/config/tourSteps';
|
||||
|
||||
import Sidebar from './Sidebar';
|
||||
import Header from './Header';
|
||||
|
|
@ -11,11 +22,88 @@ interface SidebarLayoutProps {
|
|||
onSelectLanguage: (item: string) => void;
|
||||
}
|
||||
|
||||
function getTourSteps(pathname: string, userType: UserType, intl: IntlShape, isInsideInstallation: boolean): Step[] {
|
||||
const role = userType === UserType.admin ? 'admin'
|
||||
: userType === UserType.partner ? 'partner'
|
||||
: 'customer';
|
||||
|
||||
if (pathname.includes('/sodiohome_installations')) {
|
||||
if (role === 'admin') return buildSodiohomeAdminTourSteps(intl, isInsideInstallation);
|
||||
if (role === 'partner') return buildSodiohomePartnerTourSteps(intl, isInsideInstallation);
|
||||
return buildSodiohomeCustomerTourSteps(intl, isInsideInstallation);
|
||||
}
|
||||
if (pathname.includes('/salidomo_installations')) {
|
||||
if (role === 'admin') return buildSalidomoAdminTourSteps(intl, isInsideInstallation);
|
||||
if (role === 'partner') return buildSalidomoPartnerTourSteps(intl, isInsideInstallation);
|
||||
return buildSalidomoCustomerTourSteps(intl, isInsideInstallation);
|
||||
}
|
||||
if (pathname.includes('/sodistoregrid_installations')) {
|
||||
if (role === 'admin') return buildSodistoregridAdminTourSteps(intl, isInsideInstallation);
|
||||
if (role === 'partner') return buildSodistoregridPartnerTourSteps(intl, isInsideInstallation);
|
||||
return buildSodistoregridCustomerTourSteps(intl, isInsideInstallation);
|
||||
}
|
||||
// Salimax (/installations/) and Sodistore Max (/sodistore_installations/)
|
||||
if (role === 'admin') return buildSalimaxAdminTourSteps(intl, isInsideInstallation);
|
||||
if (role === 'partner') return buildSalimaxPartnerTourSteps(intl, isInsideInstallation);
|
||||
return buildSalimaxCustomerTourSteps(intl, isInsideInstallation);
|
||||
}
|
||||
|
||||
const SidebarLayout = (props: SidebarLayoutProps) => {
|
||||
const theme = useTheme();
|
||||
const intl = useIntl();
|
||||
const { runTour, stopTour } = useTour();
|
||||
const location = useLocation();
|
||||
const { currentUser } = useContext(UserContext);
|
||||
const [tourSteps, setTourSteps] = useState<Step[]>([]);
|
||||
const [tourReady, setTourReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!runTour) {
|
||||
setTourReady(false);
|
||||
return;
|
||||
}
|
||||
// Delay to let child components render their tour target elements
|
||||
const timer = setTimeout(() => {
|
||||
const userType = currentUser?.userType ?? UserType.client;
|
||||
const isInsideInstallation = location.pathname.includes('/installation/');
|
||||
const steps = getTourSteps(location.pathname, userType, intl, isInsideInstallation);
|
||||
const filtered = steps.filter((step) => {
|
||||
if (typeof step.target === 'string') {
|
||||
return document.querySelector(step.target) !== null;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
setTourSteps(filtered);
|
||||
setTourReady(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [runTour, location.pathname, currentUser?.userType, intl]);
|
||||
|
||||
const handleJoyrideCallback = (data: CallBackProps) => {
|
||||
const { status } = data;
|
||||
if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
|
||||
stopTour();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Joyride
|
||||
steps={tourSteps}
|
||||
run={tourReady}
|
||||
callback={handleJoyrideCallback}
|
||||
continuous
|
||||
showSkipButton
|
||||
showProgress
|
||||
scrollToFirstStep
|
||||
disableOverlayClose
|
||||
styles={{
|
||||
options: {
|
||||
primaryColor: '#ffc04d',
|
||||
zIndex: 10000
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
|
|
|
|||
Loading…
Reference in New Issue