Aggiungi funzionalità per disiscrivere i partecipanti dalle attività e migliora l'interfaccia utente per la gestione dei partecipanti

Author: Cecex-git

requirements.txt

@@ -1,2 +1,7 @@
 fastapi
 uvicorn
+
+# Test requirements
+pytest
+requests
+httpx

src/app.py

@@ -103,3 +103,19 @@ def signup_for_activity(activity_name: str, email: str):
     # Add student
     activity["participants"].append(email)
     return {"message": f"Signed up {email} for {activity_name}"}
+
+
+@app.delete("/activities/{activity_name}/participants")
+def unregister_from_activity(activity_name: str, email: str):
+    """Unregister a student from an activity"""
+    # Validate activity exists
+    if activity_name not in activities:
+        raise HTTPException(status_code=404, detail="Activity not found")
+
+    activity = activities[activity_name]
+    # Validate student is signed up
+    if email not in activity["participants"]:
+        raise HTTPException(status_code=404, detail=f"Student {email} is not signed up for {activity_name}")
+
+    activity["participants"].remove(email)
+    return {"message": f"Unregistered {email} from {activity_name}"}

src/static/app.js

@@ -12,6 +12,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
       // Clear loading message
       activitiesList.innerHTML = "";
+      // Reset activity select so we don't duplicate options on refresh
+      activitySelect.innerHTML = '<option value="">-- Select an activity --</option>';
 
       // Populate activities list
       Object.entries(activities).forEach(([name, details]) => {
@@ -26,9 +28,14 @@ document.addEventListener("DOMContentLoaded", () => {
           participantsHTML = `
             <div class="participants-section">
               <strong>Partecipanti:</strong>
-              <ul class="participants-list">
-                ${details.participants.map(p => `<li>${p}</li>`).join("")}
-              </ul>
+                <ul class="participants-list">
+                  ${details.participants
+                    .map(
+                      (p) =>
+                        `<li><span class="participant-email">${p}</span><button class="delete-participant" data-activity="${name}" data-email="${p}" aria-label="Unregister">✖</button></li>`
+                    )
+                    .join("")}
+                </ul>
             </div>
           `;
         } else {
@@ -61,6 +68,46 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
+    // Handle unregister/delete participant clicks using event delegation
+    activitiesList.addEventListener("click", async (event) => {
+      const target = event.target;
+      if (target.classList && target.classList.contains("delete-participant")) {
+        const activity = target.getAttribute("data-activity");
+        const email = target.getAttribute("data-email");
+
+        if (!activity || !email) return;
+
+        try {
+          const response = await fetch(
+            `/activities/${encodeURIComponent(activity)}/participants?email=${encodeURIComponent(email)}`,
+            { method: "DELETE" }
+          );
+
+          const result = await response.json();
+
+          if (response.ok) {
+            messageDiv.textContent = result.message;
+            messageDiv.className = "success";
+            // Refresh the activities list to reflect removal
+            fetchActivities();
+          } else {
+            messageDiv.textContent = result.detail || "An error occurred";
+            messageDiv.className = "error";
+          }
+
+          messageDiv.classList.remove("hidden");
+          setTimeout(() => {
+            messageDiv.classList.add("hidden");
+          }, 5000);
+        } catch (err) {
+          console.error("Error unregistering:", err);
+          messageDiv.textContent = "Failed to unregister. Please try again.";
+          messageDiv.className = "error";
+          messageDiv.classList.remove("hidden");
+        }
+      }
+    });
+
   // Handle form submission
   signupForm.addEventListener("submit", async (event) => {
     event.preventDefault();
@@ -82,6 +129,8 @@ document.addEventListener("DOMContentLoaded", () => {
         messageDiv.textContent = result.message;
         messageDiv.className = "success";
         signupForm.reset();
+        // Refresh activities immediately so UI reflects new participant
+        fetchActivities();
       } else {
         messageDiv.textContent = result.detail || "An error occurred";
         messageDiv.className = "error";

src/static/styles.css

@@ -89,12 +89,39 @@ section h3 {
 
 .participants-list {
   margin-top: 6px;
-  margin-left: 18px;
-  list-style-type: disc;
+  margin-left: 0;
+  padding-left: 0;
+  list-style: none;
   color: #333;
   font-size: 15px;
 }
 
+.participants-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+
+.participant-email {
+  word-break: break-word;
+  margin-right: 8px;
+}
+
+.delete-participant {
+  background: transparent;
+  border: none;
+  color: #c62828;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+
+.delete-participant:hover {
+  background-color: rgba(198, 40, 40, 0.08);
+}
+
 .no-participants {
   background-color: #f9fbe7;
   border: 1px dashed #cddc39;

tests/test_api.py

@@ -0,0 +1,43 @@
+from fastapi.testclient import TestClient
+import sys
+from pathlib import Path
+
+# Ensure src is on path
+sys.path.insert(0, str(Path(__file__).resolve().parent.parent / "src"))
+
+from app import app, activities
+
+
+client = TestClient(app)
+
+
+def test_get_activities():
+    response = client.get("/activities")
+    assert response.status_code == 200
+    data = response.json()
+    assert isinstance(data, dict)
+    # Should contain at least one known activity
+    assert "Chess Club" in data
+
+
+def test_signup_and_unregister_flow():
+    activity = "Chess Club"
+    email = "[email protected]"
+
+    # Ensure not present initially
+    if email in activities[activity]["participants"]:
+        activities[activity]["participants"].remove(email)
+
+    # Signup
+    rv = client.post(f"/activities/{activity}/signup?email={email}")
+    assert rv.status_code == 200
+    assert email in activities[activity]["participants"]
+
+    # Attempt duplicate signup should fail
+    rv2 = client.post(f"/activities/{activity}/signup?email={email}")
+    assert rv2.status_code == 400
+
+    # Unregister
+    rv3 = client.delete(f"/activities/{activity}/participants?email={email}")
+    assert rv3.status_code == 200
+    assert email not in activities[activity]["participants"]