Skip to content

Add custom YAML plan upload - #145

Open
nxlouie wants to merge 2 commits into
nanreh:masterfrom
nxlouie:feature/custom-yaml-plan-upload
Open

Add custom YAML plan upload#145
nxlouie wants to merge 2 commits into
nanreh:masterfrom
nxlouie:feature/custom-yaml-plan-upload

Conversation

@nxlouie

@nxlouie nxlouie commented Feb 17, 2026

Copy link
Copy Markdown

Summary

  • Adds an "Upload Custom" option to the plan dropdown, allowing users to load their own training plan from a local .yaml file
  • The YAML file is parsed client-side using js-yaml and cached in PlanRepo, so all existing functionality (date changes, week-starts-on, undo, export) works seamlessly with custom plans
  • No server-side changes — everything runs in the browser

Changes

  • src/components/PlanPicker.tsx — Added (Custom) Upload Custom option at the end of the dropdown with a sentinel value. Selecting it triggers a callback instead of the normal plan change flow.
  • src/components/PlanAndDate.tsx — Added a hidden file input (.yaml, .yml) and a "Choose Plan File" button that appears when the upload option is selected. Reads the file with FileReader, parses with js-yaml, validates required fields, and passes the plan up.
  • src/App.tsx — Added showUploadButton state and onCustomPlanLoaded handler that caches the parsed plan in the repo, builds the race plan, and updates all state. Selecting a different built-in plan hides the upload button.
  • src/ch/planrepo.ts — Added addCustomPlan() method that stores the plan in the existing cache under the same URL-based key that fetch() uses, so subsequent fetches (e.g., on date/settings changes) return the custom plan from cache.
  • jest.config.ts — Added types/* path alias to match tsconfig.app.json.
  • src/ch/customPlanUpload.test.ts — Tests for YAML parsing (valid, missing fields, invalid) and PlanRepo.addCustomPlan (caching, fetching, finding).

Test plan

  • yarn test passes (6 new tests for YAML parsing and plan caching)
  • Select "Upload Custom" from the plan dropdown — verify "Choose Plan File" button appears
  • Upload a valid YAML plan file (e.g., copy one from public/plans/yaml/) — verify the calendar renders
  • Change the end date — verify the calendar re-renders correctly with the custom plan
  • Change week-starts-on — verify it works with the custom plan
  • Select a different built-in plan — verify it switches back and the upload button disappears
  • Upload an invalid YAML file — verify an alert is shown and the app doesn't crash
  • Upload a YAML file missing required fields — verify an alert is shown

🤖 Generated with Claude Code

nxlouie and others added 2 commits February 17, 2026 09:34
Allow users to upload their own training plan as a YAML file via a new
"Upload Custom" option in the plan dropdown. The uploaded file is parsed
client-side with js-yaml and cached in PlanRepo so that subsequent
operations (date changes, week-starts-on changes) work seamlessly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The select now stays on the custom upload option after a plan is loaded,
and the file chooser button remains visible for re-uploading.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@nxlouie

nxlouie commented Feb 17, 2026

Copy link
Copy Markdown
Author

I manually validated the test plan checklist

@nanreh

nanreh commented Feb 18, 2026

Copy link
Copy Markdown
Owner

Thanks, it's a nice idea. I've been working on a version of this in this branch. Trying to convince myself it will be generally useful. I'd like to preserve the share-ability of the plans so coaches can set these up for their athletes and pass them along. But I need to think it through some more. This is also prompting me to think about the file format. It's kind of sloppy right now and I'd like it to be more flexible. More to come.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants