premier commit final

This commit is contained in:
Victor 2024-05-13 00:33:13 +02:00
commit 4cf9069bf2
14 changed files with 270 additions and 172 deletions

Binary file not shown.

Binary file not shown.

2
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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;
}

View File

@ -1,7 +1,6 @@
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);
@ -10,19 +9,27 @@ const Diagram = ({ data }) => {
setDiagramData(data);
}, [data]);
const maxValue = Math.max(...diagramData.map(item => item.value));
const maxValue = Math.max(...diagramData.map((item) => item.value));
return (
<div className="diagram-container">
<h2>Prix total par an</h2>
{diagramData.map(({ name, value }) => (
{diagramData.map(({ name, value }) => {
// Appliquer l'<EFBFBD>chelle logarithmique <EFBFBD> la valeur
const scaledValue = Math.log(value + 1); // Ajouter 1 pour <EFBFBD>viter le logarithme de z<EFBFBD>ro
const scaledMaxValue = Math.log(maxValue + 1);
return (
<div key={name} className="row-container">
<div className="label">{name}</div>
<div className="row" style={{ width: `${(value / maxValue) * 100}%` }}>
<div
className="row"
style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}
>
<div className="value">{value}</div>
</div>
</div>
))}
);
})}
</div>
);
};

View File

@ -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 (
<div className="description">
<h2 className="text-ellipsis">{title}</h2>
{children}
</div>
);
};
// Composant Caractéristique
const Characteristic = ({ label, value }) => {
return (
<div className="characteristic">
<strong>{label}:</strong> {value}
</div>
);
};
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 */}
<button onClick={openModal}>Edit</button>
</Description>
{/* Fenêtre modale pour la mise à jour */}
{/* Fenêtre modale */}
{isModalOpen && (
<div className="modal">
<div className="modal-content">
<span className="close" onClick={closeModal}>
&times;
</span>
<FormUpdateItem itemId={_id} onClose={closeModal} />
<FormUpdateItem itemId={_id}>
{console.log("item ID :" + _id)}
</FormUpdateItem>
</div>
</div>
)}

View File

@ -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";
@ -15,10 +15,12 @@ function getItem(key, label) {
// label,
// link,
//};
var item = <Menu.Item key={key}>
var item = (
<Menu.Item key={key}>
<Link to="/test">{label}</Link>
</Menu.Item >
return item
</Menu.Item>
);
return item;
}
const { SubMenu } = Menu;
@ -29,32 +31,29 @@ const Navbar = () => {
const [rooms, setRooms] = useState([]);
useEffect(() => {
console.log("NAVBAR EFFECT")
console.log("NAVBAR EFFECT");
isLoggedIn().then((user) => {
if (user !== "Unauthorized") {
getRooms().then((result) => {
setRooms(result);
})
});
}
})
});
}, []);
const items = [
<Menu.Item key="0">
<Link to="/">Menu Principal</Link>
<Link to="/logout">Login / Logout</Link>
</Menu.Item>,
<Menu.Item key="1" >
<Link to="/home">Home</Link>
<Menu.Item key="1">
<Link to="/home">Menu Principal</Link>
</Menu.Item>,
<Menu.Item key="2" >
<Menu.Item key="2">
<Link to="/items">Tous les articles</Link>
</Menu.Item>,
<Menu.Item key="3" >
<Menu.Item key="3">
<Link to="/rooms">Voir les chambres</Link>
</Menu.Item>,
];
// Rendu du composant Navbar
@ -67,11 +66,10 @@ const Navbar = () => {
mode="inline"
>
{items}
</Menu>
);
} catch (error) {
console.log(error.stack)
console.log(error.stack);
}
};
export default Navbar;

View File

@ -0,0 +1,10 @@
import React, { useEffect, useState } from "react";
// Composant Caract<EFBFBD>ristique
export const Characteristic = ({ label, value }) => {
return (
<div className="characteristic">
<strong>{label}:</strong> {value}
</div>
);
};

View File

@ -0,0 +1,11 @@
import React, { useEffect, useState } from "react";
// Composant Description
export const Description = ({ title, children }) => {
return (
<div className="description">
<h2 className="text-ellipsis">{title}</h2>
{children}
</div>
);
};

View File

@ -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 <EFBFBD> jour lorsqu'une chambre est s<EFBFBD>lectionn<EFBFBD>e
const handleRoomClick = () => {
setIsUpdateFormVisible(true);
};
// Afficher le formulaire de cr<EFBFBD>ation lorsqu'on revient en arri<EFBFBD>re
const handleBackClick = () => {
setIsUpdateFormVisible(false);
onBack(null);
};
return (
<div className="room-detail">
{isUpdateFormVisible ? (
<div>
<h2>Modifier une chambre</h2>
<FormCreateRoom onSubmit={onCreateFormSubmit} />
</div>
) : (
<div>
<h2>Ajouter une chambre</h2>
<FormCreateRoom onSubmit={onCreateFormSubmit} />
</div>
)}
</div>
);
};

View File

@ -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<EFBFBD>es
const chunkArray = (arr, size) => {
const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) {
@ -22,24 +13,30 @@ 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]);
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 (
<div>
<h2>Liste des chambres</h2>
<div className="list-container">
<div className="room-list">
{rooms.forEach((room) => {
<roomB
}) }
{rooms &&
rooms.map((room) => (
<RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
))}
</div>
</div>
);

View File

@ -1,22 +1,21 @@
import React, { useEffect, useState } from 'react';
import '../../assets/styles/itembox.css'
import { } from '../item/ItemBox'
// 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]);
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);
};
return (
<div className="product-details" >
<Description title={roomData.name} >
<Characteristic label="Nombre d'articles" value={roomData.itemCount} />
<Characteristic label="Prix total" value={roomData.roomPrice} />
<div className="room-details" onClick={handleBoxClick}>
<Description title={room?.name}>
<Characteristic
label="Nombre d'articles"
value={room?.items_count || "N/A"}
/>
<Characteristic label="Prix total" value={room?.room_price || "N/A"} />
</Description>
</div>
);

View File

@ -1,18 +1,19 @@
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 [selectedRoom, setSelectedRoom] = useState();
// Mettre à jour le titre de la page dans le contexte
useEffect(() => {
setPageTitle("Toutes les rooms :");
}, [setPageTitle]);
@ -26,20 +27,26 @@ export const Rooms = () => {
fetchData();
}, []);
const handleRoomClick = (roomId) => {
console.log("Clicked room ID:", roomId);
setSelectedRoom(roomId);
};
return (
<div className="manContainer">
<div className="topContainer">
<div className="statsContainer">
<RoomStats statsParam={stats} />
</div>
<div className="listContainer">
<RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
</div>
</div>
<div className="detailContainer">
<RoomStats statsParam={stats} />
<RoomDetail
selectedRoom={selectedRoom}
onBack={handleRoomClick}
></RoomDetail>
</div>
</div>
);