25593340855

Committed 09 May 2026 05:49AM UTC coverage: 78.152% (-0.04%) from 78.195%

Build # 25593340855

Build Type

push

github

Committed by

rolandgeider

Commit Message

Show the image form when uploading new images from the exercise detail page

Coverage Stats

2227 of 3137 branches covered (70.99%)

Branch coverage included in aggregate %.

5 of 14 new or added lines in 1 file covered. (35.71%)

24 existing lines in 4 files now uncovered.

4827 of 5889 relevant lines covered (81.97%)

31.59 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.82

/src/components/Exercises/forms/ImageStyle.tsx

import LandscapeIcon from '@mui/icons-material/Landscape';
import LandscapeOutlinedIcon from '@mui/icons-material/LandscapeOutlined';
import LandscapeTwoToneIcon from '@mui/icons-material/LandscapeTwoTone';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
import { Checkbox, FormControlLabel, Stack, Typography } from "@mui/material";
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { ImageStyle } from "@/components/Exercises/models/image";
import { useField } from "formik";
import * as React from 'react';
import { useTranslation } from "react-i18next";

export function ImageStyleToggle(props: { fieldName: string }) {
    const [t] = useTranslation();

    const [field, , helpers] = useField(props.fieldName);
    const selectedStyle = (field.value !== undefined && field.value !== null && field.value !== '')
        ? Number(field.value)
        : undefined;
    const [style, setStyle] = React.useState<number | undefined>(selectedStyle);

    const handleAlignment = (
        event: React.MouseEvent<HTMLElement>,
        newStyle: number | null,
    ) => {
        if (newStyle === null) {
          return;
        }
        helpers.setValue(newStyle);
        setStyle(newStyle);
    };

    return (
        <ToggleButtonGroup
            value={style}
            exclusive
            fullWidth
            onChange={handleAlignment}
            aria-label="text alignment"
        >
            <ToggleButton value={ImageStyle.PHOTO}>
                <Stack sx={{ justifyContent: "center", alignItems: "center" }}>
                    <PhotoCameraIcon />
                    <Typography variant="caption">{t('exercises.imageStylePhoto')}</Typography>
                </Stack>
            </ToggleButton>

            <ToggleButton value={ImageStyle.THREE_D}>
                <Stack sx={{ justifyContent: "center", alignItems: "center" }}>
                    <LandscapeIcon />
                    <Typography variant="caption">{t('exercises.imageStyle3D')}</Typography>
                </Stack>
            </ToggleButton>

            <ToggleButton value={ImageStyle.LINE_ART}>
                <Stack sx={{ justifyContent: "center", alignItems: "center" }}>
                    <LandscapeOutlinedIcon />
                    <Typography variant="caption">{t('exercises.imageStyleLine')}</Typography>
                </Stack>
            </ToggleButton>

            <ToggleButton value={ImageStyle.LOW_POLY}>
                <Stack sx={{ justifyContent: "center", alignItems: "center" }}>
                    <LandscapeTwoToneIcon />
                    <Typography variant="caption">{t('exercises.imageStyleLowPoly')}</Typography>
                </Stack>
            </ToggleButton>

            <ToggleButton value={ImageStyle.OTHER}>
                <Stack sx={{ justifyContent: "center", alignItems: "center" }}>
                    <MoreHorizIcon />
                    <Typography variant="caption">{t('exercises.imageStyleOther')}</Typography>
                </Stack>
            </ToggleButton>
        </ToggleButtonGroup>
    );
}

export function ImageIsAiCheckbox(props: { fieldName: string }) {
    const [t] = useTranslation();
    const [field, , helpers] = useField<boolean>(props.fieldName);

    return (
        <FormControlLabel
            control={
                <Checkbox
                    name={props.fieldName}
                    checked={!!field.value}
                    onChange={(e) => helpers.setValue(e.target.checked)}
                    data-testid="image-is-ai-checkbox"
                />
            }
            label={t('exercises.imageIsAiGenerated')}
        />
    );
}

