diff --git a/.vs/2024-DEV-BUT3/v17/.wsuo b/.vs/2024-DEV-BUT3/v17/.wsuo index e30e1c1..e79653d 100644 Binary files a/.vs/2024-DEV-BUT3/v17/.wsuo and b/.vs/2024-DEV-BUT3/v17/.wsuo differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index dc91451..4387610 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/package-lock.json b/package-lock.json index 1f7d84c..c54e6f2 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", 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..cb8d26e 100644 --- a/src/components/diagram.jsx +++ b/src/components/diagram.jsx @@ -1,30 +1,37 @@ import React, { useState, useEffect } from "react"; import { Col, Row } from "antd"; -import '../assets/styles/diagram.css' - +import "../assets/styles/diagram.css"; const Diagram = ({ data }) => { - const [diagramData, setDiagramData] = useState(data); + const [diagramData, setDiagramData] = useState(data); - useEffect(() => { - setDiagramData(data); - }, [data]); + useEffect(() => { + setDiagramData(data); + }, [data]); - const maxValue = Math.max(...diagramData.map(item => item.value)); + const maxValue = Math.max(...diagramData.map((item) => item.value)); - return ( -
-

Prix total par an

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

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}
+
+
+ ); + })} +
+ ); }; -export default Diagram; \ No newline at end of file +export default Diagram; diff --git a/src/components/item/ItemBox.jsx b/src/components/item/ItemBox.jsx index 41b2cf0..29c0a79 100644 --- a/src/components/item/ItemBox.jsx +++ b/src/components/item/ItemBox.jsx @@ -1,27 +1,10 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import "../../assets/styles/modal.css"; import "../../assets/styles/itembox.css"; import FormUpdateItem from "../form/formUpdateItem"; import { Image } from "../parts/image"; - -// Composant Description -const Description = ({ title, children }) => { - return ( -
-

{title}

- {children} -
- ); -}; - -// Composant Caractéristique -const Characteristic = ({ label, value }) => { - return ( -
- {label}: {value} -
- ); -}; +import { Description } from "../parts/description"; +import { Characteristic } from "../parts/characteristic"; // Composant Détails du Produit export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => { @@ -54,14 +37,16 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => { {/* Bouton d'édition pour ouvrir la fenêtre modale */} - {/* Fenêtre modale pour la mise à jour */} + {/* Fenêtre modale */} {isModalOpen && (
× - + + {console.log("item ID :" + _id)} +
)} diff --git a/src/components/nav/Navbar.jsx b/src/components/nav/Navbar.jsx index da78d9a..30503f3 100644 --- a/src/components/nav/Navbar.jsx +++ b/src/components/nav/Navbar.jsx @@ -1,9 +1,9 @@ import React, { useState, useEffect } from "react"; import { Menu } from "antd"; -import { HomeOutlined } from "@ant-design/icons" +import { HomeOutlined } from "@ant-design/icons"; import { Home } from "../../pages"; import { getRooms } from "../../api/room"; -import { isLoggedIn } from "../../api/authentication" +import { isLoggedIn } from "../../api/authentication"; import { Items } from "../../pages/items"; import { Link } from "react-router-dom"; @@ -14,11 +14,13 @@ function getItem(key, label) { // children, // label, // link, - //}; - var item = - {label} - - return item + //}; + var item = ( + + {label} + + ); + return item; } const { SubMenu } = Menu; @@ -26,52 +28,48 @@ const { SubMenu } = Menu; // Component const Navbar = () => { //Hook calls - const [rooms, setRooms] = useState([]); + const [rooms, setRooms] = useState([]); - useEffect(() => { - console.log("NAVBAR EFFECT") - isLoggedIn().then((user) => { - if (user !== "Unauthorized") { - getRooms().then((result) => { - setRooms(result); - }) - } - }) - }, []); + useEffect(() => { + console.log("NAVBAR EFFECT"); + isLoggedIn().then((user) => { + if (user !== "Unauthorized") { + getRooms().then((result) => { + setRooms(result); + }); + } + }); + }, []); + const items = [ + + Login / Logout + , + + Menu Principal + , + + Tous les articles + , + + Voir les chambres + , + ]; - const items = [ - - Menu Principal - , - - Home - , - - Tous les articles - , - - Voir les chambres - , - - - ]; - - // Rendu du composant Navbar - try { - return ( - - {items} - - - ); - } catch (error) { - console.log(error.stack) - } + // Rendu du composant Navbar + try { + return ( + + {items} + + ); + } catch (error) { + console.log(error.stack); + } }; export default Navbar; diff --git a/src/components/parts/characteristic.jsx b/src/components/parts/characteristic.jsx new file mode 100644 index 0000000..0bd0575 --- /dev/null +++ b/src/components/parts/characteristic.jsx @@ -0,0 +1,10 @@ +import React, { useEffect, useState } from "react"; + +// Composant Caract�ristique +export const Characteristic = ({ label, value }) => { + return ( +
+ {label}: {value} +
+ ); +}; diff --git a/src/components/parts/description.jsx b/src/components/parts/description.jsx new file mode 100644 index 0000000..028ea69 --- /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} +
+ ); +}; diff --git a/src/components/rooms/room-detail.jsx b/src/components/rooms/room-detail.jsx new file mode 100644 index 0000000..8ef7f83 --- /dev/null +++ b/src/components/rooms/room-detail.jsx @@ -0,0 +1,46 @@ +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

