community-scripts/ProxmoxVED
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVED.git synced 2026-02-25 13:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Workflow update

Browse Source
This commit is contained in:
Michel Roegl-Brunner
2025-03-18 14:25:38 +01:00
parent f306dbd4fb
commit 81c4869530
2 changed files with 107 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
frontend/src/app/scripts/_components/ScriptItem.tsx
View File

@@ -20,126 +20,128 @@ import { basePath } from "@/config/siteConfig";
import { useEffect, useState } from "react";
interface ScriptItemProps {
item: Script;
setSelectedScript: (script: string | null) => void;
item: Script;
setSelectedScript: (script: string | null) => void;
}
function ScriptItem({
item,
setSelectedScript,
item,
setSelectedScript,
}: ScriptItemProps) {
const closeScript = () => {
window.history.pushState({}, document.title, window.location.pathname);
setSelectedScript(null);
};
const closeScript = () => {
window.history.pushState({}, document.title, window.location.pathname);
setSelectedScript(null);
};
const [versions, setVersions] = useState<AppVersion[]>([]);
const [versions, setVersions] = useState<AppVersion[]>([]);
useEffect(() => {
fetchVersions()
.then((fetchedVersions) => {
console.log("Fetched Versions: ", fetchedVersions);
if (Array.isArray(fetchedVersions)) {
setVersions(fetchedVersions);
} else if (fetchedVersions && typeof fetchedVersions === "object") {
setVersions([fetchedVersions]);
} else {
setVersions([]);
}
})
.catch((error) => console.error("Error fetching versions:", error));
}, []);
useEffect(() => {
fetchVersions()
.then((fetchedVersions) => {
console.log("Fetched Versions: ", fetchedVersions);
if (Array.isArray(fetchedVersions)) {
setVersions(fetchedVersions);
} else if (fetchedVersions && typeof fetchedVersions === "object") {
setVersions([fetchedVersions]);
} else {
setVersions([]);
}
})
.catch((error) => console.error("Error fetching versions:", error));
}, []);
const defaultInstallMethod = item.install_methods?.[0];
const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
const version = defaultInstallMethod?.resources?.version || "";
const defaultInstallMethod = item.install_methods?.[0];
const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
const version = defaultInstallMethod?.resources?.version || "";
return (
<div className="mr-7 mt-0 flex w-full min-w-fit">
<div className="flex w-full min-w-fit">
<div className="flex w-full flex-col">
<div className="flex h-[36px] min-w-max items-center justify-between">
<h2 className="text-lg font-semibold">Selected Script</h2>
<X onClick={closeScript} className="cursor-pointer" />
</div>
<div className="rounded-lg border bg-accent/20 p-4">
<div className="flex justify-between">
<div className="flex">
<Image
className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
src={item.logo || `/${basePath}/logo.png`}
width={400}
onError={(e) =>
((e.currentTarget as HTMLImageElement).src =
`/${basePath}/logo.png`)
}
height={400}
alt={item.name}
unoptimized
/>
<div className="ml-4 flex flex-col justify-between">
<div className="flex h-full w-full flex-col justify-between">
<div>
<h1 className="text-lg font-semibold">
{item.name} {getDisplayValueFromType(item.type)}
</h1>
<p className="w-full text-sm text-muted-foreground">
Date added: {extractDate(item.date_created)}
</p>
<p className="text-sm text-muted-foreground">
Default OS: {os} {version}
</p>
return (
<div className="mr-7 mt-0 flex w-full min-w-fit">
<div className="flex w-full min-w-fit">
<div className="flex w-full flex-col">
<div className="flex h-[36px] min-w-max items-center justify-between">
<h2 className="text-lg font-semibold">Selected Script</h2>
<X onClick={closeScript} className="cursor-pointer" />
</div>
<div className="flex gap-5">
<DefaultSettings item={item} />
<div className="rounded-lg border bg-accent/20 p-4">
<div className="flex justify-between">
<div className="flex">
<Image
className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
src={item.logo || `/${basePath}/logo.png`}
width={400}
onError={(e) =>
((e.currentTarget as HTMLImageElement).src =
`/${basePath}/logo.png`)
}
height={400}
alt={item.name}
unoptimized
/>
<div className="ml-4 flex flex-col justify-between">
<div className="flex h-full w-full flex-col justify-between">
<div>
<h1 className="text-lg font-semibold">
{item.name} {getDisplayValueFromType(item.type)}
</h1>
<p className="w-full text-sm text-muted-foreground">
Date added: {extractDate(item.date_created)}
</p>
<p className="text-sm text-muted-foreground">
Default OS: {os} {version}
</p>
</div>
<div className="flex gap-5">
<DefaultSettings item={item} />
</div>
<div>
{versions.length === 0 ? (
<p>Loading versions...</p>
) : (
<p>Version: { versions.find((v) =>
v.name === item.slug.replace(/[^a-z0-9]/g, '') ||
v.name.includes(item.slug.replace(/[^a-z0-9]/g, '')) ||
v.name.replace(/[^a-z0-9]/g, '') === item.slug.replace(/[^a-z0-9]/g, '')
)?.version || "Not found"
}</p>
)}
</div>
</div>
</div>
</div>
<div className="hidden flex-col justify-between gap-2 sm:flex">
<InterFaces item={item} />
<Buttons item={item} />
</div>
</div>
<Separator className="mt-4" />
<div>
<div className="mt-4">
<Description item={item} />
<Alerts item={item} />
</div>
<div className="mt-4 rounded-lg border bg-accent/50">
<div className="flex gap-3 px-4 py-2">
<h2 className="text-lg font-semibold">
How to {item.type == "misc" ? "use" : "install"}
</h2>
<Tooltips item={item} />
</div>
<Separator className="w-full"></Separator>
<InstallCommand item={item} />
</div>
</div>
<DefaultPassword item={item} />
</div>
<div>
{versions.length === 0 ? (
<p>Loading versions...</p>
) : (
<p>Version: {
versions.find((v) => v.name === item.slug.replace(/[^a-z0-9]/g, ''))?.version || "Not found"
}</p>
)}
</div>
</div>
</div>
</div>
<div className="hidden flex-col justify-between gap-2 sm:flex">
<InterFaces item={item} />
<Buttons item={item} />
</div>
</div>
<Separator className="mt-4" />
<div>
<div className="mt-4">
<Description item={item} />
<Alerts item={item} />
</div>
<div className="mt-4 rounded-lg border bg-accent/50">
<div className="flex gap-3 px-4 py-2">
<h2 className="text-lg font-semibold">
How to {item.type == "misc" ? "use" : "install"}
</h2>
<Tooltips item={item} />
</div>
<Separator className="w-full"></Separator>
<InstallCommand item={item} />
</div>
</div>
<DefaultPassword item={item} />
</div>
</div>
</div>
</div>
);
);
}
export default ScriptItem;