history card design

src/pages/ServerHistory/ServerHistory.jsx

@@ -1,25 +1,25 @@
 import { useEffect, useState, useRef } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import styles from './ServerHistory.module.scss'; 
 import serviiApi from "../../service/api.tsx";
 import Loading from '../Loading/loading.jsx';
 import PropTypes from "prop-types";
 
-const ServerHistory = ({ user }) => {
+const ServerHistory = () => {
   const navigate = useNavigate();
   const { serverName } = useParams(); 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [history, setHistory] = useState('');
-  const location = useLocation();  
-  const status = location.state?.status;  
+  const [history, setHistory] = useState([]);
+  const [filter, setFilter] = useState({
+    ServerCreate: true,
+    ServerRun: true,
+    Command: true,
+    UpdateProperties: true
+  });
 
   const historyEndRef = useRef(null);
 
-  const scrollToBottom = () => {
-    historyEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
   const fetchServerHistory = async () => {
     setError(null);
     setLoading(true);
@@ -28,16 +28,43 @@ const ServerHistory = ({ user }) => {
       const response = await serviiApi.fetchHistory(serverName);
       if (response.return_code === 200) {
         let historyString = response.message;
-        historyString = historyString.slice(1, -1);  
+        historyString = historyString.slice(1, -1);
         historyString = historyString.replace(/\\n/g, '\n');  
-        historyString = historyString.replace(/\\\"/g, '"');  
-        historyString = historyString.replace(/, ?/g, '');  
-        historyString = historyString.replace(/"{2,}/g, '');  
+        historyString = historyString.replace(/\\"/g, '"');
+        historyString = historyString.replace(/, ?/g, '');
+        historyString = historyString.replace(/"{2,}/g, '');
         historyString = historyString.replace(/'{2,}/g, '');
         historyString = historyString.trim();
-        setHistory(historyString);
+
+        console.log("History string after parsing:", historyString);
+
+        historyString = historyString.replace(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})(type": ")/g, '$1", "$2');
+        historyString = historyString.replace(/(type": "ServerCreate|ServerRun|Command|UpdateProperties)(details": )/g, '$1", "$2');
+
+        const historyArray = historyString.split('\n').map(entry => {
+          const timestampMatch = entry.match(/"timestamp": "(.*?)"/);
+          const typeMatch = entry.match(/"type": "(.*?)"/);
+          const detailsMatch = entry.match(/"details": "(.*?)"/);
+
+          const parsedEntry = {
+            timestamp: timestampMatch ? timestampMatch[1] : "Unknown",
+            type: typeMatch ? typeMatch[1] : "Unknown",
+            details: detailsMatch ? detailsMatch[1] : null
+          };
+
+          console.log("Parsed entry:", parsedEntry);
+
+          return parsedEntry;
+        });
+
+        console.log("Final history array:", historyArray);
+
+        setHistory(historyArray);
+      } else {
+        console.error("Failed to fetch history, response:", response);
       }
     } catch (err) {
+      console.error("Error fetching history:", err);
       setError(`Erreur: ${err.message}`);
     } finally {
       setLoading(false);
@@ -48,9 +75,17 @@ const ServerHistory = ({ user }) => {
     fetchServerHistory();
   }, [serverName]);
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [history]);
+
+
+  const handleFilterChange = (event) => {
+    const { name, checked } = event.target;
+    setFilter(prevFilter => ({
+      ...prevFilter,
+      [name]: checked
+    }));
+  };
+
+  const filteredHistory = history.filter(item => filter[item.type]);
 
   if (loading) {
     return <Loading />;
@@ -69,11 +104,61 @@ const ServerHistory = ({ user }) => {
 
   return (
     <div className={styles.container}>
+      <div className={styles.filterContainer}>
+        <label>
+          <input
+            type="checkbox"
+            name="ServerCreate"
+            checked={filter.ServerCreate}
+            onChange={handleFilterChange}
+          />
+          Création du serveur
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="ServerRun"
+            checked={filter.ServerRun}
+            onChange={handleFilterChange}
+          />
+          Lancement du serveur
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="Command"
+            checked={filter.Command}
+            onChange={handleFilterChange}
+          />
+          Commande
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="UpdateProperties"
+            checked={filter.UpdateProperties}
+            onChange={handleFilterChange}
+          />
+          Nouvelle propriété
+        </label>
+      </div>
+
       <div className={styles.containerHistory}>
-        <div className={styles.header}>
-              <pre className={styles.logs}>
-                {history}
-              </pre>
+        <div className={styles.historyCards}>
+          {filteredHistory.length > 0 ? (
+            filteredHistory.map((item, index) => (
+              <div key={index} className={styles.historyCard}>
+                <div><strong>Timestamp:</strong> {item.timestamp}</div>
+                <div><strong>Type:</strong> {item.type}</div>
+                <div><strong>Details:</strong> {item.details || 'N/A'}</div>
+              </div>
+            ))
+          ) : (
+            <div className={styles.noHistory}>
+              Aucun historique à afficher.
+            </div>
+          )}
+          <div ref={historyEndRef} />
         </div>
       </div>
     </div>

src/pages/ServerHistory/ServerHistory.module.scss

@@ -2,7 +2,50 @@
     margin-top: var(--navbar-height);
 }
 
-.extraMargin{
-    margin-bottom: 5rem;
-    color:red;
-}
+.filterContainer {
+    display: flex;
+    flex-direction: row; 
+    gap: 1.5rem;
+    background-color: white;
+    color: black;
+    margin-bottom: 1rem;
+    padding: 2.5rem;
+    font-size: 1.2rem;
+}
+  
+  .historyCards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .historyCard {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+    color: black;
+  }
+  
+
+.filterContainer label {
+    display: flex; 
+    align-items: center; 
+    gap: 0.5rem; 
+}
+
+.filterContainer input[type="checkbox"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid #ccc;  
+    border-radius: 4px;  
+    cursor: pointer;
+}
+
+.filterContainer input[type="checkbox"]:checked::before {
+    display: block;
+    text-align: center;
+    font-size: 1.5rem;
+    color: white; 
+    font-weight: bold;
+}