community-scripts/ProxmoxVED
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend

Browse Source
This commit is contained in:
Michel Roegl-Brunner 2025-03-18 16:02:29 +01:00
parent 9e7f276d95
commit 5ba9c81efc
3 changed files with 99 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,7 @@ function ScriptItem({
const os = defaultInstallMethod?.resources?.os || "Proxmox Node"; const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
const version = defaultInstallMethod?.resources?.version || ""; const version = defaultInstallMethod?.resources?.version || "";
const [linksVisible, setLinksVisible] = useState<boolean>(false);
return ( return (
<div className="mr-7 mt-0 flex w-full min-w-fit"> <div className="mr-7 mt-0 flex w-full min-w-fit">
@ -82,7 +83,7 @@ function ScriptItem({
unoptimized unoptimized
/> />
<div className="ml-4 flex flex-col justify-between"> <div className="ml-4 flex flex-col justify-between">
<div className="flex h-full w-full flex-col justify-between"> <div className="flex h-full w-full flex-col mb-4">
<div> <div>
<h1 className="text-lg font-semibold"> <h1 className="text-lg font-semibold">
{item.name} {getDisplayValueFromType(item.type)} {item.name} {getDisplayValueFromType(item.type)}
@ -126,10 +127,20 @@ function ScriptItem({
<div className="flex flex-col items-end gap-4 ml-auto"> <div className="flex flex-col items-end gap-4 ml-auto">
<DefaultSettings item={item} /> <DefaultSettings item={item} />
<InterFaces item={item} /> <InterFaces item={item} />
<Buttons item={item} /> <div>
<>
<button
onClick={() => setLinksVisible(!linksVisible)}
className="flex items-right justify-right gap-1 mb-2 rounded-md border border-accent bg-accent/20 px-2 py-1 text-l hover:bg-accent w-30"
>
Show Links {linksVisible ? '▲' : '▼'}
</button>
{linksVisible && <Buttons item={item} />}
</>
</div> </div>
</div> </div>
<Separator className="mt-4" /> </div>
<div> <div>
<div className="mt-4"> <div className="mt-4">
<Description item={item} /> <Description item={item} />

1
frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx
View File

@ -72,6 +72,7 @@ export default function Buttons({ item }: { item: Script }) {
].filter(Boolean) as ButtonLinkProps[]; ].filter(Boolean) as ButtonLinkProps[];
return ( return (
<div className="flex flex-wrap justify-end gap-2"> <div className="flex flex-wrap justify-end gap-2">
{buttons.map((props, index) => ( {buttons.map((props, index) => (
<ButtonLink key={index} {...props} /> <ButtonLink key={index} {...props} />

3
frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
View File

@ -30,9 +30,10 @@ export default function InterFaces({ item }: { item: Script }) {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{item.interface_port !== null ? ( {item.interface_port !== null ? (
<div className="flex items-center justify-end"> <div className="flex items-center justify-end">
<h2 className="mr-2 text-end text-lg font-semibold"> <h2 className="mr-2 text-end text-l font-semibold">
{"Default Interface:"} {"Default Interface:"}
</h2>{" "} </h2>{" "}
<CopyButton label="default interface" value={item.interface_port} /> <CopyButton label="default interface" value={item.interface_port} />
</div> </div>
) : null} ) : null}