From 4985dd9ec2536e822da7f654f2299d62ac413eaf Mon Sep 17 00:00:00 2001 From: catanese Date: Mon, 13 May 2024 00:13:52 +0200 Subject: [PATCH] room list and create room --- .vs/2024-DEV-BUT3/v17/.wsuo | Bin 96256 -> 96256 bytes .vs/slnx.sqlite | Bin 90112 -> 90112 bytes package-lock.json | 26 +++++------ package.json | 2 +- src/assets/styles/room-list.css | 38 ++++++++++++++++ src/components/diagram.jsx | 21 +++++---- src/components/item/ItemBox.jsx | 20 ++------- src/components/nav/Navbar.jsx | 4 +- src/components/parts/characteristic.jsx | 11 +++++ src/components/parts/description.jsx | 11 +++++ src/components/rooms/room-detail.jsx | 45 +++++++++++++++++++ src/components/rooms/room-list.jsx | 55 ++++++++++++------------ src/components/rooms/roomBox.jsx | 27 ++++++------ src/pages/rooms.jsx | 19 +++++--- 14 files changed, 189 insertions(+), 90 deletions(-) create mode 100644 src/assets/styles/room-list.css create mode 100644 src/components/parts/characteristic.jsx create mode 100644 src/components/parts/description.jsx create mode 100644 src/components/rooms/room-detail.jsx diff --git a/.vs/2024-DEV-BUT3/v17/.wsuo b/.vs/2024-DEV-BUT3/v17/.wsuo index e30e1c1fbd08cf011250d8db9740d5a892cf0a69..e79653da0fa6ab2c7deb0bb41c5acd3cdf183765 100644 GIT binary patch delta 3273 zcmcJR3sjWH7016>cGqQj2)lrQAPZS{m51`uQ1HP^1%x1ms7a`TJPbq-b{7MPvM2&Z zjIh(Xrqz17!5C|e%2r7YwM4*2NO%|}iH~TtiG5&7TRg@zvi%QyOU#j+lb+Lj@cZt} zojdoNxpU`&en_Mr5;aB>;fa_4fn(#gdau^zt0a%(xaeG3A*difGv623ktz{1k1XFl zBWOB7_pQca@k3t-W&t-a6@&v9FdZxa-oOE{`9Y9UkP0FI^OXcS69j_EU=9f7xGF9T zjrl+ZqJaW21*bE;sD$15=b>j zX0zhaNC0fYQ;>_mVlV@QfGL2DJp&m4RD9nZa>P7eG@Cd&*+`YAo(Qj4PO2usXrl14 zkTR$2`JrK*i#Z-(8DL=*gG4YvSgld5nlP;FqZ5Ud>8)Xnh2x3BDuJHaeP39EF`f*@ zq8i0<>E~lhSbn7f8l6AG ztn)igCR8_&7U^4L)yr7>dVViOkQ+cT-`7BDfsXHQgnR{*@%;+OO`wwRZ-K1h+f?ta zGOOH2Y|P4{>%=roU~pB@<_J&P?jjMs$gfUZ4(m>ie(mgU6TyX2Ux5dWmJ20oFrLlZ zh&IFK41MSlM1sc*WZ_~xbnjc|h4J$w!d!liT@A+j&|!T`*dhtL`|Mhcg(Mt%S1JWm z>7o>_<+W7jl4?sb(OYfR47>EwIC+R@9h|k9AF3w_3^FCwIfq|{P?7~xmaojMxE^Mo zSl1M8U8;Qp)R$nx9z%qRgjh#JjTjlAY3G;H`1A7&ek!V(cfraO+eFJVM}m45$3TV;wnLODK5(=0D}9h)ZBFo`d|U%ERqSq3(eV9X!y%Fa{Yzg~&^E?vARVtPi<;+8;!tPGDCPibgT{F^w~yt3!mo$h0;<;%h| zBTO}? zGI`=dl+2%L99l_a=BS)5k!i8ODDx$5)Ge@pRM42*45K26*c%lYL^{KoU^Zt+!CO-Q zd4WF5xBNceJ#|e_oxuHItLSEg@nlQ>vTu-DuCzEuNPDyFNh3?ICM}lI?HzN%!>EAA9D3p)QSC?Q;XWK_`codt&hJmdX=Ob=90a%I@HH_ zD~BvF-U=jc$yRrdyAI;k^LN&|`?Gr^_w5L1nZ7?PFY@y*eWdD6P2Rfh$z46ot-YrX z?|X@@+F~)430t<9iKB4JgM>2&wzPR34J+B1M~PygDN?Ab7b;BohTg34pdPE#C|AgbQ`V_M?@}R>F$w$tYJxbMUt3UtbsG?xw>9e`!zf9lv^Qk+v%(0+0#*p4I z;bGc8c9@*8UqXD$KJ|Z^L`k5lanO&*s9OKLToXFtu&ZXU>x;doyZjZp=|yp~;ntd! zF6MT9G@<$xtBs21Pzoa#N<&!{%>vr-00foq_gQ`SWI=xAn!SU*-WPv4JiO#^-kcXd zsM-3gQ%d1)**Zxlb-p%-{NlSCmrro;#;T`?tHLYgtGa>L%m2LaYa@hy7FKK_b zqksGT#>B3ux|Q!5P(0me?4DVMwYL@PJo*pBmkuvJ-T&?P311>vzLHdep0Bw?$+ z=0>gJtI-2+%l_N{Vk_UH`(nkT-S{u_%!Lm9oh40&Ep=U&q0 zwW&ncQCyL4^PulW{j+H&y)x3odS%NV-;j^t!+H`Pl3>1k(#pUYRH?rH|MzGlxkPPT NA4r_cPd8uu=)YYy3OWD) delta 1879 zcma)-e@s(X6vumBTWl387A*J!sim|9T6mNnC1S8j1r~n+Lq#;WjusSA2*nMJ6O_cD z)*tkUZ|aP*L*k}U=-Z4YZfV4sxnxo2ri=Tbb4!f-C5iBdo5IemvT1NXZt}@J_uO~S zJ@0$&yRW5B-qI)EV+U!^tYl7AbnDw=2Rm;ZcPagp$w^1;kil3K2nM5yO$xWSfa>!bI?df*4I0hz!Ciku*!v$;c(f z5DA2qa1g}=3l>eihKM7Q2o=Hna_XlNHewQyNi-5H*;wi)6EQ?8p(i4VJYx7|XOf-9 zqOxGaEuNfnhh*GnR2ZE|H=&u7tNLp4ZTP?bjZ&I zG{*o2+nr1PHo`A}Y%%SJE$!y;b!1#-HKG=Hb_V;$^P;}=8}LOM&|uKXmeCVvUuD8Z z!$PH`j7ChUkf+~p8GE_3@M@4q&XJR~Kv5ycSS_EdDfVJZj6pQS3`#|PejF%62aKJ_ zC-Vhf|5Pqe@&LxpeYalwW5G~-tEOl7W1l)t%)8J6*c<75N3Z8Z{dp~*yz{VV}-^%%P4#iS( zu`08y#73PL{8=(zEG53_CJ5)vkRhaGfL0sx+w?a3wL9APFDk~ZP*z<0qx#~>%uBlt zkUxhd>mN9vqU0tYo;ipQ6_ zHHMBc+#U5&98g`zP)#}XK=y9_7Cp4x<0erb-Z-_ zwG){)PE~#VX2$$z)wX4wPH8ADO~+3-Yfhrjw*=H;j_YIje{1h=;rvrL|68FlC5cH5 z*QLIS3yOJ^C%X+ouhd@=4p>qcB~&CqlxS-DN*c%wLPYkA`0rY;C-_&@|2lE!_S`m% z;Q7Et5mcWazPlo^_3q5yi}$L9D%@-<6@Jly8jX9FMmBF%!@h9K@z)0qmFGQpr0MAL zVf%pz$ghb&o>PcHx{pUh79)1`!D$|XfWiHCw6BlF*s{^!!QySHXnz!qYs-vyze$O= zcj?4nnH_|y3WyWq+P)w4+$u4)><1W@7D?I>I|gY_hY{E895c6uG)-9KaW@n-u)hPlKiL=RX{e-as@tK?gc0hwrR0UH|^>gh$ z7pR1qX^_p^=#FPMtUfC(E8FEv&$L)=)@)0LvogctbXr}ON~i5rmy5SnWo6h#OAcYr yiIvzr7$)SZ;k4K~kPO0}Fv!7XF$IGkDe!F1Q9N^hwE%7~3bkg45N(~8uKfxABVC>V diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index dc91451cfad3eeea59d4913719a0f045c9ba9cda..438761021688c34bc41c58bfca319a0d368ef31c 100644 GIT binary patch delta 693 zcmZoTz}j$tb%HeGg^4oGj2AX0Xy`L4PVUqX7UvdWV%BAJ%gjj)t}HG|&2`Ny$tlOL{_HKmC<7K1m1bj*WaMB=EG|whDdq>e0;EFS*BPcS-)|}- zb24Y^WcC0}F3#0_wtT8Q44j81n+2pZw{p(hJSX5GN1!mXHY1vciv*d~A!0C37K$+& zGGclxAEX)0GkKe@Me4CJC-WYe%$_iliTBjx1qrI`M|kh>UgN#6SyAB|j|3|-BV$q# zh*U2GkvaKbGH>&pTn#4XWR6pl*$XteIKJ?y@NsZY=H#7hR*=TRaf;)?<~apw9Fd|d z+KlK+QHP4c9Iaj`!D7gW#o0OeU?b2Ro|Cs(x$>Bq_!%beI7b0SHU>scMmBCH zV8EVX^5I*&X~S`UM()ig{+k;xa&I$W{Lc@h92j@-F)B{q>Bs2Is4)GnA7ccUJQq-7 dsCA>R>GXqsjB49k{TcHFcojiDNa@&KtK;VA$B delta 336 zcmZoTz}j$tb%HeGwuv&%jN3LQXy`M_P43hW7UvRSV%BAJ%gjj)t}HG|&2`Ny$tYG1%OEAiS6^Kf+F-S6Uuq753rCi^IiB;{WcC0}Ha=TE zRUU@PRsrdomj*oGn7ANv^R-AlHs*NVJCoTHW=>v|pvrh>v!a3+@8&zX8caZa%9Gg( zfcjMUIJhTIwkk;5yre)4s4sD|a^*2I@!V}&)h7xtvN14nGO}?q0qxJ-w$1Y0rVYpa z8M!u}_-}5&$hFOY@jpM1a$wxS$0#>_ryrv;qwMs*evA=ZGF(87q1KJMrqd7lF{*8E T^=Hfz;FV)#W@O}+1(PxWrmb$Z diff --git a/package-lock.json b/package-lock.json index 0a652ea..d72c1bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "react": "^18.2.0", "react-cookie": "^7.0.2", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.3" + "react-router-dom": "^6.23.1" }, "devDependencies": { "@playwright/test": "^1.42.1", @@ -990,9 +990,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz", - "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", "engines": { "node": ">=14.0.0" } @@ -5312,11 +5312,11 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-router": { - "version": "6.21.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz", - "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", "dependencies": { - "@remix-run/router": "1.14.2" + "@remix-run/router": "1.16.1" }, "engines": { "node": ">=14.0.0" @@ -5326,12 +5326,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.21.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz", - "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", "dependencies": { - "@remix-run/router": "1.14.2", - "react-router": "6.21.3" + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" }, "engines": { "node": ">=14.0.0" diff --git a/package.json b/package.json index 4e063e2..7971f83 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "react": "^18.2.0", "react-cookie": "^7.0.2", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.3" + "react-router-dom": "^6.23.1" }, "devDependencies": { "@playwright/test": "^1.42.1", diff --git a/src/assets/styles/room-list.css b/src/assets/styles/room-list.css new file mode 100644 index 0000000..6a60e51 --- /dev/null +++ b/src/assets/styles/room-list.css @@ -0,0 +1,38 @@ +.list-container { + width: 100%; + max-height:500px; + overflow-y: auto; /* Activer le défilement vertical si nécessaire */ + padding: 20px; /* Espace intérieur de la liste */ +} + +.room-details { + width: 100%; /* Largeur de chaque boîte */ + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 20px; + margin-bottom: 20px; /* Espace entre chaque boîte */ + transition: transform 0.3s ease; +} + + .room-details:hover { + transform: translateY(-5px); /* Effet d'élévation au survol */ + } + + .room-details .title { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; + } + + .room-details .characteristic { + margin-bottom: 10px; + } + + .room-details .label { + font-weight: bold; + } + + .room-details .value { + color: #666; + } diff --git a/src/components/diagram.jsx b/src/components/diagram.jsx index 24dcb57..87fc761 100644 --- a/src/components/diagram.jsx +++ b/src/components/diagram.jsx @@ -14,15 +14,20 @@ const Diagram = ({ data }) => { return (
-

Prix total par an

- {diagramData.map(({ name, value }) => ( -
-
{name}
-
-
{value}
+

Prix total par an

+ {diagramData.map(({ name, value }) => { + // Appliquer l'échelle logarithmique à la valeur + const scaledValue = Math.log(value + 1); // Ajouter 1 pour éviter le logarithme de zéro + const scaledMaxValue = Math.log(maxValue + 1); + return ( +
+
{name}
+
+
{value}
+
-
- ))} + ); + })}
); }; diff --git a/src/components/item/ItemBox.jsx b/src/components/item/ItemBox.jsx index eca0972..1cc87da 100644 --- a/src/components/item/ItemBox.jsx +++ b/src/components/item/ItemBox.jsx @@ -3,28 +3,14 @@ import '../../assets/styles/modal.css' import '../../assets/styles/itembox.css' import FormUpdateItem from '../form/formUpdateItem'; import {Image } from '../parts/image' +import {Description } from '../parts/description' +import {Characteristic } from '../parts/characteristic' + -// Composant Description -const Description = ({ title, children }) => { - return ( -
-

