@@ -4,6 +4,16 @@ document.addEventListener("DOMContentLoaded", () => {
44 const signupForm = document . getElementById ( "signup-form" ) ;
55 const messageDiv = document . getElementById ( "message" ) ;
66
7+ function showMessage ( text , type ) {
8+ messageDiv . textContent = text ;
9+ messageDiv . className = type ;
10+ messageDiv . classList . remove ( "hidden" ) ;
11+
12+ setTimeout ( ( ) => {
13+ messageDiv . classList . add ( "hidden" ) ;
14+ } , 5000 ) ;
15+ }
16+
717 // Function to fetch activities from API
818 async function fetchActivities ( ) {
919 try {
@@ -12,19 +22,46 @@ document.addEventListener("DOMContentLoaded", () => {
1222
1323 // Clear loading message
1424 activitiesList . innerHTML = "" ;
25+ activitySelect . innerHTML = '<option value="">-- Select an activity --</option>' ;
1526
1627 // Populate activities list
1728 Object . entries ( activities ) . forEach ( ( [ name , details ] ) => {
1829 const activityCard = document . createElement ( "div" ) ;
1930 activityCard . className = "activity-card" ;
2031
2132 const spotsLeft = details . max_participants - details . participants . length ;
33+ const participantsMarkup = details . participants . length
34+ ? details . participants
35+ . map (
36+ ( participant ) => `
37+ <li class="participant-item">
38+ <span class="participant-email">${ participant } </span>
39+ <button
40+ class="participant-delete-button"
41+ type="button"
42+ data-activity="${ encodeURIComponent ( name ) } "
43+ data-email="${ encodeURIComponent ( participant ) } "
44+ aria-label="Unregister ${ participant } from ${ name } "
45+ >
46+ <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
47+ <path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v8h-2V9zm4 0h2v8h-2V9zM7 9h2v8H7V9zm-1 11h12l1-12H5l1 12z" />
48+ </svg>
49+ </button>
50+ </li>
51+ `
52+ )
53+ . join ( "" )
54+ : '<li class="participant-empty">No students registered yet.</li>' ;
2255
2356 activityCard . innerHTML = `
2457 <h4>${ name } </h4>
2558 <p>${ details . description } </p>
2659 <p><strong>Schedule:</strong> ${ details . schedule } </p>
2760 <p><strong>Availability:</strong> ${ spotsLeft } spots left</p>
61+ <div class="participants-section">
62+ <p class="participants-title">Participants</p>
63+ <ul class="participants-list">${ participantsMarkup } </ul>
64+ </div>
2865 ` ;
2966
3067 activitiesList . appendChild ( activityCard ) ;
@@ -59,25 +96,47 @@ document.addEventListener("DOMContentLoaded", () => {
5996 const result = await response . json ( ) ;
6097
6198 if ( response . ok ) {
62- messageDiv . textContent = result . message ;
63- messageDiv . className = "success" ;
6499 signupForm . reset ( ) ;
100+ await fetchActivities ( ) ;
101+ showMessage ( result . message , "success" ) ;
65102 } else {
66- messageDiv . textContent = result . detail || "An error occurred" ;
67- messageDiv . className = "error" ;
103+ showMessage ( result . detail || "An error occurred" , "error" ) ;
68104 }
105+ } catch ( error ) {
106+ showMessage ( "Failed to sign up. Please try again." , "error" ) ;
107+ console . error ( "Error signing up:" , error ) ;
108+ }
109+ } ) ;
110+
111+ activitiesList . addEventListener ( "click" , async ( event ) => {
112+ const deleteButton = event . target . closest ( ".participant-delete-button" ) ;
113+
114+ if ( ! deleteButton ) {
115+ return ;
116+ }
117+
118+ const activity = decodeURIComponent ( deleteButton . dataset . activity ) ;
119+ const email = decodeURIComponent ( deleteButton . dataset . email ) ;
69120
70- messageDiv . classList . remove ( "hidden" ) ;
121+ try {
122+ const response = await fetch (
123+ `/activities/${ encodeURIComponent ( activity ) } /participants?email=${ encodeURIComponent ( email ) } ` ,
124+ {
125+ method : "DELETE" ,
126+ }
127+ ) ;
71128
72- // Hide message after 5 seconds
73- setTimeout ( ( ) => {
74- messageDiv . classList . add ( "hidden" ) ;
75- } , 5000 ) ;
129+ const result = await response . json ( ) ;
130+
131+ if ( response . ok ) {
132+ await fetchActivities ( ) ;
133+ showMessage ( result . message , "success" ) ;
134+ } else {
135+ showMessage ( result . detail || "Unable to unregister participant." , "error" ) ;
136+ }
76137 } catch ( error ) {
77- messageDiv . textContent = "Failed to sign up. Please try again." ;
78- messageDiv . className = "error" ;
79- messageDiv . classList . remove ( "hidden" ) ;
80- console . error ( "Error signing up:" , error ) ;
138+ showMessage ( "Failed to unregister participant. Please try again." , "error" ) ;
139+ console . error ( "Error unregistering participant:" , error ) ;
81140 }
82141 } ) ;
83142
0 commit comments