chore: refactored code, added some functions

app/components/WebConsole/index.tsx

@@ -2,6 +2,9 @@
 
 import React, { useEffect, useState, useRef } from "react";
 import Stats from "./stats";
+import ServerName from "./serverName";
+import ServerControl from "./serverControl";
+import ServerRunning from "./serverStatus";
 
 const Console = () => {
   const [url, setUrl] = useState("");
@@ -15,6 +18,7 @@ const Console = () => {
   const [diskTotal, setDiskTotal] = useState<number>(0);
   const [network, setNetwork] = useState({ inbound: 0, outbound: 0 });
   const [uptime, setUptime] = useState<number>(0);
+  const [serverStatus, setServerStatus] = useState<string>("N/A");
 
   const websocketRef = useRef<WebSocket | null>(null); // Dodajemy ref do WebSocket
   const textareaRef = useRef<HTMLTextAreaElement>(null); // Dodajemy referencję do textarea
@@ -66,41 +70,52 @@ const Console = () => {
         const message = JSON.parse(event.data);
         // console.log("Received message:", message.event);
 
-        if (message.event === "token expiring") {
+        switch (message.event) {
-          fetchData();
+          case "token expiring":
-          websocket.send(`{"event":"auth","args":["${token}"]}`);
+            fetchData();
-          console.log("New token fetched");
+            websocket.send(`{"event":"auth","args":["${token}"]}`);
-        }
+            console.log("New token fetched");
-
+            break;
-        if (message.event === "stats") {
+          case "auth success":
-          let data = JSON.parse(JSON.parse(event.data).args[0]);
+            console.log("Authenticated.");
-          setCpuStat(data.cpu_absolute.toFixed(2));
+            break;
-          setRamStat(
+          case "auth error":
-            Number((data.memory_bytes / (1024 * 1024 * 1024)).toFixed(2))
+            console.error("Authentication error:", message.args[0]);
-          );
+            break;
-          setRamTotal(
+          case "stats":
-            Number((data.memory_limit_bytes / (1024 * 1024 * 1024)).toFixed(2))
+            let data = JSON.parse(JSON.parse(event.data).args[0]);
-          );
+            setCpuStat(data.cpu_absolute.toFixed(2));
-          setDiskUsage(
+            setRamStat(
-            Number((data.disk_bytes / (1024 * 1024 * 1024)).toFixed(2))
+              Number((data.memory_bytes / (1024 * 1024 * 1024)).toFixed(2))
-          );
+            );
-          setNetwork({
+            setRamTotal(
-            inbound: data.network.rx_bytes,
+              Number(
-            outbound: data.network.tx_bytes,
+                (data.memory_limit_bytes / (1024 * 1024 * 1024)).toFixed(2)
-          });
+              )
-          setUptime(data.uptime);
+            );
-        }
+            setDiskUsage(
-
+              Number((data.disk_bytes / (1024 * 1024 * 1024)).toFixed(2))
-        if (message.event === "console output") {
+            );
-          setOutput((prevOutput) => {
+            setNetwork({
-            let tmpMessage = JSON.parse(event.data).args[0];
+              inbound: data.network.rx_bytes,
-            tmpMessage = tmpMessage.replace(/\u001b\[[0-9;]*m/g, "");
+              outbound: data.network.tx_bytes,
-            const newOutput = [...prevOutput, tmpMessage];
+            });
-            if (newOutput.length > 1000) {
+            setUptime(data.uptime);
-              return newOutput.slice(-1000);
+            break;
-            }
+          case "status":
-            return newOutput;
+            setServerStatus(message.args[0]);
-          });
+            break;
+          case "console output":
+            setOutput((prevOutput) => {
+              let tmpMessage = JSON.parse(event.data).args[0];
+              tmpMessage = tmpMessage.replace(/\u001b\[[0-9;]*m/g, "");
+              const newOutput = [...prevOutput, tmpMessage];
+              if (newOutput.length > 1000) {
+                return newOutput.slice(-1000);
+              }
+              return newOutput;
+            });
+            break;
         }
       };
 
@@ -133,38 +148,50 @@ const Console = () => {
   };
 
   return (
-    <div className="flex gap-4">
+    <div className="flex flex-col gap-4">
-      <div className="w-4/5">
+      <div className="flex gap-4">
-        <div>
+        <div className="w-4/5 flex justify-self-auto justify-between items-center">
-          <textarea
+          <ServerName serverName="asdf " />
-            className="textarea textarea-bordered text-yellow-200 w-full"
+          <ServerRunning serverStatus={serverStatus} />
-            ref={textareaRef}
-            cols={110}
-            rows={20}
-            value={output.join("\n")}
-            readOnly
-          />
         </div>
-        <div>
+        <div className="w-1/5 flex justify-between">
-          <input
+          <ServerControl websocketRef={websocketRef} />
-            className="input input-bordered w-full text-yellow-200"
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyPress={handleKeyPress}
-          />
         </div>
       </div>
-      <div className="w-1/5">
+
-        <Stats
+      <div className="flex gap-4">
-          cpu={cpuStat}
+        <div className="w-4/5">
-          ramUsage={ramStat}
+          <div>
-          ramTotal={ramTotal}
+            <textarea
-          diskUsage={diskUsage}
+              className="textarea textarea-bordered text-yellow-200 w-full"
-          diskTotal={diskTotal}
+              ref={textareaRef}
-          network={network}
+              cols={110}
-          uptime={uptime}
+              rows={20}
-        />
+              value={output.join("\n")}
+              readOnly
+            />
+          </div>
+          <div>
+            <input
+              className="input input-bordered w-full text-yellow-200"
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+            />
+          </div>
+        </div>
+        <div className="w-1/5">
+          <Stats
+            cpu={cpuStat}
+            ramUsage={ramStat}
+            ramTotal={ramTotal}
+            diskUsage={diskUsage}
+            diskTotal={diskTotal}
+            network={network}
+            uptime={uptime}
+          />
+        </div>
       </div>
     </div>
   );

app/components/WebConsole/serverControl.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+interface Props {
+  websocketRef: React.MutableRefObject<WebSocket | null>;
+}
+
+const serverControl = ({ websocketRef }: Props) => {
+  const setStateFunction = (state: string) => {
+    websocketRef.current?.send(`{"event":"set state","args":["${state}"]}`);
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setStateFunction("start");
+        }}
+        className="btn btn-success"
+      >
+        Start
+      </button>
+      <button
+        onClick={() => {
+          setStateFunction("restart");
+        }}
+        className="btn btn-warning"
+      >
+        Restart
+      </button>
+      <button
+        onClick={() => {
+          setStateFunction("stop");
+        }}
+        className="btn btn-danger"
+      >
+        Stop
+      </button>
+    </>
+  );
+};
+
+export default serverControl;

app/components/WebConsole/serverName.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface Props {
+  serverName: string;
+  refWebsocket?: React.MutableRefObject<WebSocket | null>;
+}
+
+const serverName = ({ serverName }: Props) => {
+  return (
+    <>
+      <div>{serverName}</div>
+    </>
+  );
+};
+
+export default serverName;

app/components/WebConsole/serverStatus.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface Props {
+  serverStatus: string;
+}
+
+const serverStatus = ({ serverStatus }: Props) => {
+  let bgColor = "bg-success";
+
+  return (
+    <>
+      <div className={bgColor}>{serverStatus}</div>
+    </>
+  );
+};
+
+export default serverStatus;