Update Frontedn (#3216)

frontend/src/app/api/versions/route.ts

@@ -0,0 +1,46 @@
+import { AppVersion } from "@/lib/types";
+import { error } from "console";
+import { promises as fs } from "fs";
+// import Error from "next/error";
+import { NextResponse } from "next/server";
+import path from "path";
+
+export const dynamic = "force-static";
+
+const jsonDir = "public/json";
+const versionsFileName = "versions.json";
+const encoding = "utf-8";
+
+const getVersions = async () => {
+  const filePath = path.resolve(jsonDir, versionsFileName);
+  const fileContent = await fs.readFile(filePath, encoding);
+  const versions: AppVersion[] = JSON.parse(fileContent);
+
+  const modifiedVersions = versions.map(version => {
+    const nameParts = version.name.split('/');
+    let newName = nameParts[nameParts.length - 1];
+    newName = newName.toLowerCase().replace(/[^a-z0-9]/g, '');
+    return { ...version, name: newName };
+  });
+
+  return modifiedVersions;
+};
+
+export async function GET() {
+  try {
+
+    const versions = await getVersions();
+    return NextResponse.json(versions);
+
+  } catch (error) {
+    console.error(error);
+    const err = error as globalThis.Error;
+    return NextResponse.json({
+      name: err.name,
+      message: err.message || "An unexpected error occurred",
+      version: "No version found - Error"
+    }, {
+      status: 500,
+    });
+  }
+}

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -1,7 +1,9 @@
-"use client";
+
 import { Separator } from "@/components/ui/separator";
 import { extractDate } from "@/lib/time";
-import { Script } from "@/lib/types";
+import { Script, AppVersion } from "@/lib/types";
+import { fetchVersions } from "@/lib/data";
+
 import { X } from "lucide-react";
 import Image from "next/image";
 
@@ -15,6 +17,8 @@ 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,
@@ -27,6 +31,23 @@ function ScriptItem({
     window.history.pushState({}, document.title, window.location.pathname);
     setSelectedScript(null);
   };
+  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));
+  }, []);
 
   const defaultInstallMethod = item.install_methods?.[0];
   const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
@@ -48,8 +69,8 @@ function ScriptItem({
                   src={item.logo || `/${basePath}/logo.png`}
                   width={400}
                   onError={(e) =>
-                    ((e.currentTarget as HTMLImageElement).src =
-                      `/${basePath}/logo.png`)
+                  ((e.currentTarget as HTMLImageElement).src =
+                    `/${basePath}/logo.png`)
                   }
                   height={400}
                   alt={item.name}
@@ -71,6 +92,13 @@ function ScriptItem({
                     <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, ''))?.version || "No Version Information found"}</p>
+                      </>)
+                    }
+                    </div>
                   </div>
                 </div>
               </div>

frontend/src/lib/data.ts

@@ -8,3 +8,11 @@ export const fetchCategories = async () => {
   const categories: Category[] = await response.json();
   return categories;
 };
+
+export const fetchVersions = async () => {
+  const response = await fetch(`api/versions`);
+  if (!response.ok) {
+      throw new Error(`Failed to fetch versions: ${response.statusText}`);
+  }
+  return response.json();
+};

frontend/src/lib/types.ts

@@ -55,4 +55,9 @@ export interface Version {
 export interface OperatingSystem {
   name: string;
   versions: Version[];
+}
+
+export interface AppVersion {
+  name: string;
+  version: string;
 }