UI for flexible routines

package.json

@@ -7,6 +7,7 @@
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@hello-pangea/dnd": "^17.0.0",
     "@mui/icons-material": "^6.3.0",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.3.0",
@@ -31,6 +32,7 @@
     "recharts": "^2.13.3",
     "slug": "^9.1.0",
     "typescript": "^5.6.3",
+    "use-debounce": "^10.0.4",
     "vite-tsconfig-paths": "^5.0.1",
     "web-vitals": "^4.2.2",
     "yup": "^1.4.0"

public/locales/en/translation.json

@@ -6,6 +6,7 @@
   "timeOfDay": "Time of day",
   "submit": "Submit",
   "edit": "Edit",
+  "editName": "Edit {{name}}",
   "delete": "Delete",
   "deleteConfirmation": "Are you sure you want to delete \"{{name}}\"?",
   "add": "Add",
@@ -17,6 +18,9 @@
   "lastHalfYear": "Last 6 Months",
   "lastMonth": "Last Month",
   "lastWeek": "Last Week",
+  "start": "Start",
+  "end": "End",
+  "comment": "Comment",
   "licenses": {
     "authors": "Author(s)",
     "authorProfile": "Link to author website or profile, if available",
@@ -88,7 +92,8 @@
     "imageStyleLine": "Line",
     "imageStyleLowPoly": "Low-Poly",
     "imageStyleOther": "Other",
-    "imageDetails": "Image details"
+    "imageDetails": "Image details",
+    "swapExercise": "Swap exercise"
   },
   "nutrition": {
     "plans": "Nutritional plans",
@@ -158,37 +163,123 @@
   "overview": "Overview",
   "preferences": "Preferences",
   "continue": "Continue",
-  "goBack": "Back",
+  "goBack": "Go back",
   "language": "Language",
   "forms": {
     "supportedImageFormats": "Only JPEG, PNG and WEBP files below 20Mb are supported",
+    "enterNumber": "Please enter a valid number",
+    "enterInteger": "Please enter a whole number",
     "valueTooShort": "The value is too short",
     "valueTooLong": "The value is too long",
     "fieldRequired": "This field is required",
     "maxLength": "Please enter less than {{chars}} characters",
     "minLength": "Please enter more than {{chars}} characters",
     "minValue": "The value for this field has to be higher than {{value}}",
-    "maxValue": "The value for this field has to be less than {{value}}"
+    "maxValue": "The value for this field has to be less than {{value}}",
+    "maxLessThanMin": "The max value has to be bigger than the minimum",
+    "endBeforeStart": "The end value cannot be before the start"
   },
   "name": "Name",
   "category": "Category",
   "success": "Success!",
   "English": "English",
   "save": "Save",
+  "min": "Min",
+  "max": "Max",
+  "durationWeeks": "{{number}} weeks",
+  "durationWeeksDays": "{{nrWeeks}} weeks, {{nrDays}} days",
   "videos": "Videos",
+  "undo": "Undo",
+  "successfullyDeleted": "Successfully deleted",
   "cannotBeUndone": "This action can't be undone.",
   "cancel": "Cancel",
   "noResults": "No results",
   "noResultsDescription": "No results found for this query, consider reducing the number of filters.",
   "routines": {
+    "sets": "Sets",
+    "reps": "Reps",
+    "volume": "Volume",
+    "intensity": "Intensity",
+    "currentRoutine": "Current routine",
+    "iteration": "Iteration",
+    "weekly": "Weekly",
+    "daily": "Daily",
+    "restTime": "Rest time",
+    "workoutNr": "Workout Nr. {{number}}",
+    "weekNr": "Week {{number}}",
+    "backToRoutine": "Back to routine",
+    "minLengthRoutine": "The routine needs to be at least {{number}} weeks long",
+    "maxLengthRoutine": "The routine can be at most {{number}} weeks long",
+    "resultingRoutine": "Resulting routine",
     "addDay": "Add training day",
+    "deleteDayConfirmation": "This will remove all sets, exercises and progression rules",
+    "routineHasNoDays": "The routine has no days",
+    "setHasNoExercises": "This set has no exercises",
+    "fitDaysInWeek": "Fit days in week",
+    "fitDaysInWeekHelpText": "This setting controls how your routine's days are scheduled across multiple weeks. If enabled, the days will repeat in a weekly cycle. For example, a routine with workouts on Monday, Wednesday, and Friday will continue this pattern on the following Monday, Wednesday, and Friday. If disabled, the days will follow sequentially without regard to the start of a new week. This is useful for routines that don't follow a strict weekly schedule.",
+    "needsLogsToAdvance": "Needs logs to advance",
+    "needsLogsToAdvanceHelpText": "If you select this option, the routine will only progress to the next scheduled day if you've logged a workout for the current day. If this option is not selected, the routine will automatically advance to the next day regardless of whether you logged a workout or not.",
+    "addSuperset": "Add superset",
+    "addExercise": "Add exercise",
+    "exerciseNr": "Exercise {{number}}",
+    "supersetNr": "Superset {{number}}",
+    "editProgression": "Edit progression",
+    "progressionNeedsReplace": "One of the previous entries must have a replace operation",
+    "exerciseHasProgression": "This exercise has progression rules and can't be edited here. To do so, click the button.",
+    "defaultRounding": "Default rounding",
+    "rounding": "Rounding (this exercise)",
+    "roundingHelp": "Set the default rounding for weight and repetitions (this is specially useful when using the percentage increase step in the progression). This will apply to all new sets but can be changed individually in the progression form. Leave empty to disable rounding.",
+    "newDay": "New day",
     "addWeightLog": "Add training log",
+    "weightLogNotPlanned": "Saving logs to a date for which no workouts were planned.",
+    "logsOverview": "Logs overview",
+    "alsoShowLogs": "Also show logs",
+    "statsOverview": "Statistics",
+    "simpleMode": "Simple mode",
     "logsHeader": "Training log for workout",
     "logsFilterNote": "Note that only entries with a weight unit of kg or lb and repetitions are charted, other combinations such as time or until failure are ignored here",
     "addLogToDay": "Add log to this day",
     "routine": "Routine",
     "routines": "Routines",
-    "rir": "RiR"
+    "rir": "RiR",
+    "restDay": "Rest day",
+    "confirmRestDay": "Confirm rest day change",
+    "confirmRestDayHelpText": "Please note that all sets and exercises will be removed when you mark a day as a rest day.",
+    "duplicate": "Duplicate routine",
+    "downloadPdfTable": "Download PDF (table)",
+    "downloadPdfLogs": "Download PDF (logs)",
+    "downloadIcal": "Download iCal file",
+    "impression": "General impression",
+    "impressionGood": "Good",
+    "impressionNeutral": "Neutral",
+    "impressionBad": "Bad",
+    "impressionHelpText": "This form records your workout results (reps, weight, etc.) for each exercise. Changes you make here, like removing or swapping exercises, only affect the specific logs you save and and won't change your overall routine. Only rows with values for either weight or repetitions are saved.",
+    "addAdditionalLog": "Add additional log",
+    "operation": "Operation",
+    "step": "Step",
+    "requirements": "Requirements",
+    "requirementsHelpText": "Select the workout results (from previous logs) that must be met for this rule to take effect",
+    "repeat": "Repeat rule",
+    "repeatHelpText": "Check the check box if you want this rule to continue to apply to subsequent workouts until you define a new one",
+    "markAsTemplate": "Manage template",
+    "template": "Template",
+    "templates": "Templates",
+    "publicTemplate": "Public template",
+    "publicTemplates": "Public templates",
+    "templatesHelpText": "Templates are a way to save your routine for later use and as a starting point for further routines. You can't edit templates, but you can duplicate them and make changes to the copy (as well as converting them back to a regular routine, of course).",
+    "publicTemplateHelpText": "Public templates are available to all users.",
+    "copyAndUseTemplate": "Copy and use template",
+    "set": {
+      "type": "Type",
+      "normalSet": "Normal set",
+      "dropSet": "Drop set",
+      "myo": "MYO",
+      "partial": "Partial",
+      "forced": "Forced",
+      "tut": "TUT",
+      "iso": "ISO",
+      "jump": "Jump"
+    }
   },
   "measurements": {
     "measurements": "Measurements",

src/components/Calendar/Components/CalendarComponent.test.tsx

@@ -122,7 +122,6 @@ describe('CalendarComponent', () => {
         // Act
         const day = screen.getByTestId(`day-${dateToYYYYMMDD(new Date(currentYear, currentMonth, 2))}`);
         await user.click(day);
-        screen.logTestingPlaygroundURL();
 
         // Assert
         expect(screen.getByText('70.0 kg')).toBeInTheDocument();

src/components/Common/forms/WgerTextField.tsx

@@ -0,0 +1,27 @@
+import { TextField } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField/TextField";
+import { useField } from "formik";
+import React from "react";
+
+interface WgerTextFieldProps {
+    fieldName: string,
+    title: string,
+    fieldProps?: TextFieldProps,
+    fullwidth?: boolean,
+}
+
+export function WgerTextField(props: WgerTextFieldProps) {
+    const [field, meta] = useField(props.fieldName);
+    const fullwidth = props.fullwidth ?? true;
+
+    return <TextField
+        fullWidth={fullwidth}
+        id={props.fieldName}
+        label={props.title}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+        {...props.fieldProps}
+    />;
+}

src/components/Core/LoadingWidget/LoadingWidget.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
 import { Box, CircularProgress, Stack } from "@mui/material";
+import React from 'react';
 import { useTranslation } from "react-i18next";
 
 export const LoadingWidget = () => {
-
     const [t] = useTranslation();
 
     return (
         <Box sx={{ textAlign: "center" }}>{t('loading')}</Box>
     );
 };
 
-export const LoadingPlaceholder = () => {
-    return <Box
-        sx={{ height: 200, alignItems: "center", mt: 2 }}
-        component={Stack}
-        direction="column"
-        justifyContent="center">
-        <CircularProgress />
-    </Box>;
-};
+export const LoadingPlaceholder = () => <Box
+    sx={{ height: 200, alignItems: "center", mt: 2 }}
+    component={Stack}
+    direction="column"
+    justifyContent="center">
+    <CircularProgress />
+</Box>;
+
+
+export const LoadingProgressIcon = () => <CircularProgress size={20} />;

src/components/Core/Modals/DeleteConfirmationModal.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { Button, Card, CardActions, CardContent, CardHeader, Modal, Typography } from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
+import { Button, Card, CardActions, CardContent, CardHeader, Modal, Typography } from "@mui/material";
+import { FunctionComponent } from 'react';
 import { useTranslation } from "react-i18next";
 
 export interface DeleteConfirmationModalProps {
@@ -25,12 +25,15 @@ export const DeleteConfirmationModal: FunctionComponent<DeleteConfirmationModalP
     const [t] = useTranslation();
 
     const style = {
-        position: 'absolute' as 'absolute',
+        position: 'absolute',
         top: '50%',
         left: '50%',
         transform: 'translate(-50%, -50%)',
+        // width: 500,
+        bgcolor: 'background.paper',
+        borderWidth: 0,
+        boxShadow: 24,
         p: 2,
-        minWidth: '400px'
     };
 
     const handleDelete = () => {
@@ -62,11 +65,10 @@ export const DeleteConfirmationModal: FunctionComponent<DeleteConfirmationModalP
                         {t('delete')}
                     </Button>
                     <Button color="primary" onClick={closeFn}>
-                        {t('cancel')}
+                        {t('close')}
                     </Button>
                 </CardActions>
             </Card>
         </Modal>
-
     );
 };