mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-11-04 10:22:50 +00:00
Change Frontend Version Info (#3527)
* Change Frontend Version Info * Fix * Update ScriptItem.tsx
This commit is contained in:
CanbiZ
GitHub
@@ -1,39 +1,29 @@
|
||||
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { extractDate } from "@/lib/time";
|
||||
import { Script, AppVersion } from "@/lib/types";
|
||||
import { fetchVersions } from "@/lib/data";
|
||||
import { extractDate } from "@/lib/time";
|
||||
import { AppVersion, Script } from "@/lib/types";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { basePath } from "@/config/siteConfig";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getDisplayValueFromType } from "./ScriptInfoBlocks";
|
||||
import Alerts from "./ScriptItems/Alerts";
|
||||
import Buttons from "./ScriptItems/Buttons";
|
||||
import DefaultPassword from "./ScriptItems/DefaultPassword";
|
||||
import DefaultSettings from "./ScriptItems/DefaultSettings";
|
||||
import Description from "./ScriptItems/Description";
|
||||
import InstallCommand from "./ScriptItems/InstallCommand";
|
||||
import InterFaces from "./ScriptItems/InterFaces";
|
||||
import Tooltips from "./ScriptItems/Tooltips";
|
||||
import { basePath } from "@/config/siteConfig";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
|
||||
function ScriptItem({
|
||||
item,
|
||||
setSelectedScript,
|
||||
}: {
|
||||
item: Script;
|
||||
setSelectedScript: (script: string | null) => void;
|
||||
}) {
|
||||
function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScript: (script: string | null) => void }) {
|
||||
const closeScript = () => {
|
||||
window.history.pushState({}, document.title, window.location.pathname);
|
||||
setSelectedScript(null);
|
||||
};
|
||||
const [versions, setVersions] = useState<AppVersion[]>([]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchVersions()
|
||||
.then((fetchedVersions) => {
|
||||
@@ -68,10 +58,7 @@ function ScriptItem({
|
||||
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`)
|
||||
}
|
||||
onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
|
||||
height={400}
|
||||
alt={item.name}
|
||||
unoptimized
|
||||
@@ -89,35 +76,165 @@ function ScriptItem({
|
||||
Default OS: {os} {version}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-5">
|
||||
<DefaultSettings item={item} />
|
||||
</div>
|
||||
<div>{versions.length === 0 ? (<p>Loading versions...</p>) :
|
||||
(<>
|
||||
<p className="text-l text-foreground">Version:</p>
|
||||
<p className="text-l text-muted-foreground">{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, '')
|
||||
<div className="flex min-w-[600px] flex-wrap gap-6 text-sm text-muted-foreground">
|
||||
{(() => {
|
||||
const getDisplayValueFromRAM = (ram: number) =>
|
||||
ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
|
||||
|
||||
)?.version || "No Version information found"
|
||||
}</p>
|
||||
<p className="text-l text-foreground">Latest Version changes(Pulled from newreleases.io):</p>
|
||||
<p className="text-l text-muted-foreground">
|
||||
{(() => {
|
||||
const matchedVersion = 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, '')
|
||||
);
|
||||
return matchedVersion?.date ?
|
||||
extractDate(matchedVersion.date as unknown as string) :
|
||||
"No date information found"
|
||||
})()}
|
||||
</p>
|
||||
</>)
|
||||
}
|
||||
const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
|
||||
<span className="flex items-center gap-1">
|
||||
{icon}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
const CPUIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<rect x="9" y="9" width="6" height="6" />
|
||||
<path d="M3 9h2m14 0h2M3 15h2m14 0h2M9 3v2m6-2v2M9 19v2m6-2v2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const RAMIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<rect x="4" y="6" width="16" height="12" rx="2" ry="2" />
|
||||
<path d="M8 6v12M16 6v12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const HDDIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M4 4h16v16H4z" />
|
||||
<circle cx="8" cy="16" r="1" />
|
||||
<circle cx="16" cy="16" r="1" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ResourceDisplay = ({
|
||||
title,
|
||||
cpu,
|
||||
ram,
|
||||
hdd,
|
||||
}: {
|
||||
title: string;
|
||||
cpu: number | null;
|
||||
ram: number | null;
|
||||
hdd: number | null;
|
||||
}) => {
|
||||
const getDisplayValueFromRAM = (ram: number) =>
|
||||
ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
|
||||
|
||||
const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
|
||||
<span className="flex items-center gap-1 whitespace-nowrap">
|
||||
{icon}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
const hasCPU = typeof cpu === "number" && cpu > 0;
|
||||
const hasRAM = typeof ram === "number" && ram > 0;
|
||||
const hasHDD = typeof hdd === "number" && hdd > 0;
|
||||
|
||||
if (!hasCPU && !hasRAM && !hasHDD) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<span className="font-semibold text-foreground">{title}:</span>
|
||||
{hasCPU && (
|
||||
<>
|
||||
<IconText icon={CPUIcon} label={`CPU: ${cpu} vCPU`} />
|
||||
<span>|</span>
|
||||
</>
|
||||
)}
|
||||
{hasRAM && (
|
||||
<>
|
||||
<IconText icon={RAMIcon} label={`RAM: ${getDisplayValueFromRAM(ram!)}`} />
|
||||
<span>|</span>
|
||||
</>
|
||||
)}
|
||||
{hasHDD && <IconText icon={HDDIcon} label={`HDD: ${hdd} GB`} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const defaultSettings = item.install_methods.find((method) => method.type === "default");
|
||||
const alpineSettings = item.install_methods.find((method) => method.type === "alpine");
|
||||
return (
|
||||
<>
|
||||
{defaultSettings?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Default"
|
||||
cpu={defaultSettings.resources.cpu}
|
||||
ram={defaultSettings.resources.ram}
|
||||
hdd={defaultSettings.resources.hdd}
|
||||
/>
|
||||
)}
|
||||
|
||||
{alpineSettings?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Alpine"
|
||||
cpu={alpineSettings.resources.cpu}
|
||||
ram={alpineSettings.resources.ram}
|
||||
hdd={alpineSettings.resources.hdd}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
if (versions.length === 0) {
|
||||
return <p>Loading versions...</p>;
|
||||
}
|
||||
|
||||
const cleanSlug = item.slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
||||
|
||||
const matched = versions.find((v) => {
|
||||
const cleanName = v.name.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
||||
return cleanName === cleanSlug || cleanName.includes(cleanSlug);
|
||||
});
|
||||
|
||||
if (!matched) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-2">
|
||||
<span className="text-foreground">
|
||||
Version: {matched.version} (
|
||||
{extractDate(
|
||||
matched.date instanceof Date ? matched.date.toISOString() : matched.date || "",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
title="Crawled version from newreleases.io"
|
||||
className="cursor-help rounded-full border border-green-500 px-2 py-0.5 text-xs font-semibold text-green-500"
|
||||
>
|
||||
Info
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,9 +251,7 @@ function ScriptItem({
|
||||
</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>
|
||||
<h2 className="text-lg font-semibold">How to {item.type == "misc" ? "use" : "install"}</h2>
|
||||
<Tooltips item={item} />
|
||||
</div>
|
||||
<Separator className="w-full"></Separator>
|
||||
|
||||
Reference in New Issue
Block a user