Compare commits
13
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 chight
|
c5f8c848a5 | ||
 vkuchenik
|
c7dcf193f9 | ||
|
vkuchenik
|
6c0664d05a | ||
|
vkuchenik
|
43cc39fd62 | ||
|
vkuchenik
|
75b65bfcaa | ||
|
vkuchenik
|
7e0723a776 | ||
|
vkuchenik
|
6304db66c2 | ||
|
vkuchenik
|
6eb5e42111 | ||
|
vkuchenik
|
152aacb1c3 | ||
|
vkuchenik
|
1f2b578c91 | ||
|
vkuchenik
|
a5f2f012dc | ||
|
vkuchenik
|
0381bc3ce8 | ||
|
vkuchenik
|
f2637c7469 |
Generated
+390
@@ -11,6 +11,7 @@
|
||||
"@chakra-ui/react": "^3.22.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@svar-ui/react-gantt": "^2.7.3",
|
||||
"axios": "^1.18.1",
|
||||
"framer-motion": "^12.23.0",
|
||||
"leaflet": "^1.9.4",
|
||||
@@ -3106,6 +3107,385 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/comments-locales": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/comments-locales/-/comments-locales-2.6.1.tgz",
|
||||
"integrity": "sha512-jouLSwt0rPp2818bHftsb37aU8ERsyBney8XVUHhnWrsIaGJy/0TSOCw6YqN3cae6SQBd6KBO+P1+hBcDEsmUg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/core-locales": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/core-locales/-/core-locales-2.6.1.tgz",
|
||||
"integrity": "sha512-18xu7qn8Bxwi2EHguVV3Xya5kS+A+6Gnuo2wl55dofp9y948iZ5z7HIRh1+Mj1BgzbdVt6+B04JOCDMLJXyjtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/editor-locales": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/editor-locales/-/editor-locales-2.6.1.tgz",
|
||||
"integrity": "sha512-HFEB43W+AEUjoBh3ZsrlLFFTVh8WYPVpZeOiCfptS5hS0qC8pEnqaXtreM6TM1g3W5VHHOR+sXsWkIxAoeKVvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/filter-locales": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/filter-locales/-/filter-locales-2.6.1.tgz",
|
||||
"integrity": "sha512-m963r4TnZxiZ6XzfJYvSmiYcmgSgKhkzpOVcUP25AviWle1oPulyv4Qe28Rak3JaAOFAHQAf0EucoaSMJzvK6A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/filter-store": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/filter-store/-/filter-store-2.6.1.tgz",
|
||||
"integrity": "sha512-2UHeXuNYN56MokBhB48EJ7KvKDVAJbRP2nIbE6t7lbsnWhRsBGxPc4jjUQn/9K+MTGkxrzPrOfeoH8L4p3Hy5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/filter-store/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/gantt-data-provider": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/gantt-data-provider/-/gantt-data-provider-2.7.2.tgz",
|
||||
"integrity": "sha512-4j+fWq0y7+qfBcu0R5YS13M1u9fKJiH9YQt/81fRRFcRu12Rvpi/HDXeOVpE/APvsM8NoHJdd5kKK6f59qmE+w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-data-provider": "1.7.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/gantt-locales": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/gantt-locales/-/gantt-locales-2.7.2.tgz",
|
||||
"integrity": "sha512-yEihUiPx9dgr0FLfAoNpgS6QcVjYLqdW2TbyilZ0UaA3YLORly9lbmCI0PPnAALa73ws0qUy2AYaL1nTq0T4/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/gantt-store": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/gantt-store/-/gantt-store-2.7.2.tgz",
|
||||
"integrity": "sha512-krax1GzUWBOTcMVTaaqYlMuJ5lNBkzA6VIhNCnHq+0kFnHg52Hx+D0MQnMkSOUyFA2w0SoiYvUYuAGiQx4eA9A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"date-fns": "3.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/grid-data-provider": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/grid-data-provider/-/grid-data-provider-2.7.3.tgz",
|
||||
"integrity": "sha512-MFobgoczW6wBPjKq8fTORlJEEn2f6jHKWH1h3pC6qmcKr8GRA+TaRaFPVcI2iD5pOc+h/JZxuKE6L+x99S2Uwg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-data-provider": "1.7.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/grid-data-provider/node_modules/@svar-ui/lib-data-provider": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-data-provider/-/lib-data-provider-1.7.2.tgz",
|
||||
"integrity": "sha512-Od93Iiy0vBwVzgJm25WdizH3d4Xlli/HAA2kqoUj1pzeZ2SWBeFzvE59iihQz8NuIlfAtQJ6MMe168458T+2lQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/grid-data-provider/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/grid-locales": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/grid-locales/-/grid-locales-2.7.3.tgz",
|
||||
"integrity": "sha512-bgB2TfSKjY7mYeTzJjCyOoPco7boz+SQ0xFFsnRp849QN5sJoJEtOl/xnzbR58bLdxq57ne5Z708ozxXDT36lQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/grid-store": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/grid-store/-/grid-store-2.7.3.tgz",
|
||||
"integrity": "sha512-YVmLnFLq7P3ACAos0EiMYHLQbnmjaukmUaMoraTG8vhFsI5BwVaeSFdeC9MQIjbIMlxn/uMA0eEXmZuSxHk2hA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-dom": "0.12.1",
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/grid-store/node_modules/@svar-ui/lib-dom": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-dom/-/lib-dom-0.12.1.tgz",
|
||||
"integrity": "sha512-srvDleQqR6stBBDijCgzDHMFTTffI6sv3XCpNPKmurrnE83L1MDNqezqg6j3+0dUVPd4AAEGOez2DvK6byblTQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/grid-store/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/lib-data-provider": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-data-provider/-/lib-data-provider-1.7.1.tgz",
|
||||
"integrity": "sha512-5Bi9ywngcMTKpGtan0s7q8ivd84Bp0ZnRP+5bLZg6oiRB7YMyN5D5X+apc3CWDAnG4zZn3en4YwS2qc/aHIIuQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/lib-data-provider/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/lib-dom": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-dom/-/lib-dom-0.14.0.tgz",
|
||||
"integrity": "sha512-9uao5ebcQmuW0RoMu1LCesPsZ7i6G3xIvYAQzX/aeg662Yy/ETsNVy1pXoSa2q5v6ccAMjVxFrFCYReK7fzaJQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/lib-react": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-react/-/lib-react-1.3.0.tgz",
|
||||
"integrity": "sha512-jVcREYAMAXOhZB/lbMmLteGKIZoUW3rzmoXCMcFLGcHIGUH7AjFrKOAG/SJvgV0grcG9XyuRTG3jp++6NIGtuw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-dom": "^0.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/lib-react/node_modules/@svar-ui/lib-dom": {
|
||||
"version": "0.12.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-dom/-/lib-dom-0.12.2.tgz",
|
||||
"integrity": "sha512-tV9sJ7Xpedxf1dttTc8I190eqlP0UsassUw48uW3JuEQR0G3IRfmH53/X+mYEooc7bcpZDkzYukWEqJeEq9UlQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.7",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.7.tgz",
|
||||
"integrity": "sha512-nxRdk+54m1RJjGT2yDH7NjxAM5KECxA39kdTZezEIj1ixykyefssB9BrgxKy2jIseYxJMtd6lPZvQ3SZXuvn2g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/react-comments": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-comments/-/react-comments-2.6.1.tgz",
|
||||
"integrity": "sha512-bdO8DHIZ/qpQNXeZzNuU2cbUsiyen+bc2/sS9h7PLzCSeeGmKwAyHeTyO06WvsVxUgQSBAfp2Eom+xFNDaQcXw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/comments-locales": "2.6.1",
|
||||
"@svar-ui/core-locales": "2.6.1",
|
||||
"@svar-ui/lib-data-provider": "1.7.3",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/react-menu": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-comments/node_modules/@svar-ui/lib-data-provider": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-data-provider/-/lib-data-provider-1.7.3.tgz",
|
||||
"integrity": "sha512-+UAM1VybQco5N52iv6rVcDwOJ5G1qE+V+nvaoBHx41H05w4TZTFJL+UnRy99NDLrVbLoCWhoH3L8vyNmZVjTvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-comments/node_modules/@svar-ui/lib-data-provider/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/react-core": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-core/-/react-core-2.6.1.tgz",
|
||||
"integrity": "sha512-1b0R+n4r/XLM2FC4mAxhyRYCI79HdrDbfe0nsOr/uJ0Ty+wxEfWglamCf6yJSM2tvmpGJQ388flDIXPbzep4Fg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/core-locales": "2.6.1",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-react": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-core/node_modules/@svar-ui/lib-react": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-react/-/lib-react-1.2.2.tgz",
|
||||
"integrity": "sha512-bB+Vou2NM0JhMuFW03MsjjoV5Y3xcFfuuK48+7uzUC9Ui1oSWpCK+txOZ+dnUFJISSVjSsXuF34AzMw/2CA63w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-dom": "^0.11.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-core/node_modules/@svar-ui/lib-react/node_modules/@svar-ui/lib-dom": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-dom/-/lib-dom-0.11.1.tgz",
|
||||
"integrity": "sha512-4wgerhDVttvrQ9t6OjHur34Of+VVr2VygA16HHGcWHytgdnOuGgfZb5PeBEhCJw/pO3RKfJvBHbaMIzL4IR//g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/react-editor": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-editor/-/react-editor-2.6.1.tgz",
|
||||
"integrity": "sha512-r/POft5rvYx43DGHHuC3yKJKani0i+jqKbWFH+j5IWUhWjnkEqdpcToehGzoXob7gyl7VuzGMQQFu8DzUcyNrw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/editor-locales": "2.6.1",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-comments": "2.6.1",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/react-tasklist": "2.6.1",
|
||||
"@svar-ui/react-toolbar": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-filter": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-filter/-/react-filter-2.6.1.tgz",
|
||||
"integrity": "sha512-GBwReaJUa7Qb7EZTJroxjzm7NIGsAEFuDoTrmJqwkcmwFB+WBukQa/2Z0mf5Ya4t4/ldt1sfOzNWlbFhMo8FTA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/filter-locales": "2.6.1",
|
||||
"@svar-ui/filter-store": "2.6.1",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-react": "1.3.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/react-menu": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-gantt": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-gantt/-/react-gantt-2.7.3.tgz",
|
||||
"integrity": "sha512-1kLEXrfJ3fkXp5NCvMHIpsjdEphy0EC5ce2nphs8GOFlsiSp6nRau+GY0Go6ivGDPdcchPkZ8a0Q1iKk3HtyRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/core-locales": "2.6.1",
|
||||
"@svar-ui/gantt-data-provider": "2.7.2",
|
||||
"@svar-ui/gantt-locales": "2.7.2",
|
||||
"@svar-ui/gantt-store": "2.7.2",
|
||||
"@svar-ui/grid-store": "2.7.3",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-react": "1.3.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-comments": "2.6.1",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/react-editor": "2.6.1",
|
||||
"@svar-ui/react-filter": "2.6.1",
|
||||
"@svar-ui/react-grid": "2.7.4",
|
||||
"@svar-ui/react-menu": "2.6.1",
|
||||
"@svar-ui/react-tasklist": "2.6.1",
|
||||
"@svar-ui/react-toolbar": "2.6.1",
|
||||
"date-fns": "3.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-grid": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-grid/-/react-grid-2.7.4.tgz",
|
||||
"integrity": "sha512-m3AbGuQNeEnniDcyBesEOg+IirwW5NasJQCfJd7jIFhUyfQ79w+crSnLbinEVS59/OKGrqkmxnLDcDwEKbu4rg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/grid-data-provider": "2.7.3",
|
||||
"@svar-ui/grid-locales": "2.7.3",
|
||||
"@svar-ui/grid-store": "2.7.3",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-react": "1.3.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/react-editor": "2.6.1",
|
||||
"@svar-ui/react-filter": "2.6.1",
|
||||
"@svar-ui/react-menu": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-menu": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-menu/-/react-menu-2.6.1.tgz",
|
||||
"integrity": "sha512-/wu6vaLVPN2AJp8r+axIkjaSpoZOAgE46CRsdM2d0yc+hbJdeMo997LXZTGQzBziwLZttW1DDwOvL+uLIeTOug==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/core-locales": "2.6.1",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/react-core": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-tasklist": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-tasklist/-/react-tasklist-2.6.1.tgz",
|
||||
"integrity": "sha512-U06UHYwL1J6XXMLsHrTvs/wWUXEm3ZC+Ca1hC5Ns0vvnscdE6cSRPqC1Xl2JGKu/cem0sHimEVi7SW4Q2NWczw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-data-provider": "1.7.3",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/lib-state": "1.9.7",
|
||||
"@svar-ui/react-core": "2.6.1",
|
||||
"@svar-ui/tasklist-locales": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-tasklist/node_modules/@svar-ui/lib-data-provider": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-data-provider/-/lib-data-provider-1.7.3.tgz",
|
||||
"integrity": "sha512-+UAM1VybQco5N52iv6rVcDwOJ5G1qE+V+nvaoBHx41H05w4TZTFJL+UnRy99NDLrVbLoCWhoH3L8vyNmZVjTvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/lib-state": "1.9.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/react-tasklist/node_modules/@svar-ui/lib-data-provider/node_modules/@svar-ui/lib-state": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/lib-state/-/lib-state-1.9.6.tgz",
|
||||
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@svar-ui/react-toolbar": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/react-toolbar/-/react-toolbar-2.6.1.tgz",
|
||||
"integrity": "sha512-jSxcTW8WNgpSgkxicGyu76cKjVuwwxOvdDXJqQpLnxIIdN/RNeWuY8ak4sD0IqhCOp7AicgfPg2t+K4YUp+LMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svar-ui/core-locales": "2.6.1",
|
||||
"@svar-ui/lib-dom": "0.14.0",
|
||||
"@svar-ui/react-core": "2.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@svar-ui/tasklist-locales": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@svar-ui/tasklist-locales/-/tasklist-locales-2.6.1.tgz",
|
||||
"integrity": "sha512-ewGvdmALpEJR3CpzlNX8aDL2JPmeyF1EweRBoI0jQmp7bIpYDIlpTWStmGwDEwQ5SgvUTJylFyIj6baPf2RBlw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@swc/core": {
|
||||
"version": "1.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.12.7.tgz",
|
||||
@@ -5926,6 +6306,16 @@
|
||||
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@chakra-ui/react": "^3.22.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@svar-ui/react-gantt": "^2.7.3",
|
||||
"axios": "^1.18.1",
|
||||
"framer-motion": "^12.23.0",
|
||||
"leaflet": "^1.9.4",
|
||||
|
||||
@@ -18,6 +18,8 @@ import Volcano from "@/pages/volcano/Volcano.jsx";
|
||||
import GlobalMap from "./pages/maps/GlobalMap.jsx";
|
||||
import Admin from "./pages/admin/Admin.jsx";
|
||||
import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
|
||||
import Settings from "./pages/auth/Settings.jsx";
|
||||
import WebAdmin from "./pages/auth/WebAdmin.jsx";
|
||||
|
||||
function AppFoundation() {
|
||||
const recipe = useRecipe({ key: "dashboard" });
|
||||
@@ -81,6 +83,9 @@ function App() {
|
||||
<Route path="daily" element={<Placeholder name="Daily Activity" />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/web-admin" element={<WebAdmin />} />
|
||||
|
||||
<Route path="/global-map" element={<GlobalMap />} />
|
||||
<Route path="/regional-map" element={<RegionalMap />} />
|
||||
<Route path="/volcano" element={<Volcano />} />
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import {Flex, Button, Spinner, Text} from "@chakra-ui/react";
|
||||
import useBuildUrl from "../../hooks/useBuildUrl.js";
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import { useRef, useEffect } from 'react';
|
||||
import {useDashboardStore} from "../../store/useDashboardStore.jsx";
|
||||
|
||||
export default function CommCoorReport({ settings, widgetID }) {
|
||||
const reportRef = useRef(null);
|
||||
|
||||
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||||
|
||||
// build url, defaults to 7 days past
|
||||
const url = useBuildUrl('/api/v2/comm_coor_report', settings?.startDate, settings?.endDate);
|
||||
console.log(url);
|
||||
|
||||
// VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
|
||||
const {data: apiData, isLoading, error} = VdapApi(url);
|
||||
console.log(apiData);
|
||||
|
||||
const handleDownloadReport = () => {
|
||||
if (apiData.length === 0) return;
|
||||
const element = document.createElement('a');
|
||||
element.style.display = 'none';
|
||||
// Appends HTML right inside the element, after its last child
|
||||
element.insertAdjacentHTML('afterbegin', apiData?.report_html);
|
||||
|
||||
// 1. Create a blob object with text content and text/plain mime type
|
||||
const blob = new Blob([element.textContent || ""], { type: 'text/plain' });
|
||||
|
||||
// 2. Generate a temporary URL pointing to that blob
|
||||
const fileUrl = URL.createObjectURL(blob);
|
||||
|
||||
// 3. Create a hidden anchor element
|
||||
const linkElement = document.createElement('a');
|
||||
linkElement.href = fileUrl;
|
||||
linkElement.download = `comm_coor_report_${apiData?.start_date}_${apiData?.end_date}`; // Sets the target file name
|
||||
linkElement.style.display = 'none';
|
||||
|
||||
// 4. Append to body, trigger click, and remove it immediately
|
||||
document.body.appendChild(linkElement);
|
||||
linkElement.click();
|
||||
document.body.removeChild(linkElement);
|
||||
document.body.removeChild(element);
|
||||
|
||||
// 5. Free up memory by revoking the blob URL
|
||||
URL.revokeObjectURL(fileUrl);
|
||||
}
|
||||
|
||||
const handleCopyReport = () => {
|
||||
if (apiData.length === 0) return;
|
||||
const element = document.createElement('a');
|
||||
element.style.display = 'none';
|
||||
// Appends HTML right inside the element, after its last child
|
||||
element.insertAdjacentHTML('afterbegin', apiData?.report_html);
|
||||
|
||||
navigator.clipboard.writeText(element.textContent || "")
|
||||
.then(() => {
|
||||
alert('Copied to clipboard!');
|
||||
})
|
||||
.catch((err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
}));
|
||||
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (reportRef.current) {
|
||||
reportRef.current.innerHTML = apiData?.report_html;
|
||||
const p = reportRef.current.querySelectorAll('p');
|
||||
const b = reportRef.current.querySelectorAll('b');
|
||||
p[0].remove();
|
||||
b[0].remove();
|
||||
}
|
||||
}, [apiData]);
|
||||
|
||||
// copy data to clipboard in formatted way when user clicks on copy btn in widget settings
|
||||
useEffect(() => {
|
||||
if (settings?.copyToClipboard === true && reportRef.current) {
|
||||
navigator.clipboard.writeText(reportRef.current.innerText)
|
||||
.then(() => {
|
||||
alert('Copied to clipboard!');
|
||||
})
|
||||
.catch((err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
}));
|
||||
updateSettings(widgetID, {copyToClipboard: false});
|
||||
}
|
||||
}, [settings, widgetID, updateSettings]);
|
||||
|
||||
// download report
|
||||
useEffect(() => {
|
||||
if (settings?.downloadReport === true && reportRef.current) {
|
||||
// 1. Create a blob object with text content and text/plain mime type
|
||||
const blob = new Blob([reportRef.current.innerText || ""], { type: 'text/plain' });
|
||||
|
||||
// 2. Generate a temporary URL pointing to that blob
|
||||
const fileUrl = URL.createObjectURL(blob);
|
||||
|
||||
// 3. Create a hidden anchor element
|
||||
const linkElement = document.createElement('a');
|
||||
linkElement.href = fileUrl;
|
||||
linkElement.download = `comm_coor_report_${apiData?.start_date}_${apiData?.end_date}`; // Sets the target file name
|
||||
linkElement.style.display = 'none';
|
||||
|
||||
// 4. Append to body, trigger click, and remove it immediately
|
||||
document.body.appendChild(linkElement);
|
||||
linkElement.click();
|
||||
document.body.removeChild(linkElement);
|
||||
|
||||
// 5. Free up memory by revoking the blob URL
|
||||
URL.revokeObjectURL(fileUrl);
|
||||
updateSettings(widgetID, {downloadReport: false});
|
||||
}
|
||||
}, [settings, widgetID, updateSettings, apiData]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="gray.800">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (!apiData) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text textAlign="center" color="gray.400">No data</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction="row" w="100%" h="100%" p={1} overflowY="auto">
|
||||
<Text ref={reportRef}></Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@@ -1,106 +1,40 @@
|
||||
import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
|
||||
import {useEffect, useMemo } from 'react';
|
||||
import {useEffect, useMemo, useCallback } from 'react';
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
|
||||
export default function IvansAlerts({ settings, widgetID }) {
|
||||
console.log("IvansAlerts widget ID: ", widgetID);
|
||||
console.log("Ivans settings: ", settings, "Ivans widgetID: ", widgetID);
|
||||
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||||
const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
|
||||
const sorts = settings?.activeSorts;
|
||||
|
||||
// find this specific widgets object in the state list of active/displayed widgets and extract its uuid
|
||||
const thisWidget = useDashboardStore(useCallback((state) =>
|
||||
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
|
||||
));
|
||||
|
||||
// build url, default is 7 days past
|
||||
const url = useBuildUrl('/api/v2/comm_coor_ivans', settings?.startDate, settings?.endDate);
|
||||
|
||||
// VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
|
||||
const {data: apiData, isLoading, error} = VdapApi(url);
|
||||
const {data, isLoading, error} = VdapApi(url);
|
||||
|
||||
// TEST DATA
|
||||
// const apiData = useMemo(() => {
|
||||
// return ([
|
||||
// {
|
||||
// id: 277,
|
||||
// volcano_number: 268010,
|
||||
// report_num: "2026-01",
|
||||
// report_date: "2026-05-08T22:05:44Z",
|
||||
// preparer: "hwright",
|
||||
// reviewer: "dramsey",
|
||||
// send_time: "2026-05-08T22:05:52Z",
|
||||
// volcano_name: "Dukono",
|
||||
// summary: "At 07:41 local time on 8 May 2026, an explosion of persistently active Dukono volcano occurred, producing an ash plume that rose over 15 km (52,000 feet) above sea level and ejecting ballistic blocks of lava beyond the crater rim. The eruption killed three tourists who were hiking within the official exclusion zone; other hikers were rescued and returned to safety.",
|
||||
// files: [
|
||||
// {
|
||||
// name: "277-268010-Dukono-2026-01.pdf",
|
||||
// url: "https://vdap.org/ivans/sitrep/277-268010-Dukono-2026-01.pdf",
|
||||
// type: "pdf"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 279,
|
||||
// volcano_number: 250030,
|
||||
// report_num: "2026-01",
|
||||
// report_date: "2026-05-15T05:11:53Z",
|
||||
// preparer: "charpel",
|
||||
// reviewer: "jlwnstrn",
|
||||
// send_time: "2026-05-15T05:12:01Z",
|
||||
// volcano_name: "Central Bismarck Sea",
|
||||
// summary: "A M5.4 earthquake occurred on 14 May 2026 at 17:13 (UTC) during the ongoing eruption of the submarine Central Bismarck Sea volcano that began 8 May 2026. The volcano's current activity does not threaten any populated areas, but today’s earthquake indicates that eruptive activity will continue or increase.",
|
||||
// files: [
|
||||
// {
|
||||
// name: "279-250030-Central Bismarck Sea-2026-01.pdf",
|
||||
// url: "https://vdap.org/ivans/sitrep/279-250030-Central Bismarck Sea-2026-01.pdf",
|
||||
// type: "pdf"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 275,
|
||||
// volcano_number: 273030,
|
||||
// report_num: "2026-02",
|
||||
// report_date: "2026-05-03T05:28:12Z",
|
||||
// preparer: "dramsey",
|
||||
// reviewer: "hwright",
|
||||
// send_time: "2026-05-03T05:28:20Z",
|
||||
// volcano_name: "Mayon",
|
||||
// summary: "At around 5:30 PM local time on May 2, 2026, a pyroclastic flow (cloud of searing ash and rock particles) from erupting Mayon Volcano traveled around 4 km (~2.5 miles) down the southwestern slope of the volcano and produced an ash plume that drifted to the west-southwest. At least 52 villages in various towns in Albay province were heavily affected by thick ash fall, reducing visibility to near zero and making travel extremely difficult. There were no reports of casualties and the volcano alert level remained at Level 3 (on a 0-5 level scale).",
|
||||
// files: [
|
||||
// {
|
||||
// name: "275-273030-Mayon-2026-02.pdf",
|
||||
// url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
|
||||
// type: "pdf"
|
||||
// },
|
||||
// {
|
||||
// name: "275-273030-Mayon-2026-02.pdf",
|
||||
// url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
|
||||
// type: "pdf"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ])
|
||||
// }, []);
|
||||
// sort the apiData
|
||||
const some_data = useMemo(() => {
|
||||
if (data?.length === 0) return [];
|
||||
const sorts = settings?.activeSorts;
|
||||
|
||||
const data = useMemo(() => {
|
||||
if (apiData?.length === 0) return [];
|
||||
let sorted;
|
||||
if (sorts?.volcanoSort && sorts?.timeSort === "asc") return [...data].sort(ascTimeVolcanoSort);
|
||||
else if (sorts?.volcanoSort && sorts?.timeSort === "desc") return [...data].sort(descTimeVolcanoSort);
|
||||
else if (sorts?.timeSort === "asc") return [...data].sort(ascTimeSort);
|
||||
else return [...data].sort(descTimeSort);
|
||||
|
||||
if (sorts?.volcanoSort && sorts?.timeSort === "asc") {
|
||||
sorted = [...apiData].sort(ascTimeVolcanoSort);
|
||||
} else if (sorts?.volcanoSort && sorts?.timeSort === "desc") {
|
||||
sorted = [...apiData].sort(descTimeVolcanoSort);
|
||||
} else if (sorts?.timeSort === "asc") {
|
||||
sorted = [...apiData].sort(ascTimeSort);
|
||||
} else {
|
||||
sorted = [...apiData].sort(descTimeSort);
|
||||
}
|
||||
|
||||
return sorted;
|
||||
}, [apiData, sorts]);
|
||||
}, [data, settings]);
|
||||
|
||||
// copy data to clipboard in formatted way when user clicks on copy btn in widget settings
|
||||
useEffect(() => {
|
||||
if(isCopy) {
|
||||
const dataText = data.map((item) => {
|
||||
if (settings?.copyToClipboard === true) {
|
||||
const dataText = some_data.map((item) => {
|
||||
return `${item.volcano_name}\n` +
|
||||
`Report Number: ${item.report_num}\n` +
|
||||
`Send Time: ${item.send_time}\n` +
|
||||
@@ -116,7 +50,7 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
}));
|
||||
updateSettings(widgetID, {copyToClipboard: false});
|
||||
}
|
||||
}, [isCopy, data, widgetID, updateSettings]);
|
||||
}, [settings, some_data, widgetID, updateSettings]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
@@ -130,7 +64,7 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (data.length === 0) return (
|
||||
if (some_data.length === 0) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
|
||||
</Flex>
|
||||
@@ -146,29 +80,30 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
borderRadius="xl"
|
||||
bg="gray.800"
|
||||
>
|
||||
{data.map((item, index) => {
|
||||
return (
|
||||
{some_data.map((item, index) => {
|
||||
if (thisWidget?.size === "large") return (
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
{/* Using context to dynamically change the border radii of the triggers */}
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<>
|
||||
<Collapsible.Trigger w="100%">
|
||||
<Flex direction="row"
|
||||
w="100%" h="100%"
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
gap={2}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="gray.700"
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%" h="100%"
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
gap={2}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="gray.600"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Text truncate>{item.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text>
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
@@ -183,8 +118,13 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
return (
|
||||
<Box w="100%" h="100%" key={index} p={1}>
|
||||
<br />
|
||||
<Flex mb={2}>
|
||||
<Flex mb={2} justify="space-between">
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Box borderRadius="lg" bg="gray.700" color="gray.300" pl={1} pr={1} fontSize={13} asChild>
|
||||
<a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
|
||||
Open
|
||||
</a>
|
||||
</Box>
|
||||
</Flex>
|
||||
<object
|
||||
data={`${file?.url}#view=FitH&toolbar=1`}
|
||||
@@ -209,6 +149,24 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
</Collapsible.Context>
|
||||
</Collapsible.Root>
|
||||
)
|
||||
else if (thisWidget?.size === "small") return (
|
||||
<Flex direction="row"
|
||||
w="100%"
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
gap={2}
|
||||
borderRadius="lg"
|
||||
bg="gray.600"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Text truncate>{item.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
|
||||
import {useEffect, useMemo } from 'react';
|
||||
import {useEffect, useMemo, useCallback} from 'react';
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import VdapApi from '@/hooks/useVdapApi.js';
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
|
||||
export default function RemoteSensing({ settings, widgetID }) {
|
||||
console.log("RS widget ID: ", widgetID);
|
||||
console.log("RS settings: ", settings, "RS ID: ", widgetID);
|
||||
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||||
const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
|
||||
const sorts = settings?.activeSorts;
|
||||
|
||||
// Find this specific widgets object in the state list of active & displayed widgets
|
||||
const thisWidget = useDashboardStore(useCallback((state) =>
|
||||
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
|
||||
));
|
||||
|
||||
// build url, defaults to 7 days past
|
||||
const url = useBuildUrl('/api/v2/remote_sensing', settings?.startDate, settings?.endDate);
|
||||
@@ -16,100 +19,21 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
// VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
|
||||
const {data: apiData, isLoading, error} = VdapApi(url);
|
||||
|
||||
// TEST DATA
|
||||
// const apiData = useMemo(() => {
|
||||
// return ([
|
||||
// {
|
||||
// id: 1848,
|
||||
// volcano_name: "Lewotolok",
|
||||
// country: "Indonesia",
|
||||
// report_time: "2026-01-13T20:39:39Z",
|
||||
// summary: "Dear friends,\n\nOur latest satellite view from 13 January (~0900 local time) shows that the lava has began to flow over the crater rim onto the northwest flank (see attached). The lava flow spreads into three lobes from the single source vent on the northwest flank of the active cone. The longest portion of the flow was about 530 meters from the vent with the toe draping about 30-40 meters over the rim of the main crater just north of the May 2024 lava flow. A narrow deposit of volcanoclastic debris extends about 300 meters below the toe of the lava flow (white dashed outline on sketch).\n\nPlease let us know if you have any questions.\nBest wishes,\nRick",
|
||||
// sender: "rwessels@usgs.gov",
|
||||
// files: [
|
||||
// {
|
||||
// name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
|
||||
// type: "image"
|
||||
// },
|
||||
// {
|
||||
// name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
|
||||
// type: "image"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 1847,
|
||||
// volcano_name: "Mayon",
|
||||
// country: "Philippines",
|
||||
// report_time: "2026-01-13T17:56:46Z",
|
||||
// summary: "Dear PHIVOLCS friends,\nOur most recent satellite data from 13 January (1500 local) show the new lava flow extending southeast from the summit and splitting into two lobes (see attached pdf). The total length of the longest lobe was about 1 kilometer. Compared to data from 12 January, the longest part of the flow advanced almost 200 meters over 11 hours while the shorter section advanced about 80 meters over the same time. Debris falling from the front of both lava flow lobes extend another several hundred meters below each lobe. We continue to watch the activity at Mayon volcano and will share anything that might help. \n\nPlease let us know if you have any questions, requests, or comments.\n\nBest wishes,\nRick",
|
||||
// sender: "rwessels@usgs.gov",
|
||||
// files: [
|
||||
// {
|
||||
// name: "Mayon-RP-images-20260113_ICEYE_lava.pdf",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1847-Mayon-RP-images-20260113_ICEYE_lava.pdf",
|
||||
// type: "pdf"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 1889,
|
||||
// volcano_name: "Bagana",
|
||||
// country: "Papua New Guinea",
|
||||
// report_time: "2026-06-24T21:28:58Z",
|
||||
// summary: "Hi Steve and RVO,\nI'm now back in the office after some time away and have looked closely at the recent data for Bagana Volcano. \nSatellite data from 15 June show that an increase in lava effusion caused the upper part of the active lava flow at the summit to inflate and likely contributed to the 19-20 June collapse. By 16 June, the inflated area was about 260-meters-long by 140-meters-wide. The northeast edge of the inflated section of the lava flow was the source of rockfalls down the northeast flank where some of the larger blocks tumbled over 1.3 kilometer from the flow. The 22 June data that Julie mentioned shows that all of the inflated area was removed by the collapse (~36,000 square meter area of the upper flow removed). The collapse PDC deposits scoured a deep gorge and removed a broad area of vegetation near the lake. The distal portion of the collapse deposits formed a small delta extending into the lake and possibly raising the lake level slightly based on overall shore outline changes.\n\nI've attached a sketch map showing the features described above. Please let us know if you have any questions.\n\nBest wishes,\nRick",
|
||||
// sender: "rwessels@usgs.gov",
|
||||
// files: [
|
||||
// {
|
||||
// name: "Bagana-PG-sketch-20260622_collapse+lava.jpg",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_collapse+lava.jpg",
|
||||
// type: "image"
|
||||
// },
|
||||
// {
|
||||
// name: "Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
|
||||
// type: "image"
|
||||
// },
|
||||
// {
|
||||
// name: "Bagana_22_Jun_2026_collapse2.kml",
|
||||
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana_22_Jun_2026_collapse2.kml",
|
||||
// type: "download"
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 1845,
|
||||
// volcano_name: "Lewotolok",
|
||||
// country: "Indonesia",
|
||||
// report_time: "2026-01-07T21:42:17Z",
|
||||
// summary: "Dear friends,\nThe increased activity at Lewotolok Volcano over the past week reminded me that we have not sent you a Remote Sensing Summary since June 2025. Over the two days from 3 to 5 January 2026, explosions from the central cone intensified, doubling the area impacted by proximal ballistics and tephra to over 20 hectares, while increased effusion has produced a new ~20,000 m² lava flow on the west–northwest flank that extends ~270 meters from the vent. So far, all recent lava flows have been confined to the summit crater.\n\nPlease let us know if you have any questions or additions.\n\nBest Wishes,\nRick",
|
||||
// sender: "rwessels@usgs.gov",
|
||||
// files: []
|
||||
// },
|
||||
// ])
|
||||
// }, []);
|
||||
|
||||
// sort apiData
|
||||
const data = useMemo(() => {
|
||||
if (apiData?.length === 0) return [];
|
||||
let sorted;
|
||||
const sorts = settings?.activeSorts;
|
||||
|
||||
if (sorts?.volcanoSort && sorts?.timeSort === "asc") {
|
||||
sorted = [...apiData].sort(ascTimeVolcanoSort);
|
||||
} else if (sorts?.volcanoSort && sorts?.timeSort === "desc") {
|
||||
sorted = [...apiData].sort(descTimeVolcanoSort);
|
||||
} else if (sorts?.timeSort === "asc") {
|
||||
sorted = [...apiData].sort(ascTimeSort);
|
||||
} else {
|
||||
sorted = [...apiData].sort(descTimeSort);
|
||||
}
|
||||
if (sorts?.volcanoSort && sorts?.timeSort === "asc") return [...apiData].sort(ascTimeVolcanoSort);
|
||||
else if (sorts?.volcanoSort && sorts?.timeSort === "desc") return [...apiData].sort(descTimeVolcanoSort);
|
||||
else if (sorts?.timeSort === "asc") return [...apiData].sort(ascTimeSort);
|
||||
else return [...apiData].sort(descTimeSort);
|
||||
|
||||
return sorted;
|
||||
}, [apiData, sorts]);
|
||||
}, [apiData, settings]);
|
||||
|
||||
// check if user wants to copy all RS
|
||||
useEffect(() => {
|
||||
if(isCopy) {
|
||||
if(settings?.copyToClipboard === true) {
|
||||
const dataText = data.map((item) => {
|
||||
return `${item.country}, ${item.volcano_name}\n` +
|
||||
`Report Time: ${item.report_time}\n` +
|
||||
@@ -125,7 +49,7 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
}));
|
||||
updateSettings(widgetID, {copyToClipboard: false});
|
||||
}
|
||||
}, [isCopy, data, widgetID, updateSettings]);
|
||||
}, [settings, data, widgetID, updateSettings]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
|
||||
@@ -146,39 +70,26 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction="column"
|
||||
w="100%" h="100%"
|
||||
pos="relative"
|
||||
justify="top" align="center"
|
||||
p={2} gap={2}
|
||||
overflow="auto"
|
||||
borderRadius="xl"
|
||||
bg="gray.800"
|
||||
>
|
||||
<Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" borderRadius="xl" bg="gray.800">
|
||||
{data.map((item, index) => {
|
||||
return (
|
||||
if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
{/* Using context to dynamically change the border radii of the triggers */}
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<>
|
||||
<Collapsible.Trigger w="100%" overflow="hidden">
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%" h="100%"
|
||||
justify="space-between" align="center"
|
||||
gap={2}
|
||||
p={1} pl={3} pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="gray.700"
|
||||
<Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
|
||||
borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Text truncate >{item?.volcano_name}</Text>
|
||||
<Text truncate>{item?.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
|
||||
{item?.report_time}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
@@ -227,19 +138,20 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
<a href={file?.url} target="_blank" rel="noopener noreferrer">
|
||||
<img src={file?.url} alt={file?.name} />
|
||||
</a>
|
||||
<br />
|
||||
</Box>
|
||||
);
|
||||
|
||||
// DOWNLOADABLE LINK
|
||||
else if (file?.type === "download") return (
|
||||
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
|
||||
<>
|
||||
<br />
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
|
||||
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
|
||||
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
|
||||
</Button>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -249,6 +161,25 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
</Collapsible.Context>
|
||||
</Collapsible.Root>
|
||||
)
|
||||
else if (thisWidget?.size === "small") return (
|
||||
<Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Text truncate>{item?.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text
|
||||
truncate
|
||||
pl={2} pr={2}
|
||||
borderRadius="lg"
|
||||
bg="gray.800/50" color="gray.100"
|
||||
fontSize="sm" fontWeight="semibold"
|
||||
>
|
||||
{item?.report_time}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Gantt, Willow } from "@svar-ui/react-gantt";
|
||||
import "@svar-ui/react-gantt/all.css";
|
||||
import { useMemo } from "react";
|
||||
import {Avatar, Flex, Text} from "@chakra-ui/react";
|
||||
|
||||
export default function TravelGanttChart() {
|
||||
|
||||
const upcoming_travel = useMemo(() => [
|
||||
{
|
||||
id: 20,
|
||||
text: "Guatemala",
|
||||
start: new Date(2026, 9, 21),
|
||||
end: new Date(2026, 9, 29),
|
||||
duration: 8,
|
||||
participants: ["Chris Hight", "Angie Diefenbach"],
|
||||
type: "travel",
|
||||
},
|
||||
{
|
||||
id: 47,
|
||||
text: "Venuatu",
|
||||
start: new Date(2026, 10, 12),
|
||||
end: new Date(2026, 10, 15),
|
||||
duration: 3,
|
||||
participants: ["Chris Hight"],
|
||||
type: "travel",
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
text: "Costa Rica",
|
||||
start: new Date(2027, 1, 1),
|
||||
end: new Date(2027, 1, 10),
|
||||
duration: 9,
|
||||
participants: ["Chris Hight"],
|
||||
type: "travel",
|
||||
},
|
||||
], []);
|
||||
|
||||
const columns = [
|
||||
{ id: "start", header: "Start Date", width: 100, height: 200, align: "left" },
|
||||
{ id: "duration", header: "Duration", width: 100, height: 200, align: "left" },
|
||||
{ id: "participants", header: "Participants", width: 150, height: 200, align: "center", cell: AvatarCell, flexgrow: 1 },
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{ height: "100%", width: "100%" }}>
|
||||
<Willow>
|
||||
<Gantt tasks={upcoming_travel} cellWidth={20} columns={columns} />
|
||||
</Willow>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// assume each user has access to the full list of VDAP users
|
||||
|
||||
const users = [
|
||||
{
|
||||
fullname: "Chris Hight",
|
||||
firstname: "Chris",
|
||||
lastname: "Hight",
|
||||
avatar: undefined
|
||||
},
|
||||
{
|
||||
fullname: "Angie Diefenbach",
|
||||
firstname: "Chris",
|
||||
lastname: "Hight",
|
||||
avatar: undefined
|
||||
},
|
||||
{
|
||||
fullname: "Venessa Kuchenik",
|
||||
firstname: "Venessa",
|
||||
lastname: "Kuchenik",
|
||||
avatar: undefined
|
||||
},
|
||||
]
|
||||
|
||||
function AvatarCell({ row }) {
|
||||
const travelers = row.participants.map((r) => {
|
||||
return users.find((u) => u.fullname === r);
|
||||
});
|
||||
|
||||
return (
|
||||
<Flex direction="column" alignItems="left" justifyContent="space-between">
|
||||
{travelers.map((traveler) => (
|
||||
<Avatar.Root shape="full">
|
||||
<Avatar.Image src={traveler.avatar} />
|
||||
<Avatar.Fallback name={traveler.fullname} />
|
||||
<Text>{traveler.fullname}</Text>
|
||||
</Avatar.Root>
|
||||
))}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import { useRef, useMemo, useEffect } from "react";
|
||||
import {MapContainer, useMap, TileLayer, Polygon, Tooltip} from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import {Flex, Spinner, Text} from "@chakra-ui/react";
|
||||
import L from 'leaflet';
|
||||
|
||||
export default function VaaMap({ settings, widgetID}) {
|
||||
const mapRef = useRef(null);
|
||||
|
||||
// TEST DATA
|
||||
const mock_data = useMemo( () =>
|
||||
[
|
||||
{
|
||||
"vaa_datetime": "2026-08-18T18:01:00Z",
|
||||
"vnum": 342090,
|
||||
"volc_name": "Fuego",
|
||||
"volc_elev_m": 3763,
|
||||
"vaac_location": "Washington",
|
||||
"obs_va_datetime": "2026-08-18T17:30:00Z",
|
||||
"obs_va_epoch": 1787074200000,
|
||||
"aviation_color_code": null,
|
||||
"obs_fl": "140",
|
||||
"obs_fl_dir": "SW",
|
||||
"obs_h_asl_m": 4267.0,
|
||||
"obs_h_avs_m": 504.0,
|
||||
"projections":
|
||||
{
|
||||
"six": "25/2030Z SFC/FL160 N1446 W09202 - N1428 W09052 - N1423 W09200 - N1446 W09202",
|
||||
"twelve": "26/0230Z SFC/FL160 N1444 W09203 - N1428 W09052 - N1422 W09201 - N1444 W09203",
|
||||
"eighteen": "26/0830Z SFC/FL160 N1441 W09204 - N1428 W09052 - N1419 W09202 - N1441 W09204"
|
||||
}
|
||||
},
|
||||
{
|
||||
"vaa_datetime": "2026-08-25T01:01:00Z",
|
||||
"vnum": 282080,
|
||||
"volc_name": "Sabancaya",
|
||||
"volc_elev_m": 1117,
|
||||
"vaac_location": "Tokyo",
|
||||
"obs_va_datetime": "2026-08-25T00:50:00Z",
|
||||
"obs_va_epoch": 1787619000000,
|
||||
"aviation_color_code": null,
|
||||
"obs_fl": "180",
|
||||
"obs_fl_dir": null,
|
||||
"obs_h_asl_m": 5486,
|
||||
"obs_h_avs_m": 4369,
|
||||
"projections":
|
||||
{
|
||||
"six": "14/0200Z SFC/FL250 S1532 W07036 - S1552 W07029 - S1613 W07035 - S1546 W07150 - S1532 W07036 ",
|
||||
"twelve": "14/0800Z SFC/FL250 S1513 W07045 - S1527 W07033 - S1551 W07029 - S1544 W07150 - S1513 W07045 ",
|
||||
"eighteen": "14/1400Z SFC/FL250 S1511 W07044 - S1531 W07028 - S1550 W07027 - S1546 W07151 - S1511 W07044 "
|
||||
},
|
||||
},
|
||||
]
|
||||
, []);
|
||||
|
||||
const {data, isLoading, error} = useMemo(() => {
|
||||
const data = settings?.data?.sort((a, b) => new Date(b.vaa_datetime) - new Date(a.vaa_datetime));
|
||||
const isLoading = settings?.isLoading;
|
||||
const error = settings?.error;
|
||||
return {data, isLoading, error};
|
||||
}, [settings.data, settings.isLoading, settings.error]);
|
||||
|
||||
// convert Degree & Minutes (DM) to Decimal Degrees (DD)
|
||||
const polygons = useMemo(() => {
|
||||
if (!mock_data) return []; // TODO: replace with real data
|
||||
return mock_data.map((vaa) => { // TODO: replace with real data
|
||||
const six_hrs = convertDMtoDD(vaa.projections.six);
|
||||
const twelve_hrs = convertDMtoDD(vaa.projections.twelve);
|
||||
const eighteen_hrs = convertDMtoDD(vaa.projections.eighteen);
|
||||
return {...vaa, projections: [six_hrs, twelve_hrs, eighteen_hrs]};
|
||||
})
|
||||
}, [mock_data]);
|
||||
|
||||
const lineColors= {
|
||||
0: { color: 'red' },
|
||||
1: { color: 'purple' },
|
||||
2: { fillColor: 'blue' },
|
||||
}
|
||||
|
||||
const hourCode = {
|
||||
0: "+6 hours",
|
||||
1: "+12 hours",
|
||||
2: "+18 hours",
|
||||
}
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (data?.length === 0) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text textAlign="center" color="gray.400">No VAA data available.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
ref={mapRef}
|
||||
style={{height: "100%", width: "100%"}}
|
||||
maxBounds={[[-90, -180], [90, 180]]}
|
||||
minZoom={2} // smallest zoom allowed before empty edges start appearing
|
||||
>
|
||||
<TileLayer
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
attribution='© OpenStreetMap contributors'
|
||||
noWrap
|
||||
/>
|
||||
{polygons?.map((polygon) => {
|
||||
return polygon?.projections?.map((coordinates, index) =>
|
||||
<Polygon key={index} pathOptions={lineColors[index]} positions={coordinates}>
|
||||
<Tooltip sticky>
|
||||
<Flex direction="column">
|
||||
<Flex direction="row" justify="space-between" gap={3} bg="gray.300" borderRadius="sm">
|
||||
<Text pl={1} fontWeight="bold">{polygon?.volc_name} </Text>
|
||||
<Text pr={1} fontWeight="semibold">{hourCode[index]}</Text>
|
||||
</Flex>
|
||||
<Flex direction="row" justify="space-between" gap={3}>
|
||||
<Text pl={1} fontWeight="semibold">VAA Datetime:</Text>
|
||||
<Text pr={1}>{polygon?.vaa_datetime}</Text>
|
||||
</Flex>
|
||||
<Flex direction="row" justify="space-between" gap={3}>
|
||||
<Text pl={1} fontWeight="semibold">VAAC Location:</Text>
|
||||
<Text pr={1}>{polygon?.vaac_location}</Text>
|
||||
</Flex>
|
||||
<Flex direction="row" justify="space-between" gap={3}>
|
||||
<Text pl={1} fontWeight="semibold">Height From Vent:</Text>
|
||||
<Text pr={1}>{polygon?.obs_h_avs_m} (m)</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Polygon>
|
||||
)
|
||||
})}
|
||||
<ZoomToPolygon polygons={polygons} settings={settings} />
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
|
||||
function convertDMtoDD(DMString) {
|
||||
const cleaned_DMString = DMString.trim().replace(/-/g, "").split(/\s+/);
|
||||
|
||||
const coordinates = cleaned_DMString.slice(2).map((coordinate) => {
|
||||
const direction = coordinate[0];
|
||||
if (direction === "N" || direction === "S") { // 4 digits long
|
||||
const lat = Number(coordinate.slice(1, 3)) + Number((Number(coordinate.slice(3, 5)) / 60).toFixed(5));
|
||||
return direction === "S" ? -lat : lat; // south has negative coordinates
|
||||
} else if (direction === "E" || direction === "W") { // 5 digits long
|
||||
const long = Number(coordinate.slice(1, 4)) + Number((Number(coordinate.slice(4, 6)) / 60).toFixed(5));
|
||||
return direction === "W" ? -long : long; // west has negative coordinates
|
||||
}
|
||||
});
|
||||
|
||||
// pair up lat and long into their own array pairs
|
||||
let polygon = [];
|
||||
for (let i = 0; i < coordinates.length; i+=2) polygon.push([coordinates[i], coordinates[i+1]]);
|
||||
return polygon;
|
||||
}
|
||||
|
||||
function ZoomToPolygon({ polygons, settings }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
let targetBounds;
|
||||
let default_vaa_object;
|
||||
const selectedVAA = settings?.selected;
|
||||
const defaultVAA = settings?.defaultVAA;
|
||||
|
||||
// selectedVAA and defualtVAA are filled in dynamically so they may not always be defined, defualt to hardcoded CVO coordinates
|
||||
if (!selectedVAA && !defaultVAA) {
|
||||
targetBounds = [settings.position];
|
||||
// console.log("zooming to cvo");
|
||||
}
|
||||
|
||||
// if defaultVAA is defined and user hasn't selected a vaa to pan to, then use defaultVAA coordinates
|
||||
else if (!selectedVAA) {
|
||||
// console.log("zooming to", defaultVAA);
|
||||
default_vaa_object = polygons.find((vaa) => vaa.volc_name === defaultVAA);
|
||||
// if for whatever reason defaultVAA isn't found in list of vaa data, default to hardcoded CVO coordinates
|
||||
default_vaa_object ?
|
||||
targetBounds = default_vaa_object?.projections?.[0] :
|
||||
targetBounds = [settings?.position];
|
||||
}
|
||||
|
||||
else if (selectedVAA) {
|
||||
// console.log("zooming to", selectedVAA);
|
||||
const vaa_object = polygons.find((vaa) => vaa.volc_name === selectedVAA);
|
||||
// if selected VAA is not found (say user just started typing in search) will default to defaultVAA, unless defualtVAA is also undefined
|
||||
vaa_object ?
|
||||
targetBounds = vaa_object?.projections?.[0] :
|
||||
(default_vaa_object ?
|
||||
targetBounds = default_vaa_object?.projections?.[0] :
|
||||
targetBounds = [settings?.position]);
|
||||
}
|
||||
|
||||
if (targetBounds) {
|
||||
try {
|
||||
const bounds = L.latLngBounds(targetBounds);
|
||||
if (bounds.isValid()) map.fitBounds(bounds, {padding: [50, 50], animate: true, maxZoom: 8});
|
||||
} catch (err) {
|
||||
console.warn('Invalid bounds structure passed to fitBounds:', targetBounds, err);
|
||||
}
|
||||
}
|
||||
}, [map, polygons, settings.position, settings.selected, settings.defaultVAA]);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import {useState} from "react";
|
||||
|
||||
export default function CommCoorReportSettings({ widgetId, currentSettings }) {
|
||||
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||||
const [startError, setStartError] = useState(null);
|
||||
const [endError, setEndError] = useState(null);
|
||||
|
||||
const handleCopyToClipboard = () => {
|
||||
updateSettings(widgetId, {copyToClipboard: true});
|
||||
}
|
||||
|
||||
const handleDownloadReport = () => {
|
||||
updateSettings(widgetId, {downloadReport: true});
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
|
||||
{/* COPY TO CLIPBOARD */}
|
||||
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
|
||||
|
||||
{/* DOWNLOAD REPORT */}
|
||||
<Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
|
||||
|
||||
{/* SELECTING DATE RANGE */}
|
||||
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
|
||||
<Field.Root invalid={!!startError}>
|
||||
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||||
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||||
Start Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
w="100%"
|
||||
type="date"
|
||||
value={currentSettings?.startDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {...currentSettings, startDate: value});
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
|
||||
else setStartError("");
|
||||
}}
|
||||
/>
|
||||
{startError && <Field.ErrorText>{startError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
<Field.Root invalid={!!endError}>
|
||||
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||||
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||||
End Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
w="100%"
|
||||
type="date"
|
||||
value={currentSettings?.endDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {...currentSettings, endDate: value});
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
|
||||
else setEndError("");
|
||||
}}
|
||||
/>
|
||||
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import {useMemo, useEffect, useState} from "react";
|
||||
import VdapApi from "@/hooks/useVdapApi.js";
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import {Combobox, createListCollection, Portal} from "@chakra-ui/react";
|
||||
|
||||
export default function VaaMapSettings({widgetId, currentSettings}) {
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||||
|
||||
const url = useBuildUrl("api/v2/comm_coor_vaa", currentSettings?.startDate, currentSettings?.endDate);
|
||||
const {data, isLoading, error} = VdapApi(url);
|
||||
|
||||
// retrieving only the latest VAA for each volcano (resultant has no order)
|
||||
const latest_vaas = useMemo(() => {
|
||||
if (!data || !Array.isArray(data)) return undefined;
|
||||
// retrieves last occurance of vaa, so the vaa's need to stay in rev-chrono order here to work
|
||||
return [...new Map(data.map(item => [item['volc_name'], item])).values()];
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!latest_vaas) updateSettings(widgetId, {isLoading: isLoading, error: error});
|
||||
else updateSettings(widgetId, {data: latest_vaas, isLoading: isLoading, error: error});
|
||||
}, [updateSettings, widgetId, latest_vaas, isLoading, error]);
|
||||
|
||||
// find volc_name of last issued vaa, map will default to this ash polygon
|
||||
const default_vaa = useMemo(() => {
|
||||
if (!latest_vaas || latest_vaas.length === 0) return undefined;
|
||||
const chrono_order = latest_vaas.sort((a, b) => new Date(b.vaa_datetime) - new Date(a.vaa_datetime));
|
||||
// console.log(chrono_order);
|
||||
// console.log(chrono_order[0].volc_name);
|
||||
return chrono_order[0].volc_name;
|
||||
}, [latest_vaas]);
|
||||
|
||||
// set default vaa in settings
|
||||
useEffect(() => {
|
||||
if (default_vaa) updateSettings(widgetId, {defaultVAA: default_vaa});
|
||||
}, [default_vaa, updateSettings, widgetId]);
|
||||
|
||||
|
||||
// filtering based on what user types in search bar
|
||||
const filtered_vaas = useMemo(() => {
|
||||
if (!inputValue.trim()) return latest_vaas;
|
||||
return latest_vaas?.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
|
||||
}, [latest_vaas, inputValue]);
|
||||
|
||||
const vaa_collection = useMemo(() => {
|
||||
return createListCollection({
|
||||
items: filtered_vaas?.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
|
||||
itemToString: (item) => item.volc_name,
|
||||
itemToValue: (item) => item.volc_name,
|
||||
});
|
||||
}, [filtered_vaas]);
|
||||
|
||||
// update state w/ selected vaa so map zooms to polygon
|
||||
useEffect(() => {
|
||||
updateSettings(widgetId, {selected: inputValue});
|
||||
}, [updateSettings, widgetId, inputValue]);
|
||||
|
||||
|
||||
return (
|
||||
<Combobox.Root openOnClick collection={vaa_collection} onInputValueChange={(e) => setInputValue(e.inputValue)}>
|
||||
<Combobox.Label>Select a Volcano</Combobox.Label>
|
||||
<Combobox.Control>
|
||||
<Combobox.Input placeholder="Search recent VAA's by volcano name"/>
|
||||
<Combobox.IndicatorGroup>
|
||||
<Combobox.ClearTrigger />
|
||||
</Combobox.IndicatorGroup>
|
||||
</Combobox.Control>
|
||||
|
||||
<Portal>
|
||||
<Combobox.Positioner>
|
||||
<Combobox.Content>
|
||||
<Combobox.Empty>No VAA's found</Combobox.Empty>
|
||||
{vaa_collection.items.map((vaa) =>
|
||||
<Combobox.Item key={vaa?.volc_name} item={vaa}>
|
||||
{vaa?.volc_name}
|
||||
</Combobox.Item>
|
||||
)}
|
||||
</Combobox.Content>
|
||||
</Combobox.Positioner>
|
||||
</Portal>
|
||||
</Combobox.Root>
|
||||
)
|
||||
}
|
||||
@@ -7,6 +7,10 @@ import { lazy } from 'react';
|
||||
// w: 4 = one-third screen width
|
||||
// w: 3 = one-quarter screen width
|
||||
|
||||
// ONE DAY DATE RANGE
|
||||
const getToday = () => (new Date()).toLocaleDateString('en-CA')
|
||||
|
||||
// ONE WEEK DATE RANGE
|
||||
const getStartDate = () => (new Date(Date.now() - 604800000)).toLocaleDateString('en-CA'); // 7 days = 604800000 = 7*24*60*60*1000
|
||||
const getEndDate = () => (new Date()).toLocaleDateString('en-CA'); // 'en-CA' formats the date as YYYY-MM-DD
|
||||
|
||||
@@ -159,7 +163,55 @@ export const WIDGET_REGISTRY = {
|
||||
description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
|
||||
component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
|
||||
allowedSizes: {
|
||||
small: { w: 3, h: 12 }
|
||||
medium: { w: 3, h: 12 }
|
||||
}
|
||||
},
|
||||
|
||||
"comm_coor_report": {
|
||||
name: "Communication Coordinator Report",
|
||||
category: "Daily Volcanic Activity",
|
||||
description: "Generated Report",
|
||||
component: lazy(() => import('../components/Widgets/CommCoorReport.jsx')),
|
||||
settingsComponent: lazy(() => import('../components/Widgets/settings/CommCoorReportSettings.jsx')),
|
||||
defaultSettings: {
|
||||
copyToClipboard: false,
|
||||
downloadReport: false,
|
||||
startDate: getStartDate(),
|
||||
endDate: getEndDate(),
|
||||
},
|
||||
allowedSizes: {
|
||||
medium: { w: 3, h: 12 },
|
||||
}
|
||||
},
|
||||
|
||||
"vaa_map": {
|
||||
name: "VAA Polygon Projections Map",
|
||||
category: "Maps",
|
||||
description: "By selecting a volcano, the map will take you to it and show a polygon of the ash in 8, 12, and 18 hours",
|
||||
component: lazy(() => import('../components/Widgets/VaaMap.jsx')),
|
||||
settingsComponent: lazy(() => import('../components/Widgets/settings/VaaMapSettings.jsx')),
|
||||
defaultSettings: {
|
||||
position: [45.61142, -122.49630], // CVO's coordinates
|
||||
startDate: getToday(),
|
||||
endDate: getToday(),
|
||||
data: [],
|
||||
isLoading: false,
|
||||
isError: undefined,
|
||||
selected: undefined,
|
||||
defaultVAA: undefined,
|
||||
},
|
||||
allowedSizes: {
|
||||
medium: { w: 6, h: 12 }
|
||||
}
|
||||
},
|
||||
|
||||
"travel_gantt_chart": {
|
||||
name: "Travel Gantt Chart",
|
||||
category: "Communications",
|
||||
description: "View upcoming travels in a gantt chart",
|
||||
component: lazy(() => import('../components/Widgets/TravelGanttChart.jsx')),
|
||||
allowedSizes: {
|
||||
medium: { w: 6, h: 12 }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
:root {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
.wx-theme {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -26,11 +26,11 @@ export default function useWidgetApi(endpoint) {
|
||||
}
|
||||
|
||||
const json = await response.json();
|
||||
const responseData = Array.isArray(json) ? json : json.data;
|
||||
const responseData = Array.isArray(json) ? json : (json?.data ?? json);
|
||||
setData(responseData || []);
|
||||
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch from ${endpoint}:`, err);
|
||||
console.error(`Failed to parse data from ${endpoint}:`, err);
|
||||
setError("Failed to load widget data. Is the Django API running?");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
import { Flex, Text, Input, Field, Button, Separator, NativeSelect, Image } from '@chakra-ui/react';
|
||||
import useAuthStore from "../../store/authStore.js";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Settings() {
|
||||
const { user } = useAuthStore();
|
||||
const { register, handleSubmit, errors } = useForm();
|
||||
const [value, setValue] = useState(undefined);
|
||||
const updateProfile = useAuthStore((state) => state.updateProfile);
|
||||
|
||||
const onSubmit = (data, event) => {
|
||||
// TODO: check for identical usernames
|
||||
event.preventDefault();
|
||||
console.log(data);
|
||||
if (data.username && data.username.length !== "") updateProfile(data);
|
||||
}
|
||||
|
||||
const ivansRequest = () => {
|
||||
console.log(user.username, "requested ivans permissions");
|
||||
// TODO: log users request in database here which will then display request in web-admin page
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Flex direction="column" w="100%" h="100%" p="15rem" pt="3rem" gap="5rem">
|
||||
|
||||
{/* CONTENT */}
|
||||
<Flex direction="column" w="100%" h="100%" gap={4}>
|
||||
{/* header */}
|
||||
<Text fontWeight="semibold" fontSize="xl">Settings</Text>
|
||||
|
||||
<Separator borderColor="gray.300"/>
|
||||
|
||||
{/* personal info */}
|
||||
<Flex direction="column" w="100%" gap={4}>
|
||||
<Text fontWeight="semibold" fontSize="lg">Personal Information</Text>
|
||||
{/* profile picture & name */}
|
||||
<Flex direction="row" w="100%" align="center" justify="space-between" gap={5}>
|
||||
<Flex direction="row" w="100%" align="center" gap={5}>
|
||||
<Image borderRadius="full" boxSize="100px" src="https://i.pravatar.cc/300?img=10" />
|
||||
<Flex direction="column">
|
||||
<Text fontWeight="semibold">Name</Text>
|
||||
<Text pl={2}>{user.firstName || "first name"}, {user.lastName || "last name"}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button variant="subtle" size="sm">Update photo</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="row" w="100%" gap={5}>
|
||||
<Field.Root>
|
||||
<Field.Label fontWeight="semibold">Username</Field.Label>
|
||||
<Input {...register("username")} placeholder={user.username} variant="subtle" />
|
||||
</Field.Root>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label fontWeight="semibold">Email</Field.Label>
|
||||
<Input {...register("email")} type="email" placeholder={user.email || "example@usgs.gov"} variant="subtle" />
|
||||
</Field.Root>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="row" w="100%" gap={5}>
|
||||
<Field.Root pb={8}>
|
||||
<Field.Label fontWeight="semibold">Descipline</Field.Label>
|
||||
<NativeSelect.Root size="sm" variant="subtle">
|
||||
<NativeSelect.Field
|
||||
w="100%"
|
||||
h="2.5rem"
|
||||
placeholder="Select option"
|
||||
{...register("discipline")}
|
||||
>
|
||||
<option value="RS">Remote Sensing</option>
|
||||
<option value="CS">Computer Science</option>
|
||||
<option value="Engineering">Engineering</option>
|
||||
<option value="HR">Human Resources (HR)</option>
|
||||
</NativeSelect.Field>
|
||||
<NativeSelect.Indicator />
|
||||
</NativeSelect.Root>
|
||||
<Field.ErrorText></Field.ErrorText>
|
||||
</Field.Root>
|
||||
<Flex w="100%"></Flex> {/* filler so that discipline dropdown sizes correctly */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Separator borderColor="gray.300"/>
|
||||
|
||||
{/* permission requests */}
|
||||
<Flex direction="column" gap={2}>
|
||||
<Text fontWeight="semibold" fontSize="lg">Permissions</Text>
|
||||
<Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
|
||||
<Text>Request access to IVANS</Text>
|
||||
<Button variant="subtle" size="sm" onClick={ivansRequest}>IVANS Request</Button>
|
||||
</Flex>
|
||||
<Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
|
||||
<Text>Request access to Remote Sensing</Text>
|
||||
<Button variant="subtle" size="sm" onClick={ivansRequest}>Remote Sensing Request</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Separator borderColor="gray.300" />
|
||||
|
||||
{/* themes */}
|
||||
<Flex direction="column">
|
||||
<Text fontWeight="semibold" fontSize="lg">Theme</Text>
|
||||
<Flex direction="row" align="center" justify="space-between" pl={2}>
|
||||
<Text fontSize="md">Appearance</Text>
|
||||
<NativeSelect.Root size="sm" w="10rem" variant="subtle">
|
||||
<NativeSelect.Field
|
||||
placeholder="Select option"
|
||||
{...register("theme")}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.currentTarget.value)}
|
||||
>
|
||||
<option value="Light">Light</option>
|
||||
<option value="Dark">Dark</option>
|
||||
</NativeSelect.Field>
|
||||
<NativeSelect.Indicator />
|
||||
</NativeSelect.Root>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* SAVE-ALL PREFERENCES BUTTON */}
|
||||
{/* TODO: grey out button until changes are detected */}
|
||||
<Button type="submit" w="150px" variant="subtle" borderRadius="lg" alignSelf="center">
|
||||
Save Changes
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import {Flex, Separator, Text, Table, IconButton, NativeSelect, Button} from "@chakra-ui/react";
|
||||
import { useMemo } from "react";
|
||||
import { useForm, useFieldArray } from "react-hook-form";
|
||||
import { Check, X, PenLine } from 'lucide-react';
|
||||
import VdapApi from "../../hooks/useVdapApi.js";
|
||||
import useBuildUrl from "../../hooks/useBuildUrl.js";
|
||||
|
||||
export default function WebAdmin() {
|
||||
// TODO: add below api endpoint
|
||||
// const {data: users, isLoading, error} = VdapApi('/api/v2/vdap_web_users');
|
||||
|
||||
const users = useMemo(() => [
|
||||
{
|
||||
"username": "vkuchenik",
|
||||
"firstName": "Venessa",
|
||||
"lastName": "Kuchenik",
|
||||
"permissions": {
|
||||
"ivans": 2, // 2 => requested permission
|
||||
"rs": 0, // 0 => no permissions and not requested
|
||||
},
|
||||
"team": "Computer Science",
|
||||
"group": "Super User",
|
||||
},
|
||||
{
|
||||
"username": "amack",
|
||||
"firstName": "Adeiline",
|
||||
"lastName": "Mack",
|
||||
"permissions": {
|
||||
"ivans": 2, // 0 => no permissions and not requested
|
||||
"rs": 2, // 1 => has permission
|
||||
},
|
||||
"team": "Remote Sensing",
|
||||
"group": "Member",
|
||||
}
|
||||
], []);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
errors,
|
||||
formState: { isDirty }
|
||||
} = useForm({
|
||||
defaultValues: {users: users}
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "users" // Matches the key in defaultValues
|
||||
})
|
||||
|
||||
const grant = (user, category) => {
|
||||
// 1. post data via api
|
||||
// 2. fetch the new data via api again to force re-render
|
||||
console.log(user.username, "was granted", category, "permission");
|
||||
}
|
||||
|
||||
const deny = (user, category) => {
|
||||
console.log(user.username, "was denied", category, "permission");
|
||||
}
|
||||
|
||||
const users_req_ivans = useMemo(() => {
|
||||
return users.filter(user => user.permissions.ivans === 2);
|
||||
}, [users]);
|
||||
|
||||
const users_req_rs = useMemo(() => {
|
||||
return users.filter(user => user.permissions.rs === 2);
|
||||
}, [users]);
|
||||
|
||||
const onSubmit = (data, event) => {
|
||||
event.preventDefault();
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Flex direction="column" w="100%" h="100%" p="15rem" pt="3rem" gap="3rem">
|
||||
|
||||
{/* CONTENT */}
|
||||
<Flex direction="column" w="100%" gap={4}>
|
||||
{/* Header */}
|
||||
<Text fontSize="xl" fontWeight="bold">Web Admin Panel</Text>
|
||||
|
||||
<Separator borderColor="gray.300"/>
|
||||
|
||||
{/* Permission Requests */}
|
||||
<Flex direction="column" w="100%" gap={2} pb={4}>
|
||||
<Text fontSize="lg" fontWeight="bold">Incoming Permission Requests</Text>
|
||||
<Flex direction="row" w="100%" gap={5}>
|
||||
{/* ivans requests table */}
|
||||
<Flex direction="column" w="100%" gap={2}>
|
||||
<Text fontSize="sm" fontWeight="bold">IVANS</Text>
|
||||
<Table.Root w="100%" size="sm" variant="outline" borderRadius="lg">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="100%" fontWeight="bold">User</Table.ColumnHeader>
|
||||
<Table.ColumnHeader fontWeight="bold" textAlign="left">Permission</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users_req_ivans.map((user) => (
|
||||
<Table.Row key={user.username}>
|
||||
<Table.Cell w="100%">{user.lastName}, {user.firstName}</Table.Cell>
|
||||
<Table.Cell >
|
||||
<Flex w="100%" gap={1} justify="left">
|
||||
<IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => grant(user, "ivans")}>
|
||||
<Check />
|
||||
</IconButton>
|
||||
<IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => deny(user, "ivans")}>
|
||||
<X />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Flex>
|
||||
{/* rs requests table */}
|
||||
<Flex direction="column" w="100%" gap={2}>
|
||||
<Text fontSize="sm" fontWeight="bold">Remote Sensing</Text>
|
||||
<Table.Root w="100%" size="sm" variant="outline" borderRadius="lg">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="100%" fontWeight="bold">User</Table.ColumnHeader>
|
||||
<Table.ColumnHeader fontWeight="bold" textAlign="left">Permission</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users_req_rs.map((user) => (
|
||||
<Table.Row key={user.username}>
|
||||
<Table.Cell>{user.lastName}, {user.firstName}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Flex w="100%" gap={1} justify="left">
|
||||
<IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => grant(user, "rs")}>
|
||||
<Check />
|
||||
</IconButton>
|
||||
<IconButton borderRadius="xl" size="xs" variant="subtle" onClick={() => deny(user, "rs")}>
|
||||
<X />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Separator borderColor="gray.300"/>
|
||||
|
||||
{/* Group Assignment */}
|
||||
<Flex direction="column" w="100%" gap={2} pb={4}>
|
||||
<Text fontWeight="bold" fontSize="lg">Groups</Text>
|
||||
<Table.Root w="50%" size="sm" variant="outline" borderRadius="lg">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader fontWeight="bold">User</Table.ColumnHeader>
|
||||
<Table.ColumnHeader fontWeight="bold" textAlign="left">Group</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users.map((user, index) => (
|
||||
<Table.Row key={user.username}>
|
||||
<Table.Cell w="100%">{user.lastName}, {user.firstName}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Flex w="100%" justify="left">
|
||||
<NativeSelect.Root size="sm" w="175px" variant="subtle">
|
||||
<NativeSelect.Field
|
||||
defaultValue={user.group}
|
||||
{...register(`users.${index}.group`)}
|
||||
>
|
||||
<option value="Super User">Super User</option>
|
||||
<option value="Member">Member</option>
|
||||
</NativeSelect.Field>
|
||||
<NativeSelect.Indicator />
|
||||
</NativeSelect.Root>
|
||||
</Flex>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Flex>
|
||||
|
||||
<Separator borderColor="gray.300"/>
|
||||
|
||||
{/* Team Assignment */}
|
||||
<Flex direction="column" w="100%" gap={2} pb={4}>
|
||||
<Text fontWeight="bold" fontSize="lg">Teams</Text>
|
||||
<Table.Root w="50%" size="sm" variant="outline" borderRadius="lg">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader fontWeight="bold" w="100%">User</Table.ColumnHeader>
|
||||
<Table.ColumnHeader fontWeight="bold" textAlign="left">Team</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users.map((user, index) => {
|
||||
console.log("user in team: ", user.team);
|
||||
return(
|
||||
<Table.Row key={user.username}>
|
||||
<Table.Cell>
|
||||
{user.lastName}, {user.firstName}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Flex w="100%" justify="right">
|
||||
<NativeSelect.Root size="sm" w="175px" variant="subtle">
|
||||
<NativeSelect.Field
|
||||
defaultValue={user.team}
|
||||
{...register(`users.${index}.team`)}
|
||||
>
|
||||
<option value="Computer Science">Computer Science</option>
|
||||
<option value="Remote Sensing">Remote Sensing</option>
|
||||
</NativeSelect.Field>
|
||||
<NativeSelect.Indicator />
|
||||
</NativeSelect.Root>
|
||||
</Flex>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)})}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Button type="submit" w="100px" variant="subtle" alignSelf="center">
|
||||
Save
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -86,7 +86,22 @@ const useAuthStore = create((set) => ({
|
||||
} catch (error) {
|
||||
console.error("Failed to save layout to database", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// updateProfile: async (newProfile) => {
|
||||
// try {
|
||||
// set((state) => ({
|
||||
// user: {
|
||||
// ...state.user,
|
||||
// username: newProfile.username,
|
||||
// }
|
||||
// }));
|
||||
//
|
||||
// await api.post('profile/update/', { profile: newProfile });
|
||||
// } catch (error) {
|
||||
// console.error("Failed to update profile", error);
|
||||
// }
|
||||
// }
|
||||
}));
|
||||
|
||||
export default useAuthStore;
|
||||
Reference in New Issue
Block a user