diff --git a/app/app/files/page.tsx b/app/app/files/page.tsx new file mode 100644 index 0000000..8a105a1 --- /dev/null +++ b/app/app/files/page.tsx @@ -0,0 +1,13 @@ +import FilesEdit from "@/components/FilesEditor"; +import ConsoleNavigation from "@/components/ConsoleNavigation"; + +export default function Files() { + return ( + <> + +
+ +
+ + ); +} diff --git a/app/app/layout.tsx b/app/app/layout.tsx index e1402be..3f697da 100644 --- a/app/app/layout.tsx +++ b/app/app/layout.tsx @@ -17,10 +17,10 @@ export default function RootLayout({ return ( -
+

-
{children}
+
{children}
); diff --git a/app/components/ConsoleNavigation/index.tsx b/app/components/ConsoleNavigation/index.tsx new file mode 100644 index 0000000..d0a6c28 --- /dev/null +++ b/app/components/ConsoleNavigation/index.tsx @@ -0,0 +1,22 @@ +import Link from "next/link"; +import React from "react"; + +const navigation = () => { + return ( +
+
+
+ + + + + + + +
+
+
+ ); +}; + +export default navigation; diff --git a/app/components/FilesEditor/RowFile/index.tsx b/app/components/FilesEditor/RowFile/index.tsx new file mode 100644 index 0000000..3c6c2d9 --- /dev/null +++ b/app/components/FilesEditor/RowFile/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const index = () => { + return <>; +}; + +export default index; diff --git a/app/components/FilesEditor/index.tsx b/app/components/FilesEditor/index.tsx new file mode 100644 index 0000000..7594c93 --- /dev/null +++ b/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) => ( +
+
+ {file.attributes.is_file ? : } +
+
{file.attributes.name}
+
+ {file.attributes.is_file ? file.attributes.size : ""} +
+
+ {formateDate(file.attributes.modified_at)} +
+
+ +
+
+ ))} + + ); +}; + +export default Index; diff --git a/app/components/Icons/Document/index.tsx b/app/components/Icons/Document/index.tsx new file mode 100644 index 0000000..55fa69e --- /dev/null +++ b/app/components/Icons/Document/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const index = () => { + return ( + + + + ); +}; + +export default index; diff --git a/app/components/Icons/Folder/index.tsx b/app/components/Icons/Folder/index.tsx new file mode 100644 index 0000000..41ed614 --- /dev/null +++ b/app/components/Icons/Folder/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const index = () => { + return ( + + + + ); +}; + +export default index; diff --git a/app/components/Icons/Menu/index.tsx b/app/components/Icons/Menu/index.tsx new file mode 100644 index 0000000..c5bdfaf --- /dev/null +++ b/app/components/Icons/Menu/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const index = () => { + return ( + + + + ); +}; + +export default index; diff --git a/app/components/WebConsole/index.tsx b/app/components/WebConsole/index.tsx index 23ac69a..c4bd63a 100644 --- a/app/components/WebConsole/index.tsx +++ b/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(null); // Dodajemy ref do WebSocket const textareaRef = useRef(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 ( -
-
-
- - -
-
- -
-
+ <> + +
+
+
+
+ + +
+
+ +
+
-
-
-
-