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 }) => (
-
- ))}
-
- );
+ 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 (
+
+ );
+ })}
+
+ );
};
-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 (
-
- );
- } catch (error) {
- console.log(error.stack)
- }
+ // Rendu du composant Navbar
+ try {
+ return (
+
+ );
+ } 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 (