sync

frontend/src/components/plans/EditWorkoutModal.jsx

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const EditWorkoutModal = ({ workout, onClose, onSave }) => {
+  const [formData, setFormData] = useState({
+    type: '',
+    duration_minutes: 0,
+    intensity: '',
+    description: ''
+  });
+
+  useEffect(() => {
+    if (workout) {
+      setFormData({
+        type: workout.type || '',
+        duration_minutes: workout.duration_minutes || 0,
+        intensity: workout.intensity || '',
+        description: workout.description || ''
+      });
+    }
+  }, [workout]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  if (!workout) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md">
+        <h3 className="text-lg font-semibold mb-4">Edit Workout</h3>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Workout Type
+              </label>
+              <input
+                type="text"
+                name="type"
+                value={formData.type}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Duration (minutes)
+              </label>
+              <input
+                type="number"
+                name="duration_minutes"
+                value={formData.duration_minutes}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Intensity
+              </label>
+              <select
+                name="intensity"
+                value={formData.intensity}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="">Select intensity</option>
+                <option value="zone_1">Zone 1 (Easy)</option>
+                <option value="zone_2">Zone 2 (Moderate)</option>
+                <option value="zone_3">Zone 3 (Tempo)</option>
+                <option value="zone_4">Zone 4 (Threshold)</option>
+                <option value="zone_5">Zone 5 (VO2 Max)</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Description
+              </label>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                rows="3"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+EditWorkoutModal.propTypes = {
+  workout: PropTypes.object,
+  onClose: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired
+};
+
+EditWorkoutModal.defaultProps = {
+  workout: null
+};
+
+export default EditWorkoutModal;