mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-05-21 11:10:24 +00:00
272 lines
10 KiB
TypeScript
272 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Category } from "@/lib/types";
|
|
|
|
const defaultLogo = "/default-logo.png"; // Fallback logo path
|
|
const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
|
|
const MAX_LOGOS = 5; // Max logos to display at once
|
|
|
|
const formattedBadge = (type: string) => {
|
|
switch (type) {
|
|
case "vm":
|
|
return <Badge className="text-blue-500/75 border-blue-500/75 badge">VM</Badge>;
|
|
case "ct":
|
|
return (
|
|
<Badge className="text-yellow-500/75 border-yellow-500/75 badge">LXC</Badge>
|
|
);
|
|
case "misc":
|
|
return <Badge className="text-green-500/75 border-green-500/75 badge">MISC</Badge>;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const CategoryView = () => {
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
const [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
|
|
const [currentScripts, setCurrentScripts] = useState<any[]>([]);
|
|
const [logoIndices, setLogoIndices] = useState<{ [key: string]: number }>({});
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const fetchCategories = async () => {
|
|
try {
|
|
const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : "";
|
|
const response = await fetch(`${basePath}/api/categories`);
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch categories");
|
|
}
|
|
const data = await response.json();
|
|
setCategories(data);
|
|
|
|
// Initialize logo indices
|
|
const initialLogoIndices: { [key: string]: number } = {};
|
|
data.forEach((category: any) => {
|
|
initialLogoIndices[category.name] = 0;
|
|
});
|
|
setLogoIndices(initialLogoIndices);
|
|
} catch (error) {
|
|
console.error("Error fetching categories:", error);
|
|
}
|
|
};
|
|
|
|
fetchCategories();
|
|
}, []);
|
|
|
|
const handleCategoryClick = (index: number) => {
|
|
setSelectedCategoryIndex(index);
|
|
setCurrentScripts(categories[index]?.scripts || []); // Update scripts for the selected category
|
|
};
|
|
|
|
const handleBackClick = () => {
|
|
setSelectedCategoryIndex(null);
|
|
setCurrentScripts([]); // Clear scripts when going back
|
|
};
|
|
|
|
const handleScriptClick = (scriptSlug: string) => {
|
|
router.push(`/scripts?id=${scriptSlug}`);
|
|
};
|
|
|
|
const navigateCategory = (direction: "prev" | "next") => {
|
|
if (selectedCategoryIndex !== null) {
|
|
const newIndex =
|
|
direction === "prev"
|
|
? (selectedCategoryIndex - 1 + categories.length) % categories.length
|
|
: (selectedCategoryIndex + 1) % categories.length;
|
|
setSelectedCategoryIndex(newIndex);
|
|
setCurrentScripts(categories[newIndex]?.scripts || []); // Update scripts for the new category
|
|
}
|
|
};
|
|
|
|
const switchLogos = (categoryName: string, direction: "prev" | "next") => {
|
|
setLogoIndices((prev) => {
|
|
const currentIndex = prev[categoryName] || 0;
|
|
const category = categories.find((cat) => cat.name === categoryName);
|
|
if (!category || !category.scripts) return prev;
|
|
|
|
const totalLogos = category.scripts.length;
|
|
const newIndex =
|
|
direction === "prev"
|
|
? (currentIndex - MAX_LOGOS + totalLogos) % totalLogos
|
|
: (currentIndex + MAX_LOGOS) % totalLogos;
|
|
|
|
return { ...prev, [categoryName]: newIndex };
|
|
});
|
|
};
|
|
|
|
const truncateDescription = (text: string) => {
|
|
return text.length > MAX_DESCRIPTION_LENGTH
|
|
? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...`
|
|
: text;
|
|
};
|
|
|
|
const renderResources = (script: any) => {
|
|
const cpu = script.install_methods[0]?.resources.cpu;
|
|
const ram = script.install_methods[0]?.resources.ram;
|
|
const hdd = script.install_methods[0]?.resources.hdd;
|
|
|
|
const resourceParts = [];
|
|
if (cpu) resourceParts.push(<span key="cpu"><b>CPU:</b> {cpu}vCPU</span>);
|
|
if (ram) resourceParts.push(<span key="ram"><b>RAM:</b> {ram}MB</span>);
|
|
if (hdd) resourceParts.push(<span key="hdd"><b>HDD:</b> {hdd}GB</span>);
|
|
|
|
return resourceParts.length > 0 ? (
|
|
<div className="text-sm text-gray-400">
|
|
{resourceParts.map((part, index) => (
|
|
<React.Fragment key={index}>
|
|
{part}
|
|
{index < resourceParts.length - 1 && " | "}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 mt-20">
|
|
{categories.length === 0 && (
|
|
<p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
|
|
)}
|
|
{selectedCategoryIndex !== null ? (
|
|
<div>
|
|
{/* Header with Navigation */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigateCategory("prev")}
|
|
className="p-2"
|
|
>
|
|
<ChevronLeft className="h-6 w-6" />
|
|
</Button>
|
|
<h2 className="text-3xl font-semibold">{categories[selectedCategoryIndex].name}</h2>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigateCategory("next")}
|
|
className="p-2"
|
|
>
|
|
<ChevronRight className="h-6 w-6" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Scripts Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
|
{currentScripts
|
|
.sort((a, b) => a.name.localeCompare(b.name))
|
|
.map((script) => (
|
|
<Card
|
|
key={script.name}
|
|
className="p-4 cursor-pointer"
|
|
onClick={() => handleScriptClick(script.slug)}
|
|
>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="flex justify-between">
|
|
<h3 className="text-lg font-bold script-text">{script.name}</h3>
|
|
{formattedBadge(script.type || "misc")}
|
|
</div>
|
|
<p className="text-sm text-gray-500">
|
|
<b>Created at:</b> {script.date_created || "No date available"}
|
|
</p>
|
|
<p
|
|
className="text-sm text-gray-700 hover:text-gray-900"
|
|
title={script.description || "No description available."}
|
|
>
|
|
{truncateDescription(script.description || "No description available.")}
|
|
</p>
|
|
<img
|
|
src={script.logo || defaultLogo}
|
|
alt={script.name || "Script logo"}
|
|
className="h-16 w-16 object-contain mx-auto mt-4"
|
|
/>
|
|
{renderResources(script)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Back to Categories Button */}
|
|
<div className="mt-8 text-center">
|
|
<Button
|
|
variant="default"
|
|
onClick={handleBackClick}
|
|
className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition"
|
|
>
|
|
Back to Categories
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{/* Categories Grid */}
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-semibold mb-4">Categories</h1>
|
|
<p className="text-sm text-gray-500">
|
|
{categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)} Total scripts
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
|
|
{categories.map((category, index) => (
|
|
<Card
|
|
key={category.name}
|
|
onClick={() => handleCategoryClick(index)}
|
|
className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6"
|
|
>
|
|
<CardContent className="flex flex-col items-center">
|
|
<h3 className="text-xl font-bold mb-4 category-title">{category.name}</h3>
|
|
<div className="flex justify-center items-center gap-2 mb-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
switchLogos(category.name, "prev");
|
|
}}
|
|
className="p-1"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
{category.scripts &&
|
|
category.scripts
|
|
.slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
|
|
.map((script, i) => (
|
|
<img
|
|
key={i}
|
|
src={script.logo || defaultLogo}
|
|
alt={script.name || "Script logo"}
|
|
title={script.name}
|
|
className="h-8 w-8 object-contain cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleScriptClick(script.slug);
|
|
}}
|
|
/>
|
|
))}
|
|
<Button
|
|
variant="ghost"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
switchLogos(category.name, "next");
|
|
}}
|
|
className="p-1"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<p className="text-sm text-gray-400 text-center">
|
|
{(category as any).description || "No description available."}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategoryView;
|