+ +
+ )} +
+ ); +}; diff --git a/src/components/rooms/room-list.jsx b/src/components/rooms/room-list.jsx index e2a1ed6..4405850 100644 --- a/src/components/rooms/room-list.jsx +++ b/src/components/rooms/room-list.jsx @@ -1,18 +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 +// Fonction pour diviser le tableau d'items en rang�es const chunkArray = (arr, size) => { const chunkedArr = []; for (let i = 0; i < arr.length; i += size) { @@ -22,25 +13,31 @@ const chunkArray = (arr, size) => { }; // Composant d'affichage de la page -export const RoomList = (roomsParam) => { +export const RoomList = ({ statsParam, onRoomClick }) => { const [rooms, setRooms] = useState([]); - const [selectedRoom, setSelectedRoom] = useState('all'); + const [selectedRoom, setSelectedRoom] = useState("all"); - useEffect(() => { - setRooms(roomsParam) - }, [roomsParam]); + useEffect(() => { + if (statsParam.rooms) { + console.log(statsParam.rooms); + let formatedStats = formatRoomStats(statsParam); + setRooms(formatedStats.rooms); + } + }, [statsParam]); - const handleRoomChange = (value) => { - setSelectedRoom(value); + const handleRoomClick = (roomId) => { + onRoomClick(roomId); }; return ( +
+

Liste des chambres

-
- {rooms.forEach((room) => { - + {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..f6f94ca 100644 --- a/src/components/rooms/roomBox.jsx +++ b/src/components/rooms/roomBox.jsx @@ -1,23 +1,22 @@ -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 }) => { + const handleBoxClick = () => { + onRoomClick(room._id); + }; -// 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]); - - - return ( -
- - - - -
- ); -}; \ No newline at end of file + return ( +
+ + + + +
+ ); +}; diff --git a/src/pages/rooms.jsx b/src/pages/rooms.jsx index 7e472c9..a286bd4 100644 --- a/src/pages/rooms.jsx +++ b/src/pages/rooms.jsx @@ -1,46 +1,53 @@ -import React, { useEffect, useState } from 'react'; -import '../assets/styles/room-page.css' +import React, { useEffect, useState } from "react"; +import "../assets/styles/room-page.css"; import { useAuth } from "../hooks"; -import { formatRoomStats, getRooms, getRoomStats } from "../api/room"; -import { usePageTitle } from '../hooks/page-title-context'; -import RoomStats from '../components/rooms/room-stats'; +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 { setPageTitle } = usePageTitle(); + const [stats, setStats] = useState({}); + const [selectedRoom, setSelectedRoom] = useState(); + useEffect(() => { + setPageTitle("Toutes les rooms :"); + }, [setPageTitle]); - // Mettre à jour le titre de la page dans le contexte - useEffect(() => { - setPageTitle("Toutes les rooms :"); - }, [setPageTitle]); + useEffect(() => { + const fetchData = async () => { + const roomsStatsResponse = await getRoomStats(); + setStats(roomsStatsResponse); + }; - useEffect(() => { - const fetchData = async () => { - const roomsStatsResponse = await getRoomStats(); - setStats(roomsStatsResponse); - }; - - fetchData(); - }, []); + fetchData(); + }, []); + const handleRoomClick = (roomId) => { + console.log("Clicked room ID:", roomId); + setSelectedRoom(roomId); + }; return (
-
-
- - -
-
-
+
+
+
-
- - +
+
+
+
+ +
); };