Admin schedule prototype: continuous CRUD view with inline editing #49

New issue

Open

opened 2026-03-29 20:03:36 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented 2026-03-29 20:03:36 +00:00

Contributor

Copy link

Type

Feature

Lineage

Follow-up from schedule feature (basketball-api#232, #233, westside-landing#166, #172 — all merged). Marcus approved the read-only card concept. This prototype adds CRUD and iterates the design before promoting to Svelte.

Repo

forgejo_admin/westside-playground

User Story

story:WS-S13 As an admin (Marcus), I want to add, edit, and deactivate practices and events from the schedule page so that I can manage the program calendar without asking Lucas to deploy code changes.

Secondary stories derived from design discussion:

• As an admin, I want to see "what's this week" at the top so I know what's immediately relevant
• As an admin, I want to toggle practices active/inactive instead of deleting them, so seasonal schedules are preserved
• As an admin, I want inline editing (expand card to edit form) so I don't lose context by navigating away

Context

The read-only admin schedule view is live (/admin/schedule) and Marcus likes the continuous card layout. This prototype adds CRUD controls following the admin-teams.html inline editing pattern (expand-in-place forms, save/reset, localStorage state management).

Design decisions (from Lucas discussion):

• Continuous view, NOT calendar grid. Marcus thinks in "what's next," not "what does April look like." Practices are weekly templates that repeat — a calendar would show 52 identical entries. Cards say it once.
• Mobile-first. Marcus is on his phone. Card lists scroll naturally at 390px. Calendar grids are cramped.
• No external libraries. Pure HTML/CSS/JS. The playground is vanilla — no frameworks, no build steps.
• Inline CRUD. Click a card to expand into an edit form. No modals, no separate pages. Follows admin-teams.html pattern.

Three sections (continuous scroll):

1. This Week — today's practice(s) highlighted + events within 7 days. Derived from data, not stored separately.
2. Practice Schedule — weekly template cards grouped by label ("Travel Teams", "17U Local Kings"). Green left border. Each card: day, time, location, notes. Admin sees [Edit] [Toggle Active] controls.
3. Upcoming Events — chronological card feed sorted by date. Blue left border. Event type badges. Admin sees [Edit] [Delete] controls.

CRUD interactions:

• Edit: Click card → card expands in-place to show form fields (.form-input-inline pattern from admin-teams.html). Save/Cancel buttons inside expanded card.
• Add: "+" button at section header → inline form slides in at top of section.
• Toggle active: Switch on practice card (no expand needed). Inactive cards show gray badge.
• Delete events: Button inside expanded card. window.confirm() dialog.

File Targets

Files to create:

• admin-schedule.html — the admin schedule CRUD prototype

Pattern reference (do NOT modify):

• admin-teams.html — inline editing pattern (state management, expand-in-place, save/reset, drag-reorder precedent)
• admin.html — page layout (nav, container, page-header, stats-row)
• schedule.html — public schedule page (day/time formatting, division labels, card layout)
• shared/style.css — design system (all available CSS classes)

Files NOT to touch:

• shared/style.css — use existing classes. If new schedule-specific styles are needed, use <style> tag in the HTML file.
• Any other playground pages

Acceptance Criteria

• Page loads with mock data (8 practices + 8 events matching seed data from basketball-api)
• Division filter (All / Kings / Queens) shows/hides relevant items
• "This Week" section shows today's practice and any events within 7 days
• Practice cards show: day, time range, location, notes, active badge
• Event cards show: title, date range, location, event type badge
• Click [Edit] on a practice card → card expands to inline form with all fields
• Click [Edit] on an event card → card expands to inline form with all fields
• [+ Add Practice] button → inline form at top of practices section
• [+ Add Event] button → inline form at top of events section
• Active/Inactive toggle on practice cards works visually
• [Delete] on events shows confirm dialog
• Mobile-first: all interactions work at 390px viewport
• Follows annotation format (@route, @auth, @api, @svelte-notes)

Test Expectations

• Visual verification on phone (390px Safari/Chrome)
• All CRUD interactions work via mock state (no real API calls — localStorage like admin-teams)
• Kings/Queens filter toggles visibility
• Run command: open admin-schedule.html in browser

Constraints

• Pure vanilla HTML/CSS/JS — no frameworks, no build tools
• Use existing CSS classes from shared/style.css (documented in research: .schedule-card, .form-input-inline, .btn-primary, .badge-*, .stat-card, etc.)
• State management via localStorage (follow admin-teams.html teamsState pattern)
• Mock data in JS — hardcode the 8 practices + 8 events from the seed data
• Day-of-week: 0=Monday, 6=Sunday (match API convention)
• Time format: display as "2:00 PM" (convert from "14:00" in mock data)
• Division display: boys→"Kings", girls→"Queens"
• Annotation comments must include @svelte-notes for eventual promotion

Checklist

• PR opened
• No unrelated changes
• Tested on mobile (390px)

Related

• project-westside-basketball
• forgejo_admin/basketball-api#232 — data model (merged)
• forgejo_admin/basketball-api#233 — API endpoints (merged)
• forgejo_admin/westside-landing#166 — admin schedule view (merged, read-only)
• Promotion target: westside-landing /admin/schedule route (after playground approval)

### Type Feature ### Lineage Follow-up from schedule feature (basketball-api#232, #233, westside-landing#166, #172 — all merged). Marcus approved the read-only card concept. This prototype adds CRUD and iterates the design before promoting to Svelte. ### Repo `forgejo_admin/westside-playground` ### User Story `story:WS-S13` As an admin (Marcus), I want to add, edit, and deactivate practices and events from the schedule page so that I can manage the program calendar without asking Lucas to deploy code changes. **Secondary stories derived from design discussion:** - As an admin, I want to see "what's this week" at the top so I know what's immediately relevant - As an admin, I want to toggle practices active/inactive instead of deleting them, so seasonal schedules are preserved - As an admin, I want inline editing (expand card to edit form) so I don't lose context by navigating away ### Context The read-only admin schedule view is live (`/admin/schedule`) and Marcus likes the continuous card layout. This prototype adds CRUD controls following the `admin-teams.html` inline editing pattern (expand-in-place forms, save/reset, localStorage state management). **Design decisions (from Lucas discussion):** - **Continuous view, NOT calendar grid.** Marcus thinks in "what's next," not "what does April look like." Practices are weekly templates that repeat — a calendar would show 52 identical entries. Cards say it once. - **Mobile-first.** Marcus is on his phone. Card lists scroll naturally at 390px. Calendar grids are cramped. - **No external libraries.** Pure HTML/CSS/JS. The playground is vanilla — no frameworks, no build steps. - **Inline CRUD.** Click a card to expand into an edit form. No modals, no separate pages. Follows `admin-teams.html` pattern. **Three sections (continuous scroll):** 1. **This Week** — today's practice(s) highlighted + events within 7 days. Derived from data, not stored separately. 2. **Practice Schedule** — weekly template cards grouped by label ("Travel Teams", "17U Local Kings"). Green left border. Each card: day, time, location, notes. Admin sees [Edit] [Toggle Active] controls. 3. **Upcoming Events** — chronological card feed sorted by date. Blue left border. Event type badges. Admin sees [Edit] [Delete] controls. **CRUD interactions:** - **Edit:** Click card → card expands in-place to show form fields (`.form-input-inline` pattern from `admin-teams.html`). Save/Cancel buttons inside expanded card. - **Add:** "+" button at section header → inline form slides in at top of section. - **Toggle active:** Switch on practice card (no expand needed). Inactive cards show gray badge. - **Delete events:** Button inside expanded card. `window.confirm()` dialog. ### File Targets Files to create: - `admin-schedule.html` — the admin schedule CRUD prototype Pattern reference (do NOT modify): - `admin-teams.html` — inline editing pattern (state management, expand-in-place, save/reset, drag-reorder precedent) - `admin.html` — page layout (nav, container, page-header, stats-row) - `schedule.html` — public schedule page (day/time formatting, division labels, card layout) - `shared/style.css` — design system (all available CSS classes) Files NOT to touch: - `shared/style.css` — use existing classes. If new schedule-specific styles are needed, use `<style>` tag in the HTML file. - Any other playground pages ### Acceptance Criteria - [ ] Page loads with mock data (8 practices + 8 events matching seed data from basketball-api) - [ ] Division filter (All / Kings / Queens) shows/hides relevant items - [ ] "This Week" section shows today's practice and any events within 7 days - [ ] Practice cards show: day, time range, location, notes, active badge - [ ] Event cards show: title, date range, location, event type badge - [ ] Click [Edit] on a practice card → card expands to inline form with all fields - [ ] Click [Edit] on an event card → card expands to inline form with all fields - [ ] [+ Add Practice] button → inline form at top of practices section - [ ] [+ Add Event] button → inline form at top of events section - [ ] Active/Inactive toggle on practice cards works visually - [ ] [Delete] on events shows confirm dialog - [ ] Mobile-first: all interactions work at 390px viewport - [ ] Follows annotation format (@route, @auth, @api, @svelte-notes) ### Test Expectations - [ ] Visual verification on phone (390px Safari/Chrome) - [ ] All CRUD interactions work via mock state (no real API calls — localStorage like admin-teams) - [ ] Kings/Queens filter toggles visibility - Run command: open `admin-schedule.html` in browser ### Constraints - Pure vanilla HTML/CSS/JS — no frameworks, no build tools - Use existing CSS classes from `shared/style.css` (documented in research: `.schedule-card`, `.form-input-inline`, `.btn-primary`, `.badge-*`, `.stat-card`, etc.) - State management via localStorage (follow `admin-teams.html` teamsState pattern) - Mock data in JS — hardcode the 8 practices + 8 events from the seed data - Day-of-week: 0=Monday, 6=Sunday (match API convention) - Time format: display as "2:00 PM" (convert from "14:00" in mock data) - Division display: boys→"Kings", girls→"Queens" - Annotation comments must include @svelte-notes for eventual promotion ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] Tested on mobile (390px) ### Related - `project-westside-basketball` - `forgejo_admin/basketball-api#232` — data model (merged) - `forgejo_admin/basketball-api#233` — API endpoints (merged) - `forgejo_admin/westside-landing#166` — admin schedule view (merged, read-only) - Promotion target: `westside-landing` `/admin/schedule` route (after playground approval)

Commenting is not possible because the repository is archived.

No Branch/Tag specified

Branches Tags

main

33-fix-coach-bottom-nav-replace-my-player-w

29-feat-registration-flow-player-first-with

30-feat-rename-families-crm-to-players-crm

23-fix-role-appropriate-bottom-nav-on-all-a

25-feat-parent-dashboard-rename-to-my-playe

11-admin-schedule-page

10-billing-tiered-pricing-split-payment

12-playbook-upload-team-schedule

10-feat-billing-page-tiered-pricing-selecto

11-feat-practice-schedule-management-page-f

12-feat-playbook-upload-ux-on-coach-view-te

13-expense-tracking-dashboard

13-feat-expense-tracking-dashboard-for-admi

3-feat-add-player-profile-page-prototype

No results found.

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

ldraney/westside-playground#49

No description provided.