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,7 +149,9 @@ function Immersion() {
                     </li>
                   </ul>
                 </div>
-                { instance && <div className="bg-base-200 p-6 rounded-lg shadow-md mt-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>
@@ -77,7 +159,7 @@ function Immersion() {
                       <li className="flex justify-between align-middle items-center">
                         <span>SSH:</span>
                         <div
-                        className="flex gap-2 items-center"
+                          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>
@@ -88,14 +170,14 @@ function Immersion() {
                       </li>
                       <li className="flex justify-between align-middle items-center">
                         <span>Instance name:</span>
-                      <div className="flex gap-2 items-center" >
+                        <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"
+                          className="flex gap-2 items-center cursor-pointer"
                           onClick={() => copyText(instance.pwd)}
                         >
                           <span className="font-normal">{instance.pwd}</span>
@@ -106,12 +188,14 @@ function Immersion() {
                       </li>
                       <li className="flex justify-between align-middle items-center">
                         <span>Status:</span>
-                      <div className="flex gap-2 items-center" >             
+                        <div className="flex gap-2 items-center">
                           <span className="font-normal">{container_status}</span>
                         </div>
                       </li>
                     </ul>
-                </div>}
+                  </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>
         </>