nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nngo
2026-04-29 15:42:33 -04:00
parent f166557f04
commit 96a343f284
1 changed files with 51 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/projects.html
+51 -52
View File
@@ -75,17 +75,17 @@
<h3>{{ project.name }}</h3> <h3>{{ project.name }}</h3>
<p class="project-description"> <p class="project-description">
{% if project.description %} {% if project.description %}
{{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %} {{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}
{% else %} {% else %}
No description provided No description provided
{% endif %} {% endif %}
</p> </p>
</div> </div>
<div class="project-status"> <div class="project-status">
{% if project.active_status %} {% if project.active_status %}
<span class="status-badge active">Active</span> <span class="status-badge active">Active</span>
{% else %} {% else %}
<span class="status-badge inactive">Inactive</span> <span class="status-badge inactive">Inactive</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@@ -106,22 +106,18 @@
</div> </div>
<div class="project-actions"> <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> <i class="fas fa-edit"></i>
Edit Edit
</a> </a>
<!-- Activate/Deactivate button (for future use) <form method="POST" action="{{ url_for('projects.toggle_project', project_id=project.id) }}"
<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" class="btn {% if project.active_status %}btn-warning{% else %}btn-success{% endif %}">
<button type="submit"
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> <i class="fas {% if project.active_status %}fa-pause{% else %}fa-play{% endif %}"></i>
{% if project.active_status %}Deactivate{% else %}Activate{% endif %} {% if project.active_status %}Deactivate{% else %}Activate{% endif %}
</button> </button>
</form> </form>
-->
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
@@ -145,52 +141,55 @@
{% block extra_scripts %} {% block extra_scripts %}
<script> <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();
}
}); });
});
// Confirm + loading state for toggle (activate/deactivate) forms.
// Add loading state to buttons // IMPORTANT: the loading spinner must be applied AFTER confirm() resolves
const actionButtons = document.querySelectorAll('.project-actions .btn'); // true. Setting button.disabled before the form submits blocks submission
actionButtons.forEach(button => { // per the HTML spec (disabled buttons are not successful submitters).
button.addEventListener('click', function() { const toggleForms = document.querySelectorAll('form[action*="toggle_project"]');
if (this.tagName === 'BUTTON') { 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; const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...'; 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(() => { setTimeout(() => {
this.innerHTML = originalText; this.innerHTML = originalText;
this.disabled = false;
}, 3000); }, 3000);
} });
}); });
}); });
});
</script> </script>
{% endblock %} {% endblock %}