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,20 +70,28 @@ const Console = () => {
         const message = JSON.parse(event.data);
         // console.log("Received message:", message.event);
 
-        if (message.event === "token expiring") {
+        switch (message.event) {
+          case "token expiring":
             fetchData();
             websocket.send(`{"event":"auth","args":["${token}"]}`);
             console.log("New token fetched");
-        }
+            break;
-
+          case "auth success":
-        if (message.event === "stats") {
+            console.log("Authenticated.");
+            break;
+          case "auth error":
+            console.error("Authentication error:", message.args[0]);
+            break;
+          case "stats":
             let data = JSON.parse(JSON.parse(event.data).args[0]);
             setCpuStat(data.cpu_absolute.toFixed(2));
             setRamStat(
               Number((data.memory_bytes / (1024 * 1024 * 1024)).toFixed(2))
             );
             setRamTotal(
-            Number((data.memory_limit_bytes / (1024 * 1024 * 1024)).toFixed(2))
+              Number(
+                (data.memory_limit_bytes / (1024 * 1024 * 1024)).toFixed(2)
+              )
             );
             setDiskUsage(
               Number((data.disk_bytes / (1024 * 1024 * 1024)).toFixed(2))
@@ -89,9 +101,11 @@ const Console = () => {
               outbound: data.network.tx_bytes,
             });
             setUptime(data.uptime);
-        }
+            break;
-
+          case "status":
-        if (message.event === "console output") {
+            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, "");
@@ -101,6 +115,7 @@ const Console = () => {
               }
               return newOutput;
             });
+            break;
         }
       };
 
@@ -133,6 +148,17 @@ const Console = () => {
   };
 
   return (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-4">
+        <div className="w-4/5 flex justify-self-auto justify-between items-center">
+          <ServerName serverName="asdf " />
+          <ServerRunning serverStatus={serverStatus} />
+        </div>
+        <div className="w-1/5 flex justify-between">
+          <ServerControl websocketRef={websocketRef} />
+        </div>
+      </div>
+
       <div className="flex gap-4">
         <div className="w-4/5">
           <div>
@@ -167,6 +193,7 @@ const Console = () => {
           />
         </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;