SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

возможность выбрать и корректно отправить пол

Browse Source
This commit is contained in:
Nastya 2025-06-08 22:56:22 +03:00
parent 61c0357adc
commit 918b6bf145
4 changed files with 64 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/auditory.ts
View File

@ -7,14 +7,19 @@ const API_URL = `${process.env.REACT_APP_DOMAIN}/squiz`;
export interface AuditoryItem {
id: number;
quiz_id: number;
sex: boolean;
sex: number; // 0 - женский, 1 - мужской, 2 - оба
age: string;
deleted: boolean;
created_at: number;
}
export interface AuditoryResponse {
data: AuditoryItem[];
ID: number;
quiz_id: number;
sex: number;
age: string;
deleted: boolean;
created_at: number;
}
// Request Types
@ -27,7 +32,7 @@ export interface AuditoryDeleteRequest {
}
export interface AuditoryAddRequest {
sex: boolean;
sex: number;
age: string;
}

2
src/pages/PersonalizationAI/AuditoryLink.tsx
View File

@ -75,7 +75,7 @@ export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkP
}} />
</IconButton>
<IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
<TooltipClickInfo title={`Пол: ${item.sex ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
<TooltipClickInfo title={`Пол: ${item.sex === 0 ? "женский" : item.sex === 1 ? "мужской" : "оба"} \n Возраст: ${item.age}`} />
</IconButton>
<IconButton
edge="end"

63
src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
View File

@ -1,6 +1,7 @@
import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, useTheme, Button, useMediaQuery } from "@mui/material";
import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material";
import CheckboxIcon from "@icons/Checkbox";
import AgeInputWithSelect from "./AgeInputWithSelect";
import { useState } from "react";
interface GenderAndAgeSelectorProps {
gender: string;
@ -23,6 +24,33 @@ export default function GenderAndAgeSelector({
}: GenderAndAgeSelectorProps) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(845));
const [maleChecked, setMaleChecked] = useState(false);
const [femaleChecked, setFemaleChecked] = useState(false);
const handleGenderChange = (type: 'male' | 'female', checked: boolean) => {
if (type === 'male') {
setMaleChecked(checked);
} else {
setFemaleChecked(checked);
}
// Обновляем значение gender в родительском компоненте
if (type === 'male' && checked && !femaleChecked) {
onGenderChange('1'); // Только мужской
} else if (type === 'female' && checked && !maleChecked) {
onGenderChange('0'); // Только женский
} else if (type === 'male' && checked && femaleChecked) {
onGenderChange('2'); // Оба пола
} else if (type === 'female' && checked && maleChecked) {
onGenderChange('2'); // Оба пола
} else if (type === 'male' && !checked && femaleChecked) {
onGenderChange('0'); // Только женский
} else if (type === 'female' && !checked && maleChecked) {
onGenderChange('1'); // Только мужской
} else {
onGenderChange(''); // Ничего не выбрано
}
};
return (
<Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
@ -43,18 +71,15 @@ export default function GenderAndAgeSelector({
}}
component="legend">Пол</FormLabel>
</Box>
<RadioGroup
<Box
sx={{
width: "155px",
justifyContent: "space-between",
mt: "20px",
ml: "-9px"
ml: "-9px",
display: 'flex',
gap: '10px'
}}
row
aria-label="gender"
name="row-radio-buttons-group"
value={gender}
onChange={(e) => onGenderChange(e.target.value)}
>
<FormControlLabel
sx={{
@ -81,8 +106,14 @@ export default function GenderAndAgeSelector({
},
m: 0,
}}
value="male"
control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
control={
<Checkbox
icon={<CheckboxIcon />}
checkedIcon={<CheckboxIcon checked />}
checked={maleChecked}
onChange={(e) => handleGenderChange('male', e.target.checked)}
/>
}
label="М"
/>
<FormControlLabel
@ -109,11 +140,17 @@ export default function GenderAndAgeSelector({
},
m: 0,
}}
value="female"
control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
control={
<Checkbox
icon={<CheckboxIcon />}
checkedIcon={<CheckboxIcon checked />}
checked={femaleChecked}
onChange={(e) => handleGenderChange('female', e.target.checked)}
/>
}
label="Ж"
/>
</RadioGroup>
</Box>
</FormControl>
<FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">

7
src/pages/PersonalizationAI/PersonalizationAI.tsx
View File

@ -25,6 +25,8 @@ export default function PersonalizationAI() {
const [isStartCreate, setStartCreate] = useState(false);
const [gender, setGender] = useState<string>('');
console.log("gender")
console.log(gender)
const [age, setAge] = useState<string>('');
const [ageError, setAgeError] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
@ -58,7 +60,7 @@ export default function PersonalizationAI() {
const [result, error] = await auditoryAdd({
quizId: quiz.backendId,
body: {
sex: gender === "male",
sex: parseInt(gender),
age
}
});
@ -72,9 +74,10 @@ export default function PersonalizationAI() {
handleAdd({
id: result.ID,
quiz_id: quiz.backendId,
sex: gender === "male",
sex: parseInt(gender),
age,
deleted: false,
created_at: Date.now()
});
enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
resetForm();