107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import type {BlacklistItem} from "~/classes/blacklistItem";
|
|
import {List, Dialog, DialogContent, DialogTitle, ListItem, ListItemText, Divider} from "@mui/material";
|
|
|
|
function NicknameList({nicknames}: {nicknames: string[]|undefined}){
|
|
if (!nicknames){
|
|
return (<></>)
|
|
}
|
|
if (nicknames.length > 0){
|
|
return (
|
|
<>
|
|
<p>Nicknames:</p>
|
|
<List>
|
|
{nicknames.map((item) => {
|
|
return <ListItem className="report-nickname">{item}</ListItem>
|
|
})}
|
|
</List>
|
|
</>
|
|
)
|
|
} else {
|
|
return (<></>)
|
|
}
|
|
}
|
|
|
|
function CommentsList({comments}: {comments: string[]|undefined}){
|
|
if (!comments){
|
|
return (<></>)
|
|
}
|
|
if (comments.length > 0){
|
|
return (
|
|
<>
|
|
<p>Comments:</p>
|
|
<List>
|
|
{comments.map((item) => {
|
|
return <ListItem className="report-comment">{item}</ListItem>
|
|
})}
|
|
</List>
|
|
</>
|
|
)
|
|
} else {
|
|
return (<></>)
|
|
}
|
|
}
|
|
|
|
function Tag({tag, name}:{tag: number|undefined, name: string}){
|
|
let classColor = "report-tag-count-good";
|
|
if (tag){
|
|
if (tag <= 10){
|
|
classColor = "report-tag-count-good";
|
|
} else if (tag > 10 && tag <= 25) {
|
|
classColor = "report-tag-count-ok";
|
|
} else if (tag > 25 && tag <= 50) {
|
|
classColor = "report-tag-count-bad";
|
|
} else {
|
|
classColor = "report-tag-count-very-bad";
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="report-tag">
|
|
<span className={classColor}>{tag} </span>
|
|
<span>{name}</span>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function TagList({afk, cheater, griefer, toxic, useless, smurf}:{afk: number|undefined, cheater: number|undefined, griefer: number|undefined, toxic: number|undefined, useless: number|undefined, smurf: number|undefined}){
|
|
return (
|
|
<>
|
|
<div className="report-tag-list">
|
|
<Tag tag={afk} name={'AFK'}/>
|
|
<Tag tag={cheater} name={'Cheater'}/>
|
|
<Tag tag={griefer} name={'Griefer'}/>
|
|
<Tag tag={toxic} name={'Toxic'}/>
|
|
<Tag tag={useless} name={'Useless'}/>
|
|
<Tag tag={smurf} name={'Smurf'}/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={() => handleClose()}
|
|
>
|
|
<DialogTitle>
|
|
<p>{blacklistItem?.link}</p>
|
|
<TagList
|
|
afk={blacklistItem?.afk}
|
|
cheater={blacklistItem?.cheater}
|
|
griefer={blacklistItem?.griefer}
|
|
toxic={blacklistItem?.toxic}
|
|
useless={blacklistItem?.useless}
|
|
smurf={blacklistItem?.smurf}
|
|
/>
|
|
</DialogTitle>
|
|
<Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
|
|
<DialogContent>
|
|
<NicknameList nicknames={blacklistItem?.nicknames}/>
|
|
<CommentsList comments={blacklistItem?.comments}/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
} |