From 4d2793d8e279919b2fbd2b79c5d3d265256a8b40 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 4 Jun 2023 04:41:52 +0200
Subject: [PATCH] Created the SSHContainer.jsx

---
 .../components/SSHContainer/SSHContainer.jsx  | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 client/src/pages/tools/linux/RemoteSSH/components/SSHContainer/SSHContainer.jsx

diff --git a/client/src/pages/tools/linux/RemoteSSH/components/SSHContainer/SSHContainer.jsx b/client/src/pages/tools/linux/RemoteSSH/components/SSHContainer/SSHContainer.jsx
new file mode 100644
index 0000000..63b8086
--- /dev/null
+++ b/client/src/pages/tools/linux/RemoteSSH/components/SSHContainer/SSHContainer.jsx
@@ -0,0 +1,53 @@
+import TerminalArea from "@/pages/tools/linux/RemoteSSH/components/TerminalArea";
+import {useContext, useState} from "react";
+import {ServerContext} from "@/common/contexts/Server";
+import "./styles.sass";
+import {faCheck} from "@fortawesome/free-solid-svg-icons";
+import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
+
+export const SSHContainer = () => {
+    const servers = useContext(ServerContext)[0];
+    const [selectedServer, setSelectedServer] = useState("");
+    const [sessionActive, setSessionActive] = useState(false);
+    const updateToast = useContext(ToastNotificationContext);
+
+    const connect = (id) => {
+        if (sessionActive && id === selectedServer) {
+            setSessionActive(false);
+            setSelectedServer("");
+            updateToast("Verbindung zum Server getrennt.", "green", faCheck);
+            return;
+        }
+
+        if (sessionActive && id !== selectedServer) return;
+
+        setSelectedServer(id);
+        setSessionActive(true);
+    }
+
+    const onImageError = (e) => {
+        e.target.onerror = null;
+        e.target.src = "/assets/img/os/linux.webp";
+    }
+
+    const onExit = () => {
+        setSessionActive(false);
+        setSelectedServer("");
+    }
+
+    return (
+        <>
+            <div className="server-selection">
+                {servers.map((server) => (
+                    <div className={"server-item" + (server.id === selectedServer ? " server-selected" : "")}
+                            onClick={() => connect(server.id)} key={server.id}>
+                        <img src={`/assets/img/os/${server.distro || "linux"}.webp`} alt={server.distro} onError={onImageError} />
+                        <div className="dialog-text">{server.name} ({server.hostname})</div>
+                    </div>
+                ))}
+            </div>
+
+            {sessionActive && <TerminalArea server={servers.find((server) => server.id === selectedServer)} onExit={onExit}/>}
+        </>
+    );
+}
\ No newline at end of file