feature: переработал качества в рейтинг качеств

app/api.ts

@@ -13,15 +13,15 @@ const getReportData = (data: AxiosResponse<any, any, {}>): BlacklistItem[] => {
     let blacklistItems: BlacklistItem[] = [];
     for (const [key, value] of Object.entries(result)) {
         let blacklistItem: BlacklistItem = new BlacklistItem(
-            value.link,
+            value.blacklistItem.link,
-            value.nicknames,
+            value.blacklistItem.nicknames,
-            value.comments,
+            value.blacklistItem.comments,
-            value.afk,
+            value.blacklistItem.afk,
-            value.cheater,
+            value.blacklistItem.cheater,
-            value.griefer,
+            value.blacklistItem.griefer,
-            value.toxic,
+            value.blacklistItem.toxic,
-            value.useless,
+            value.blacklistItem.useless,
-            value.smurf
+            value.blacklistItem.smurf
         );
         blacklistItems.push(blacklistItem);
     }

app/assets/mui/themes/home.ts

@@ -117,6 +117,17 @@ const customTheme = (outerTheme: Theme) =>
                         },
                     }
                 }
+            },
+            MuiRating: {
+                styleOverrides: {
+                    root: {
+
+                    },
+                    iconEmpty: {
+                        color: '#E0E3E7',
+                        opacity: 0.5,
+                    }
+                }
             }
         }
     });

app/assets/styles/home.css

@@ -49,9 +49,14 @@
     border: 1px solid var(--main-color);
     color: var(--main-color);
     margin-right: 10px;
+    > .report-rating {
+        display: flex;
+        align-items: center;
+    }
     &:hover {
         border: 1px solid var(--hover-color);
         color: var(--hover-color);
+        > .report-rating {
             > .report-tag-count-good {
                 color: var(--tag-color-good);
             }
@@ -65,6 +70,7 @@
                 color: var(--tag-color-very-bad);
             }
         }
+    }
 }
 
 .report-tag-list {
@@ -101,6 +107,11 @@
     color: #6F7E8C;
 }
 
+.qualities-header {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+}
+
 
 @media (width <= 570px) {
 
@@ -111,6 +122,9 @@
     }
 
     .report-tag {
+        > .report-rating {
+            display: flex;
+            align-items: center;
             > .report-tag-count-good {
                 color: var(--tag-color-good);
             }
@@ -124,6 +138,7 @@
                 color: var(--tag-color-very-bad);
             }
         }
+    }
 
     .dialog-window {
         max-width: 95%;
@@ -138,4 +153,8 @@
     .title-header-link {
         text-decoration: underline;
     }
+
+    .qualities-header {
+        font-size: 1.2rem!important;
+    }
 }

app/classes/blacklistReport.ts

