many changes

app/components/WebConsole/index.tsx

@@ -4,9 +4,10 @@ import React, { useEffect, useState, useRef } from "react";
 import Stats from "./stats";
 import ServerName from "./serverName";
 import ServerControl from "./serverControl";
-import ServerRunning from "./serverStatus";
+import ServerStatus from "./serverStatus";
 
 const Console = () => {
+  const [apiKey, setApiKey] = useState("");
   const [url, setUrl] = useState("");
   const [token, setToken] = useState("");
   const [output, setOutput] = useState<string[]>([]);
@@ -23,15 +24,18 @@ const Console = () => {
   const websocketRef = useRef<WebSocket | null>(null); // Dodajemy ref do WebSocket
   const textareaRef = useRef<HTMLTextAreaElement>(null); // Dodajemy referencję do textarea
 
-  const fetchData = async () => {
+  const fetchData = async (apiKey: string) => {
+    setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
+
+    console.log("Fetching data...");
+    console.log(apiKey);
     try {
       const response = await fetch(
         "https://ptero.przeqpiciel.com/api/client/servers/0bf192ab/websocket",
         {
           method: "GET",
           headers: {
-            Authorization:
-              "Bearer ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm",
+            Authorization: "Bearer " + apiKey.toString(),
             "Content-Type": "application/json",
           },
         }
@@ -52,9 +56,9 @@ const Console = () => {
   };
 
   useEffect(() => {
-    fetchData();
+    fetchData(apiKey);
     fetchStats();
-  }, []);
+  }, [apiKey]);
 
   useEffect(() => {
     if (url && token) {
@@ -72,7 +76,7 @@ const Console = () => {
 
         switch (message.event) {
           case "token expiring":
-            fetchData();
+            fetchData(apiKey);
             websocket.send(`{"event":"auth","args":["${token}"]}`);
             console.log("New token fetched");
             break;
@@ -152,7 +156,7 @@ const Console = () => {
       <div className="flex gap-4">
         <div className="w-4/5 flex justify-self-auto justify-between items-center">
           <ServerName serverName="asdf " />
-          <ServerRunning serverStatus={serverStatus} />
+          <ServerStatus serverStatus={serverStatus} />
         </div>
         <div className="w-1/5 flex justify-between">
           <ServerControl websocketRef={websocketRef} />

app/components/WebConsole/serverName.tsx

@@ -8,7 +8,9 @@ interface Props {
 const serverName = ({ serverName }: Props) => {
   return (
     <>
-      <div>{serverName}</div>
+      <div>
+        Server name: <strong>{serverName}</strong>
+      </div>
     </>
   );
 };

app/components/WebConsole/serverStatus.tsx

@@ -5,7 +5,30 @@ interface Props {
 }
 
 const serverStatus = ({ serverStatus }: Props) => {
-  let bgColor = "bg-success";
+  let color = "bg-danger";
+  switch (serverStatus) {
+    case "running":
+      serverStatus = "Running";
+      color = "bg-success";
+      break;
+    case "offline":
+      serverStatus = "Offline";
+      color = "bg-error";
+      break;
+    case "starting":
+      serverStatus = "Starting";
+      color = "bg-info";
+      break;
+    case "stopping":
+      serverStatus = "Stopping";
+      color = "bg-error";
+      break;
+    default:
+      serverStatus = "N/A";
+  }
+
+  let bgColor =
+    "p-3 rounded-md w-32 font-weight-600 font-face text-center " + color;
 
   return (
     <>