From 3557050f8e27b84492423041c4908235d4b8f8be Mon Sep 17 00:00:00 2001
From: Arthur Wambst <arthur.wambst@epita.fr>
Date: Mon, 20 Oct 2025 17:11:19 +0200
Subject: [PATCH] remaking Immersion page for admins

---
 src/pages/Immersion.tsx | 270 +++++++++++++++++++++++++++++++++-------
 1 file changed, 228 insertions(+), 42 deletions(-)

diff --git a/src/pages/Immersion.tsx b/src/pages/Immersion.tsx
index 6c4b248..d2830be 100644
--- a/src/pages/Immersion.tsx
+++ b/src/pages/Immersion.tsx
@@ -10,7 +10,10 @@ function Immersion() {
   const { id } = useParams();
   const [ji, setJi] = useState<Ji>();
   const [instance, setInstance] = useState<Instance>();
+  const [allInstances, setAllInstances] = useState<Instance[]>([]);
+  const [instancesStatus, setInstancesStatus] = useState<Record<number, string>>({});
   const username = localStorage.getItem("username");
+  
   const copyText = (copy: string) => {
     navigator.clipboard.writeText(copy);
     toast.success("Copied!", {
@@ -31,6 +34,21 @@ function Immersion() {
     });
   }, [id]);
 
+  useEffect(() => {
+    axios.get(`/api/ji/${id}/all-instances`).then((res) => {
+      setAllInstances(res.data);
+      // Récupérer le status de chaque instance
+      res.data.forEach((inst: Instance) => {
+        axios.get(`/api/ji/${id}/container`).then((statusRes) => {
+          setInstancesStatus(prev => ({
+            ...prev,
+            [inst.id]: statusRes.data
+          }));
+        });
+      });
+    });
+  }, [id]);
+
   useEffect(() => {
     axios.get("/api/user/me").then((res) => {
       localStorage.setItem("username", res.data.username);
@@ -45,13 +63,75 @@ function Immersion() {
 
   const container_status = localStorage.getItem("container_status");
 
+  const handleCreateContainers = () => {
+    axios.post(`/api/ji/${id}/containers`).then((res) => {
+      if (res.status === 200) {
+        toast.success("Containers created successfully!", {
+          draggable: true,
+          theme: localStorage.getItem("theme") || "dark",
+        });
+        // Recharger les instances pour mettre à jour les status
+        axios.get(`/api/ji/${id}/all-instances`).then((res) => {
+          setAllInstances(res.data);
+        });
+      }
+    }).catch((error) => {
+      toast.error("Failed to create containers", {
+        draggable: true,
+        theme: localStorage.getItem("theme") || "dark",
+      });
+    });
+  };
+
+  const handleStartAllContainers = () => {
+    axios.post(`/api/ji/${id}/container/start`).then((res) => {
+      if (res.status === 200) {
+        toast.success("All containers started successfully!", {
+          draggable: true,
+          theme: localStorage.getItem("theme") || "dark",
+        });
+        // Recharger les instances pour mettre à jour les status
+        axios.get(`/api/ji/${id}/all-instances`).then((res) => {
+          setAllInstances(res.data);
+        });
+      }
+    }).catch((error) => {
+      toast.error("Failed to start containers", {
+        draggable: true,
+        theme: localStorage.getItem("theme") || "dark",
+      });
+    });
+  };
+
+  const handleStopAllContainers = () => {
+    axios.post(`/api/ji/${id}/container/stop`).then((res) => {
+      if (res.status === 200) {
+        toast.success("All containers stopped successfully!", {
+          draggable: true,
+          theme: localStorage.getItem("theme") || "dark",
+        });
+        // Recharger les instances pour mettre à jour les status
+        axios.get(`/api/ji/${id}/all-instances`).then((res) => {
+          setAllInstances(res.data);
+        });
+      }
+    }).catch((error) => {
+      toast.error("Failed to stop containers", {
+        draggable: true,
+        theme: localStorage.getItem("theme") || "dark",
+      });
+    });
+  };
+
   return (
     <>
       {ji && (
         <>
           <h1 className="text-3xl font-bold mb-2 ms-10">{ji.name}</h1>
           <div className="px-6">
-            <div className="flex flex-col lg:flex-row">
+            {/* Section supérieure : Info + iframe */}
+            <div className="flex flex-col lg:flex-row gap-6">
+              {/* Colonne gauche - Informations */}
               <div className="lg:w-1/3 px-4">
                 <div className="bg-base-200 p-6 rounded-lg shadow-md mt-4">
                   <h2 className="text-2xl font-semibold text-blue-600 mb-2">
@@ -69,49 +149,53 @@ function Immersion() {
                     </li>
                   </ul>
                 </div>
-                { instance && <div className="bg-base-200 p-6 rounded-lg shadow-md mt-6">
-                  <h2 className="text-2xl font-semibold text-blue-600 mb-2">
-                    Your credentials :
-                  </h2>
-                  <ul className="space-y-2">
-                    <li className="flex justify-between align-middle items-center">
-                      <span>SSH:</span>
-                      <div
-                        className="flex gap-2 items-center"
-                        onClick={() => copyText(`ssh -p ${instance.port} ${username}@la-banquise.fr`)}
-                      >
-                        <span className="font-medium">ssh -p {instance.port} {username}@la-banquise.fr</span>
-                        <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
-                          <ClipboardIcon className="size-6" />
+                
+                {instance && (
+                  <div className="bg-base-200 p-6 rounded-lg shadow-md mt-6">
+                    <h2 className="text-2xl font-semibold text-blue-600 mb-2">
+                      Your credentials :
+                    </h2>
+                    <ul className="space-y-2">
+                      <li className="flex justify-between align-middle items-center">
+                        <span>SSH:</span>
+                        <div
+                          className="flex gap-2 items-center cursor-pointer"
+                          onClick={() => copyText(`ssh -p ${instance.port} ${username}@la-banquise.fr`)}
+                        >
+                          <span className="font-medium">ssh -p {instance.port} {username}@la-banquise.fr</span>
+                          <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
+                            <ClipboardIcon className="size-6" />
+                          </div>
                         </div>
-                      </div>
-                    </li>
-                    <li className="flex justify-between align-middle items-center">
-                      <span>Instance name:</span>
-                      <div className="flex gap-2 items-center" >
-                        <span className="font-medium">{instance.name}</span>
-                      </div>
-                    </li>
-                    <li className="flex justify-between align-middle items-center">
-                      <span>Password:</span>
-                      <div
-                        className="flex gap-2 items-center"
-                        onClick={() => copyText(instance.pwd)}
-                      >
-                        <span className="font-normal">{instance.pwd}</span>
-                        <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
-                          <ClipboardIcon className="size-6" />
+                      </li>
+                      <li className="flex justify-between align-middle items-center">
+                        <span>Instance name:</span>
+                        <div className="flex gap-2 items-center">
+                          <span className="font-medium">{instance.name}</span>
                         </div>
-                      </div>
-                    </li>
-                    <li className="flex justify-between align-middle items-center">
-                      <span>Status:</span>
-                      <div className="flex gap-2 items-center" >             
-                        <span className="font-normal">{container_status}</span>
-                      </div>
-                    </li>
-                  </ul>
-                </div>}
+                      </li>
+                      <li className="flex justify-between align-middle items-center">
+                        <span>Password:</span>
+                        <div
+                          className="flex gap-2 items-center cursor-pointer"
+                          onClick={() => copyText(instance.pwd)}
+                        >
+                          <span className="font-normal">{instance.pwd}</span>
+                          <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
+                            <ClipboardIcon className="size-6" />
+                          </div>
+                        </div>
+                      </li>
+                      <li className="flex justify-between align-middle items-center">
+                        <span>Status:</span>
+                        <div className="flex gap-2 items-center">
+                          <span className="font-normal">{container_status}</span>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+                
                 <a
                   href={ji.pdfLink}
                   target="_blank"
@@ -128,6 +212,108 @@ function Immersion() {
                   </div>
                 </a>
               </div>
+
+              {/* Colonne droite - iframe du sujet */}
+              <div className="lg:w-2/3 px-4">
+                <div className="bg-base-200 shadow-lg rounded-lg p-6 mt-4 h-full">
+                  <h2 className="text-2xl font-bold text-blue-600 mb-4">
+                    Subject
+                  </h2>
+                  <iframe
+                    src="https://tp.la-banquise.fr"
+                    className="w-full h-[600px] rounded-lg border-2 border-base-300"
+                    title="Subject Document"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Section inférieure : Tableau des instances sur toute la largeur */}
+            <div className="px-4 mt-8">
+              <div className="bg-base-200 shadow-lg rounded-lg p-6">
+                <div className="flex justify-between items-center mb-4">
+                  <h2 className="text-2xl font-bold text-blue-600">
+                    All Instances
+                  </h2>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={handleCreateContainers}
+                      className="btn btn-success"
+                    >
+                      Create All Containers
+                    </button>
+                    <button
+                      onClick={handleStartAllContainers}
+                      className="btn btn-primary"
+                    >
+                      Start All
+                    </button>
+                    <button
+                      onClick={handleStopAllContainers}
+                      className="btn btn-error"
+                    >
+                      Stop All
+                    </button>
+                  </div>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="table w-full">
+                    <thead>
+                      <tr>
+                        <th className="p-4">#</th>
+                        <th className="p-4">Name</th>
+                        <th className="p-4">Port</th>
+                        <th className="p-4">Username</th>
+                        <th className="p-4">Password</th>
+                        <th className="p-4">Status</th>
+                        <th className="p-4">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {allInstances.length > 0 ? (
+                        allInstances.map((inst: Instance, index: number) => (
+                          <tr key={inst.id || index} className="hover:bg-base-300">
+                            <td className="p-4">{index + 1}</td>
+                            <td className="p-4">{inst.name}</td>
+                            <td className="p-4">{inst.port}</td>
+                            <td className="p-4">{username}</td>
+                            <td className="p-4">
+                              <div className="flex items-center gap-2">
+                                <span className="font-mono">{inst.pwd}</span>
+                                <button
+                                  onClick={() => copyText(inst.pwd)}
+                                  className="btn btn-sm btn-ghost"
+                                >
+                                  <ClipboardIcon className="size-4" />
+                                </button>
+                              </div>
+                            </td>
+                            <td className="p-4">
+                              <span className="badge badge-primary">
+                                {instancesStatus[inst.id] || "Loading..."}
+                              </span>
+                            </td>
+                            <td className="p-4">
+                              <button
+                                className="btn btn-sm btn-primary"
+                                onClick={() => copyText(`ssh -p ${inst.port} ${username}@la-banquise.fr`)}
+                              >
+                                Copy SSH
+                              </button>
+                            </td>
+                          </tr>
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan={7} className="text-center p-8 text-gray-500">
+                            No instances found
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             </div>
           </div>
         </>