@@ -2,14 +2,14 @@ export class BlacklistReport {
     steam_link: string;
     steam_nickname: string;
     comment: string;
-    afk: boolean;
+    afk: number;
-    cheater: boolean;
+    cheater: number;
-    griefer: boolean;
+    griefer: number;
-    toxic: boolean;
+    toxic: number;
-    useless: boolean;
+    useless: number;
-    smurf: boolean;
+    smurf: number;
 
-    constructor(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: number, cheater: number, griefer: number, toxic: number, useless: number, smurf: number) {
         this.steam_link = steam_link;
         this.steam_nickname = steam_nickname;
         this.comment = comment;

app/components/itemDialog/tag.tsx

@@ -1,22 +1,34 @@
+import {Rating} from "@mui/material";
+
 export default function Tag({tag, name}:{tag: number|undefined, name: string}){
     let classColor = "report-tag-count-good";
+    console.log(tag);
     if (tag){
         if (tag < 2){
             classColor = "report-tag-count-good";
-        } else if (tag >= 2 && tag <= 4) {
+        } else if (tag >= 2 && tag <= 3) {
             classColor = "report-tag-count-ok";
-        } else if (tag > 4 && tag <= 10) {
+        } else if (tag > 3 && tag <= 4) {
             classColor = "report-tag-count-bad";
         } else {
             classColor = "report-tag-count-very-bad";
         }
     }
+    console.log(classColor);
 
     return (
         <>
             <div className="report-tag">
-                <span className={classColor}>{tag} </span>
+                <span>{name}</span><br/>
-                <span>{name}</span>
+                <div className="report-rating">
+                    <span style={{marginRight: "5px", marginLeft: "5px"}} className={classColor}>{tag}</span>
+                    <Rating
+                        readOnly
+                        defaultValue={0}
+                        value={tag}
+                        precision={0.5}
+                    />
+                </div>
             </div>
         </>
     )

app/components/itemList.tsx

@@ -17,13 +17,13 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
                 <div className="list-container">
                     <div className="item-list">
                         {blacklistItems.map((item) => {
-                            let summary = item.afk + item.cheater + item.griefer + item.toxic + item.useless + item.smurf;
+                            let summary = (item.afk + item.cheater + item.griefer + item.toxic + item.useless + item.smurf) / 6;
                             let color = 'rgb(255 255 255 / 17%)';
-                            if (summary < 2){
+                            if (summary < 1){
                                 color = 'rgba(48,255,0,0.1)';
-                            } else if (summary >= 2 && summary <= 4) {
+                            } else if (summary >= 1 && summary <= 2) {
                                 color = 'rgba(255,235,0,0.1)';
-                            } else if (summary > 4 && summary <= 10) {
+                            } else if (summary > 2 && summary <= 3) {
                                 color = 'rgba(255,136,0,0.1)';
                             } else {
                                 color = 'rgba(255,0,0,0.1)';

app/components/reportDialog.tsx

@@ -1,41 +1,48 @@
 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';
+import QualityItem from "~/components/reportDialog/qualityItem";
+import {
+    afkLabels,
+    cheaterLabels,
+    grieferLabels,
+    smurfLabels,
+    toxicLabels,
+    uselessLabels
+} from "~/collections/qualityRatingLabelText";
 
 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 [afk, setAfk] = useState(0);
-    const [cheater, setCheater] = useState(false);
+    const [cheater, setCheater] = useState(0);
-    const [griefer, setGriefer] = useState(false);
+    const [griefer, setGriefer] = useState(0);
-    const [toxic, setToxic] = useState(false);
+    const [toxic, setToxic] = useState(0);
-    const [useless, setUseless] = useState(false);
+    const [useless, setUseless] = useState(0);
-    const [smurf, setSmurf] = useState(false);
+    const [smurf, setSmurf] = useState(0);
     const [loading, setLoading] = useState(false);
 
     const clearValues = () => {
         setLink('');
         setNickname('');
         setComment('');
-        setAfk(false);
+        setAfk(0);
-        setCheater(false);
+        setCheater(0);
-        setGriefer(false);
+        setGriefer(0);
-        setToxic(false);
+        setToxic(0);
-        setUseless(false);
+        setUseless(0);
-        setSmurf(false);
+        setSmurf(0);
     };
 
     const handleSend = async () => {
@@ -52,12 +59,12 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
             cleanLink,
             nickname,
             comment,
-            afk,
+            afk * 2,
-            cheater,
+            cheater * 2,
-            griefer,
+            griefer * 2,
-            toxic,
+            toxic * 2,
-            useless,
+            useless * 2,
-            smurf
+            smurf * 2
         );
 
         await sendReport(blacklistReport).then((result: boolean) => {
@@ -108,42 +115,13 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
                         sx={{marginBottom: '20px', color: '#E0E3E7'}}
                     />
                     <div style={{display: 'flex', flexDirection: 'column'}}>
-                        <FormControlLabel
+                        <span className="qualities-header" style={{fontSize: "1.5rem", marginBottom: "10px"}}>Rate the player's negative qualities on a scale of 0 to 5</span>
-                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
+                        <QualityItem name={"AFK"} value={afk} setValue={setAfk} labels={afkLabels}/>
-                            checked={afk}
+                        <QualityItem name={"Cheater"} value={cheater} setValue={setCheater} labels={cheaterLabels}/>
-                            onChange={(e) => setAfk((e.target as HTMLInputElement).checked)}
+                        <QualityItem name={"Griefer"} value={griefer} setValue={setGriefer} labels={grieferLabels}/>
-                            label="AFK"
+                        <QualityItem name={"Toxic"} value={toxic} setValue={setToxic} labels={toxicLabels}/>
-                        />
+                        <QualityItem name={"Useless"} value={useless} setValue={setUseless} labels={uselessLabels}/>
-                        <FormControlLabel
+                        <QualityItem name={"Smurf"} value={smurf} setValue={setSmurf} labels={smurfLabels}/>
-                            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 className="report-dialog-actions" style={{}}>
                         <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>