1	import LandscapeIcon from '@mui/icons-material/Landscape';	22✔
2	import LandscapeOutlinedIcon from '@mui/icons-material/LandscapeOutlined';
3	import LandscapeTwoToneIcon from '@mui/icons-material/LandscapeTwoTone';
4	import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
5	import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
6	import { Checkbox, FormControlLabel, Stack, Typography } from "@mui/material";
7	import ToggleButton from '@mui/material/ToggleButton';
8	import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
9	import { ImageStyle } from "@/components/Exercises/models/image";
10	import { useField } from "formik";
11	import * as React from 'react';
12	import { useTranslation } from "react-i18next";
13
14	export function ImageStyleToggle(props: { fieldName: string }) {
15	const [t] = useTranslation();	246✔
16
17	const [field, , helpers] = useField(props.fieldName);	246✔
18	const selectedStyle = (field.value !== undefined && field.value !== null && field.value !== '')	246!
19	? Number(field.value)
20	: undefined;
21	const [style, setStyle] = React.useState<number \| undefined>(selectedStyle);	246✔
22
23	const handleAlignment = (	246✔
24	event: React.MouseEvent<HTMLElement>,
25	newStyle: number \| null,
26	) => {
27	if (newStyle === null) {	1!
28	return;	×
29	}
30	helpers.setValue(newStyle);	1✔
31	setStyle(newStyle);	1✔
32	};
33
34	return (	246✔
35	<ToggleButtonGroup
36	value={style}
37	exclusive
38	fullWidth
39	onChange={handleAlignment}
40	aria-label="text alignment"
41	>
42	<ToggleButton value={ImageStyle.PHOTO}>
43	<Stack sx={{ justifyContent: "center", alignItems: "center" }}>
44	<PhotoCameraIcon />
45	<Typography variant="caption">{t('exercises.imageStylePhoto')}</Typography>
46	</Stack>
47	</ToggleButton>
48
49	<ToggleButton value={ImageStyle.THREE_D}>
50	<Stack sx={{ justifyContent: "center", alignItems: "center" }}>
51	<LandscapeIcon />
52	<Typography variant="caption">{t('exercises.imageStyle3D')}</Typography>
53	</Stack>
54	</ToggleButton>
55
56	<ToggleButton value={ImageStyle.LINE_ART}>
57	<Stack sx={{ justifyContent: "center", alignItems: "center" }}>
58	<LandscapeOutlinedIcon />
59	<Typography variant="caption">{t('exercises.imageStyleLine')}</Typography>
60	</Stack>
61	</ToggleButton>
62
63	<ToggleButton value={ImageStyle.LOW_POLY}>
64	<Stack sx={{ justifyContent: "center", alignItems: "center" }}>
65	<LandscapeTwoToneIcon />
66	<Typography variant="caption">{t('exercises.imageStyleLowPoly')}</Typography>
67	</Stack>
68	</ToggleButton>
69
70	<ToggleButton value={ImageStyle.OTHER}>
71	<Stack sx={{ justifyContent: "center", alignItems: "center" }}>
72	<MoreHorizIcon />
73	<Typography variant="caption">{t('exercises.imageStyleOther')}</Typography>
74	</Stack>
75	</ToggleButton>
76	</ToggleButtonGroup>
77	);
78	}
79
80	export function ImageIsAiCheckbox(props: { fieldName: string }) {
81	const [t] = useTranslation();	246✔
82	const [field, , helpers] = useField<boolean>(props.fieldName);	246✔
83
84	return (	246✔
85	<FormControlLabel
86	control={
87	<Checkbox
88	name={props.fieldName}
89	checked={!!field.value}
UNCOV 90	onChange={(e) => helpers.setValue(e.target.checked)}	×
91	data-testid="image-is-ai-checkbox"
92	/>
93	}
94	label={t('exercises.imageIsAiGenerated')}
95	/>
96	);
97	}

wger-project / react / 25593340855

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous