Add registration validation and more activities

[alvinashcraft]

This pull request introduces significant enhancements to the activity registration system, including refactoring the backend to use an object-oriented approach, adding participant management functionality, and improving the user interface and experience. The most important changes are grouped into backend updates, frontend functionality, and styling improvements.

Backend Updates:

• Introduced an Activity class to encapsulate activity details and participant management, replacing the previous dictionary-based implementation. This refactor simplifies data handling and improves scalability. (src/app.py, src/app.pyR22-R52)
• Added a function add_participant_to_activity to manage participant registration for activities, ensuring unique participant entries. (src/app.py, src/app.pyR22-R52)
• Created a new route /register to handle participant registration via form submission, with error and success message handling. (src/app.py, src/app.pyR75-R106)

Frontend Functionality:

• Enhanced the index.html template to include a registration form for activities, dynamically populated with available activities. Added logic to display error or success messages based on registration outcomes. (src/templates/index.html, src/templates/index.htmlR1-R215)
• Updated app.js to handle form validation, display success/error messages from URL parameters, and improve user feedback during registration. (src/static/app.js, src/static/app.jsR84-R124)

Styling Improvements:

• Added CSS styles for the registration form, participant section, and feedback messages to improve visual aesthetics and user experience. (src/static/styles.css, src/static/styles.cssR77-R127)
• Applied consistent styling across the index.html template, including layout enhancements, typography, and responsive design for better usability. (src/templates/index.html, src/templates/index.htmlR1-R215)

[Copilot]

Pull Request Overview

This pull request refactors the activity registration system from a dictionary-based approach to an object-oriented design using an Activity class, while adding participant registration functionality and improving the user interface.

• Replaced dictionary-based activity storage with an Activity class containing participant management
• Added a new registration form with validation and user feedback mechanisms
• Enhanced styling for participant display and form elements

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
src/app.py	Refactored to use Activity class and added participant registration endpoint
src/templates/index.html	Contains CSS styles instead of HTML template content
src/static/styles.css	Added participant section styling and form enhancements
src/static/app.js	Added form validation and URL parameter-based message handling

[Copilot]

This file appears to contain CSS styles instead of HTML template content. The file extension suggests it should be an HTML template, but the content starting with CSS selector '*' indicates this is CSS code that should be in a .css file.

[Copilot]

The HTML content starts abruptly at line 196 without proper document structure (DOCTYPE, html, head, body tags). This will result in invalid HTML that browsers may not render correctly.

[Copilot]

The participant styling CSS is duplicated between this file and the index.html template. This creates maintenance issues as changes need to be made in multiple places.

[Copilot]

Mixing Flask decorators (@app.route) with FastAPI app instance. The existing code uses FastAPI (@app.get, @app.post) but this new route uses Flask syntax, which will not work with FastAPI.

[Copilot]

Using Flask route decorator with FastAPI. This conflicts with the existing FastAPI @app.get('/') decorator and will cause routing conflicts.

Suggested change

	@app.route('/register', methods=['POST'])
	def register():
	activity_id = request.form.get('activity_id')
	participant_name = request.form.get('participant_name')
	if not activity_id or not participant_name:
	return redirect(url_for('index', error="Please fill in all fields"))
	success = add_participant_to_activity(activity_id, participant_name)
	if success:
	return redirect(url_for('index', message="Successfully registered for the activity!"))
	else:
	return redirect(url_for('index', error="Activity not found or registration failed"))
	# Update the index route to pass error/success messages
	@app.route('/')
	def index():
	error = request.args.get('error')
	message = request.args.get('message')
	return render_template('index.html', activities=activities, error=error, message=message)
	@app.post('/register')
	async def register(activity_id: str, participant_name: str):
	if not activity_id or not participant_name:
	return RedirectResponse(url=f"/?error=Please fill in all fields", status_code=303)
	success = add_participant_to_activity(activity_id, participant_name)
	if success:
	return RedirectResponse(url=f"/?message=Successfully registered for the activity!", status_code=303)
	else:
	return RedirectResponse(url=f"/?error=Activity not found or registration failed", status_code=303)
	# Update the index route to pass error/success messages
	@app.get('/')
	async def index(error: str = None, message: str = None):
	return {"activities": activities, "error": error, "message": message}

[Copilot]

Using Flask's request object in what should be a FastAPI application. FastAPI uses different request handling patterns and this will cause runtime errors.

Suggested change

	@app.route('/register', methods=['POST'])
	def register():
	activity_id = request.form.get('activity_id')
	participant_name = request.form.get('participant_name')
	if not activity_id or not participant_name:
	return redirect(url_for('index', error="Please fill in all fields"))
	success = add_participant_to_activity(activity_id, participant_name)
	if success:
	return redirect(url_for('index', message="Successfully registered for the activity!"))
	else:
	return redirect(url_for('index', error="Activity not found or registration failed"))
	# Update the index route to pass error/success messages
	@app.route('/')
	def index():
	error = request.args.get('error')
	message = request.args.get('message')
	return render_template('index.html', activities=activities, error=error, message=message)
	@app.post('/register')
	async def register(request: Request):
	form_data = await request.form()
	activity_id = form_data.get('activity_id')
	participant_name = form_data.get('participant_name')
	if not activity_id or not participant_name:
	raise HTTPException(status_code=400, detail="Please fill in all fields")
	success = add_participant_to_activity(activity_id, participant_name)
	if success:
	return {"message": "Successfully registered for the activity!"}
	else:
	raise HTTPException(status_code=404, detail="Activity not found or registration failed")
	# Update the index route to pass error/success messages
	@app.get('/')
	async def index(error: str = None, message: str = None):
	return {"activities": activities, "error": error, "message": message}