{title}

- {children} -
- ); -}; -// Composant Caractéristique -const Characteristic = ({ label, value }) => { - return ( -
- {label}: {value} -
- ); -}; diff --git a/src/components/nav/Navbar.jsx b/src/components/nav/Navbar.jsx index da78d9a..f6921b7 100644 --- a/src/components/nav/Navbar.jsx +++ b/src/components/nav/Navbar.jsx @@ -42,10 +42,10 @@ const Navbar = () => { const items = [ - Menu Principal + Login / Logout , - Home + Menu Principal , Tous les articles diff --git a/src/components/parts/characteristic.jsx b/src/components/parts/characteristic.jsx new file mode 100644 index 0000000..95aed96 --- /dev/null +++ b/src/components/parts/characteristic.jsx @@ -0,0 +1,11 @@ +import React, { useEffect, useState } from 'react'; + +// Composant Caractéristique +export const Characteristic = ({ label, value }) => { + + return ( +
+ {label}: {value} +
+ ); +}; \ No newline at end of file diff --git a/src/components/parts/description.jsx b/src/components/parts/description.jsx new file mode 100644 index 0000000..e86edd4 --- /dev/null +++ b/src/components/parts/description.jsx @@ -0,0 +1,11 @@ +import React, { useEffect, useState } from 'react'; + +// Composant Description +export const Description = ({ title, children }) => { + return ( +
+

