04/29 Modified project page to add button to enable/disable a project

templates/projects.html

@@ -75,17 +75,17 @@
             <h3>{{ project.name }}</h3>
             <p class="project-description">
               {% if project.description %}
-                {{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}
+              {{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}
               {% else %}
-                No description provided
+              No description provided
               {% endif %}
             </p>
           </div>
           <div class="project-status">
             {% if project.active_status %}
-              <span class="status-badge active">Active</span>
+            <span class="status-badge active">Active</span>
             {% else %}
-              <span class="status-badge inactive">Inactive</span>
+            <span class="status-badge inactive">Inactive</span>
             {% endif %}
           </div>
         </div>
@@ -106,22 +106,18 @@
         </div>
 
         <div class="project-actions">
-          <a href="{{ url_for('projects.edit_project', project_id=project.id) }}" 
+          <a href="{{ url_for('projects.edit_project', project_id=project.id) }}" class="btn btn-secondary">
-             class="btn btn-secondary">
             <i class="fas fa-edit"></i>
             Edit
           </a>
-          <!-- Activate/Deactivate button (for future use)
           <form method="POST" action="{{ url_for('projects.toggle_project', project_id=project.id) }}"
-                style="display: inline;">
+            style="display: inline;">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <button type="submit" 
+            <button type="submit" class="btn {% if project.active_status %}btn-warning{% else %}btn-success{% endif %}">
-                    class="btn {% if project.active_status %}btn-warning{% else %}btn-success{% endif %}">
               <i class="fas {% if project.active_status %}fa-pause{% else %}fa-play{% endif %}"></i>
               {% if project.active_status %}Deactivate{% else %}Activate{% endif %}
             </button>
           </form>
-          -->
         </div>
       </div>
       {% endfor %}
@@ -145,52 +141,55 @@
 
 {% block extra_scripts %}
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', function () {
-  // Add smooth animations to project cards
+    // Add smooth animations to project cards
-  const projectCards = document.querySelectorAll('.project-card');
+    const projectCards = document.querySelectorAll('.project-card');
 
-  projectCards.forEach((card, index) => {
+    projectCards.forEach((card, index) => {
-    card.style.opacity = '0';
+      card.style.opacity = '0';
-    card.style.transform = 'translateY(20px)';
+      card.style.transform = 'translateY(20px)';
 
-    setTimeout(() => {
+      setTimeout(() => {
-      card.style.transition = 'all 0.5s ease-out';
+        card.style.transition = 'all 0.5s ease-out';
-      card.style.opacity = '1';
+        card.style.opacity = '1';
-      card.style.transform = 'translateY(0)';
+        card.style.transform = 'translateY(0)';
-    }, index * 100);
+      }, index * 100);
-  });
-  
-  // Confirm project deactivation/activation
-  const toggleForms = document.querySelectorAll('form[action*="toggle_project"]');
-  toggleForms.forEach(form => {
-    form.addEventListener('submit', function(e) {
-      const button = form.querySelector('button');
-      const action = button.textContent.trim();
-      const projectName = form.closest('.project-card').querySelector('h3').textContent.trim();
-      
-      if (!confirm(`Are you sure you want to ${action.toLowerCase()} the project "${projectName}"?`)) {
-        e.preventDefault();
-      }
     });
-  });
 
-  // Add loading state to buttons
+    // Confirm + loading state for toggle (activate/deactivate) forms.
-  const actionButtons = document.querySelectorAll('.project-actions .btn');
+    // IMPORTANT: the loading spinner must be applied AFTER confirm() resolves
-  actionButtons.forEach(button => {
+    // true. Setting button.disabled before the form submits blocks submission
-    button.addEventListener('click', function() {
+    // per the HTML spec (disabled buttons are not successful submitters).
-      if (this.tagName === 'BUTTON') {
+    const toggleForms = document.querySelectorAll('form[action*="toggle_project"]');
+    toggleForms.forEach(form => {
+      form.addEventListener('submit', function (e) {
+        const button = form.querySelector('button');
+        const action = button.textContent.trim();
+        const projectName = form.closest('.project-card').querySelector('h3').textContent.trim();
+
+        if (!confirm(`Are you sure you want to ${action.toLowerCase()} the project "${projectName}"?`)) {
+          e.preventDefault();
+          return;
+        }
+
+        // User confirmed — apply loading state after confirm, form will now submit.
+        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        button.disabled = true;
+      });
+    });
+
+    // Add loading state to non-toggle action buttons (e.g. Edit links).
+    // Toggle buttons are handled above via submit handler; exclude them here.
+    const actionButtons = document.querySelectorAll('.project-actions a.btn');
+    actionButtons.forEach(button => {
+      button.addEventListener('click', function () {
         const originalText = this.innerHTML;
         this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
-        this.disabled = true;
-        
-        // Re-enable after form submission (in case of validation errors)
         setTimeout(() => {
           this.innerHTML = originalText;
-          this.disabled = false;
         }, 3000);
-      }
+      });
     });
   });
-});
 </script>
 {% endblock %}