Добавил форму отправки репорта

2026-05-10 10:21:54 +08:00 · 2026-05-10 10:21:54 +08:00 · 28abdf40f5
parent f186279ee6
commit 28abdf40f5
5 changed files with 214 additions and 3 deletions
--- a/app/api.ts
+++ b/app/api.ts
@ -1,6 +1,7 @@
 import axios, {type AxiosResponse} from "axios";
 import {ResponseError} from "~/classes/responseError";
 import {BlacklistItem} from "~/classes/blacklistItem";
+import type {BlacklistReport} from "~/classes/blacklistReport";

 const apiUrl = import.meta.env.VITE_API_URL;
 const instance = axios.create({
@ -43,3 +44,11 @@ export async function getAll(searchText?: string): Promise<BlacklistItem[] | Res
    });
    return result;
 }
+
+export async function sendReport(blacklistReport: BlacklistReport){
+    return await instance.post('/blacklist/create', blacklistReport).then(() => {
+        return true;
+    }).catch(() => {
+        return false;
+    });
+}
--- a/app/assets/mui/themes/home.ts
+++ b/app/assets/mui/themes/home.ts
@ -24,6 +24,10 @@ const customTheme = (outerTheme: Theme) =>
                            color: 'var(--TextField-brandBorderColor)',
                            borderColor: 'var(--TextField-brandBorderColor)',
                        },
+                        '& textarea': {
+                            color: 'var(--TextField-brandBorderColor)',
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                        },
                    },
                },
            },
@ -58,13 +62,29 @@ const customTheme = (outerTheme: Theme) =>
                        '--TextField-brandBorderColor': '#E0E3E7',
                        '--variant-outlinedBorder': '#b5b5b5',
                        '--variant-containedBg': '#b5b5b5',
-                        '--variant-custom-textBg': 'rgba(246,246,248,0.06)',
+                        '--variant-custom-textBg': '#282c34',
                        color: 'var(--TextField-brandBorderColor)',
                        '&:hover': {
                            backgroundColor: 'var(--variant-custom-textBg)',
                            borderColor: 'var(--variant-custom-textBg)',
                            boxShadow: 'none',
                        },
+                    },
+                    contained: {
+                        '--TextField-brandBorderColor': '#E0E3E7',
+                        '--contained-custom-textBg': '#282c34',
+                        color: 'var(--contained-custom-textBg)',
+                        backgroundColor: 'var(--TextField-brandBorderColor)',
+                        borderColor: 'var(--TextField-brandBorderColor)',
+                        borderRadius: '4px',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        '&:hover': {
+                            backgroundColor: 'var(--contained-custom-textBg)',
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                            color: 'var(--TextField-brandBorderColor)',
+                            boxShadow: 'none',
+                        },
                    }
                }
            },
