@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/widgets/RoutineStatistics.tsx

@@ -0,0 +1,249 @@
+import { FormControl, MenuItem, Select } from "@mui/material";
+import InputLabel from "@mui/material/InputLabel";
+import { SelectChangeEvent } from "@mui/material/Select";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import { Muscle } from "components/Exercises/models/muscle";
+import { GroupedLogData, LogData, RoutineStatsData } from "components/WorkoutRoutines/models/LogStats";
+import i18n from 'i18next';
+import React from "react";
+import { dateToLocale } from "utils/date";
+
+export const enum StatType {
+    Volume = "volume",
+    Sets = "sets",
+    Intensity = "intensity",
+}
+
+export const enum StatSubType {
+    Mesocycle = 'mesocycle',
+    Weekly = 'weekly',
+    Iteration = 'iteration',
+    Daily = 'daily'
+}
+
+export const enum StatGroupBy {
+    Exercises = 'exercises',
+    Muscles = 'muscles',
+    Total = 'total',
+}
+
+export interface DropdownOption {
+    value: string | number;
+    label: string;
+}
+
+interface DropdownProps {
+    label: string;
+    options: DropdownOption[];
+    value: string;
+    onChange: (event: SelectChangeEvent) => void;
+}
+
+interface FullStatsData {
+    headers: string[],
+    data: { key: string | number, values: (number | undefined)[] }[],
+    totals: { [p: string]: number }
+}
+
+
+export const StatsOptionDropdown: React.FC<DropdownProps> = ({ label, options, value, onChange }) => {
+
+    return (
+        <FormControl fullWidth>
+            <InputLabel id={`${label}-label`}>{label}</InputLabel>
+            <Select
+                labelId={`${label}-label`}
+                id={`${label}-select`}
+                value={value}
+                label={label}
+                onChange={onChange}
+            >
+                {options.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    );
+};
+
+export function getHumanReadableHeaders(exerciseList: Exercise[], language: Language, muscleList: Muscle[], groupBy: StatGroupBy, logData: LogData,) {
+    switch (groupBy) {
+        case StatGroupBy.Exercises: {
+            const exercises = Object.keys(logData.exercises).map(e => exerciseList.find(ex => ex.id === parseInt(e))?.getTranslation(language)?.name);
+            const exercisesIds = Object.keys(logData.exercises).map(Number);
+            return { headers: exercises as string[], data: exercisesIds.map(ex => logData.exercises[ex]) };
+        }
+        case StatGroupBy.Muscles: {
+            const muscles = Object.keys(logData.muscle).map(e => muscleList.find(m => m.id === parseInt(e))?.translatedName ?? '');
+            const musclesIds = Object.keys(logData.muscle).map(Number);
+            return { headers: muscles as string[], data: musclesIds.map(ms => logData.muscle[ms]) };
+
+        }
+        case StatGroupBy.Total:
+            return { headers: [i18n.t('total')], data: [logData.total] };
+
+        default:
+            return { headers: [], data: [] };
+    }
+}
+
+export const getFullStatsData = (
+    stats: RoutineStatsData,
+    selectedValueType: StatType,
+    selectedValueSubType: StatSubType,
+    selectedValueGroupBy: StatGroupBy,
+    exerciseList: Exercise[],
+    muscleList: Muscle[],
+    language: Language,
+): FullStatsData => {
+    const columnTotals: { [header: string]: number } = {};
+
+    const statsData = stats[selectedValueType];
+    let dataToDisplay: { key: string | number; values: (number | undefined)[] }[] = [];
+    let allHeaders: string[] = [];
+
+    const calculateStatsData = (groupBy: StatGroupBy, logData: LogData) => getHumanReadableHeaders(
+        exerciseList,
+        language,
+        muscleList,
+        groupBy,
+        logData
+    );
+
+
+    const getAllHeaders = (data: GroupedLogData) => {
+        let headers: string[] = [];
+
+        switch (selectedValueSubType) {
+            case StatSubType.Mesocycle:
+                headers = calculateStatsData(selectedValueGroupBy, statsData.mesocycle).headers;
+                break;
+            case StatSubType.Iteration:
+                for (const iteration in data.iteration) {
+                    headers = headers.concat(calculateStatsData(selectedValueGroupBy, data.iteration[iteration]).headers);
+                }
+                break;
+            case StatSubType.Weekly:
+                for (const week in data.weekly) {
+                    headers = headers.concat(calculateStatsData(selectedValueGroupBy, data.weekly[week]).headers);
+                }
+                break;
+            case StatSubType.Daily:
+                for (const date in data.daily) {
+                    headers = headers.concat(calculateStatsData(selectedValueGroupBy, data.daily[date]).headers);
+                }
+                break;
+        }
+
+        // Create a set to remove duplicate values
+        return [...new Set(headers)];
+    };
+    allHeaders = getAllHeaders(statsData);
+
+    // Initialize column totals
+    allHeaders.forEach(header => {
+        columnTotals[header] = 0;
+    });
+
+
+    /*
+     * Accumulates the totals within a loop
+     */
+    function calculateLoopSum(data: (number | undefined)[], logData: LogData) {
+        const values = allHeaders.map(header => data[calculateStatsData(selectedValueGroupBy, logData).headers.indexOf(header)]);
+
+        values.forEach((value, index) => {
+            if (value === undefined) {
+                return;
+            }
+
+            columnTotals[allHeaders[index]] += value;
+        });
+    }
+
+    //Data
+    switch (selectedValueSubType) {
+        case StatSubType.Mesocycle: {
+            const { data } = calculateStatsData(selectedValueGroupBy, statsData.mesocycle);
+
+            dataToDisplay = [{
+                key: i18n.t("total"),
+                values: allHeaders.map(header => data[allHeaders.indexOf(header)])
+            }];
+            break;
+        }
+        case StatSubType.Iteration: {
+            dataToDisplay = Object.entries(statsData.iteration).map(([iteration, logData]) => {
+                const { data } = calculateStatsData(selectedValueGroupBy, logData);
+                calculateLoopSum(data, logData);
+
+                return {
+                    key: `iteration ${iteration}`,
+                    values: allHeaders.map(header => data[calculateStatsData(selectedValueGroupBy, logData).headers.indexOf(header)])
+                };
+            });
+            break;
+        }
+        case StatSubType.Weekly: {
+            dataToDisplay = Object.entries(statsData.weekly).map(([week, logData]) => {
+                const { data } = calculateStatsData(selectedValueGroupBy, logData);
+                calculateLoopSum(data, logData);
+
+                return {
+                    key: `week ${week}`,
+                    values: allHeaders.map(header => data[calculateStatsData(selectedValueGroupBy, logData).headers.indexOf(header)])
+                };
+            });
+            break;
+        }
+        case StatSubType.Daily: {
+            dataToDisplay = Object.entries(statsData.daily).map(([date, logData]) => {
+                const { data } = calculateStatsData(selectedValueGroupBy, logData);
+                calculateLoopSum(data, logData);
+
+                return {
+                    key: dateToLocale(new Date(date)),
+                    values: allHeaders.map(header => data[calculateStatsData(selectedValueGroupBy, logData).headers.indexOf(header)])
+                };
+            });
+            break;
+        }
+    }
+
+    return { headers: allHeaders, data: dataToDisplay, totals: columnTotals };
+};
+
+interface StatsChartData {
+    name: string,
+    data: { category: string, value: number | undefined }[];
+}
+
+/*
+ * Converts the data from getFullStatsData to a format that can be directly
+ * used by the recharts library
+ */
+export function formatStatsData(fullStatsData: FullStatsData): StatsChartData[] {
+    const formattedData: StatsChartData[] = [];
+
+    fullStatsData.headers.forEach((header) => {
+        formattedData.push({ name: header, data: [] });
+    });
+
+    fullStatsData.data.forEach((row) => {
+        row.values.forEach((value, index) => {
+            const header = fullStatsData.headers[index];
+
+            if (header) {
+                formattedData.find(item => item.name === header)?.data.push({
+                    category: row.key.toString(),
+                    value: value
+                });
+            }
+        });
+    });
+
+    return formattedData;
+}

package/src/components/WorkoutRoutines/widgets/SlotDetails.test.tsx

@@ -0,0 +1,72 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { Slot } from 'components/WorkoutRoutines/models/Slot';
+import { SlotEntry } from "components/WorkoutRoutines/models/SlotEntry";
+import { SlotDetails } from 'components/WorkoutRoutines/widgets/SlotDetails';
+import React from 'react';
+import { testQueryClient } from "tests/queryClient";
+
+describe('SlotDetails Component', () => {
+
+    const slotEntry = new SlotEntry(
+            {
+                id: 1,
+                slotId: 1,
+                exerciseId: 1,
+                repetitionUnitId: 1,
+                repetitionRounding: 1,
+                weightUnitId: 1,
+                weightRounding: 1,
+                order: 1,
+                comment: 'test',
+                type: 'normal',
+                config: null
+            }
+        )
+    ;
+    const testSlot = new Slot({
+        id: 1,
+        dayId: 2,
+        order: 3,
+        comment: '',
+        config: null,
+        entries: [slotEntry]
+    });
+
+    test('renders only sets, weight, and reps fields in simpleMode', () => {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <SlotDetails slot={testSlot} routineId={1} simpleMode={true} />
+            </QueryClientProvider>
+        );
+
+        expect(screen.getByTestId('sets-field')).toBeInTheDocument();
+        expect(screen.getByTestId('sets-field')).toBeInTheDocument();
+        expect(screen.getByTestId('weight-field')).toBeInTheDocument();
+        expect(screen.getByTestId('reps-field')).toBeInTheDocument();
+
+        // Assert that other config fields are NOT rendered
+        expect(screen.queryByTestId('max-weight-field')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('max-reps-field')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('rir-field')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('rest-field')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('max-rest-field')).not.toBeInTheDocument();
+    });
+
+    test('renders all config fields when not in simpleMode', () => {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <SlotDetails slot={testSlot} routineId={1} simpleMode={false} />
+            </QueryClientProvider>
+        );
+
+        // Assert that all config fields are rendered
+        expect(screen.getByTestId('sets-field')).toBeInTheDocument();
+        expect(screen.getByTestId('weight-field')).toBeInTheDocument();
+        expect(screen.getByTestId('max-weight-field')).toBeInTheDocument();
+        expect(screen.getByTestId('reps-field')).toBeInTheDocument();
+        expect(screen.getByTestId('max-reps-field')).toBeInTheDocument();
+        expect(screen.getByTestId('rest-field')).toBeInTheDocument();
+        expect(screen.getByTestId('max-rest-field')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/widgets/SlotDetails.tsx

@@ -0,0 +1,233 @@
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import EditIcon from "@mui/icons-material/Edit";
+import EditOffIcon from '@mui/icons-material/EditOff';
+import { Alert, AlertTitle, IconButton, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { useLanguageQuery } from "components/Exercises/queries";
+import { BaseConfig } from "components/WorkoutRoutines/models/BaseConfig";
+import { Slot } from "components/WorkoutRoutines/models/Slot";
+import { SlotEntry } from "components/WorkoutRoutines/models/SlotEntry";
+import { useDeleteSlotEntryQuery, useEditSlotEntryQuery } from "components/WorkoutRoutines/queries";
+import {
+    ConfigDetailsRiRField,
+    SlotBaseConfigValueField
+} from "components/WorkoutRoutines/widgets/forms/BaseConfigForm";
+import {
+    SlotEntryRepetitionUnitField,
+    SlotEntryTypeField,
+    SlotEntryWeightUnitField
+} from "components/WorkoutRoutines/widgets/forms/SlotEntryForm";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getLanguageByShortName } from "services";
+import { ExerciseSearchResponse } from "services/responseType";
+
+/*
+ * Converts a number to an alphabetic string, useful for counting
+ */
+function toAlphabetic(num: number) {
+    let result = "";
+    while (num > 0) {
+        num--; // Adjust for 0-based index
+        result = String.fromCharCode(97 + (num % 26)) + result;
+        num = Math.floor(num / 26);
+    }
+    return result;
+}
+
+const configTypes = ["weight", "max-weight", "reps", "max-reps", "max-sets", "sets", "rest", "max-rest", "rir"] as const;
+type ConfigType = typeof configTypes[number];
+
+const getConfigComponent = (type: ConfigType, configs: BaseConfig[], routineId: number, slotEntryId: number) => {
+    return configs.length > 0
+        ?
+        <SlotBaseConfigValueField
+            config={configs[0]}
+            type={type}
+            routineId={routineId} />
+
+        : <SlotBaseConfigValueField
+            type={type}
+            routineId={routineId}
+            slotEntryId={slotEntryId} />
+        ;
+};
+
+export const SlotDetails = (props: { slot: Slot, routineId: number, simpleMode: boolean }) => {
+    const { t } = useTranslation();
+
+    return (<>
+        {props.slot.entries.length === 0 && (
+            <Alert severity="warning">
+                <AlertTitle>{t('routines.setHasNoExercises')}</AlertTitle>
+                {t('nothingHereYetAction')}
+            </Alert>
+        )}
+        {props.slot.entries.map((slotEntry: SlotEntry, index) => (
+            <SlotEntryDetails
+                key={slotEntry.id}
+                slotEntry={slotEntry}
+                routineId={props.routineId}
+                simpleMode={props.simpleMode}
+                index={index}
+                total={props.slot.entries.length}
+            />
+        ))}
+    </>);
+};
+
+export const SlotEntryDetails = (props: {
+    slotEntry: SlotEntry,
+    routineId: number,
+    simpleMode: boolean,
+    index: number,
+    total: number
+}) => {
+    const { t, i18n } = useTranslation();
+
+    const [editExercise, setEditExercise] = useState(false);
+    const toggleEditExercise = () => setEditExercise(!editExercise);
+
+    const languageQuery = useLanguageQuery();
+    const editSlotEntryQuery = useEditSlotEntryQuery(props.routineId);
+    const deleteSlotEntryQuery = useDeleteSlotEntryQuery(props.routineId);
+
+    const isPending = editSlotEntryQuery.isPending || deleteSlotEntryQuery.isPending;
+
+    const handleExerciseChange = (searchResponse: ExerciseSearchResponse | null) => {
+        if (searchResponse === null) {
+            return;
+        }
+
+        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { exerciseId: searchResponse.data.base_id }));
+        setEditExercise(false);
+    };
+
+    let language = undefined;
+    if (languageQuery.isSuccess) {
+        language = getLanguageByShortName(
+            i18n.language,
+            languageQuery.data!
+        );
+    }
+
+    const getForm = () => (props.simpleMode
+            ? <React.Fragment>
+                <Grid
+                    key={`sets-config-${props.slotEntry.id}`}
+                    size={{ xs: 12, sm: 2, }}>
+                    {getConfigComponent('sets', props.slotEntry.nrOfSetsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid
+                    key={`weight-config-${props.slotEntry.id}`}
+                    size={{ xs: 12, sm: 3 }}>
+                    {getConfigComponent('weight', props.slotEntry.weightConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid
+                    key={`reps-config-${props.slotEntry.id}`}
+                    size={{ xs: 12, sm: 3 }}>
+                    {getConfigComponent('reps', props.slotEntry.repetitionsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+            </React.Fragment>
+
+            // Show all config details in advanced mode, also in a grid
+            : <React.Fragment>
+
+                <Grid size={{ xs: 6, sm: 1 }}>
+                    {getConfigComponent('sets', props.slotEntry.nrOfSetsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 6, sm: 1 }}>
+                    {getConfigComponent('max-sets', props.slotEntry.maxNrOfSetsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 6, sm: 2 }}>
+                    <SlotEntryTypeField routineId={props.routineId} slotEntry={props.slotEntry} />
+                </Grid>
+                <Grid size={{ xs: 12, sm: 2 }}>
+                    <ConfigDetailsRiRField
+                        routineId={props.routineId}
+                        config={props.slotEntry.rirConfigs.length > 0 ? props.slotEntry.rirConfigs[0] : undefined}
+                        slotEntryId={props.slotEntry.id!}
+                    />
+                </Grid>
+
+                <Grid size={{ xs: 6, sm: 1 }}>
+                    {getConfigComponent('rest', props.slotEntry.restTimeConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 6, sm: 1 }}>
+                    {getConfigComponent('max-rest', props.slotEntry.maxRestTimeConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+
+
+                <Grid size={{ xs: 6, sm: 2 }} offset={{ sm: 4 }}>
+                    {getConfigComponent('weight', props.slotEntry.weightConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 6, sm: 2 }}>
+                    {getConfigComponent('max-weight', props.slotEntry.maxWeightConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 12, sm: 4 }}>
+                    <SlotEntryWeightUnitField slotEntry={props.slotEntry} routineId={props.routineId} />
+                </Grid>
+
+
+                <Grid size={{ xs: 6, sm: 2 }} offset={{ sm: 4 }}>
+                    {getConfigComponent('reps', props.slotEntry.repetitionsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 6, sm: 2 }}>
+                    {getConfigComponent('max-reps', props.slotEntry.maxRepetitionsConfigs, props.routineId, props.slotEntry.id!)}
+                </Grid>
+                <Grid size={{ xs: 12, sm: 4 }}>
+                    <SlotEntryRepetitionUnitField slotEntry={props.slotEntry} routineId={props.routineId} />
+                </Grid>
+
+            </React.Fragment>
+    );
+
+    const counter = props.total > 1 ? toAlphabetic(props.index + 1) + ') ' : '';
+
+    return (
+        (<React.Fragment>
+            <Grid container paddingTop={1} spacing={1}>
+                <Grid size={{ xs: 3, sm: 1 }} alignContent={"center"}>
+                    {/*<IconButton size={"small"} onClick={toggleEditExercise} disabled={true}>*/}
+                    {/*    <DragHandle />*/}
+                    {/*</IconButton>*/}
+                    <IconButton size={"small"} onClick={toggleEditExercise} disabled={isPending}>
+                        {editExercise ? <EditOffIcon /> : <EditIcon />}
+                    </IconButton>
+                    <IconButton
+                        size={"small"}
+                        onClick={() => deleteSlotEntryQuery.mutate(props.slotEntry.id!)}
+                        disabled={isPending}
+                    >
+                        <DeleteIcon />
+                    </IconButton>
+                </Grid>
+
+                <Grid size={{ xs: 9, sm: 3 }} alignContent={"center"}>
+                    <Typography variant={"body1"}>
+                        {counter} {props.slotEntry.exercise?.getTranslation(language).name}
+                    </Typography>
+                </Grid>
+
+                {editExercise
+                    && <React.Fragment>
+                        <Grid size={{ xs: 12, sm: 8 }}>
+                            <NameAutocompleter callback={handleExerciseChange} />
+                        </Grid>
+                        <Grid size={{ xs: 12, sm: 4 }} />
+                    </React.Fragment>
+                }
+
+                {props.slotEntry.hasProgressionRules
+                    ? <Grid size={8}>
+                        <Alert severity="info" variant="standard" sx={{ mt: 2 }}>
+                            {t('routines.exerciseHasProgression')}
+                        </Alert>
+                    </Grid>
+                    : getForm()
+                }
+            </Grid>
+        </React.Fragment>)
+    );
+};