Practice plan creation

[austeane]

User Story:

Practice Plan Creator

As a user, I want to be able to create a practice plan from drills. I want to be able create in a similar fashion to how I add items to a shopping cart. In the drills page, I want to click a checkbox next to the drills I want to add to my plan, and then have a button that says "Add Selected Drills to Plan". I want another button at the top that says "Create Plan with Selected [number of selected drills] Drills". I also want to be able to add the drill from the drill details page via a button that says "Add Drill to Plan".

I want to have the ability to click on a shopping cart symbol in the top right of the page that will expand to show the drill titles, and have the ability to remove drills from there.

After I create a plan, I want to be redirected to a page that shows me the plan, and I want to see a list of the drills in the plan, with a button to remove the drill from the plan. I also want to see the:

• estimated time to complete the plan
• player range that the plan is intended for
• the skill level that the plan is intended for
• the number of drills of each complexity level that the plan contains
• the number drills for each position that the plan contains

And have the ability to:

• remove the drill from the plan
• edit the drill in the plan
• add a break to the plan
• add a name to the plan
• add a description to the plan

Also we need to be able to view created practice plans. Similar to viewing the list of drills, and individual drill details; there will be the plan listing page, and each will have a plan details page.

Issues: Make sure throughout that errors are handled well, and there is logging where things could potentially go wrong. Make sure everything is responsive and works well on mobile, and is performant.

1: Issue: Implement Practice Plan Creation Page Layout Description: Create a new page for practice plan creation with a vertical layout. The page should include: Fields for plan name and description A section to display selected drills A submit button at the bottom Tasks: Create a new Svelte component for the practice plan creation page Implement the basic layout with placeholders for all sections Add routing for the new page Related files: src/routes/practice-plans/create/+page.svelte (new file) src/routes/+layout.svelte (update navigation)

[austeane]

Now do Issue 2:

2: Issue: Implement Drill Selection and Cart Functionality Description: Add the ability to select drills from both the drill listing page and the drill details page, and implement a cart system for creating a practice plan.

Tasks:

1. Drill Listing Page:

   • Add checkboxes next to each drill in the drill listing page
   • Implement a "Add Selected Drills to Plan" button that appears when at least one drill is selected

2. Drill Details Page:

   • Add an "Add Drill to Plan" button on the drill details page

3. Cart Functionality:

   • Create a store to temporarily hold selected drills
   • Implement a shopping cart symbol in the top right of the page
   • Create an expandable cart view that shows selected drill titles
   • Add the ability to remove drills from the cart

4. Create Plan Button:

   • Implement a "Create Plan with Selected [number] Drills" button at the top of the page
   • Update the button text dynamically based on the number of selected drills

5. Navigation:

   • Redirect to the practice plan creation page when the "Create Plan" button is clicked

6. User Feedback:

   • Provide visual feedback when drills are added to or removed from the cart
   • Show a notification or animation when the cart is updated

7. Persistence:

   • Implement local storage to persist selected drills between page reloads

Related files:

• src/routes/drills/+page.svelte (update drill listing page)
• src/routes/drills/[id]/+page.svelte (update drill details page)
• src/lib/stores/cartStore.js (new file for cart store)
• src/components/Cart.svelte (new component for cart functionality)
• src/routes/+layout.svelte (update to include cart symbol)