{title}

+ {children} +
+ ); +}; \ No newline at end of file diff --git a/src/components/rooms/room-detail.jsx b/src/components/rooms/room-detail.jsx new file mode 100644 index 0000000..e955ace --- /dev/null +++ b/src/components/rooms/room-detail.jsx @@ -0,0 +1,45 @@ +import React, { useEffect, useState } from 'react'; +import { FormCreateRoom } from '../../components/form/formCreateRoom'; +//import { RoomUpdateForm } from './RoomUpdateForm'; + +export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmit, onBack }) => { + const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false); + + useEffect(() => { + if (selectedRoom) { + setIsUpdateFormVisible(true) + } + }, [selectedRoom]); + + + // Afficher le formulaire de mise à jour lorsqu'une chambre est sélectionnée + const handleRoomClick = () => { + setIsUpdateFormVisible(true); + }; + + // Afficher le formulaire de création lorsqu'on revient en arrière + const handleBackClick = () => { + setIsUpdateFormVisible(false); + onBack(null); + }; + + return ( +
+ {isUpdateFormVisible + ? ( +
+

Modifier une chambre

+ + +
+ ) + : ( +
+

Ajouter une chambre

+ +
+ ) + } +
+ ); +}; \ No newline at end of file diff --git a/src/components/rooms/room-list.jsx b/src/components/rooms/room-list.jsx index e2a1ed6..3b45d4d 100644 --- a/src/components/rooms/room-list.jsx +++ b/src/components/rooms/room-list.jsx @@ -1,17 +1,9 @@ import React, { useState, useEffect } from "react"; -import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct -import { ItemBox } from './ItemBox'; -import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd'; -import '../../assets/styles/item-page.css' +import '../../assets/styles/room-list.css' +import { RoomBox } from '../../components/rooms/roomBox' +import { formatRoomStats } from "../../api/room"; - -const { RangePicker } = DatePicker; -const { Option } = Select; - -const itemsPerPage = 8; // Nombre total d'items par page -const itemsPerRow = 4; // Nombre d'items par rangée - // Fonction pour diviser le tableau d'items en rangées const chunkArray = (arr, size) => { const chunkedArr = []; @@ -22,25 +14,32 @@ const chunkArray = (arr, size) => { }; // Composant d'affichage de la page -export const RoomList = (roomsParam) => { - const [rooms, setRooms] = useState([]); - const [selectedRoom, setSelectedRoom] = useState('all'); +export const RoomList = ({ statsParam, onRoomClick }) => { + const [rooms, setRooms] = useState([]); + const [selectedRoom, setSelectedRoom] = useState('all'); useEffect(() => { - setRooms(roomsParam) - }, [roomsParam]); + if (statsParam.rooms) { + console.log(statsParam.rooms) + let formatedStats = formatRoomStats(statsParam) + setRooms(formatedStats.rooms) + } + }, [statsParam]); - const handleRoomChange = (value) => { - setSelectedRoom(value); - }; - return ( -
-
- {rooms.forEach((room) => { - -
- ); + const handleRoomClick = (roomId) => { + onRoomClick(roomId); + }; + + return ( +
+

Liste des chambres

+
+ {rooms && rooms.map((room) => ( + + ))} +
+
+ + ); }; \ No newline at end of file diff --git a/src/components/rooms/roomBox.jsx b/src/components/rooms/roomBox.jsx index f5d0626..1e8889e 100644 --- a/src/components/rooms/roomBox.jsx +++ b/src/components/rooms/roomBox.jsx @@ -1,22 +1,19 @@ -import React, { useEffect, useState } from 'react'; -import '../../assets/styles/itembox.css' -import { } from '../item/ItemBox' +import React from 'react'; +import '../../assets/styles/room-list.css'; +import { Description } from '../parts/description'; +import { Characteristic } from '../parts/characteristic'; +export const RoomBox = ({ room, onRoomClick }) => { -// Composant Détails du Produit -export const RoomBox = ({ name, itemCount, roomPrice, _id }) => { - const [roomData, setRoomData] = useState(); - - useEffect(() => { - setRoomData({name, itemCount, roomPrice, _id}) - }, [name, itemCount, roomPrice, _id]); - + const handleBoxClick = () => { + onRoomClick(room._id); + }; return ( -
- - - +
+ + +
); diff --git a/src/pages/rooms.jsx b/src/pages/rooms.jsx index 7e472c9..9d9bba2 100644 --- a/src/pages/rooms.jsx +++ b/src/pages/rooms.jsx @@ -2,21 +2,24 @@ import React, { useEffect, useState } from 'react'; import '../assets/styles/room-page.css' import { useAuth } from "../hooks"; -import { formatRoomStats, getRooms, getRoomStats } from "../api/room"; +import { getRoomStats } from "../api/room"; import { usePageTitle } from '../hooks/page-title-context'; import RoomStats from '../components/rooms/room-stats'; +import { RoomList } from '../components/rooms/room-list'; +import { RoomDetail } from '../components/rooms/room-detail'; export const Rooms = () => { const { user } = useAuth(); const { setPageTitle } = usePageTitle(); const [stats, setStats] = useState({}); + const [selectedRoom, setSelectedRoom] = useState(); - // Mettre à jour le titre de la page dans le contexte useEffect(() => { setPageTitle("Toutes les rooms :"); }, [setPageTitle]); + useEffect(() => { const fetchData = async () => { const roomsStatsResponse = await getRoomStats(); @@ -26,20 +29,24 @@ export const Rooms = () => { fetchData(); }, []); + const handleRoomClick = (roomId) => { + console.log('Clicked room ID:', roomId); + setSelectedRoom(roomId); + }; return (
- +
-
+
+
- - +
);