265 lines
8.5 KiB
TypeScript
265 lines
8.5 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { useRouter } from 'next/navigation'
|
|
import { getCookie } from "@/lib/utils"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover"
|
|
|
|
import type { deck, bset } from "@prisma/client";
|
|
|
|
interface bsetJson extends bset {
|
|
set_codes: string[],
|
|
icons: string[]
|
|
}
|
|
|
|
interface cardEntryAPIProps {
|
|
amount: number,
|
|
sanitized_name: string,
|
|
set: string
|
|
}
|
|
|
|
interface deckAPIProps {
|
|
name: string,
|
|
selected_bset: string,
|
|
commander_name: string,
|
|
cards: cardEntryAPIProps[]
|
|
}
|
|
|
|
export default function Signin() {
|
|
const [deckName, setDeckName] = useState("")
|
|
const [deckCommanderName, setDeckCommanderName] = useState("")
|
|
const [deckImporter, setDeckImporter] = useState("")
|
|
const [selectedBset, setSelectedBset] = useState("")
|
|
const [decks, setDecks] = useState<deck[]>([])
|
|
const [bsets, setBsets] = useState<bsetJson[]>([])
|
|
const [openSelectBset, setOpenSelectBset] = useState(false)
|
|
const router = useRouter()
|
|
const token = getCookie('JWT')
|
|
|
|
useEffect(() => {
|
|
if(getCookie('JWT') == "") {
|
|
router.refresh()
|
|
router.push('/')
|
|
}
|
|
|
|
fetch('http://localhost:3000/api/account/decks/', {
|
|
method: "GET",
|
|
headers: {Authorization: 'Bearer ' + token},
|
|
}).then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((apiData) => {
|
|
setDecks(apiData.data)
|
|
})
|
|
}
|
|
})
|
|
|
|
fetch('http://localhost:8072/misc/bsets.json').then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((data) => {
|
|
setBsets(data)
|
|
})
|
|
}
|
|
})
|
|
|
|
},[])
|
|
|
|
function getDataFromLine(line: string){
|
|
if(line != "") {
|
|
const values = line.split(" ")
|
|
if (values.length >= 4) {
|
|
const amount: number = parseInt(values.at(0)!.toString())
|
|
|
|
let set_index = 0
|
|
for(let i = 1; i < values.length; i++){
|
|
if(values.at(-i)!.toString().match(/\([A-Z]{3}\)/gm)){
|
|
set_index = -i
|
|
}
|
|
}
|
|
|
|
const set = values.at(set_index)!.toString().replace(/[()]/gm,"").toLowerCase()
|
|
const card_name = values.slice(1,set_index).join(" ").replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase()
|
|
const card_data : cardEntryAPIProps = {amount, sanitized_name: card_name, set}
|
|
return card_data
|
|
} else {
|
|
return null
|
|
}
|
|
} else {
|
|
return null
|
|
}
|
|
|
|
}
|
|
|
|
function deleteDeck(id:string){
|
|
fetch('http://localhost:3000/api/account/decks/delete', {
|
|
method: "DELETE",
|
|
headers: {Authorization: 'Bearer ' + token},
|
|
body: JSON.stringify({ id })
|
|
}).then((res) => {
|
|
if(res.status == 200) {
|
|
setDecks(old => old.filter((deck: deck) => deck.id != id))
|
|
}
|
|
})
|
|
}
|
|
|
|
function updateDeckInput(txt:string){
|
|
setDeckImporter(txt)
|
|
const lines = txt.split("\n")
|
|
setDeckCommanderName(lines[0])
|
|
}
|
|
|
|
function importDeck(){
|
|
const deckText = deckImporter
|
|
const lines = deckText.split("\n")
|
|
const dataToSend : deckAPIProps = { name: deckName, selected_bset: selectedBset.replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase() ,commander_name: getDataFromLine(deckCommanderName)!.sanitized_name, cards: [] }
|
|
lines.slice(1).forEach((line: string) => {
|
|
const data = getDataFromLine(line)
|
|
if(data != null) {
|
|
dataToSend.cards.push(data)
|
|
}
|
|
});
|
|
console.log(dataToSend)
|
|
|
|
|
|
fetch('http://localhost:3000/api/account/decks/create', {
|
|
method: "POST",
|
|
headers: {Authorization: 'Bearer ' + token},
|
|
body: JSON.stringify(dataToSend)
|
|
}).then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((apiData) => {
|
|
const new_deck: deck = apiData.data
|
|
setDecks(oldDecks => [...oldDecks, new_deck])
|
|
setDeckName("")
|
|
setDeckImporter("")
|
|
setSelectedBset("")
|
|
setDeckCommanderName("")
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center mt-24" >
|
|
<Card className="max-w-xl w-full">
|
|
<CardHeader>
|
|
<CardTitle>Importer un deck</CardTitle>
|
|
<CardDescription>Depuis moxfield</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<Label className="font-bold">Nom du deck</Label>
|
|
<Input value={deckName} onChange={(e) => setDeckName(e.target.value)} placeholder="Nom du deck" />
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Label className="font-bold">BSet selectionné</Label>
|
|
<Popover open={openSelectBset} onOpenChange={setOpenSelectBset}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={openSelectBset}
|
|
className="w-full justify-between"
|
|
>
|
|
{selectedBset
|
|
? bsets.find((bset: bset) => bset.sanitized_name === selectedBset)?.name
|
|
: "Selectionnez un Bset..."}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0">
|
|
<Command className="w-full">
|
|
<CommandInput placeholder="Search framework..." />
|
|
<CommandList>
|
|
<CommandEmpty>Pas de BSet trouvé.</CommandEmpty>
|
|
<CommandGroup>
|
|
{bsets.map((bset) => (
|
|
<CommandItem
|
|
key={bset.sanitized_name}
|
|
value={bset.sanitized_name}
|
|
onSelect={(currentValue) => {
|
|
setSelectedBset(currentValue === selectedBset ? "" : currentValue)
|
|
setOpenSelectBset(false)
|
|
}}
|
|
>
|
|
<div className="flex flex-row gap-2">
|
|
{bset.icons.map((icon) => (
|
|
<img key={icon} src={icon} className="h-3" loading="lazy" />
|
|
))}
|
|
</div>
|
|
{bset.name}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Label className="font-bold">Commandant</Label>
|
|
<Label className="text-xs">Correspond à la première ligne de l'import Moxfield</Label>
|
|
<Input value={deckCommanderName} placeholder="Commandant du Deck" disabled />
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Label className="font-bold">Liste des cartes</Label>
|
|
<Textarea value={deckImporter} onChange={(e) => updateDeckInput(e.target.value)} placeholder="Collez votre deck ici." className="h-60" />
|
|
</div>
|
|
<div className="flex flex-row w-full">
|
|
<Button onClick={importDeck}>Importer</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="max-w-3xl w-full mt-12">
|
|
<Table className="w-full">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{ decks.map((deck) => (
|
|
<TableRow key={deck.id}>
|
|
<TableCell>{deck.name}</TableCell>
|
|
<TableCell className="flex flex-row gap-4 items-center"><a href={"/deck/" + deck.id}>Voir la page</a><Button disabled>Editer</Button><Button onClick={() => {deleteDeck(deck.id)}} variant="destructive">Supprimer</Button></TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|