Add registration validation and more activities #2
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request migrates the activities data from in-memory storage to MongoDB and adds participant management functionality. The changes introduce the ability to register and unregister students from activities with proper validation and error handling.
- Migrated activities data from in-memory dictionary to MongoDB with comprehensive activity seeding
- Added backend endpoints for participant registration and unregistration with duplicate/missing participant validation
- Implemented frontend participant display with interactive removal functionality
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/app.py | Migrated from in-memory storage to MongoDB, expanded initial activities data, and added registration/unregistration endpoints |
| src/static/app.js | Added participant display with delete functionality and refresh logic after operations |
| src/static/styles.css | Added styling for participant sections, lists, delete icons, and empty states |
| src/init_db.py | Database initialization script to seed MongoDB with initial activities data |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| .participants-list { | ||
| list-style-type: disc; | ||
| margin-left: 20px; | ||
| margin-bottom: 0; | ||
| padding-left: 0; | ||
|
|
||
| list-style: none; | ||
| padding-left: 0; | ||
| } |
There was a problem hiding this comment.
The CSS properties are contradictory and redundant. Lines 93-94 set list-style-type: disc and margin-left: 20px, but lines 98-99 immediately override them with list-style: none and padding-left: 0. Remove the redundant properties on lines 93-94.
| .participant-item { | ||
| display: flex; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
The .participant-item selector is duplicated with different properties. These should be combined into a single rule block to avoid confusion and potential specificity issues.
| .participant-item { | ||
| margin-bottom: 4px; | ||
| color: #333; | ||
| font-size: 15px; | ||
| } |
There was a problem hiding this comment.
The .participant-item selector is duplicated with different properties. These should be combined into a single rule block to avoid confusion and potential specificity issues.
| ? `<ul class="participants-list" style="list-style: none; padding-left: 0;"> | ||
| ${details.participants | ||
| .map( | ||
| (participant) => | ||
| `<li class="participant-item" style="display: flex; align-items: center;"> | ||
| <span>${participant}</span> | ||
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}" style="cursor: pointer; margin-left: 8px; color: #d00; font-weight: bold;">✖</span> |
There was a problem hiding this comment.
Inline styles are being used when CSS classes already exist for the same properties. Remove the inline styles and rely on the existing CSS classes .participants-list, .participant-item, and .delete-icon to maintain consistency and improve maintainability.
| ? `<ul class="participants-list" style="list-style: none; padding-left: 0;"> | |
| ${details.participants | |
| .map( | |
| (participant) => | |
| `<li class="participant-item" style="display: flex; align-items: center;"> | |
| <span>${participant}</span> | |
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}" style="cursor: pointer; margin-left: 8px; color: #d00; font-weight: bold;">✖</span> | |
| ? `<ul class="participants-list"> | |
| ${details.participants | |
| .map( | |
| (participant) => | |
| `<li class="participant-item"> | |
| <span>${participant}</span> | |
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}">✖</span> |
| ? `<ul class="participants-list" style="list-style: none; padding-left: 0;"> | ||
| ${details.participants | ||
| .map( | ||
| (participant) => | ||
| `<li class="participant-item" style="display: flex; align-items: center;"> | ||
| <span>${participant}</span> | ||
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}" style="cursor: pointer; margin-left: 8px; color: #d00; font-weight: bold;">✖</span> |
There was a problem hiding this comment.
Inline styles are being used when CSS classes already exist for the same properties. Remove the inline styles and rely on the existing CSS classes .participants-list, .participant-item, and .delete-icon to maintain consistency and improve maintainability.
| ? `<ul class="participants-list" style="list-style: none; padding-left: 0;"> | |
| ${details.participants | |
| .map( | |
| (participant) => | |
| `<li class="participant-item" style="display: flex; align-items: center;"> | |
| <span>${participant}</span> | |
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}" style="cursor: pointer; margin-left: 8px; color: #d00; font-weight: bold;">✖</span> | |
| ? `<ul class="participants-list"> | |
| ${details.participants | |
| .map( | |
| (participant) => | |
| `<li class="participant-item"> | |
| <span>${participant}</span> | |
| <span class="delete-icon" title="Remove participant" data-activity="${name}" data-participant="${participant}">✖</span> |
This pull request migrates the activities data from in-memory storage to MongoDB, adds new activities, and introduces participant management features. The backend now supports registering and unregistering students for activities, and the frontend displays participants with the ability to remove them interactively. Styling enhancements have been added for the participants section.
Backend: Data migration and participant management
activities_collectionfor all activity queries. [1] [2]src/init_db.pyto initialize the database with a comprehensive set of activities and participants.Frontend: Participant display and interaction
Styling improvements