Sep 11 - Reupload the code
This commit is contained in:
@@ -0,0 +1,197 @@
|
||||
{% extends "base_authenticated.html" %}
|
||||
{% block title %}Projects - QR Code Management{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/projects.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="projects-page">
|
||||
<!-- Page Header -->
|
||||
<div class="projects-header">
|
||||
<div class="header-content">
|
||||
<div class="header-navigation">
|
||||
<a href="{{ url_for('dashboard.dashboard') }}" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
<span>Back to Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
<h1><i class="fas fa-folder"></i> Projects</h1>
|
||||
<p>Organize and manage your QR code projects</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('projects.create_project') }}" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i>
|
||||
Create Project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Statistics -->
|
||||
<div class="project-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>{{ projects|length }}</h3>
|
||||
<p>Total Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card active">
|
||||
<div class="stat-icon active">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>{{ projects|selectattr('active_status', 'equalto', True)|list|length }}</h3>
|
||||
<p>Active Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>{{ projects|sum(attribute='total_qr_count') }}</h3>
|
||||
<p>Total QR Codes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-list"></i> All Projects</h2>
|
||||
</div>
|
||||
|
||||
{% if projects %}
|
||||
<div class="projects-grid">
|
||||
{% for project in projects %}
|
||||
<div class="project-card {% if not project.active_status %}inactive{% endif %}">
|
||||
<div class="project-header">
|
||||
<div class="project-info">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<p class="project-description">
|
||||
{% if project.description %}
|
||||
{{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}
|
||||
{% else %}
|
||||
No description provided
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="project-status">
|
||||
{% if project.active_status %}
|
||||
<span class="status-badge active">Active</span>
|
||||
{% else %}
|
||||
<span class="status-badge inactive">Inactive</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-stats-section">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
<span>{{ project.qr_count }} QR Codes</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>{{ project.created_date.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>{{ project.creator.full_name if project.creator else 'Unknown' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<a href="{{ url_for('projects.edit_project', project_id=project.id) }}"
|
||||
class="btn btn-secondary">
|
||||
<i class="fas fa-edit"></i>
|
||||
Edit
|
||||
</a>
|
||||
<form method="POST" action="{{ url_for('projects.toggle_project', project_id=project.id) }}"
|
||||
style="display: inline;">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<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>
|
||||
{% if project.active_status %}Deactivate{% else %}Activate{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
</div>
|
||||
<h3>No Projects Yet</h3>
|
||||
<p>Create your first project to organize your QR codes</p>
|
||||
<a href="{{ url_for('projects.create_project') }}" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i>
|
||||
Create First Project
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add smooth animations to project cards
|
||||
const projectCards = document.querySelectorAll('.project-card');
|
||||
|
||||
projectCards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'all 0.5s ease-out';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
// Confirm + loading state for toggle (activate/deactivate) forms.
|
||||
// IMPORTANT: the loading spinner must be applied AFTER confirm() resolves
|
||||
// true. Setting button.disabled before the form submits blocks submission
|
||||
// per the HTML spec (disabled buttons are not successful submitters).
|
||||
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...';
|
||||
setTimeout(() => {
|
||||
this.innerHTML = originalText;
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user