mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 07:39:35 +05:00
feat: start pack view page
This commit is contained in:
parent
e109b5393a
commit
bb9ccaa6f1
GPG key ID:
858E8EE696525EED
6 changed files with 173 additions and 36 deletions
|
|
@ -1,21 +1,26 @@
|
|||
"use client";
|
||||
|
||||
import { PACKS_ENDPOINT } from "@/api/ENDPOINTS";
|
||||
import { Pack } from "@/types/pack";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarItem,
|
||||
SidebarItemGroup,
|
||||
SidebarItems,
|
||||
} from "flowbite-react";
|
||||
import {
|
||||
// HiArrowSmRight,
|
||||
HiChartPie,
|
||||
HiPlusCircle
|
||||
// HiInbox,
|
||||
// HiShoppingBag,
|
||||
// HiTable,
|
||||
// HiUser,
|
||||
// HiViewBoards,
|
||||
} from "react-icons/hi";
|
||||
import { useEffect, useState } from "react";
|
||||
import { HiChartPie, HiPlusCircle } from "react-icons/hi";
|
||||
|
||||
export const Menu = () => {
|
||||
const [packsData, setPacksData] = useState<Pack[]>([]);
|
||||
useEffect(() => {
|
||||
async function _getPacksData() {
|
||||
const res = await fetch(PACKS_ENDPOINT("getPacks"));
|
||||
setPacksData(await res.json());
|
||||
}
|
||||
_getPacksData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Sidebar aria-label="Default sidebar example">
|
||||
<SidebarItems>
|
||||
|
|
@ -23,32 +28,20 @@ export const Menu = () => {
|
|||
<SidebarItem href="/" icon={HiChartPie}>
|
||||
Dashboard
|
||||
</SidebarItem>
|
||||
{packsData &&
|
||||
packsData.map((pack) => {
|
||||
return (
|
||||
<SidebarItem href={`/pack/?id=${pack._id}`} key={pack._id}>
|
||||
<p className="line-clamp-1">{pack.title}</p>
|
||||
<p className="text-sm text-gray-400 line-clamp-1">
|
||||
by {pack.author}
|
||||
</p>
|
||||
</SidebarItem>
|
||||
);
|
||||
})}
|
||||
<SidebarItem href="/pack/new" icon={HiPlusCircle}>
|
||||
New mod pack
|
||||
</SidebarItem>
|
||||
{/* <SidebarItem
|
||||
href="#"
|
||||
icon={HiViewBoards}
|
||||
label="Pro"
|
||||
labelColor="dark"
|
||||
>
|
||||
Kanban
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#" icon={HiInbox} label="3">
|
||||
Inbox
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#" icon={HiUser}>
|
||||
Users
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#" icon={HiShoppingBag}>
|
||||
Products
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#" icon={HiArrowSmRight}>
|
||||
Sign In
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#" icon={HiTable}>
|
||||
Sign Up
|
||||
</SidebarItem> */}
|
||||
</SidebarItemGroup>
|
||||
</SidebarItems>
|
||||
</Sidebar>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default function PackNew() {
|
|||
}
|
||||
|
||||
toast.update(tid, {render: data.message, type: "success", isLoading: false})
|
||||
router.push(`/pack/${data.id}`)
|
||||
router.push(`/pack/?id=${data.id}`)
|
||||
}
|
||||
|
||||
_submit();
|
||||
|
|
|
|||
119
gui/app/pack/page.tsx
Normal file
119
gui/app/pack/page.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
"use client";
|
||||
|
||||
import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
|
||||
import { Pack } from "@/types/pack";
|
||||
import { Button, Card, Spinner } from "flowbite-react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { HiDownload, HiTrash } from "react-icons/hi";
|
||||
|
||||
export default function PackPage() {
|
||||
const [packData, setPackData] = useState<Pack | null>(null);
|
||||
const [packDataLoading, setPackDataLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
const id = useSearchParams().get("id") || "";
|
||||
|
||||
useEffect(() => {
|
||||
async function _getPacksData() {
|
||||
const res = await fetch(PACK_ENDPOINT("getPack", id));
|
||||
if (!res.ok) router.push("/404");
|
||||
setPackData(await res.json());
|
||||
setPackDataLoading(false);
|
||||
}
|
||||
if (id) {
|
||||
_getPacksData();
|
||||
} else {
|
||||
router.push("/404");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleImageUpdate = (e: any) => {
|
||||
if (!packData || !window) return;
|
||||
|
||||
const file = e.target.files[0];
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onloadend = () => {
|
||||
const content = fileReader.result;
|
||||
fetch(`${PACK_ENDPOINT("editPackImage", packData._id)}`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
image: content,
|
||||
mimetype: file.type,
|
||||
}),
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
accept: "application/json",
|
||||
},
|
||||
}).then(() => location.reload());
|
||||
e.target.value = "";
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
function deletePack() {
|
||||
if (!packData || !window) return;
|
||||
|
||||
if (window.confirm(`Delete pack ${packData.title}?`)) {
|
||||
fetch(`${PACKS_ENDPOINT("deletePack", packData._id)}`);
|
||||
const ur = new URL(window.location.href)
|
||||
ur.searchParams.delete("id")
|
||||
ur.pathname = "/"
|
||||
window.location.href = ur.href
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{packDataLoading && (
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
)}
|
||||
{packData && (
|
||||
<div>
|
||||
<Card className="sticky top-0 left-0 right-0">
|
||||
<div className="flex gap-4 items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xl font-semibold">{packData.version}</p>
|
||||
<p className="text-sm text-gray-400">{packData.modloader}</p>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<label htmlFor="pack-icon" className="cursor-pointer">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
alt=""
|
||||
src={PACK_ENDPOINT("getPackImage", packData._id)}
|
||||
className="w-12 h-12 rounded-md"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
onChange={(e) => handleImageUpdate(e)}
|
||||
id="pack-icon"
|
||||
className="hidden"
|
||||
name="image"
|
||||
type="file"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xl font-semibold">{packData.title}</p>
|
||||
<p className="text-sm text-gray-400">by {packData.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button color={"red"} onClick={() => deletePack()}>
|
||||
Delete <HiTrash className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
<Button>
|
||||
Download <HiDownload className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@ export default function Home() {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
|
||||
{packsData.map((pack) => {
|
||||
return (
|
||||
<Link key={pack._id} href={`/pack/${pack._id}`}>
|
||||
<Link key={pack._id} href={`/pack/?id=${pack._id}`}>
|
||||
<Card>
|
||||
<div className="flex gap-2 items-center">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,25 @@
|
|||
import os
|
||||
import re
|
||||
from . import apiPack
|
||||
from flask import request, jsonify, send_file, redirect, url_for
|
||||
from flask import request, jsonify, send_file, redirect, url_for, abort
|
||||
from config import PACKS_FOLDER, IMG_ALLOWED_MIME
|
||||
from PIL import Image
|
||||
from io import BytesIO
|
||||
import base64
|
||||
import json
|
||||
|
||||
@apiPack.route("/<id>", methods=["GET"])
|
||||
def getPack(id):
|
||||
if not os.path.exists(f"{PACKS_FOLDER}/{id}/packfile.json"):
|
||||
return jsonify({"status": "error", "message": "not found"}), 404
|
||||
|
||||
pack = {}
|
||||
with open(f"{PACKS_FOLDER}/{id}/packfile.json") as fp:
|
||||
pack = json.load(fp)
|
||||
pack["_id"] = id
|
||||
fp.close()
|
||||
|
||||
return jsonify(pack)
|
||||
|
||||
@apiPack.route("/<id>/image", methods=["GET"])
|
||||
def getPackImage(id):
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ from . import apiPacks
|
|||
from flask import request, jsonify
|
||||
from config import PACKS_FOLDER
|
||||
import json
|
||||
import shutil
|
||||
|
||||
|
||||
@apiPacks.route("/all", methods=["GET"])
|
||||
|
|
@ -59,3 +60,14 @@ def createPack():
|
|||
"id": title,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@apiPacks.route("/<id>/delete", methods=["GET"])
|
||||
def deletePack(id):
|
||||
shutil.rmtree(f"{PACKS_FOLDER}/{id}")
|
||||
return jsonify(
|
||||
{
|
||||
"status": "ok",
|
||||
"message": f"pack deleted",
|
||||
}
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue