Skip to content

Commit 765b60f

Browse files
rolandgeiderrolandgeider
committed
More tweaks and polishing
1 parent 63b1cfb commit 765b60f

File tree

5 files changed

+63
-35
lines changed

5 files changed

+63
-35
lines changed

‎src/components/WorkoutRoutines/Detail/DayDetails.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,9 +252,13 @@ export const DayDetails = (props: { day: Day, routineId: number, simpleMode: boo
252252
<Box height={10} />
253253
<SlotDetails slot={slot} routineId={props.routineId} simpleMode={props.simpleMode} />
254254

255+
<Box height={20} />
255256
<ButtonGroup variant="outlined">
256257
<Button onClick={() => console.log("add superset")} size={"small"}>
257-
add superset
258+
(TODO) add set
259+
</Button>
260+
<Button onClick={() => console.log("add superset")} size={"small"}>
261+
(TODO) add superset
258262
</Button>
259263
<Button component={Link}
260264
size={"small"}
@@ -267,7 +271,6 @@ export const DayDetails = (props: { day: Day, routineId: number, simpleMode: boo
267271
</Button>
268272
</ButtonGroup>
269273

270-
<Box height={20} />
271274
<Divider sx={{ mt: 2, mb: 2 }} />
272275
</div>
273276
)}

‎src/components/WorkoutRoutines/Detail/RoutineDetailsTable.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const DayTableExercises = (props: { dayData: RoutineDayData[], iteration: number
8181
</TableHead>
8282
<TableBody>
8383
{props.dayData.map((dayData, index) =>
84-
<div key={`${props.iteration}-${index}`}>
84+
<React.Fragment key={`${props.iteration}-${index}`}>
8585
<TableRow key={`tableRow-rest-${index}`}>
8686
<TableCell sx={{ backgroundColor: theme.palette.action.hover }}>
8787
<b>{dayData.day === null || dayData.day.isRest ? t('routines.restDay') : dayData.day.name}</b>
@@ -91,11 +91,12 @@ const DayTableExercises = (props: { dayData: RoutineDayData[], iteration: number
9191

9292
{dayData.slots.map((slotData, slotIndex) =>
9393
// <div key={`${props.iteration}-${index}-${slotIndex}`}>
94-
<>
94+
<React.Fragment key={slotIndex}>
9595
{slotData.setConfigs.map((setConfig, index) => {
9696

9797
// Only show the name of the exercise the first time it appears
9898
const showExercise = index === 0 || setConfig.exerciseId !== slotData.setConfigs[index - 1]?.exerciseId;
99+
// const showExercise = true;
99100

100101
return <TableRow key={`tableRow-exercise-${index}`}>
101102
<TableCell
@@ -106,12 +107,12 @@ const DayTableExercises = (props: { dayData: RoutineDayData[], iteration: number
106107
</TableRow>;
107108
}
108109
)}
109-
</>
110+
</React.Fragment>
110111
)}
111112
<TableRow key={`tableRow-emtpy-${index}`}>
112113
<TableCell key={`tableCell-emtpy-${index}`}></TableCell>
113114
</TableRow>
114-
</div>
115+
</React.Fragment>
115116
)}
116117
</TableBody>
117118
</Table>
@@ -142,7 +143,7 @@ const DayTable = (props: { dayData: RoutineDayData[], iteration: number }) => {
142143
</TableHead>
143144
<TableBody>
144145
{props.dayData.map((dayData, index) =>
145-
<>
146+
<React.Fragment key={index}>
146147
<TableRow>
147148
<TableCell
148149
sx={{ backgroundColor: theme.palette.action.hover }}
@@ -151,10 +152,10 @@ const DayTable = (props: { dayData: RoutineDayData[], iteration: number }) => {
151152
&nbsp;
152153
</TableCell>
153154
</TableRow>
154-
{dayData.slots.map((slotData) =>
155-
<>
156-
{slotData.setConfigs.map((setConfig) =>
157-
<TableRow>
155+
{dayData.slots.map((slotData, index) =>
156+
<React.Fragment key={index}>
157+
{slotData.setConfigs.map((setConfig, indexConfig) =>
158+
<TableRow key={indexConfig}>
158159
<TableCell align={'center'}>
159160
{setConfig.nrOfSets === null ? '-/-' : setConfig.nrOfSets}
160161
</TableCell>
@@ -181,12 +182,12 @@ const DayTable = (props: { dayData: RoutineDayData[], iteration: number }) => {
181182
</TableCell>
182183
</TableRow>
183184
)}
184-
</>
185+
</React.Fragment>
185186
)}
186187
<TableRow>
187188
<TableCell colSpan={6}></TableCell>
188189
</TableRow>
189-
</>
190+
</React.Fragment>
190191
)}
191192
</TableBody>
192193
</Table>

‎src/components/WorkoutRoutines/Detail/RoutineEdit.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ export const RoutineEdit = () => {
4646
return <>
4747
<Container maxWidth="lg">
4848
<Grid container>
49-
<Grid xs={10}>
49+
<Grid item xs={10}>
5050
<Typography variant={"h4"}>
5151
Edit {routineQuery.data?.name}
5252
</Typography>
5353
</Grid>
54-
<Grid xs={2}>
54+
<Grid item xs={2}>
5555
<Button
5656
component={Link}
5757
variant={"outlined"}
@@ -61,13 +61,14 @@ export const RoutineEdit = () => {
6161
back to routine
6262
</Button>
6363
</Grid>
64+
<Grid item xs={12}>
65+
<FormControlLabel
66+
control={<Switch checked={simpleMode} onChange={() => setSimpleMode(!simpleMode)} />}
67+
label="Simple mode" />
68+
</Grid>
6469
</Grid>
6570

6671

67-
<FormControlLabel
68-
control={<Switch checked={simpleMode} onChange={() => setSimpleMode(!simpleMode)} />}
69-
label="Simple mode" />
70-
7172
<RoutineForm routine={routineQuery.data!} firstDayId={1000} />
7273

7374
<DayDragAndDropGrid

‎src/components/WorkoutRoutines/Detail/SlotDetails.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import EditIcon from "@mui/icons-material/Edit";
22
import EditOffIcon from '@mui/icons-material/EditOff';
33
import { Grid, IconButton, Typography } from "@mui/material";
44
import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
5+
import { useLanguageQuery } from "components/Exercises/queries";
56
import { BaseConfig } from "components/WorkoutRoutines/models/BaseConfig";
67
import { Slot } from "components/WorkoutRoutines/models/Slot";
78
import { SlotConfig } from "components/WorkoutRoutines/models/SlotConfig";
89
import { useEditSlotConfigQuery } from "components/WorkoutRoutines/queries";
910
import { ConfigDetailsValueField } from "components/WorkoutRoutines/widgets/forms/BaseConfigForm";
1011
import React, { useState } from "react";
12+
import { useTranslation } from "react-i18next";
13+
import { getLanguageByShortName } from "services";
1114
import { ExerciseSearchResponse } from "services/responseType";
1215

1316
const configTypes = ["weight", "max-weight", "reps", "max-reps", "sets", "rest", "max-rest", "rir"] as const;
@@ -45,10 +48,12 @@ export const SlotDetails = (props: { slot: Slot, routineId: number, simpleMode:
4548
};
4649

4750
export const SlotConfigDetails = (props: { slotConfig: SlotConfig, routineId: number, simpleMode: boolean }) => {
51+
const { i18n } = useTranslation();
4852

4953
const [editExercise, setEditExercise] = useState(false);
50-
5154
const toggleEditExercise = () => setEditExercise(!editExercise);
55+
56+
const languageQuery = useLanguageQuery();
5257
const editSlotQuery = useEditSlotConfigQuery(props.routineId);
5358

5459
const handleExerciseChange = (searchResponse: ExerciseSearchResponse | null) => {
@@ -60,13 +65,21 @@ export const SlotConfigDetails = (props: { slotConfig: SlotConfig, routineId: nu
6065
setEditExercise(false);
6166
};
6267

68+
let language = undefined;
69+
if (languageQuery.isSuccess) {
70+
language = getLanguageByShortName(
71+
i18n.language,
72+
languageQuery.data!
73+
);
74+
}
75+
6376
return (
6477
<React.Fragment key={props.slotConfig.id}>
6578

6679
<Grid container spacing={2}>
6780
<Grid item xs={12} sm={3}>
6881
<Typography variant={"h6"} gutterBottom>
69-
{props.slotConfig.exercise?.getTranslation().name}
82+
{props.slotConfig.exercise?.getTranslation(language).name}
7083

7184
<IconButton size={"small"} onClick={toggleEditExercise}>
7285
{editExercise ? <EditOffIcon /> : <EditIcon />}

‎src/components/WorkoutRoutines/widgets/forms/RoutineForm.tsx‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Stack } from "@mui/material";
1+
import { Button, Grid } from "@mui/material";
22
import { WgerTextField } from "components/Common/forms/WgerTextField";
33
import { Routine } from "components/WorkoutRoutines/models/Routine";
44
import { useAddRoutineQuery, useEditRoutineQuery } from "components/WorkoutRoutines/queries/routines";
@@ -65,22 +65,32 @@ export const RoutineForm = ({ routine, firstDayId, closeFn }: RoutineFormProps)
6565
>
6666
{formik => (
6767
<Form>
68-
<Stack spacing={2}>
69-
<WgerTextField fieldName="name" title={t('name')} />
70-
<WgerTextField fieldName="description" title={t('description')} />
71-
<WgerTextField fieldName="start" title={'start'} />
72-
<WgerTextField fieldName="end" title={'end'} />
73-
74-
<Stack direction="row" justifyContent="end" sx={{ mt: 2 }}>
75-
<Button color="primary"
76-
variant="contained"
77-
type="submit"
78-
sx={{ mt: 2 }}>
68+
<Grid container>
69+
<Grid item xs={6}>
70+
<WgerTextField fieldName="name" title={t('name')} />
71+
</Grid>
72+
<Grid item xs={3}>
73+
<WgerTextField fieldName="start" title={'start'} />
74+
</Grid>
75+
<Grid item xs={3}>
76+
<WgerTextField fieldName="end" title={'end'} />
77+
</Grid>
78+
<Grid item xs={12}>
79+
<WgerTextField fieldName="description" title={t('description')} />
80+
</Grid>
81+
<Grid item xs={12}>
82+
<Button
83+
color="primary"
84+
variant="contained"
85+
type="submit"
86+
sx={{ mt: 2 }}>
7987
{t('submit')}
8088
</Button>
81-
</Stack>
82-
</Stack>
89+
</Grid>
90+
91+
</Grid>
8392
</Form>
93+
8494
)}
8595
</Formik>
8696
);

0 commit comments

Comments
 (0)