new console

src/pages/ServerConsole/ServerConsole.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import styles from './ServerConsole.module.scss';
 import serviiApi from "../../service/api.tsx";
@@ -11,6 +11,13 @@ const ServerConsole = ({ user }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [logs, setLogs] = useState('');
+  const [message, setMessage] = useState(''); 
+
+  const logsEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
 
   useEffect(() => {
     const fetchServerLogs = async () => {
@@ -20,11 +27,10 @@ const ServerConsole = ({ user }) => {
       try {
         const response = await serviiApi.fetchLogs(serverName);
         if (response.return_code === 200) {
-          // Nettoyer la chaîne de caractères en supprimant les [ ] et en remplaçant les \\n
           let logString = response.message;
-          logString = logString.slice(1, -1); // Supprime les crochets [ ] au début et à la fin
-          logString = logString.replace(/\\n/g, '\n'); // Remplace les \\n par de véritables sauts de ligne
-          logString = logString.replace(/\\\"/g, '"'); // Supprime les échappements de guillemets
+          logString = logString.slice(1, -1);
+          logString = logString.replace(/\\n/g, '\n');
+          logString = logString.replace(/\\\"/g, '"');
           setLogs(logString);
         } else {
           setError(`Erreur lors de la récupération des logs: ${response.message}`);
@@ -39,6 +45,17 @@ const ServerConsole = ({ user }) => {
     fetchServerLogs();
   }, [serverName]);
 
+  useEffect(() => {
+    scrollToBottom();
+  }, [logs]);
+
+  const handleSendMessage = () => {
+    if (message.trim()) {
+      console.log(`Message envoyé: ${message}`);
+      setMessage(''); 
+    }
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -58,11 +75,24 @@ const ServerConsole = ({ user }) => {
     <div className={styles.container}>
       <div className={styles.containerConsole}>
         <div className={styles.header}>Console</div>
-        <h1>Console</h1>
         <div className={styles.logContainer}>
           <pre className={styles.logs}>
             {logs}
           </pre>
+          <div ref={logsEndRef} />
+        </div>
+        {}
+        <div className={styles.chatInputContainer}>
+          <input
+            type="text"
+            className={styles.chatInput}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Écrire un message..."
+          />
+          <button className={styles.sendButton} onClick={handleSendMessage}>
+            Envoyer
+          </button>
         </div>
       </div>
     </div>

src/pages/ServerConsole/ServerConsole.module.scss

@@ -1,12 +1,9 @@
-/* Container for the entire console section */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: var(--navbar-height);
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - 2rem);
-  margin-bottom: 1rem;
   overflow: hidden;
 }
 
@@ -18,11 +15,12 @@
   background-color: #100D25;
   width: 100%;
   max-width: 50rem;
-  height: 100%;
-  overflow-y: auto; 
+  height: 38rem;
+  overflow: hidden; 
   border: .1rem solid #343947;
-  padding: 1rem;
+  padding: 0; 
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  margin-bottom: 2rem;
 }
 
 .header {
@@ -35,6 +33,15 @@
   font-size: 1rem;
   font-weight: 500;
   border-bottom: .1rem solid #343947;
+  padding-left: 1rem; /* Ajoutez du padding à l'intérieur */
+}
+
+.logContainer {
+  width: 100%;
+  height: calc(100% - 6rem); /* Prend en compte la hauteur de la barre d'en-tête et de la barre de chat */
+  overflow-y: auto;
+  padding: 1rem; /* Ajoutez du padding pour éviter que le texte touche les bords */
+  box-sizing: border-box; /* Inclut le padding dans la taille totale */
 }
 
 .logs {
@@ -43,14 +50,40 @@
   color: #ffffff;
   white-space: pre-wrap; 
   line-height: 1.5;
+  margin: 0; /* Supprimez les marges par défaut de <pre> */
 }
 
-.sidebar {
-  overflow: hidden; 
-}
-
-.logContainer {
+.chatInputContainer {
+  display: flex;
   width: 100%;
-  height: calc(100% - 3rem);
-  overflow-y: auto; 
+  padding: 0.5rem;
+  background-color: #1D1836;
+  border-top: .1rem solid #343947;
+  border-left: .1rem solid #343947;
+  border-right: .1rem solid #343947;
+}
+
+.chatInput {
+  flex: 1;
+  padding: 0.5rem;
+  border: .1rem solid #343947;
+  background-color: #2C2A3E;
+  color: #ffffff;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+.sendButton {
+  margin-left: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: #3E3B59;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s;
+}
+
+.sendButton:hover {
+  background-color: #5A567E;
 }

src/pages/ServerDetails/ServerDetails.module.scss

@@ -1,7 +1,6 @@
 .container {
   display: flex;
-  min-height: 100vh;
-  margin-top: var(--navbar-height);  
+  min-height: calc(100vh - var(--navbar-height));
 }
 
 .sidebar {
@@ -83,17 +82,20 @@
 }
 
 .serverDetailsContainer {
+  margin-top: var(--navbar-height);
   flex: 1;
   margin-left: 20rem;
-  padding-top: 2rem;  
+  padding-top: 1rem; 
   background-color: var(--main-bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--text-color);
   box-sizing: border-box;
+  overflow-y: auto; 
 }
 
+
 .navbar {
   position: fixed;
   top: 0;