--- a/app/classes/blacklistReport.ts
+++ b/app/classes/blacklistReport.ts
@ -0,0 +1,23 @@
+export class BlacklistReport {
+    steam_link: string;
+    steam_nickname: string;
+    comment: string;
+    afk: boolean;
+    cheater: boolean;
+    griefer: boolean;
+    toxic: boolean;
+    useless: boolean;
+    smurf: boolean;
+
+    constructor(steam_link: string, steam_nickname: string, comment: string, afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean, smurf: boolean) {
+        this.steam_link = steam_link;
+        this.steam_nickname = steam_nickname;
+        this.comment = comment;
+        this.afk = afk;
+        this.cheater = cheater;
+        this.griefer = griefer;
+        this.toxic = toxic;
+        this.useless = useless;
+        this.smurf = smurf;
+    }
+}
--- a/app/components/reportDialog.tsx
+++ b/app/components/reportDialog.tsx
@ -0,0 +1,148 @@
+import type {BlacklistItem} from "~/classes/blacklistItem";
+import {
+    Button,
+    Checkbox,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    FormControlLabel,
+    TextField
+} from "@mui/material";
+import {useState} from "react";
+import TitleHeader from "~/components/itemDialog/titleHeader";
+import {BlacklistReport} from "~/classes/blacklistReport";
+import {sendReport} from '~/api';
+
+export default function ReportDialog({ open, handleClose }: { open: boolean, handleClose: Function }){
+
+    const [link, setLink] = useState('');
+    const [nickname, setNickname] = useState('');
+    const [comment, setComment] = useState('');
+    const [afk, setAfk] = useState(false);
+    const [cheater, setCheater] = useState(false);
+    const [griefer, setGriefer] = useState(false);
+    const [toxic, setToxic] = useState(false);
+    const [useless, setUseless] = useState(false);
+    const [smurf, setSmurf] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const clearValues = () => {
+        setLink('');
+        setNickname('');
+        setComment('');
+        setAfk(false);
+        setCheater(false);
+        setGriefer(false);
+        setToxic(false);
+        setUseless(false);
+        setSmurf(false);
+    };
+
+    const handleSend = async () => {
+        setLoading(true);
+        let blacklistReport = new BlacklistReport(
+            link,
+            nickname,
+            comment,
+            afk,
+            cheater,
+            griefer,
+            toxic,
+            useless,
+            smurf
+        );
+        await sendReport(blacklistReport).then((result: boolean) => {
+            setLoading(true);
+            clearValues();
+            handleClose();
+        });
+    };
+
+    return (
+        <>
+            <Dialog
+                open={open}
+                onClose={() => handleClose()}
+            >
+                <DialogTitle>
+                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose}/>
+                </DialogTitle>
+                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
+                <DialogContent>
+                    <TextField
+                        id="steam-link-field"
+                        label="Steam profile link"
+                        variant="outlined"
+                        value={link}
+                        onChange={(e) => setLink(e.target.value)}
+                        fullWidth
+                        sx={{marginBottom: '20px'}}
+                    />
+                    <TextField
+                        id="steam-nickname-field"
+                        label="Steam profile nickname"
+                        variant="outlined"
+                        value={nickname}
+                        onChange={(e) => setNickname(e.target.value)}
+                        fullWidth
+                        sx={{marginBottom: '20px'}}
+                    />
+                    <TextField
+                        id="steam-comment-field"
+                        label="Your comment"
+                        variant="outlined"
+                        value={comment}
+                        onChange={(e) => setComment(e.target.value)}
+                        fullWidth
+                        multiline
+                        minRows={4}
+                        sx={{marginBottom: '20px', color: '#E0E3E7'}}
+                    />
+                    <div style={{display: 'flex', flexDirection: 'column'}}>
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={afk}
+                            onChange={(e) => setAfk((e.target as HTMLInputElement).checked)}
+                            label="AFK"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={cheater}
+                            onChange={(e) => setCheater((e.target as HTMLInputElement).checked)}
+                            label="Cheater"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={griefer}
+                            onChange={(e) => setGriefer((e.target as HTMLInputElement).checked)}
+                            label="Griefer"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={toxic}
+                            onChange={(e) => setToxic((e.target as HTMLInputElement).checked)}
+                            label="Toxic"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={useless}
+                            onChange={(e) => setUseless((e.target as HTMLInputElement).checked)}
+                            label="Useless"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                            checked={smurf}
+                            onChange={(e) => setSmurf((e.target as HTMLInputElement).checked)}
+                            label="Smurf"
+                        />
+                    </div>
+                    <div style={{width: '100%', display: 'flex', justifyContent: 'space-around'}}>
+                        <Button onClick={() => handleSend()} variant="contained">Send</Button>
+                        <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@ -14,6 +14,7 @@ import {ResponseError} from "~/classes/responseError";
 import ItemList from "~/components/itemList";
 import ItemDialog from "~/components/itemDialog";
 import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
+import ReportDialog from "~/components/reportDialog";

 export default function Home() {
    const outerTheme = useTheme();
@ -24,6 +25,7 @@ export default function Home() {
    const [showDialog, setShowDialog] = useState(false);
    const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
    const [fabIsHovered, setFabIsHovered] = useState(false);
+    const [showReportDialog, setReportShowDialog] = useState(false);

    useEffect(() => {
        let isIgnore = false;
@ -42,7 +44,7 @@ export default function Home() {
        return () => {
            isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован
        };
-    }, [searchText]);
+    }, [searchText, showReportDialog]);

    function handleSearch(text: string) {
        setSearchText(text);
@ -50,7 +52,6 @@ export default function Home() {

    function handleItemClick(item: BlacklistItem){
        setCurrentDialogBlacklistItem(item);
-        console.log(item);
        setShowDialog(true);
    }

@ -58,6 +59,14 @@ export default function Home() {
        setShowDialog(false);
    };

+    const handleReportDialogOpen = () => {
+        setReportShowDialog(true);
+    };
+
+    const handleReportDialogClose = () => {
+        setReportShowDialog(false);
+    };
+
    return (
        <ThemeProvider theme={customTheme(outerTheme)}>
            <div className="bg-dark">
@ -76,7 +85,9 @@ export default function Home() {
                </div>
                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
+                <ReportDialog open={showReportDialog} handleClose={handleReportDialogClose}/>
                <Fab
+                    onClick={() => handleReportDialogOpen()}
                    onMouseEnter={() => setFabIsHovered(true)}
                    onMouseLeave={() => setFabIsHovered(false)}
                    variant={fabIsHovered ? 'extended' : 'circular'}