Merge branch 'dev' into features/adminImplement
This commit is contained in:
p2405951 committed
commit
46d6a8ab60
51 files changed
+874
-283
No files matched your search
@@ -0,0 +1,11 @@
|
|||||||
|
VITE_API_URL=
|
||||||
|
|
||||||
|
BROADCASTER = reverb
|
||||||
|
REVERB_KEY = local
|
||||||
|
REVERB_HOST = 127.0.0.1
|
||||||
|
REVERB_PORT = 8080
|
||||||
|
FORCE_TLS = false
|
||||||
|
DISABLE_STATS = true
|
||||||
|
ENCRYPTED = false
|
||||||
|
CLUSTER = mt1
|
||||||
|
ENABLED_TRANSPORTS = [ws, wss]
|
||||||
+1
-3
@@ -26,6 +26,4 @@ dist-ssr
|
|||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
*storybook.log
|
*storybook.log
|
||||||
storybook-static
|
storybook-static
|
||||||
|
|
||||||
.env
|
|
||||||
Generated
+108
-30
@@ -14,6 +14,8 @@
|
|||||||
"@mui/material": "^7.3.6",
|
"@mui/material": "^7.3.6",
|
||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"chart.js": "^4.5.1",
|
"chart.js": "^4.5.1",
|
||||||
|
"laravel-echo": "^2.2.7",
|
||||||
|
"pusher-js": "^8.4.0",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-bootstrap": "^2.10.10",
|
"react-bootstrap": "^2.10.10",
|
||||||
"react-chartjs-2": "^5.3.1",
|
"react-chartjs-2": "^5.3.1",
|
||||||
@@ -83,7 +85,6 @@
|
|||||||
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
"@babel/generator": "^7.28.3",
|
"@babel/generator": "^7.28.3",
|
||||||
@@ -1334,6 +1335,13 @@
|
|||||||
"linux"
|
"linux"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"node_modules/@socket.io/component-emitter": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/@standard-schema/spec": {
|
"node_modules/@standard-schema/spec": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
|
||||||
@@ -1641,7 +1649,8 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
|
||||||
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
|
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/babel__core": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
@@ -1751,7 +1760,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
||||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
@@ -1996,7 +2004,6 @@
|
|||||||
"integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==",
|
"integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/mocker": "4.0.13",
|
"@vitest/mocker": "4.0.13",
|
||||||
"@vitest/utils": "4.0.13",
|
"@vitest/utils": "4.0.13",
|
||||||
@@ -2020,7 +2027,6 @@
|
|||||||
"integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==",
|
"integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/browser": "4.0.13",
|
"@vitest/browser": "4.0.13",
|
||||||
"@vitest/mocker": "4.0.13",
|
"@vitest/mocker": "4.0.13",
|
||||||
@@ -2195,7 +2201,6 @@
|
|||||||
"integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==",
|
"integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/utils": "4.0.13",
|
"@vitest/utils": "4.0.13",
|
||||||
"pathe": "^2.0.3"
|
"pathe": "^2.0.3"
|
||||||
@@ -2249,7 +2254,6 @@
|
|||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@@ -2484,7 +2488,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.8.9",
|
"baseline-browser-mapping": "^2.8.9",
|
||||||
"caniuse-lite": "^1.0.30001746",
|
"caniuse-lite": "^1.0.30001746",
|
||||||
@@ -2568,7 +2571,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kurkle/color": "^0.3.0"
|
"@kurkle/color": "^0.3.0"
|
||||||
},
|
},
|
||||||
@@ -2782,17 +2784,8 @@
|
|||||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
|
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
|
||||||
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
|
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/dom-helpers": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"peer": true
|
||||||
"@babel/runtime": "^7.8.7",
|
|
||||||
"csstype": "^3.0.2"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"node_modules/dom-helpers": {
|
"node_modules/dom-helpers": {
|
||||||
"version": "5.2.1",
|
"version": "5.2.1",
|
||||||
@@ -2835,6 +2828,30 @@
|
|||||||
"node": ">=14"
|
"node": ">=14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/engine.io-client": {
|
||||||
|
"version": "6.6.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
|
||||||
|
"integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@socket.io/component-emitter": "~3.1.0",
|
||||||
|
"debug": "~4.4.1",
|
||||||
|
"engine.io-parser": "~5.2.1",
|
||||||
|
"ws": "~8.18.3",
|
||||||
|
"xmlhttprequest-ssl": "~2.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/engine.io-parser": {
|
||||||
|
"version": "5.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
|
||||||
|
"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/error-ex": {
|
"node_modules/error-ex": {
|
||||||
"version": "1.3.4",
|
"version": "1.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
|
||||||
@@ -2858,7 +2875,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"esbuild": "bin/esbuild"
|
"esbuild": "bin/esbuild"
|
||||||
},
|
},
|
||||||
@@ -2922,7 +2938,6 @@
|
|||||||
"integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
|
"integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
@@ -3754,6 +3769,19 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/laravel-echo": {
|
||||||
|
"version": "2.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.2.7.tgz",
|
||||||
|
"integrity": "sha512-MgD3ZFXqH5OOVdRjxNHPyQ0ijRr5+nLr7MtyF2XP+kRfhl+Qaa7qVzbtCn1HMgXuTn4SWH6ivn4qWVLlvRl8kg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"pusher-js": "*",
|
||||||
|
"socket.io-client": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/levn": {
|
"node_modules/levn": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||||
@@ -3832,6 +3860,7 @@
|
|||||||
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
|
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"lz-string": "bin/bin.js"
|
"lz-string": "bin/bin.js"
|
||||||
}
|
}
|
||||||
@@ -4226,7 +4255,6 @@
|
|||||||
"integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
|
"integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright-core": "1.56.1"
|
"playwright-core": "1.56.1"
|
||||||
},
|
},
|
||||||
@@ -4308,6 +4336,7 @@
|
|||||||
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ansi-regex": "^5.0.1",
|
"ansi-regex": "^5.0.1",
|
||||||
"ansi-styles": "^5.0.0",
|
"ansi-styles": "^5.0.0",
|
||||||
@@ -4323,6 +4352,7 @@
|
|||||||
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
},
|
},
|
||||||
@@ -4335,7 +4365,8 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/prompts": {
|
"node_modules/prompts": {
|
||||||
"version": "2.4.2",
|
"version": "2.4.2",
|
||||||
@@ -4385,6 +4416,15 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/pusher-js": {
|
||||||
|
"version": "8.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0.tgz",
|
||||||
|
"integrity": "sha512-wp3HqIIUc1GRyu1XrP6m2dgyE9MoCsXVsWNlohj0rjSkLf+a0jLvEyVubdg58oMk7bhjBWnFClgp8jfAa6Ak4Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"tweetnacl": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/queue-microtask": {
|
"node_modules/queue-microtask": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||||
@@ -4411,7 +4451,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -4494,7 +4533,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -4668,7 +4706,6 @@
|
|||||||
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
|
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/estree": "1.0.8"
|
"@types/estree": "1.0.8"
|
||||||
},
|
},
|
||||||
@@ -4816,6 +4853,36 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/socket.io-client": {
|
||||||
|
"version": "4.8.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
|
||||||
|
"integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@socket.io/component-emitter": "~3.1.0",
|
||||||
|
"debug": "~4.4.1",
|
||||||
|
"engine.io-client": "~6.6.1",
|
||||||
|
"socket.io-parser": "~4.2.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/socket.io-parser": {
|
||||||
|
"version": "4.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
|
||||||
|
"integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@socket.io/component-emitter": "~3.1.0",
|
||||||
|
"debug": "~4.4.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/source-map": {
|
"node_modules/source-map": {
|
||||||
"version": "0.6.1",
|
"version": "0.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
@@ -4856,7 +4923,6 @@
|
|||||||
"integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
|
"integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/global": "^5.0.0",
|
"@storybook/global": "^5.0.0",
|
||||||
"@storybook/icons": "^1.6.0",
|
"@storybook/icons": "^1.6.0",
|
||||||
@@ -5244,6 +5310,12 @@
|
|||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"license": "0BSD"
|
"license": "0BSD"
|
||||||
},
|
},
|
||||||
|
"node_modules/tweetnacl": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
|
||||||
|
"license": "Unlicense"
|
||||||
|
},
|
||||||
"node_modules/type-check": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||||
@@ -5360,7 +5432,6 @@
|
|||||||
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
|
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.25.0",
|
||||||
"fdir": "^6.5.0",
|
"fdir": "^6.5.0",
|
||||||
@@ -5451,7 +5522,6 @@
|
|||||||
"integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==",
|
"integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/expect": "4.0.13",
|
"@vitest/expect": "4.0.13",
|
||||||
"@vitest/mocker": "4.0.13",
|
"@vitest/mocker": "4.0.13",
|
||||||
@@ -5704,7 +5774,6 @@
|
|||||||
"version": "8.18.3",
|
"version": "8.18.3",
|
||||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||||
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10.0.0"
|
"node": ">=10.0.0"
|
||||||
@@ -5722,6 +5791,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/xmlhttprequest-ssl": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/yallist": {
|
"node_modules/yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||||
|
|||||||
@@ -19,6 +19,8 @@
|
|||||||
"@mui/material": "^7.3.6",
|
"@mui/material": "^7.3.6",
|
||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"chart.js": "^4.5.1",
|
"chart.js": "^4.5.1",
|
||||||
|
"laravel-echo": "^2.2.7",
|
||||||
|
"pusher-js": "^8.4.0",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-bootstrap": "^2.10.10",
|
"react-bootstrap": "^2.10.10",
|
||||||
"react-chartjs-2": "^5.3.1",
|
"react-chartjs-2": "^5.3.1",
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import styles from "./Filter.module.css";
|
import styles from "./Filter.module.css";
|
||||||
|
import Button from "../ui/button/button.jsx"
|
||||||
|
|
||||||
function Filter({isFilterVisible, filters, setFilters}){
|
function Filter({isFilterVisible, filters, setFilters}){
|
||||||
const setAlphabeticalOrder = (order) => {
|
const setAlphabeticalOrder = (order) => {
|
||||||
@@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){
|
|||||||
return (
|
return (
|
||||||
<div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
|
<div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
|
||||||
<abbr title="Tri alphabétique croissant (A à Z)">
|
<abbr title="Tri alphabétique croissant (A à Z)">
|
||||||
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
|
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
|
||||||
|
variant={"default"}
|
||||||
onClick={() => setAlphabeticalOrder("asc")}>
|
onClick={() => setAlphabeticalOrder("asc")}>
|
||||||
<img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
|
<img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
|
||||||
</button>
|
</Button>
|
||||||
</abbr>
|
</abbr>
|
||||||
|
|
||||||
<abbr title="Tri alphabétique décroissant (Z à A)">
|
<abbr title="Tri alphabétique décroissant (Z à A)">
|
||||||
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
|
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
|
||||||
|
variant={"default"}
|
||||||
onClick={() => setAlphabeticalOrder("desc")}>
|
onClick={() => setAlphabeticalOrder("desc")}>
|
||||||
<img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
|
<img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
|
||||||
</button>
|
</Button>
|
||||||
</abbr>
|
</abbr>
|
||||||
|
|
||||||
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
|
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
|
||||||
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
|
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
|
||||||
|
variant={"default"}
|
||||||
onClick={() => setYearOrder("desc")}>
|
onClick={() => setYearOrder("desc")}>
|
||||||
<img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
|
<img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
|
||||||
</button>
|
</Button>
|
||||||
</abbr>
|
</abbr>
|
||||||
|
|
||||||
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
|
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
|
||||||
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
|
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
|
||||||
|
variant={"default"}
|
||||||
onClick={() => setYearOrder("asc")}>
|
onClick={() => setYearOrder("asc")}>
|
||||||
<img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
|
<img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
|
||||||
</button>
|
</Button>
|
||||||
</abbr>
|
</abbr>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,26 +1,59 @@
|
|||||||
import styles from "./Header.module.css"
|
|
||||||
import { Link, NavLink } from "react-router";
|
import { Link, NavLink } from "react-router";
|
||||||
import {useContext, useEffect, useRef, useState} from "react";
|
import {useContext, useEffect, useRef, useState} from "react";
|
||||||
import getUserNotifications from "../../utils/getUserNotifications.js";
|
|
||||||
import {AuthContext} from "../../contexts/auth/AuthContext.js";
|
import {AuthContext} from "../../contexts/auth/AuthContext.js";
|
||||||
|
|
||||||
|
import styles from "./Header.module.css"
|
||||||
|
|
||||||
|
import getUserNotifications from "../../utils/notifications/getUserNotifications.js";
|
||||||
|
import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js";
|
||||||
|
import initEcho from "../../utils/echo/initEcho.js"
|
||||||
|
import readNotifications from "../../utils/notifications/readNotifications.js";
|
||||||
|
import getUser from "../../utils/getUser.js";
|
||||||
|
import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener";
|
||||||
|
import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
|
||||||
|
import NotificationCard from "../NotificationCard/NotificationCard.jsx";
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
|
const { update, user } = useContext(AuthContext);
|
||||||
const [notificationMenu, setnotificationMenu] = useState(false);
|
const [notificationMenu, setnotificationMenu] = useState(false);
|
||||||
const [unreadNotification, setunreadNotification] = useState(true);
|
const [unreadNotification, setunreadNotification] = useState(false);
|
||||||
const [mobileMenu, setMobileMenu] = useState(false);
|
const [mobileMenu, setMobileMenu] = useState(false);
|
||||||
const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
|
const [notifications, setNotifications] = useState([]);
|
||||||
const notificationRef = useRef(null);
|
const notificationRef = useRef(null);
|
||||||
|
|
||||||
const { user } = useContext(AuthContext);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function loadNotifications() {
|
let echoInstance = null;
|
||||||
const notifData = await getUserNotifications();
|
let channelsToLeave = [];
|
||||||
setNotifications(notifData || []);
|
|
||||||
|
async function initializeHeader() {
|
||||||
|
try {
|
||||||
|
const [userData, notifData] = await Promise.all([
|
||||||
|
getUser(),
|
||||||
|
getUserNotifications()
|
||||||
|
]);
|
||||||
|
|
||||||
|
const data = notifData || [];
|
||||||
|
setNotifications(data);
|
||||||
|
const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1);
|
||||||
|
setunreadNotification(hasUnread);
|
||||||
|
|
||||||
|
const echo = initEcho();
|
||||||
|
echoInstance = echo;
|
||||||
|
|
||||||
|
const activeChannels = [
|
||||||
|
userCreatedListener(echo, userData, setNotifications, setunreadNotification),
|
||||||
|
userNotificationsListener(echo, userData, setNotifications, setunreadNotification),
|
||||||
|
];
|
||||||
|
channelsToLeave = activeChannels.filter(name => name !== null);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur initialisation Header:", err);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//loadNotifications();
|
initializeHeader();
|
||||||
|
|
||||||
const handleClickOutside = (event) => {
|
const handleClickOutside = (event) => {
|
||||||
if (
|
if (
|
||||||
notificationRef.current &&
|
notificationRef.current &&
|
||||||
@@ -32,11 +65,48 @@ function Header() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("mousedown", handleClickOutside);
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
if (echoInstance) {
|
||||||
|
channelsToLeave.forEach(chan => echoInstance.leave(chan));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const toggleNotificationMenu = async () => {
|
||||||
|
try {
|
||||||
|
setnotificationMenu(!notificationMenu);
|
||||||
|
if (unreadNotification) {
|
||||||
|
const result = await readNotifications();
|
||||||
|
if (result) {
|
||||||
|
setunreadNotification(false);
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur suppression notification :', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function deleteNotification(notificationId) {
|
||||||
|
try {
|
||||||
|
const result = await deleteNotificationUser(notificationId);
|
||||||
|
if (result) {
|
||||||
|
setNotifications(prev => prev.filter(n => n.id !== notificationId));
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur suppression notification :', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.headerContainer}>
|
<div className={styles.headerContainer}>
|
||||||
<header className={`${styles.header} glassCard`}>
|
<header className={`${styles.header} glassCard`}>
|
||||||
@@ -66,10 +136,7 @@ function Header() {
|
|||||||
<div className={styles.headerRightContent}>
|
<div className={styles.headerRightContent}>
|
||||||
<button
|
<button
|
||||||
className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
|
className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
|
||||||
onClick={() => {
|
onClick={() => {toggleNotificationMenu();}}
|
||||||
setnotificationMenu(!notificationMenu);
|
|
||||||
setunreadNotification(false);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
|
<img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
|
||||||
{unreadNotification && <span className={styles.notificationBadge}></span>}
|
{unreadNotification && <span className={styles.notificationBadge}></span>}
|
||||||
@@ -119,17 +186,7 @@ function Header() {
|
|||||||
{notifications.length === 0 ? (
|
{notifications.length === 0 ? (
|
||||||
<p className={styles.notification}>Vous n'avez aucune notification !</p>
|
<p className={styles.notification}>Vous n'avez aucune notification !</p>
|
||||||
) : (
|
) : (
|
||||||
notifications.map((notification, index) => (
|
<NotificationCard notifications={notifications} deleteNotification={deleteNotification} />
|
||||||
<div className={styles.notification} key={index}>
|
|
||||||
<p>{notification.content}</p>
|
|
||||||
<button
|
|
||||||
className={styles.closeBtn}
|
|
||||||
onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
|
|
||||||
>
|
|
||||||
<img src="/close.svg" alt="supprimer la notification"/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -150,13 +150,16 @@
|
|||||||
|
|
||||||
.notificationDiv {
|
.notificationDiv {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 250px;
|
width: 300px;
|
||||||
top: 105%;
|
top: 105%;
|
||||||
right: 2rem;
|
right: 2rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeNotificationDiv {
|
.activeNotificationDiv {
|
||||||
@@ -183,16 +186,6 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeBtn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none;
|
|
||||||
margin: 0;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closeBtn:focus {
|
.closeBtn:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|||||||
@@ -23,7 +23,6 @@
|
|||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import formatDate from "../../utils/date/formatDate.js";
|
||||||
|
import formatTime from "../../utils/date/formatTime.js";
|
||||||
|
|
||||||
|
import styles from "./NotificationCard.module.css"
|
||||||
|
|
||||||
|
|
||||||
|
function NotificationCard({notifications, deleteNotification}) {
|
||||||
|
return (
|
||||||
|
notifications.map((notification, index) => (
|
||||||
|
<div className={styles.notificationCard} key={index}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<span className={styles.timeTag}>
|
||||||
|
Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
className={styles.closeIconButton}
|
||||||
|
onClick={() => deleteNotification(notification.id)}
|
||||||
|
title="Supprimer"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<p className={styles.message}>
|
||||||
|
{notification.content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotificationCard;
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
.notificationCard {
|
||||||
|
padding: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeTag {
|
||||||
|
color: #019AFF;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closeIconButton {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closeIconButton:hover {
|
||||||
|
color: #cc0000;
|
||||||
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import styles from "./SearchBar.module.css"
|
import styles from "./SearchBar.module.css"
|
||||||
import {Link} from "react-router";
|
import {Link} from "react-router";
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import searchEvents from "../../utils/searchEvents.js";
|
import searchEvents from "../../utils/events/searchEvents.js";
|
||||||
import searchUsers from "../../utils/searchUsers.js";
|
import searchUsers from "../../utils/users/searchUsers.js";
|
||||||
import { useLocation } from "react-router";
|
import { useLocation } from "react-router";
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, {useEffect, useState} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import getEventById from "../../utils/event/getEventById.js";
|
import getEventById from "../../utils/events/getEventById.js";
|
||||||
import styles from "./Task.module.css";
|
import styles from "./Task.module.css";
|
||||||
import formatDate from "../../utils/date/formatDate.js";
|
import formatDate from "../../utils/date/formatDate.js";
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx";
|
|||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import SearchBar from "../SearchBar/SearchBar.jsx";
|
import SearchBar from "../SearchBar/SearchBar.jsx";
|
||||||
import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
|
import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
|
||||||
|
import Button from "../ui/button/button.jsx";
|
||||||
|
|
||||||
|
|
||||||
function ToolBar({setFilters, filters, showCreate = true}) {
|
function ToolBar({setFilters, filters, showCreate = true}) {
|
||||||
@@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) {
|
|||||||
<CreateEventBtn />
|
<CreateEventBtn />
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
|
<Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
|
||||||
<img src="search.svg" alt="Rechercher"/>
|
<img src="search.svg" alt="Rechercher"/>
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
|
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
|
||||||
<button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
|
<Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
|
||||||
<img src="filter.svg" alt="Filtrer"/>
|
<img src="filter.svg" alt="Filtrer"/>
|
||||||
</button>
|
</Button>
|
||||||
<div className={styles.filterMenu}>
|
<div className={styles.filterMenu}>
|
||||||
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
|
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
/* BACKGROUND ////////////////////////////////////////////////////////*/
|
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { useState } from "react";
|
|||||||
import Modal from "../ui/modal/modal.jsx";
|
import Modal from "../ui/modal/modal.jsx";
|
||||||
import Button from "../ui/button/button.jsx";
|
import Button from "../ui/button/button.jsx";
|
||||||
import TextInput from "../ui/input/input.jsx";
|
import TextInput from "../ui/input/input.jsx";
|
||||||
import createEvent from "../../utils/event/createEvent.js"
|
import createEvent from "../../utils/events/createEvent.js"
|
||||||
|
|
||||||
|
|
||||||
export default function CreateEventBtn() {
|
export default function CreateEventBtn() {
|
||||||
@@ -11,10 +11,15 @@ export default function CreateEventBtn() {
|
|||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
|
const [start, setStart] = useState("");
|
||||||
|
const [end, setEnd] = useState("");
|
||||||
|
|
||||||
const handleCreateEvent = async () => {
|
const handleCreateEvent = async () => {
|
||||||
|
|
||||||
if(name !== "" || description !== "") await createEvent(name, description);
|
if(name !== "" || description !== "" || start !== "" || end !== "") {
|
||||||
|
await createEvent(name, description, start, end);
|
||||||
|
console.log(start);
|
||||||
|
}
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -26,16 +31,29 @@ export default function CreateEventBtn() {
|
|||||||
<section className={styles.section}>
|
<section className={styles.section}>
|
||||||
<div className={styles.inputContainer}>
|
<div className={styles.inputContainer}>
|
||||||
<h2>Titre</h2>
|
<h2>Titre</h2>
|
||||||
<TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
|
<TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.inputContainer}>
|
<div className={styles.inputContainer}>
|
||||||
<h2>Description</h2>
|
<h2>Description</h2>
|
||||||
<TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
|
<TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<h2>Date</h2>
|
||||||
|
<div className={styles.dateInputContainer}>
|
||||||
|
<div className={styles.dateInput}>
|
||||||
|
<p>Début</p>
|
||||||
|
<TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.dateInput}>
|
||||||
|
<p>Fin</p>
|
||||||
|
<TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
|
<Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -26,6 +26,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create {
|
.create {
|
||||||
@@ -38,4 +46,14 @@
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateInputContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateInput {
|
||||||
|
margin: 1em;
|
||||||
}
|
}
|
||||||
@@ -1,30 +1,39 @@
|
|||||||
import {useState} from "react";
|
import { useState, useMemo, useEffect } from "react";
|
||||||
import styles from "./calendar.module.css";
|
import styles from "./calendar.module.css";
|
||||||
import formatDateLetter from "../../utils/date/formatDateLetter.js";
|
import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
|
||||||
|
|
||||||
|
function Calendar({ events = [] }) {
|
||||||
|
|
||||||
function Calendar() {
|
|
||||||
const events = {
|
|
||||||
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
|
|
||||||
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
|
|
||||||
"2025-11-14": ["Sortie cinéma"],
|
|
||||||
"2025-11-15": ["Sortie cinéma"],
|
|
||||||
"2025-11-17": ["Sortie cinéma"],
|
|
||||||
};
|
|
||||||
const monthNames = [
|
const monthNames = [
|
||||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||||
];
|
];
|
||||||
|
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
|
|
||||||
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
|
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
|
||||||
const [currentYear, setCurrentYear] = useState(today.getFullYear());
|
const [currentYear] = useState(today.getFullYear());
|
||||||
const [selectedDay, setSelectedDay] = useState(() => {
|
const [selectedDay, setSelectedDay] = useState(null);
|
||||||
const year = today.getFullYear();
|
|
||||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
const eventsByDate = useMemo(() => {
|
||||||
const day = String(today.getDate()).padStart(2, "0");
|
return events.reduce((acc, ev) => {
|
||||||
const key = `${year}-${month}-${day}`;
|
if (!ev?.start) return acc;
|
||||||
return {date: key, events: events[key] || []};
|
|
||||||
});
|
const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
|
||||||
|
if (!acc[dateKey]) acc[dateKey] = [];
|
||||||
|
acc[dateKey].push(ev);
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}, [events]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
||||||
|
|
||||||
|
setSelectedDay({
|
||||||
|
date: key,
|
||||||
|
events: eventsByDate[key] || []
|
||||||
|
});
|
||||||
|
}, [eventsByDate]);
|
||||||
|
|
||||||
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
||||||
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
||||||
@@ -34,87 +43,55 @@ function Calendar() {
|
|||||||
for (let i = 0; i < startDay; i++) days.push(null);
|
for (let i = 0; i < startDay; i++) days.push(null);
|
||||||
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
||||||
|
|
||||||
const handlePrevMonth = () => {
|
const selectDay = (year, month, day) => {
|
||||||
let newMonth = currentMonth - 1;
|
const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||||
let newYear = currentYear;
|
setSelectedDay({
|
||||||
|
date: key,
|
||||||
if (newMonth < 0) {
|
events: eventsByDate[key] || []
|
||||||
newMonth = 11;
|
});
|
||||||
newYear--;
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentMonth(newMonth);
|
|
||||||
setCurrentYear(newYear);
|
|
||||||
|
|
||||||
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
|
||||||
setSelectedDay({date: key, events: events[key] || []});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNextMonth = () => {
|
|
||||||
let newMonth = currentMonth + 1;
|
|
||||||
let newYear = currentYear;
|
|
||||||
|
|
||||||
if (newMonth > 11) {
|
|
||||||
newMonth = 0;
|
|
||||||
newYear++;
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentMonth(newMonth);
|
|
||||||
setCurrentYear(newYear);
|
|
||||||
|
|
||||||
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
|
||||||
setSelectedDay({date: key, events: events[key] || []});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDayClick = (day) => {
|
const handleDayClick = (day) => {
|
||||||
if (!day) return;
|
if (!day) return;
|
||||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
selectDay(currentYear, currentMonth, day);
|
||||||
setSelectedDay({date: key, events: events[key] || []});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.glassCard}>
|
<div className={`${styles.glassCard} glassCard`}>
|
||||||
<div className={styles.calendarContainer}>
|
<div className={styles.calendarContainer}>
|
||||||
|
|
||||||
<div className={styles.calendarHeader}>
|
<div className={styles.calendarHeader}>
|
||||||
<button onClick={handlePrevMonth}>◀</button>
|
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
|
||||||
<p>{monthNames[currentMonth]} {currentYear}</p>
|
<p>{monthNames[currentMonth]} {currentYear}</p>
|
||||||
<button onClick={handleNextMonth}>▶</button>
|
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table className={styles.calendar}>
|
<table className={styles.calendar}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Lun</th>
|
<th>Lun</th><th>Mar</th><th>Mer</th>
|
||||||
<th>Mar</th>
|
<th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
|
||||||
<th>Mer</th>
|
|
||||||
<th>Jeu</th>
|
|
||||||
<th>Ven</th>
|
|
||||||
<th>Sam</th>
|
|
||||||
<th>Dim</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
|
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
|
||||||
<tr key={weekIndex}>
|
<tr key={w}>
|
||||||
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
|
{days.slice(w * 7, w * 7 + 7).map((day, i) => {
|
||||||
|
if (!day) return <td key={i}></td>;
|
||||||
|
|
||||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||||
const hasEvent = events[key];
|
const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
key={index}
|
key={i}
|
||||||
className={[
|
className={[
|
||||||
day === today.getDate() &&
|
|
||||||
currentMonth === today.getMonth() &&
|
|
||||||
currentYear === today.getFullYear()
|
|
||||||
? styles.today : "",
|
|
||||||
hasEvent ? styles.hasEvent : "",
|
hasEvent ? styles.hasEvent : "",
|
||||||
selectedDay?.date === key ? styles.selected : ""
|
selectedDay?.date === key ? styles.selected : ""
|
||||||
].join(" ")}
|
].join(" ")}
|
||||||
onClick={() => handleDayClick(day)}
|
onClick={() => handleDayClick(day)}
|
||||||
>
|
>
|
||||||
{day || ""}
|
{day}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -124,13 +101,16 @@ function Calendar() {
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
{selectedDay && (
|
{selectedDay && (
|
||||||
<div className={styles.eventBox}>
|
<div className={`${styles.eventBox} glassBorder`}>
|
||||||
<h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
|
<h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
|
||||||
|
|
||||||
{selectedDay.events.length > 0 ? (
|
{selectedDay.events.length > 0 ? (
|
||||||
<ul>
|
<ul>
|
||||||
{selectedDay.events.map((ev, i) => (
|
{selectedDay.events.map(ev => (
|
||||||
<li key={i}>{ev}</li>
|
<li key={ev.id}>
|
||||||
|
<strong>{ev.name}</strong><br />
|
||||||
|
{ev.description}
|
||||||
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
.calendarContainer {
|
.calendarContainer {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -107,20 +106,12 @@
|
|||||||
|
|
||||||
.eventBox {
|
.eventBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 20px;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
border: none;
|
|
||||||
background: rgb(255, 255, 255, 0.25);
|
|
||||||
box-shadow:
|
|
||||||
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventBox ul {
|
.eventBox ul {
|
||||||
list-style-type: disc;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventGroup{
|
.eventGroup{
|
||||||
@@ -138,8 +129,8 @@
|
|||||||
|
|
||||||
.glassCard {
|
.glassCard {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
max-height: 475px;
|
max-height: 100%;
|
||||||
margin: 16px 0px 16px 0px;
|
margin: 16px 0 16px 0;
|
||||||
padding: 10px 20px 10px 20px;
|
padding: 10px 20px 10px 20px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: rgba(255, 255, 255, 0.65);
|
background: rgba(255, 255, 255, 0.65);
|
||||||
@@ -162,9 +153,15 @@
|
|||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.glassCard {
|
.glassCard {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0px;
|
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
max-height: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarContainer {
|
||||||
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,47 +1,47 @@
|
|||||||
import {useMemo} from "react";
|
import { useMemo } from "react";
|
||||||
import styles from "./eventList.module.css";
|
import styles from "./eventList.module.css";
|
||||||
import formatDateLetter from "../../utils/date/formatDateLetter.js";
|
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
|
||||||
function eventList() {
|
|
||||||
const events = {
|
|
||||||
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
|
function EventList({ events }) {
|
||||||
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
|
|
||||||
"2025-11-14": ["Sortie cinéma"],
|
|
||||||
"2025-11-15": ["Sortie cinéma"],
|
|
||||||
"2025-11-17": ["Sortie cinéma"],
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortedEvents = useMemo(() => {
|
const sortedEvents = useMemo(() => {
|
||||||
return Object.entries(events)
|
return [...events].sort(
|
||||||
.map(([dateKey, eventList]) => ({date: dateKey, events: eventList}))
|
(a, b) => new Date(a.start) - new Date(b.start)
|
||||||
.sort((a, b) => new Date(a.date) - new Date(b.date));
|
);
|
||||||
}, [events]);
|
}, [events]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.glassCard}>
|
<div className={`${styles.glassCard} glassCard`}>
|
||||||
<div className={styles.eventListContainer}>
|
|
||||||
<h2>Liste des événements à venir</h2>
|
<h2>Liste des événements à venir</h2>
|
||||||
{sortedEvents.length > 0 ? (
|
{sortedEvents.length > 0 ? (
|
||||||
<ul className={styles.eventList}>
|
<ul className={styles.eventList}>
|
||||||
{sortedEvents.map((eventGroup) => (
|
{sortedEvents.map((eventGroup) => (
|
||||||
<li key={eventGroup.date} className={styles.eventGroup}>
|
<li key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}>
|
||||||
<div className={styles.eventDate}>
|
<div className={styles.eventTitle}>
|
||||||
<strong>{formatDateLetter(eventGroup.date)}</strong>
|
<p className={styles.title}>{eventGroup.name}</p>
|
||||||
|
<p>{formatDateLetter(eventGroup.start)}</p>
|
||||||
</div>
|
</div>
|
||||||
|
{/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
|
||||||
<ul className={styles.eventDetails}>
|
<ul className={styles.eventDetails}>
|
||||||
{eventGroup.events.map((event, i) => (
|
{eventGroup.tasks.map((task, i) => (
|
||||||
<li key={i}>- {event}</li>
|
<li key={i} className={styles.eventTasks}>
|
||||||
|
<p>- {task.name} - {task.description}</p>
|
||||||
|
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
|
||||||
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
) : (
|
) : (
|
||||||
<p>Aucun événement planifié pour l'instant.</p>
|
<p>Aucun événement planifié pour l'instant.</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default eventList;
|
export default EventList;
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
.glassCard {
|
.glassCard {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
max-height: 475px;
|
max-height: 100%;
|
||||||
margin: 16px 0px 16px 0px;
|
margin: 16px 0 16px 0;
|
||||||
padding: 10px 20px 10px 20px;
|
padding: 10px 20px 10px 20px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: rgba(255, 255, 255, 0.65);
|
background: rgba(255, 255, 255, 0.65);
|
||||||
@@ -35,9 +35,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.eventDetails {
|
.eventDetails {
|
||||||
list-style: none;
|
margin-top: 10px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dateSelected{
|
.dateSelected{
|
||||||
@@ -45,20 +44,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
|
font-size: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventListContainer{
|
.eventGroup{
|
||||||
width: 100%;
|
margin: 16px 0 16px 0;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventTitle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventTasks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.glassCard {
|
.glassCard {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0px;
|
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
max-height: 450px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 0px 10px;
|
padding: 0 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
@@ -33,9 +33,9 @@ input::placeholder{
|
|||||||
|
|
||||||
.inputContainer {
|
.inputContainer {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* style scoped (module) */
|
|
||||||
.loginButton {
|
.loginButton {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|||||||
+22
-25
@@ -52,33 +52,30 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*.glassCard {
|
|
||||||
width: 100%;
|
|
||||||
height: fit-content;
|
|
||||||
background: rgba(255, 255, 255, 0.65);
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
-webkit-backdrop-filter: blur(3px);
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
box-shadow:
|
|
||||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
||||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
|
||||||
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
|
|
||||||
/* style a montrer a giovanni prcq il est + bo */
|
|
||||||
.glassCard {
|
.glassCard {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
padding: 10px 20px 10px 20px;
|
||||||
backdrop-filter: blur(10px);
|
background: rgba(255, 255, 255, 0.54);
|
||||||
border-radius: 20px;
|
backdrop-filter: blur(3px);
|
||||||
padding: 15px;
|
-webkit-backdrop-filter: blur(3px);
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
border-radius: 20px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.glassBorder{
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
background: rgb(255, 255, 255, 0.25);
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3.2em;
|
font-size: 3.2em;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|||||||
+1
-1
@@ -11,7 +11,7 @@ function Layout(){
|
|||||||
|
|
||||||
const { user, loading } = useContext(AuthContext);
|
const { user, loading } = useContext(AuthContext);
|
||||||
|
|
||||||
if (loading) return <p>Loading</p>;
|
if (loading) return <p>Loading</p>;
|
||||||
if (!user) return <Navigate to="/login" />;
|
if (!user) return <Navigate to="/login" />;
|
||||||
if(user && user.validate === 0) return <Navigate to="/error/validation" />;
|
if(user && user.validate === 0) return <Navigate to="/error/validation" />;
|
||||||
|
|
||||||
|
|||||||
@@ -12,24 +12,24 @@ function AdminPage() {
|
|||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [selected, setSelected] = useState("3");
|
const [selected, setSelected] = useState("3");
|
||||||
const [participationRate, setParticipationRate] = useState(89);
|
const [participationRate] = useState(89);
|
||||||
|
|
||||||
/*if(!user.isAdmin) navigate("/");*/
|
if(!user.isAdmin) navigate("/");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<ParticipationChart
|
<ParticipationChart
|
||||||
selected={selected}
|
selected={selected}
|
||||||
setSelected={setSelected}
|
setSelected={setSelected}
|
||||||
participationRate={participationRate}
|
participationRate={participationRate}
|
||||||
/>
|
/>
|
||||||
<div className={styles.rightSection}>
|
<div className={styles.rightSection}>
|
||||||
<IncompleteEvents />
|
<IncompleteEvents />
|
||||||
<PendingMembers />
|
<PendingMembers />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default AdminPage;
|
export default AdminPage;
|
||||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
|
|||||||
import Event from "../../components/Event/Event.jsx";
|
import Event from "../../components/Event/Event.jsx";
|
||||||
import styles from "./EventsPage.module.css";
|
import styles from "./EventsPage.module.css";
|
||||||
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
|
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
|
||||||
import getAllEvents from "../../utils/event/getAllEvents.js";
|
import getAllEvents from "../../utils/events/getAllEvents.js";
|
||||||
import filter from "../../utils/filter.js";
|
import filter from "../../utils/filter.js";
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,26 @@
|
|||||||
import styles from "./HomePage.module.css";
|
import styles from "./HomePage.module.css";
|
||||||
import Calendar from "../../components/homePage/calendar.jsx";
|
import Calendar from "../../components/homePage/calendar.jsx";
|
||||||
import EventList from "../../components/homePage/eventList.jsx";
|
import EventList from "../../components/homePage/eventList.jsx";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import getAllEvents from "../../utils/events/getAllEvents.js";
|
||||||
|
|
||||||
function HomePage() {
|
function HomePage() {
|
||||||
|
|
||||||
|
const [events, setEvents] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
const data = await getAllEvents();
|
||||||
|
setEvents(data.data);
|
||||||
|
}) ()
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.allContent}>
|
<div className={styles.allContent}>
|
||||||
<Calendar />
|
<Calendar events={events} />
|
||||||
|
<EventList events={events} />
|
||||||
<EventList />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default HomePage;
|
export default HomePage;
|
||||||
@@ -1,13 +1,14 @@
|
|||||||
|
.allContent{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.allContent{
|
.allContent{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0px;
|
gap: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.allContent{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 7%;
|
|
||||||
}
|
}
|
||||||
@@ -10,11 +10,16 @@ function LoginPage() {
|
|||||||
const { user, loading } = useContext(AuthContext)
|
const { user, loading } = useContext(AuthContext)
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log("loading" + loading);
|
||||||
|
console.log("user" + user);
|
||||||
|
|
||||||
if (!loading && user) {
|
if (!loading && user) {
|
||||||
navigate("/");
|
navigate("/");
|
||||||
}
|
}
|
||||||
}, [loading, user]);
|
}, [loading, navigate, user]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Background>
|
<Background>
|
||||||
|
|||||||
@@ -24,11 +24,11 @@ function ProfilePage() {
|
|||||||
<h2> {user.name} {user.lastname} </h2>
|
<h2> {user.name} {user.lastname} </h2>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.topDescription}>
|
<div className={styles.topDescription}>
|
||||||
<div className={styles.infoBlock}>
|
<div className={`${styles.infoBlock} glassBorder`}>
|
||||||
<p><strong>Role :</strong> {user.role}</p>
|
<p><strong>Role :</strong> {user.role}</p>
|
||||||
<p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
|
<p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.infoBlock}>
|
<div className={`${styles.infoBlock} glassBorder`}>
|
||||||
<p><strong>Mail :</strong> {user.email} </p>
|
<p><strong>Mail :</strong> {user.email} </p>
|
||||||
<p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
|
<p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -47,9 +47,7 @@
|
|||||||
|
|
||||||
.infoBlock {
|
.infoBlock {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventTasks {
|
.eventTasks {
|
||||||
@@ -131,7 +129,6 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop (1024px et plus) */
|
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ function RegisterPage() {
|
|||||||
|
|
||||||
<div className={styles.logButton}>
|
<div className={styles.logButton}>
|
||||||
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
|
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
|
||||||
<Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
|
<Button variant={"default"} onClick={handleSubmit}> Créer le compte </Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -40,4 +40,5 @@ h1 {
|
|||||||
|
|
||||||
.inputContainer {
|
.inputContainer {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -131,7 +131,6 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop (1024px et plus) */
|
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import {useState} from "react";
|
||||||
|
import styles from "./eventDetail.module.css";
|
||||||
|
import { useParams } from "react-router";
|
||||||
|
|
||||||
|
|
||||||
|
function eventDetail() {
|
||||||
|
|
||||||
|
const params = useParams();
|
||||||
|
const id = params.id;
|
||||||
|
|
||||||
|
const [tasks, setTasks] = useState([
|
||||||
|
{ text: "Préparer les slides", registered: false },
|
||||||
|
{ text: "Réserver la salle", registered: false },
|
||||||
|
{ text: "Envoyer les invitations", registered: false },
|
||||||
|
{ text: "Tester la configuration technique", registered: false },
|
||||||
|
{ text: "Organiser le catering", registered: false },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const event = {
|
||||||
|
title: "Conférence React 2025",
|
||||||
|
date: "27 Décembre 2025",
|
||||||
|
location: "Paris, France",
|
||||||
|
description: "azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop"
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleRegister = (index) => {
|
||||||
|
setTasks((prevTasks) =>
|
||||||
|
prevTasks.map((task, i) =>
|
||||||
|
i === index
|
||||||
|
? { ...task, registered: !task.registered }
|
||||||
|
: task
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.allContent}>
|
||||||
|
<div className={`glassCard`}>
|
||||||
|
<div className={styles.textImage}>
|
||||||
|
<img src="/public/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
|
||||||
|
<div className={styles.eventInfo}>
|
||||||
|
<h2>{event.title}</h2>
|
||||||
|
<p>Date: {event.date}</p>
|
||||||
|
<p>Lieu: {event.location}</p>
|
||||||
|
<p>Description: {event.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Tâches</h2>
|
||||||
|
<ul className={styles.tasks}>
|
||||||
|
{tasks.map((task, index) => (
|
||||||
|
<li style={{"--i": index}} key={index}>
|
||||||
|
<div className={styles.tasksButton}>
|
||||||
|
<span><strong>{task.text}</strong></span>
|
||||||
|
<button
|
||||||
|
className={styles.registerButton}
|
||||||
|
onClick={() => toggleRegister(index)}
|
||||||
|
>
|
||||||
|
{task.registered ? "Se désinscrire" : "S’inscrire"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default eventDetail;
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
.allContent{
|
||||||
|
margin: 16px 0px 16px 0px;
|
||||||
|
align-self: center;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.textImage {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventImage {
|
||||||
|
width: 40%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventInfo {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventInfo p {
|
||||||
|
white-space: normal;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventImage {
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registerButton {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #019AFF;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registerButton:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasksButton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks li {
|
||||||
|
margin: 16px 0px 16px 0px;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease-out forwards;
|
||||||
|
animation-delay: calc(var(--i) * 0.1s);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
+6
-1
@@ -10,6 +10,7 @@ import AdminPage from "./pages/Admin/AdminPage.jsx";
|
|||||||
import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx";
|
import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx";
|
||||||
import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx";
|
import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx";
|
||||||
import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx";
|
import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx";
|
||||||
|
import eventDetail from "./pages/eventDetail/eventDetail.jsx";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
{
|
{
|
||||||
@@ -59,7 +60,11 @@ const router = createBrowserRouter([
|
|||||||
{
|
{
|
||||||
path: "/profile/:id",
|
path: "/profile/:id",
|
||||||
Component: VolunteerProfilePage,
|
Component: VolunteerProfilePage,
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: "/events/:id",
|
||||||
|
Component: eventDetail,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|||||||
@@ -1,8 +1,22 @@
|
|||||||
export default function formatDateLetter(d) {
|
export function formatDateLetter(d) {
|
||||||
const monthNames = [
|
const monthNames = [
|
||||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||||
];
|
];
|
||||||
const [year, month, day] = d.split('-');
|
|
||||||
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
const [datePart, timePart] = d.split(' ');
|
||||||
};
|
const [year, month, day] = datePart.split('-');
|
||||||
|
const [hours, minutes] = timePart.split(':');
|
||||||
|
|
||||||
|
return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function formatDateLetterJS(d) {
|
||||||
|
const monthNames = [
|
||||||
|
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||||
|
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||||
|
];
|
||||||
|
const [year, month, day] = d.split('-');
|
||||||
|
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
export default function formatTime(d) {
|
||||||
|
const date = new Date(d);
|
||||||
|
|
||||||
|
const hh = String(date.getUTCHours()).padStart(2, '0');
|
||||||
|
const min = String(date.getUTCMinutes()).padStart(2, '0');
|
||||||
|
|
||||||
|
return `${hh}:${min}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import Echo from "laravel-echo";
|
||||||
|
import Pusher from "pusher-js";
|
||||||
|
|
||||||
|
window.Pusher = Pusher;
|
||||||
|
|
||||||
|
export default function initEcho() {
|
||||||
|
const echoInstance = new Echo({
|
||||||
|
broadcaster: import.meta.env.VITE_BROADCASTER,
|
||||||
|
key: import.meta.env.VITE_REVERB_KEY,
|
||||||
|
wsHost: import.meta.env.VITE_REVERB_HOST,
|
||||||
|
wsPort: Number(import.meta.env.VITE_REVERB_PORT),
|
||||||
|
forceTLS: import.meta.env.VITE_FORCE_TLS === 'true',
|
||||||
|
disableStats: import.meta.env.VITE_DISABLE_STATS === 'true',
|
||||||
|
encrypted: import.meta.env.VITE_ENCRYPTED === 'true',
|
||||||
|
cluster: import.meta.env.VITE_CLUSTER,
|
||||||
|
enabledTransports: ['ws', 'wss'],
|
||||||
|
});
|
||||||
|
|
||||||
|
window.Echo = echoInstance;
|
||||||
|
return echoInstance;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification) => {
|
||||||
|
if (userData.isAdmin || userData.role === "Gérant") {
|
||||||
|
const channelName = "users.registration";
|
||||||
|
echo.private(channelName)
|
||||||
|
.listen(".users.registration", (event) => {
|
||||||
|
const newNotification = {
|
||||||
|
id: Date.now(),
|
||||||
|
content: `Nouvelle demande d'inscription : ${event.user.name} ${event.user.lastname}`,
|
||||||
|
created_at: Date.now(),
|
||||||
|
pivot: { unread: 1 }
|
||||||
|
};
|
||||||
|
setNotifications(prev => [newNotification, ...prev]);
|
||||||
|
setunreadNotification(true);
|
||||||
|
});
|
||||||
|
return channelName;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => {
|
||||||
|
if (!userData?.id) return null;
|
||||||
|
|
||||||
|
const channelName = `user.${userData.id}`;
|
||||||
|
|
||||||
|
return echo.private(channelName)
|
||||||
|
.listen('.event.participation.cancelled', (event) => {
|
||||||
|
const newNotification = {
|
||||||
|
id: Date.now(),
|
||||||
|
content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
|
||||||
|
created_at: Date.now(),
|
||||||
|
pivot: { unread: 1 }
|
||||||
|
};
|
||||||
|
setNotifications(prev => [newNotification, ...prev]);
|
||||||
|
setunreadNotification(true);
|
||||||
|
})
|
||||||
|
.listen(`.task.participation.cancelled`, (event) => {
|
||||||
|
const newNotification = {
|
||||||
|
id: Date.now(),
|
||||||
|
content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
|
||||||
|
created_at: Date.now(),
|
||||||
|
pivot: { unread: 1 }
|
||||||
|
};
|
||||||
|
setNotifications(prev => [newNotification, ...prev]);
|
||||||
|
setunreadNotification(true);
|
||||||
|
})
|
||||||
|
.listen('.volunteer.assigned.to.task', (event) => {
|
||||||
|
const newNotification = {
|
||||||
|
id: Date.now(),
|
||||||
|
content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`,
|
||||||
|
created_at: Date.now(),
|
||||||
|
pivot: { unread: 1 }
|
||||||
|
};
|
||||||
|
setNotifications(prev => [newNotification, ...prev]);
|
||||||
|
setunreadNotification(true);
|
||||||
|
})
|
||||||
|
.listen('.volunteer.unassigned.to.task', (event) => {
|
||||||
|
const newNotification = {
|
||||||
|
id: Date.now(),
|
||||||
|
content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`,
|
||||||
|
created_at: Date.now(),
|
||||||
|
pivot: { unread: 1 }
|
||||||
|
};
|
||||||
|
setNotifications(prev => [newNotification, ...prev]);
|
||||||
|
setunreadNotification(true);
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import getXSRFToken from "../getXSRF.js";
|
import getXSRFToken from "../getXSRF.js";
|
||||||
|
|
||||||
export default async function createEvent(name, description) {
|
export default async function createEvent(name, description, start, end) {
|
||||||
const csrfToken = await getXSRFToken();
|
const csrfToken = await getXSRFToken();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -12,7 +12,7 @@ export default async function createEvent(name, description) {
|
|||||||
'X-XSRF-TOKEN': csrfToken,
|
'X-XSRF-TOKEN': csrfToken,
|
||||||
'Accept': 'application/json'
|
'Accept': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ name, description }),
|
body: JSON.stringify({ name, description, start, end }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+2
-2
@@ -4,9 +4,9 @@ function filter(elements, filters, type) {
|
|||||||
const dB = new Date(dateB);
|
const dB = new Date(dateB);
|
||||||
|
|
||||||
if (filters.yearOrder === "asc") {
|
if (filters.yearOrder === "asc") {
|
||||||
return dA - dB; // plus ancien -> plus récent
|
return dA - dB;
|
||||||
} else {
|
} else {
|
||||||
return dB - dA; // plus récent -> plus ancien
|
return dB - dA;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import getXSRFToken from "../getXSRF.js";
|
||||||
|
|
||||||
|
export default async function deleteNotificationUser(notificationId) {
|
||||||
|
const csrfToken = await getXSRFToken();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/delete/notification/${notificationId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'X-XSRF-TOKEN': csrfToken
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`Erreur serveur : ${res.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
return data;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur :', err);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
export default async function getUserNotifications() {
|
export default async function getUserNotifications() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
'http://localhost:80/api/users/1/notifications',
|
`http://${import.meta.env.VITE_API_URL}/api/users/notifications`,
|
||||||
{
|
{
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
credentials: 'include',
|
credentials: 'include',
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import getXSRFToken from "../getXSRF.js";
|
||||||
|
|
||||||
|
export default async function readNotifications() {
|
||||||
|
|
||||||
|
const csrfToken = await getXSRFToken();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/notifications/read`, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'X-XSRF-TOKEN': csrfToken,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`Erreur serveur : ${res.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await res.json();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur :', err);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
File renamed without changes.
Reference in new issue
Block a user