new featerus

app/components/ConsoleNavigation/index.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import React from "react";
+
+const navigation = () => {
+  return (
+    <div className="flex w-full bg-slate-500 py-2 mx-0 mr-0 mb-5">
+      <div className="container">
+        <div className="flex justify-start gap-2">
+          <Link href="/console">
+            <button className="btn">Console</button>
+          </Link>
+          <Link href="/files">
+            <button className="btn">Files</button>
+          </Link>
+          <button className="btn">Etc</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default navigation;

app/components/FilesEditor/RowFile/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const index = () => {
+  return <></>;
+};
+
+export default index;

app/components/FilesEditor/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { formatDistanceToNow } from "date-fns";
+import React, { useEffect, useState } from "react";
+import DocumentIcon from "@/components/Icons/Document";
+import FolderIcon from "@/components/Icons/Folder";
+import MenuIcon from "@/components/Icons/Menu";
+
+const Index = () => {
+  const [apiKey, setApiKey] = useState("");
+  const [fileList, setFileList] = useState([]);
+
+  const setCredentials = async () => {
+    setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
+  };
+
+  const formateDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    return formatDistanceToNow(date, { addSuffix: true });
+  };
+
+  const sortFiles = (files: any) => {
+    const data = files;
+
+    const sortedData = data.sort((a, b) => {
+      const isADir = !a.attributes.is_file;
+      const isBDir = !b.attributes.is_file;
+
+      // Najpierw katalogi, potem pliki
+      if (isADir && !isBDir) return -1;
+      if (!isADir && isBDir) return 1;
+
+      // Sortowanie alfabetyczne
+      return a.attributes.name.localeCompare(b.attributes.name);
+    });
+
+    console.log(sortedData);
+  };
+
+  const fetchFiles = async (apiKey: string) => {
+    try {
+      const response = await fetch(
+        "https://ptero.przeqpiciel.com/api/client/servers/0bf192ab/files/list",
+        {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer " + apiKey.toString(),
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setFileList(data.data);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  useEffect(() => {
+    setCredentials();
+    fetchFiles(apiKey);
+  }, [apiKey]);
+
+  return (
+    <>
+      {fileList.map((file) => (
+        <div
+          className="flex justify-between gap-4 bg-slate-400 mb-1 hover:bg-slate-500 pl-4 pr-4 pt-1 pb-1 rounded-md"
+          key={file.attributes.name}
+        >
+          <div className="w-10">
+            {file.attributes.is_file ? <DocumentIcon /> : <FolderIcon />}
+          </div>
+          <div className="w-48 text-left">{file.attributes.name}</div>
+          <div className="w-48 text-right">
+            {file.attributes.is_file ? file.attributes.size : ""}
+          </div>
+          <div title={file.attributes.modified_at} className="w-60 text-right">
+            {formateDate(file.attributes.modified_at)}
+          </div>
+          <div className="w-6 justify-center text-center justify-items-center">
+            <MenuIcon />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default Index;

app/components/Icons/Document/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const index = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  );
+};
+
+export default index;

app/components/Icons/Folder/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const index = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      />
+    </svg>
+  );
+};
+
+export default index;

app/components/Icons/Menu/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const index = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
+      />
+    </svg>
+  );
+};
+
+export default index;

app/components/WebConsole/index.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import React, { useEffect, useState, useRef } from "react";
+
 import Stats from "./stats";
 import ServerName from "./serverName";
 import ServerControl from "./serverControl";
 import ServerStatus from "./serverStatus";
+import Navigation from "../ConsoleNavigation";
 
 const Console = () => {
   const [apiKey, setApiKey] = useState("");
@@ -24,9 +26,11 @@ const Console = () => {
   const websocketRef = useRef<WebSocket | null>(null); // Dodajemy ref do WebSocket
   const textareaRef = useRef<HTMLTextAreaElement>(null); // Dodajemy referencję do textarea
 
-  const fetchData = async (apiKey: string) => {
+  const setCredentials = async () => {
     setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
+  };
 
+  const fetchData = async (apiKey: string) => {
     console.log("Fetching data...");
     console.log(apiKey);
     try {
@@ -56,6 +60,7 @@ const Console = () => {
   };
 
   useEffect(() => {
+    setCredentials();
     fetchData(apiKey);
     fetchStats();
   }, [apiKey]);
@@ -152,52 +157,57 @@ 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 " />
-          <ServerStatus serverStatus={serverStatus} />
-        </div>
-        <div className="w-1/5 flex justify-between">
-          <ServerControl websocketRef={websocketRef} />
-        </div>
-      </div>
+    <>
+      <Navigation />
+      <section className="container mx-auto">
+        <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 " />
+              <ServerStatus 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>
-            <textarea
-              className="textarea textarea-bordered text-yellow-200 w-full"
-              ref={textareaRef}
-              cols={110}
-              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 className="flex gap-4">
+            <div className="w-4/5">
+              <div>
+                <textarea
+                  className="textarea textarea-bordered text-yellow-200 w-full"
+                  ref={textareaRef}
+                  cols={110}
+                  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>
-        <div className="w-1/5">
-          <Stats
-            cpu={cpuStat}
-            ramUsage={ramStat}
-            ramTotal={ramTotal}
-            diskUsage={diskUsage}
-            diskTotal={diskTotal}
-            network={network}
-            uptime={uptime}
-          />
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   );
 };