$

src/pages/rooms/Rooms.jsx

@@ -0,0 +1,87 @@
+import "./Rooms.scss";
+import { useState, useEffect } from "react";
+import { createRoom, getRooms, deleteRoom } from "../../api";
+import { Link } from "react-router-dom";
+
+export default function Rooms() {
+    const [rooms, setRooms] = useState([]);
+
+    const onClickCreate = () => {
+        const name = prompt("Nom de la piece ?");
+
+        createRoom(name).then((res) => {
+            const values = [...rooms];
+            values.push(res);
+            setRooms(values);
+        });
+    };
+
+    const onClickDelete = (id, name) => {
+        const confirmation = prompt(
+            `Etes-vous sur de vouloir supprimer ${name} ? (Oui ou non)`
+        );
+
+        if (confirmation.toLocaleLowerCase() !== "oui") return;
+
+        deleteRoom(id).then((res) => {
+            const values = rooms.filter((e) => e._id !== id);
+            setRooms(values);
+        });
+    };
+
+    useEffect(() => {
+        getRooms().then((res) => {
+            setRooms(res);
+        });
+    }, []);
+
+    return (
+        <div id="rooms-container">
+            {rooms.length === 0 ? (
+                <span id="err-no-rooms">Aucune piece enregistree</span>
+            ) : (
+                <div id="rooms-list-container">
+                    {rooms.map((i, j) => (
+                        <div className="room" key={j}>
+                            <div
+                                className="room-delete"
+                                onClick={() => {
+                                    onClickDelete(i._id, i.name);
+                                }}
+                            >
+                                <span className="room-delete-ascii">×</span>
+                            </div>
+
+                            <div className="room-id-container">
+                                <span className="label-id">ID</span>
+                                <span className="room-id">
+                                    {i._id[0]}
+                                    {i._id[1]}
+                                    {i._id[2]}
+                                    {i._id[3]}
+                                    {i._id[4]}
+                                    {i._id[5]}
+                                    ...
+                                </span>
+                            </div>
+
+                            <div className="room-name-container">
+                                <span className="label-name">Nom&nbsp;</span>
+                                <Link to={`/room/${i._id}`}>
+                                    <span className="room-name">{i.name}</span>
+                                </Link>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            <div id="rooms-add-container">
+                <div id="rooms-text-on">Creer une nouvelle piece</div>
+                <button id="add-rooms" onClick={onClickCreate}>
+                    +
+                </button>
+            </div>
+        </div>
+    );
+}

src/pages/rooms/Rooms.scss

@@ -0,0 +1,119 @@
+#rooms-container {
+    height: 100%;
+    width: 100%;
+
+    #err-no-rooms {
+        height: 100%;
+        display: flex;
+        color: red;
+        font-weight: bold;
+        justify-content: center;
+        align-items: center;
+    }
+
+    #rooms-list-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 50px;
+        margin-top: 20px;
+
+        .room {
+            width: 200px;
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            border: 1px dashed rgb(54, 54, 54);
+            position: relative;
+
+            &:hover {
+                .room-delete {
+                    display: block;
+                }
+            }
+
+            .room-delete {
+                width: 25px;
+                height: 25px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                background: red;
+                display: none;
+
+                .room-delete-ascii {
+                    display: flex;
+                    width: 100%;
+                    height: 100%;
+                    justify-content: center;
+                    align-items: center;
+                    color: white;
+                    font-weight: bold;
+                }
+            }
+
+            .room-id-container {
+                display: flex;
+                justify-content: space-between;
+                width: 60%;
+
+                .label-id {
+                }
+
+                .room-id {
+                }
+            }
+
+            .room-name-container {
+                width: 60%;
+                display: flex;
+                justify-content: space-between;
+
+                .label-name {
+                }
+
+                .room-name {
+                }
+            }
+
+            &:hover {
+                cursor: pointer;
+                transform: scale(1.02);
+                transition: 0.2s;
+            }
+        }
+    }
+
+    #rooms-add-container {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        gap: 25px;
+
+        #rooms-text-on {
+            width: 100px;
+            background: rgb(123, 106, 156);
+            color: white;
+            display: none;
+        }
+
+        #add-rooms {
+            text-align: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50px;
+            border: none;
+            background: rgb(123, 106, 156);
+            color: white;
+            font-size: 1em;
+            font-weight: bold;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}