mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 23:59:35 +05:00
feat: add dependencies resolution for modrinth
This commit is contained in:
parent
50a1c8118e
commit
c517795725
GPG key ID:
858E8EE696525EED
6 changed files with 431 additions and 138 deletions
|
|
@ -1,18 +1,15 @@
|
|||
import { MOD_ENDPOINT } from "@/api/ENDPOINTS";
|
||||
import { Mod } from "@/types/mod";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeadCell,
|
||||
TableRow,
|
||||
} from "flowbite-react";
|
||||
import { Button } from "flowbite-react";
|
||||
import { useState } from "react";
|
||||
import { HiDownload, HiTrash } from "react-icons/hi";
|
||||
import { toast } from "react-toastify";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionPanel,
|
||||
AccordionTitle,
|
||||
} from "flowbite-react";
|
||||
|
||||
export const ModTable = (props: {
|
||||
mods: Mod[];
|
||||
|
|
@ -20,7 +17,13 @@ export const ModTable = (props: {
|
|||
packID: string;
|
||||
downloadMods: (mods: string[]) => void;
|
||||
}) => {
|
||||
const [selectedMods, setSelectedMods] = useState<string[]>([]);
|
||||
function bytesToSize(bytes) {
|
||||
var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||
if (bytes == 0) return "n/a";
|
||||
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
||||
if (i == 0) return bytes + " " + sizes[i];
|
||||
return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
|
||||
}
|
||||
|
||||
async function deleteMod(slug: string, title: string) {
|
||||
if (!window) return;
|
||||
|
|
@ -41,144 +44,151 @@ export const ModTable = (props: {
|
|||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
const deselect = selectedMods.length == props.mods.length;
|
||||
console.log(selectedMods.length, props.mods.length, deselect);
|
||||
if (deselect) {
|
||||
setSelectedMods([]);
|
||||
return;
|
||||
}
|
||||
props.mods.forEach((item) => {
|
||||
if (!selectedMods.includes(item.slug)) {
|
||||
setSelectedMods((state) => [item.slug, ...state]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleCheckbox(slug: string) {
|
||||
if (!selectedMods.includes(slug)) {
|
||||
setSelectedMods((state) => [slug, ...state]);
|
||||
} else {
|
||||
const newArray = selectedMods.map((i) => i);
|
||||
const idx = newArray.findIndex((item) => item == slug);
|
||||
newArray.splice(idx, 1);
|
||||
setSelectedMods(newArray);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSelectedMods() {
|
||||
await fetch(MOD_ENDPOINT("deleteModBulk", props.packID), {
|
||||
method: "POST",
|
||||
body: JSON.stringify(selectedMods),
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
accept: "application/json",
|
||||
},
|
||||
});
|
||||
setSelectedMods([]);
|
||||
props.updatePack();
|
||||
if (!props.mods || props.mods.length == 0) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<Table hoverable>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeadCell className="p-4">
|
||||
<Checkbox
|
||||
checked={selectedMods.length == props.mods.length}
|
||||
onChange={() => selectAll()}
|
||||
/>
|
||||
</TableHeadCell>
|
||||
<TableHeadCell>Icon</TableHeadCell>
|
||||
<TableHeadCell>Title</TableHeadCell>
|
||||
<TableHeadCell>Version</TableHeadCell>
|
||||
<TableHeadCell>Developer</TableHeadCell>
|
||||
<TableHeadCell>Source</TableHeadCell>
|
||||
<TableHeadCell>Source URL</TableHeadCell>
|
||||
<TableHeadCell>
|
||||
<span className="sr-only">Actions</span>
|
||||
</TableHeadCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody className="divide-y">
|
||||
{props.mods &&
|
||||
props.mods.length > 0 &&
|
||||
props.mods.map((mod) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={`mod-${mod.slug}`}
|
||||
className="bg-white dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<TableCell className="p-4">
|
||||
<Checkbox
|
||||
checked={selectedMods.includes(mod.slug)}
|
||||
onChange={() => {
|
||||
handleCheckbox(mod.slug);
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img alt="" src={mod.icon} className="w-8 h-8 rounded-lg" />
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
||||
{mod.title}
|
||||
</TableCell>
|
||||
<TableCell>{mod.file.version}</TableCell>
|
||||
<TableCell>{mod.developers.join(", ")}</TableCell>
|
||||
<TableCell>{mod.source}</TableCell>
|
||||
<TableCell>{mod.url}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => props.downloadMods([mod.slug])}
|
||||
>
|
||||
Download <HiDownload className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
color={"red"}
|
||||
size="sm"
|
||||
onClick={() => deleteMod(mod.slug, mod.title)}
|
||||
>
|
||||
Delete <HiTrash className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
<TableRow className="bg-white dark:bg-[#374151] hover:bg-white! hover:dark:bg-[#374151]! dark:border-gray-700">
|
||||
<TableCell className="p-4"></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Accordion>
|
||||
{props.mods.map((mod) => {
|
||||
return (
|
||||
<AccordionPanel key={`mod-${mod.slug}`}>
|
||||
<AccordionTitle>
|
||||
<div className="flex gap-2 items-center text-2xl">
|
||||
<img alt="" src={mod.icon} className="w-8 h-8 rounded-lg" />
|
||||
{mod.title} ({mod.slug})
|
||||
</div>
|
||||
</AccordionTitle>
|
||||
<AccordionContent>
|
||||
<div className="flex gap-8 flex-wrap">
|
||||
<div className="flex gap-2 flex-col">
|
||||
<div>
|
||||
<p className="font-semibold text-xl">Developers</p>
|
||||
{mod.developers.join(", ")}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-xl">Source</p>
|
||||
<p>
|
||||
<span className="font-semibold">title:</span> {mod.source}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">id:</span>{" "}
|
||||
{mod.project_id}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">link:</span> {mod.url}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-xl">Version info</p>
|
||||
<p>
|
||||
<span className="font-semibold">filename:</span>{" "}
|
||||
{mod.file.filename}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">version:</span>{" "}
|
||||
{mod.file.version}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">file size:</span>{" "}
|
||||
{bytesToSize(mod.file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-xl">Environment</p>
|
||||
{mod.environment.client && <p>client</p>}
|
||||
{mod.environment.server && <p>server</p>}
|
||||
{mod.environment.client && mod.environment.server && (
|
||||
<p>client & server</p>
|
||||
)}
|
||||
{/* <p>
|
||||
<span className="font-semibold">filename:</span>{" "}
|
||||
{mod.file.filename}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">version:</span>{" "}
|
||||
{mod.file.version}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">file size:</span>{" "}
|
||||
{bytesToSize(mod.file.size)}
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="font-semibold text-xl">Hashes</p>
|
||||
{Object.entries(mod.file.hashes).map((hash) => {
|
||||
return (
|
||||
<p
|
||||
key={`mod-${mod.slug}-hash-${hash[0]}`}
|
||||
className="wrap-break-word"
|
||||
>
|
||||
<span className="font-semibold">{hash[0]}:</span>{" "}
|
||||
{hash[1]}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{mod.dependencies.length > 0 ? (
|
||||
<div className="mt-2">
|
||||
<p className="font-semibold text-xl mb-1">Dependencies</p>
|
||||
<div className="flex gap-2 overflow-x-auto overflow-y-hidden">
|
||||
{mod.dependencies.map((dep) => {
|
||||
return (
|
||||
<div
|
||||
key={`mod-${mod.slug}-dep-${dep.slug}`}
|
||||
className="bg-[#f3f4f6] dark:bg-[#1f2937] p-4 rounded-lg"
|
||||
>
|
||||
<div className="flex gap-2 items-center text-xl">
|
||||
<img
|
||||
alt=""
|
||||
src={dep.icon}
|
||||
className="w-6 h-6 rounded-lg"
|
||||
/>
|
||||
{dep.title} ({dep.slug})
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<p>
|
||||
<span className="font-semibold">filename:</span>{" "}
|
||||
{dep.file.filename}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">version:</span>{" "}
|
||||
{dep.file.version}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">file size:</span>{" "}
|
||||
{bytesToSize(dep.file.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="flex justify-end w-full gap-2 mt-4">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={selectedMods.length == 0}
|
||||
onClick={() => props.downloadMods(selectedMods)}
|
||||
onClick={() => props.downloadMods([mod.slug])}
|
||||
>
|
||||
Download Selected <HiDownload className="ml-2 h-4 w-4" />
|
||||
Download <HiDownload className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
color={"red"}
|
||||
size="sm"
|
||||
disabled={selectedMods.length == 0}
|
||||
onClick={() => deleteSelectedMods()}
|
||||
onClick={() => deleteMod(mod.slug, mod.title)}
|
||||
>
|
||||
Delete Selected <HiTrash className="ml-2 h-4 w-4" />
|
||||
Delete <HiTrash className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
234
gui/app/components/_ModTable.tsx
Normal file
234
gui/app/components/_ModTable.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import { MOD_ENDPOINT } from "@/api/ENDPOINTS";
|
||||
import { Mod } from "@/types/mod";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeadCell,
|
||||
TableRow,
|
||||
} from "flowbite-react";
|
||||
import { useState } from "react";
|
||||
import { HiDownload, HiTrash } from "react-icons/hi";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export const ModTable = (props: {
|
||||
mods: Mod[];
|
||||
updatePack: () => void;
|
||||
packID: string;
|
||||
downloadMods: (mods: string[]) => void;
|
||||
}) => {
|
||||
const [selectedMods, setSelectedMods] = useState<string[]>([]);
|
||||
|
||||
async function deleteMod(slug: string, title: string) {
|
||||
if (!window) return;
|
||||
if (window.confirm(`Delete mod ${title}?`)) {
|
||||
const res = await fetch(MOD_ENDPOINT("deleteMod", props.packID, slug));
|
||||
const data = await res.json();
|
||||
|
||||
if (data.status != "ok") {
|
||||
toast.error(data.message, {
|
||||
autoClose: 2500,
|
||||
closeOnClick: true,
|
||||
draggable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
props.updatePack();
|
||||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
const deselect = selectedMods.length == props.mods.length;
|
||||
console.log(selectedMods.length, props.mods.length, deselect);
|
||||
if (deselect) {
|
||||
setSelectedMods([]);
|
||||
return;
|
||||
}
|
||||
props.mods.forEach((item) => {
|
||||
if (!selectedMods.includes(item.slug)) {
|
||||
setSelectedMods((state) => [item.slug, ...state]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleCheckbox(slug: string) {
|
||||
if (!selectedMods.includes(slug)) {
|
||||
setSelectedMods((state) => [slug, ...state]);
|
||||
} else {
|
||||
const newArray = selectedMods.map((i) => i);
|
||||
const idx = newArray.findIndex((item) => item == slug);
|
||||
newArray.splice(idx, 1);
|
||||
setSelectedMods(newArray);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSelectedMods() {
|
||||
await fetch(MOD_ENDPOINT("deleteModBulk", props.packID), {
|
||||
method: "POST",
|
||||
body: JSON.stringify(selectedMods),
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
accept: "application/json",
|
||||
},
|
||||
});
|
||||
setSelectedMods([]);
|
||||
props.updatePack();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<Table hoverable>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeadCell className="p-4">
|
||||
<Checkbox
|
||||
checked={selectedMods.length == props.mods.length}
|
||||
onChange={() => selectAll()}
|
||||
/>
|
||||
</TableHeadCell>
|
||||
<TableHeadCell>Icon</TableHeadCell>
|
||||
<TableHeadCell>Title</TableHeadCell>
|
||||
<TableHeadCell>Version</TableHeadCell>
|
||||
<TableHeadCell>Developer</TableHeadCell>
|
||||
<TableHeadCell>Source</TableHeadCell>
|
||||
<TableHeadCell>Source URL</TableHeadCell>
|
||||
<TableHeadCell>
|
||||
<span className="sr-only">Actions</span>
|
||||
</TableHeadCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody className="divide-y">
|
||||
{props.mods &&
|
||||
props.mods.length > 0 &&
|
||||
props.mods.map((mod) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow
|
||||
key={`mod-${mod.slug}`}
|
||||
className="bg-white dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<TableCell className="p-4">
|
||||
<Checkbox
|
||||
checked={selectedMods.includes(mod.slug)}
|
||||
onChange={() => {
|
||||
handleCheckbox(mod.slug);
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
alt=""
|
||||
src={mod.icon}
|
||||
className="w-8 h-8 rounded-lg"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
||||
{mod.title}
|
||||
</TableCell>
|
||||
<TableCell>{mod.file.version}</TableCell>
|
||||
<TableCell>{mod.developers.join(", ")}</TableCell>
|
||||
<TableCell>{mod.source}</TableCell>
|
||||
<TableCell>{mod.url}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => props.downloadMods([mod.slug])}
|
||||
>
|
||||
Download <HiDownload className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
color={"red"}
|
||||
size="sm"
|
||||
onClick={() => deleteMod(mod.slug, mod.title)}
|
||||
>
|
||||
Delete <HiTrash className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{mod.dependencies &&
|
||||
mod.dependencies.length > 0 &&
|
||||
mod.dependencies.map((dep) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={`mod-${mod.slug}-dep-${dep.slug}`}
|
||||
className="bg-white dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<TableCell className="p-4"></TableCell>
|
||||
<TableCell>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
alt=""
|
||||
src={dep.icon}
|
||||
className="w-8 h-8 rounded-lg"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
||||
{dep.title}
|
||||
</TableCell>
|
||||
<TableCell>{dep.file.version}</TableCell>
|
||||
<TableCell>{dep.developers.join(", ")}</TableCell>
|
||||
<TableCell>{dep.source}</TableCell>
|
||||
<TableCell>{dep.url}</TableCell>
|
||||
<TableCell>
|
||||
{/* <div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => props.downloadMods([mod.slug])}
|
||||
>
|
||||
Download <HiDownload className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
color={"red"}
|
||||
size="sm"
|
||||
onClick={() => deleteMod(mod.slug, mod.title)}
|
||||
>
|
||||
Delete <HiTrash className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div> */}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
<TableRow className="bg-white dark:bg-[#374151] hover:bg-white! hover:dark:bg-[#374151]! dark:border-gray-700">
|
||||
<TableCell className="p-4"></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={selectedMods.length == 0}
|
||||
onClick={() => props.downloadMods(selectedMods)}
|
||||
>
|
||||
Download Selected <HiDownload className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
color={"red"}
|
||||
size="sm"
|
||||
disabled={selectedMods.length == 0}
|
||||
onClick={() => deleteSelectedMods()}
|
||||
>
|
||||
Delete Selected <HiTrash className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue