Better link for clients

parent 4b1d26d2
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
value="{{ search_query if search_query else '' }}" value="{{ search_query if search_query else '' }}"
id="searchInput"> id="searchInput">
<button class="btn btn-primary" type="button" id="searchButton"> <button class="btn btn-primary" type="button" id="searchButton">
<i class="bi bi-search"></i> Search Search
</button> </button>
{% if search_query %} {% if search_query %}
<button class="btn btn-outline-secondary" type="button" id="clearSearchButton"> <button class="btn btn-outline-secondary" type="button" id="clearSearchButton">
<i class="bi bi-x"></i> Clear Clear
</button> </button>
{% endif %} {% endif %}
</div> </div>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button class="btn btn-outline-primary w-100" type="button" id="resetFilterButton"> <button class="btn btn-outline-primary w-100" type="button" id="resetFilterButton">
<i class="bi bi-arrow-clockwise"></i> Reset Reset
</button> </button>
</div> </div>
</div> </div>
...@@ -174,77 +174,87 @@ ...@@ -174,77 +174,87 @@
{% block extra_js %} {% block extra_js %}
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log('Clients page JavaScript loaded');
// Get URL parameters // Get URL parameters
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const currentSearch = urlParams.get('search') || ''; const currentSearch = urlParams.get('search') || '';
const currentStatus = urlParams.get('status') || ''; const currentStatus = urlParams.get('status') || '';
console.log('Current search:', currentSearch);
console.log('Current status filter:', currentStatus);
// Set initial values // Set initial values
document.getElementById('searchInput').value = currentSearch; const searchInput = document.getElementById('searchInput');
document.getElementById('statusFilter').value = currentStatus; const statusFilter = document.getElementById('statusFilter');
// Search functionality if (searchInput) searchInput.value = currentSearch;
document.getElementById('searchButton').addEventListener('click', function() { if (statusFilter) statusFilter.value = currentStatus;
const searchQuery = document.getElementById('searchInput').value.trim();
const statusFilter = document.getElementById('statusFilter').value; // Function to build URL with filters
function buildFilterUrl() {
const searchQuery = searchInput ? searchInput.value.trim() : '';
const statusValue = statusFilter ? statusFilter.value : '';
let url = '{{ url_for("main.clients") }}?'; let url = '{{ url_for("main.clients") }}?';
if (searchQuery) { if (searchQuery) {
url += 'search=' + encodeURIComponent(searchQuery) + '&'; url += 'search=' + encodeURIComponent(searchQuery) + '&';
} }
if (statusFilter) { if (statusValue) {
url += 'status=' + encodeURIComponent(statusFilter) + '&'; url += 'status=' + encodeURIComponent(statusValue) + '&';
} }
// Remove trailing & or ? // Remove trailing & or ?
url = url.replace(/[&?]$/, ''); url = url.replace(/[&?]$/, '');
window.location.href = url; return url;
}); }
// Clear search functionality
document.getElementById('clearSearchButton').addEventListener('click', function() {
document.getElementById('searchInput').value = '';
const statusFilter = document.getElementById('statusFilter').value;
let url = '{{ url_for("main.clients") }}?'; // Search functionality
if (statusFilter) { if (document.getElementById('searchButton')) {
url += 'status=' + encodeURIComponent(statusFilter) + '&'; document.getElementById('searchButton').addEventListener('click', function() {
} console.log('Search button clicked');
window.location.href = buildFilterUrl();
});
}
// Remove trailing & or ? // Clear search functionality
url = url.replace(/[&?]$/, ''); if (document.getElementById('clearSearchButton')) {
window.location.href = url; document.getElementById('clearSearchButton').addEventListener('click', function() {
}); console.log('Clear search button clicked');
if (searchInput) searchInput.value = '';
window.location.href = buildFilterUrl();
});
}
// Status filter change // Status filter change
document.getElementById('statusFilter').addEventListener('change', function() { if (statusFilter) {
const searchQuery = document.getElementById('searchInput').value.trim(); statusFilter.addEventListener('change', function() {
const statusFilter = this.value; console.log('Status filter changed to:', this.value);
window.location.href = buildFilterUrl();
let url = '{{ url_for("main.clients") }}?'; });
if (searchQuery) { }
url += 'search=' + encodeURIComponent(searchQuery) + '&';
}
if (statusFilter) {
url += 'status=' + encodeURIComponent(statusFilter) + '&';
}
// Remove trailing & or ?
url = url.replace(/[&?]$/, '');
window.location.href = url;
});
// Reset filter functionality // Reset filter functionality
document.getElementById('resetFilterButton').addEventListener('click', function() { if (document.getElementById('resetFilterButton')) {
window.location.href = '{{ url_for("main.clients") }}'; document.getElementById('resetFilterButton').addEventListener('click', function() {
}); console.log('Reset filter button clicked');
window.location.href = '{{ url_for("main.clients") }}';
});
}
// Allow Enter key for search // Allow Enter key for search
document.getElementById('searchInput').addEventListener('keypress', function(e) { if (searchInput) {
if (e.key === 'Enter') { searchInput.addEventListener('keypress', function(e) {
document.getElementById('searchButton').click(); if (e.key === 'Enter') {
} console.log('Enter key pressed');
}); if (document.getElementById('searchButton')) {
document.getElementById('searchButton').click();
} else {
window.location.href = buildFilterUrl();
}
}
});
}
}); });
</script> </script>
{% endblock %} {% endblock %}
\ No newline at end of file
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en">
<head> {% block title %}Dashboard - Fixture Manager{% endblock %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% block extra_css %}
<title>Dashboard - Fixture Manager</title> <style>
<style> .welcome {
body { background: white;
font-family: Arial, sans-serif; padding: 2rem;
margin: 0; border-radius: 8px;
padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
background-color: #f5f5f5; margin-bottom: 2rem;
} }
.header { .stats-grid {
background-color: #007bff; display: grid;
color: white; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 1rem 2rem; gap: 1rem;
display: flex; margin-bottom: 2rem;
justify-content: space-between; }
align-items: center; .stat-card {
} background: white;
.logo { padding: 1.5rem;
font-size: 1.5rem; border-radius: 8px;
font-weight: bold; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
} text-align: center;
.nav { }
display: flex; .stat-number {
gap: 1rem; font-size: 2rem;
} font-weight: bold;
.nav a { color: #007bff;
color: white; margin-bottom: 0.5rem;
text-decoration: none; }
padding: 0.5rem 1rem; .stat-label {
border-radius: 4px; color: #666;
transition: background-color 0.3s; font-size: 0.9rem;
} }
.nav a:hover { .recent-section {
background-color: rgba(255,255,255,0.1); background: white;
} padding: 2rem;
.container { border-radius: 8px;
max-width: 1200px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin: 2rem auto; margin-bottom: 2rem;
padding: 0 2rem; }
} .section-title {
.welcome { font-size: 1.2rem;
background: white; font-weight: bold;
padding: 2rem; margin-bottom: 1rem;
border-radius: 8px; color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
margin-bottom: 2rem; .item-list {
} list-style: none;
.stats-grid { padding: 0;
display: grid; margin: 0;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
gap: 1rem; .item-list li {
margin-bottom: 2rem; padding: 0.5rem 0;
} border-bottom: 1px solid #eee;
.stat-card { }
background: white; .item-list li:last-child {
padding: 1.5rem; border-bottom: none;
border-radius: 8px; }
box-shadow: 0 2px 10px rgba(0,0,0,0.1); </style>
text-align: center; {% endblock %}
}
.stat-number {
font-size: 2rem;
font-weight: bold;
color: #007bff;
margin-bottom: 0.5rem;
}
.stat-label {
color: #666;
font-size: 0.9rem;
}
.recent-section {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.section-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
color: #333;
}
.item-list {
list-style: none;
padding: 0;
margin: 0;
}
.item-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.item-list li:last-child {
border-bottom: none;
}
.alert {
padding: 12px;
margin-bottom: 1rem;
border-radius: 4px;
}
.alert-error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.btn {
display: inline-block;
padding: 8px 16px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 0.9rem;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">🥊 Fixture Manager</div>
<div class="nav">
<a href="{{ url_for('main.dashboard') }}">Dashboard</a>
<a href="{{ url_for('main.fixtures') }}">Fixtures</a>
<a href="{{ url_for('main.uploads') }}">Uploads</a>
<a href="{{ url_for('main.statistics') }}">Statistics</a>
<a href="{{ url_for('main.clients') }}">Clients</a>
<a href="{{ url_for('main.user_tokens') }}">API Tokens</a>
{% if current_user.is_admin %}
<a href="{{ url_for('main.admin_panel') }}">Admin</a>
{% endif %}
<a href="{{ url_for('auth.logout') }}">Logout</a>
</div>
</div>
<div class="container"> {% block content %}
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
{% for category, message in messages %} {% for category, message in messages %}
...@@ -211,5 +129,4 @@ ...@@ -211,5 +129,4 @@
</div> </div>
</div> </div>
</div> </div>
</body> {% endblock %}
</html> \ No newline at end of file
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment