przeq.hosting/client_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new featerus

Browse Source
This commit is contained in:
przeq piciel
2024-08-25 18:09:56 +00:00
parent 4df61e0772
commit e535c347f9
11 changed files with 269 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/app/files/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
import FilesEdit from "@/components/FilesEditor";
import ConsoleNavigation from "@/components/ConsoleNavigation";
export default function Files() {
return (
<>
<ConsoleNavigation />
<section className="container mx-auto">
<FilesEdit />
</section>
</>
);
}

4
app/app/layout.tsx
View File

@@ -17,10 +17,10 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<header className="py-4"> <header>
<h1 className="text-4xl font-bold"></h1> <h1 className="text-4xl font-bold"></h1>
</header> </header>
<div className="container">{children}</div> <div id="container">{children}</div>
</body> </body>
</html> </html>
); );

22
app/components/ConsoleNavigation/index.tsx Normal file
View File

@@ -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;

7
app/components/FilesEditor/RowFile/index.tsx Normal file
View File

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

93
app/components/FilesEditor/index.tsx Normal file
View File

@@ -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;

22
app/components/Icons/Document/index.tsx Normal file
View File

@@ -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;

22
app/components/Icons/Folder/index.tsx Normal file
View File

@@ -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;

22
app/components/Icons/Menu/index.tsx Normal file
View File

@@ -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;

98
app/components/WebConsole/index.tsx
View File

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

11
app/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "app", "name": "app",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"date-fns": "^3.6.0",
"next": "14.2.5", "next": "14.2.5",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
@@ -1325,6 +1326,16 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.6", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",

1
app/package.json
View File

@@ -9,6 +9,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"date-fns": "^3.6.0",
"next": "14.2.5", "next": "14.2.5",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"