TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-02-01 16:31:50 +00:00
Code Activity

Update page.tsx

Browse Source
This commit is contained in:
CanbiZ 2025-01-23 10:35:07 +01:00
parent 7fb7ac3bfb
commit ad2ea710a4
1 changed files with 11 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/app/category-view/page.tsx
View File

@ -3,68 +3,28 @@
import React, { useEffect, useState } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Category, Script } from "@/lib/types";
import { Category } from "@/lib/types";
const CategoryView = () => {
const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
useEffect(() => {
const fetchCategoriesAndScripts = async () => {
const fetchCategories = async () => {
try {
const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : ""; // Dynamischer Basis-Pfad
// Kategorien laden
const categoriesResponse = await fetch(`${basePath}/json/metadata.json`);
if (!categoriesResponse.ok) {
const response = await fetch("/api/categories");
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const metadata = await categoriesResponse.json();
console.log("Raw metadata:", metadata); // Debugging
if (!metadata.categories) {
throw new Error("Invalid metadata structure: categories missing");
}
const categories = metadata.categories.map((category: Category) => ({
...category,
scripts: [],
}));
// Skripte laden
const scriptsResponse = await fetch(`${basePath}/json`);
if (!scriptsResponse.ok) {
throw new Error("Failed to fetch scripts");
}
const scriptsList = await scriptsResponse.json();
const scripts: Script[] = await Promise.all(
scriptsList
.filter((file: string) => file.endsWith(".json") && file !== "metadata.json")
.map(async (file: string) => {
const scriptResponse = await fetch(`${basePath}/json/${file}`);
if (scriptResponse.ok) {
return await scriptResponse.json();
}
return null;
})
).then((results) => results.filter((script) => script !== null));
// Kategorien und Skripte verknüpfen
categories.forEach((category: Category) => {
category.scripts = scripts.filter((script: Script) =>
script.categories.includes(category.id)
);
});
console.log("Parsed categories with scripts:", categories); // Debugging
setCategories(categories);
const data = await response.json();
console.log("Fetched categories:", data); // Debugging
setCategories(data);
} catch (error) {
console.error("Error fetching categories and scripts:", error);
console.error("Error fetching categories:", error);
}
};
fetchCategoriesAndScripts();
fetchCategories();
}, []);
const handleCategoryClick = (category: Category) => {
@ -78,7 +38,7 @@ const CategoryView = () => {
return (
<div className="p-4">
{categories.length === 0 && (
<p className="text-center text-gray-500">No categories available. Please check the JSON file.</p>
<p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
)}
{selectedCategory ? (
<div>
@ -89,7 +49,7 @@ const CategoryView = () => {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{selectedCategory.scripts
.sort((a, b) => a.name.localeCompare(b.name))
.map((script: Script) => (
.map((script) => (
<Card key={script.name}>
<CardContent>
<h3 className="text-lg font-medium">{script.name}</h3>