Maciej Pienczyn
e8f479ff2f
- Add universal confirm/alert modal system with custom styling - Add toast notifications for success/error feedback - Replace all confirm(), alert(), prompt() with showConfirm/showToast - Support for custom icons, titles, input fields - Matches existing UI design patterns Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
547 lines
20 KiB
HTML
547 lines
20 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}ZOPK Newsy - Panel Admina{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-xl);
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: var(--font-size-2xl);
|
||
}
|
||
|
||
.filters {
|
||
display: flex;
|
||
gap: var(--spacing-md);
|
||
margin-bottom: var(--spacing-lg);
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
text-decoration: none;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.filter-btn:hover {
|
||
background: var(--background);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.news-table {
|
||
width: 100%;
|
||
background: var(--surface);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.news-table th,
|
||
.news-table td {
|
||
padding: var(--spacing-md);
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.news-table th {
|
||
background: var(--background);
|
||
font-weight: 600;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.news-table tr:hover {
|
||
background: var(--background);
|
||
}
|
||
|
||
.news-title {
|
||
max-width: 400px;
|
||
}
|
||
|
||
.news-title a {
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.news-title a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.news-title small {
|
||
display: block;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-xs);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-pending { background: #fef3c7; color: #92400e; }
|
||
.status-approved { background: #dcfce7; color: #166534; }
|
||
.status-rejected { background: #fee2e2; color: #991b1b; }
|
||
|
||
.source-badge {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-xs);
|
||
background: #f3f4f6;
|
||
color: #374151;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 4px 8px;
|
||
font-size: var(--font-size-xs);
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.action-btn.approve {
|
||
background: var(--success);
|
||
color: white;
|
||
}
|
||
|
||
.action-btn.reject {
|
||
background: var(--danger);
|
||
color: white;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-sm);
|
||
margin-top: var(--spacing-xl);
|
||
}
|
||
|
||
.pagination a,
|
||
.pagination span {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pagination a {
|
||
background: var(--surface);
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.pagination a:hover {
|
||
background: var(--background);
|
||
}
|
||
|
||
.pagination span.current {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: var(--spacing-2xl);
|
||
color: var(--text-secondary);
|
||
background: var(--surface);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
/* AI Stars Rating */
|
||
.ai-stars {
|
||
display: inline-flex;
|
||
gap: 1px;
|
||
font-size: 12px;
|
||
}
|
||
.ai-stars .star-filled { color: #f59e0b; }
|
||
.ai-stars .star-empty { color: #d1d5db; }
|
||
|
||
.ai-score-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 6px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
.ai-score-badge.score-5 { background: #dcfce7; color: #166534; }
|
||
.ai-score-badge.score-4 { background: #d1fae5; color: #047857; }
|
||
.ai-score-badge.score-3 { background: #fef3c7; color: #92400e; }
|
||
.ai-score-badge.score-2 { background: #fed7aa; color: #c2410c; }
|
||
.ai-score-badge.score-1 { background: #fee2e2; color: #991b1b; }
|
||
.ai-score-badge.score-none { background: #f3f4f6; color: #6b7280; }
|
||
|
||
/* Sortable Headers */
|
||
.sortable-header {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
}
|
||
.sortable-header a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.sortable-header a:hover {
|
||
color: var(--primary);
|
||
}
|
||
.sortable-header.active a {
|
||
color: var(--primary);
|
||
font-weight: 700;
|
||
}
|
||
.sort-icon {
|
||
font-size: 10px;
|
||
opacity: 0.5;
|
||
}
|
||
.sortable-header.active .sort-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Sort Controls */
|
||
.sort-controls {
|
||
display: flex;
|
||
gap: var(--spacing-md);
|
||
align-items: center;
|
||
margin-left: auto;
|
||
padding-left: var(--spacing-lg);
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
.sort-controls select {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.news-table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
}
|
||
.sort-controls {
|
||
margin-left: 0;
|
||
padding-left: 0;
|
||
border-left: none;
|
||
width: 100%;
|
||
margin-top: var(--spacing-md);
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<div>
|
||
<h1>Zarządzanie newsami ZOPK</h1>
|
||
<p class="text-muted">{{ total }} artykułów</p>
|
||
</div>
|
||
<a href="{{ url_for('admin_zopk') }}" class="btn btn-secondary">Powrót do dashboardu</a>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<span class="text-muted">Status:</span>
|
||
<a href="{{ url_for('admin_zopk_news', status='all', sort=current_sort, dir=current_dir) }}" class="filter-btn {% if current_status == 'all' %}active{% endif %}">Wszystkie</a>
|
||
<a href="{{ url_for('admin_zopk_news', status='pending', sort=current_sort, dir=current_dir) }}" class="filter-btn {% if current_status == 'pending' %}active{% endif %}">Oczekujące</a>
|
||
<a href="{{ url_for('admin_zopk_news', status='approved', sort=current_sort, dir=current_dir) }}" class="filter-btn {% if current_status == 'approved' %}active{% endif %}">Zatwierdzone</a>
|
||
<a href="{{ url_for('admin_zopk_news', status='rejected', sort=current_sort, dir=current_dir) }}" class="filter-btn {% if current_status == 'rejected' %}active{% endif %}">Odrzucone</a>
|
||
|
||
<div class="sort-controls">
|
||
<span class="text-muted">Sortuj:</span>
|
||
<select id="sort-select" onchange="updateSort()">
|
||
<option value="date-desc" {% if current_sort == 'date' and current_dir == 'desc' %}selected{% endif %}>Data (najnowsze)</option>
|
||
<option value="date-asc" {% if current_sort == 'date' and current_dir == 'asc' %}selected{% endif %}>Data (najstarsze)</option>
|
||
<option value="score-desc" {% if current_sort == 'score' and current_dir == 'desc' %}selected{% endif %}>Ocena AI (najwyższa)</option>
|
||
<option value="score-asc" {% if current_sort == 'score' and current_dir == 'asc' %}selected{% endif %}>Ocena AI (najniższa)</option>
|
||
<option value="title-asc" {% if current_sort == 'title' and current_dir == 'asc' %}selected{% endif %}>Tytuł (A-Z)</option>
|
||
<option value="title-desc" {% if current_sort == 'title' and current_dir == 'desc' %}selected{% endif %}>Tytuł (Z-A)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{% if news_items %}
|
||
<table class="news-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="sortable-header {% if current_sort == 'title' %}active{% endif %}" style="width: 35%">
|
||
<a href="{{ url_for('admin_zopk_news', status=current_status, sort='title', dir='desc' if current_sort == 'title' and current_dir == 'asc' else 'asc') }}">
|
||
Tytuł
|
||
<span class="sort-icon">{% if current_sort == 'title' %}{{ '▲' if current_dir == 'asc' else '▼' }}{% else %}⇅{% endif %}</span>
|
||
</a>
|
||
</th>
|
||
<th>Źródło</th>
|
||
<th class="sortable-header {% if current_sort == 'score' %}active{% endif %}">
|
||
<a href="{{ url_for('admin_zopk_news', status=current_status, sort='score', dir='asc' if current_sort == 'score' and current_dir == 'desc' else 'desc') }}">
|
||
Ocena AI
|
||
<span class="sort-icon">{% if current_sort == 'score' %}{{ '▲' if current_dir == 'asc' else '▼' }}{% else %}⇅{% endif %}</span>
|
||
</a>
|
||
</th>
|
||
<th>Status</th>
|
||
<th class="sortable-header {% if current_sort == 'date' %}active{% endif %}">
|
||
<a href="{{ url_for('admin_zopk_news', status=current_status, sort='date', dir='asc' if current_sort == 'date' and current_dir == 'desc' else 'desc') }}">
|
||
Data
|
||
<span class="sort-icon">{% if current_sort == 'date' %}{{ '▲' if current_dir == 'asc' else '▼' }}{% else %}⇅{% endif %}</span>
|
||
</a>
|
||
</th>
|
||
<th>Akcje</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for news in news_items %}
|
||
<tr id="news-row-{{ news.id }}">
|
||
<td class="news-title">
|
||
<a href="{{ news.url }}" target="_blank" rel="noopener">{{ news.title }}</a>
|
||
<small>{{ news.source_name or news.source_domain }}</small>
|
||
</td>
|
||
<td><span class="source-badge">{{ news.source_type }}</span></td>
|
||
<td>
|
||
{% if news.ai_relevance_score %}
|
||
<span class="ai-score-badge score-{{ news.ai_relevance_score }}" title="{{ news.ai_evaluation_reason or 'Brak opisu' }}">
|
||
<span class="ai-stars">
|
||
{% for i in range(1, 6) %}
|
||
<span class="{{ 'star-filled' if i <= news.ai_relevance_score else 'star-empty' }}">★</span>
|
||
{% endfor %}
|
||
</span>
|
||
</span>
|
||
{% elif news.ai_relevant is not none %}
|
||
<span class="ai-score-badge score-{{ '3' if news.ai_relevant else '1' }}" title="{{ news.ai_evaluation_reason or 'Brak opisu' }}">
|
||
{{ '✓ Relevant' if news.ai_relevant else '✗ Nie' }}
|
||
</span>
|
||
{% else %}
|
||
<span class="ai-score-badge score-none">—</span>
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<span class="status-badge status-{{ news.status }}">
|
||
{% if news.status == 'pending' %}Oczekuje{% elif news.status == 'approved' %}Zatwierdzony{% else %}Odrzucony{% endif %}
|
||
</span>
|
||
</td>
|
||
<td>{{ news.published_at.strftime('%d.%m.%Y') if news.published_at else (news.created_at.strftime('%d.%m.%Y') if news.created_at else '-') }}</td>
|
||
<td>
|
||
{% if news.status == 'pending' %}
|
||
<button class="action-btn approve" onclick="approveNews({{ news.id }})">Zatwierdź</button>
|
||
<button class="action-btn reject" onclick="rejectNews({{ news.id }})">Odrzuć</button>
|
||
{% elif news.status == 'approved' %}
|
||
<button class="action-btn reject" onclick="rejectNews({{ news.id }})">Odrzuć</button>
|
||
{% else %}
|
||
<button class="action-btn approve" onclick="approveNews({{ news.id }})">Przywróć</button>
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
{% if total_pages > 1 %}
|
||
<nav class="pagination">
|
||
{% if page > 1 %}
|
||
<a href="{{ url_for('admin_zopk_news', page=page-1, status=current_status, sort=current_sort, dir=current_dir) }}">« Poprzednia</a>
|
||
{% endif %}
|
||
|
||
{% for p in range(1, total_pages + 1) %}
|
||
{% if p == page %}
|
||
<span class="current">{{ p }}</span>
|
||
{% elif p <= 3 or p > total_pages - 3 or (p >= page - 1 and p <= page + 1) %}
|
||
<a href="{{ url_for('admin_zopk_news', page=p, status=current_status, sort=current_sort, dir=current_dir) }}">{{ p }}</a>
|
||
{% elif p == 4 or p == total_pages - 3 %}
|
||
<span>...</span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if page < total_pages %}
|
||
<a href="{{ url_for('admin_zopk_news', page=page+1, status=current_status, sort=current_sort, dir=current_dir) }}">Następna »</a>
|
||
{% endif %}
|
||
</nav>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<p>Brak artykułów o tym statusie.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Universal Confirm/Alert Modal -->
|
||
<div class="modal-overlay" id="confirmModal">
|
||
<div class="modal" style="max-width: 420px;">
|
||
<div style="text-align: center; margin-bottom: var(--spacing-lg);">
|
||
<div class="modal-icon" id="confirmModalIcon">❓</div>
|
||
<h3 id="confirmModalTitle" style="margin-bottom: var(--spacing-sm);">Potwierdzenie</h3>
|
||
<p class="modal-description" id="confirmModalMessage">Czy na pewno chcesz kontynuować?</p>
|
||
</div>
|
||
<div class="form-group" id="confirmModalInputGroup" style="display: none;">
|
||
<label id="confirmModalInputLabel">Wprowadź wartość:</label>
|
||
<input type="text" id="confirmModalInput" placeholder="">
|
||
</div>
|
||
<div class="modal-actions" style="justify-content: center;">
|
||
<button type="button" class="btn btn-secondary" id="confirmModalCancel">Anuluj</button>
|
||
<button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toastContainer" style="position: fixed; top: 80px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 10px;"></div>
|
||
|
||
<style>
|
||
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
|
||
.modal-overlay.active { display: flex; }
|
||
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); max-width: 500px; width: 90%; }
|
||
.modal-icon { font-size: 3em; margin-bottom: var(--spacing-md); }
|
||
.modal-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
|
||
.toast { padding: 12px 20px; border-radius: var(--radius); background: var(--surface); border-left: 4px solid var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease; max-width: 350px; }
|
||
.toast.success { border-left-color: var(--success); }
|
||
.toast.error { border-left-color: var(--error); }
|
||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
const csrfToken = '{{ csrf_token() }}';
|
||
|
||
// Universal Modal System
|
||
let confirmModalResolve = null;
|
||
|
||
function showConfirm(message, options = {}) {
|
||
return new Promise((resolve) => {
|
||
confirmModalResolve = resolve;
|
||
const modal = document.getElementById('confirmModal');
|
||
document.getElementById('confirmModalIcon').textContent = options.icon || '❓';
|
||
document.getElementById('confirmModalTitle').textContent = options.title || 'Potwierdzenie';
|
||
document.getElementById('confirmModalMessage').innerHTML = message;
|
||
document.getElementById('confirmModalCancel').textContent = options.cancelText || 'Anuluj';
|
||
document.getElementById('confirmModalOk').textContent = options.okText || 'OK';
|
||
document.getElementById('confirmModalOk').className = 'btn ' + (options.okClass || 'btn-primary');
|
||
|
||
const inputGroup = document.getElementById('confirmModalInputGroup');
|
||
if (options.showInput) {
|
||
inputGroup.style.display = 'block';
|
||
document.getElementById('confirmModalInputLabel').textContent = options.inputLabel || 'Wprowadź wartość:';
|
||
document.getElementById('confirmModalInput').value = '';
|
||
document.getElementById('confirmModalInput').placeholder = options.inputPlaceholder || '';
|
||
} else {
|
||
inputGroup.style.display = 'none';
|
||
}
|
||
document.getElementById('confirmModalCancel').style.display = options.alertOnly ? 'none' : '';
|
||
modal.classList.add('active');
|
||
});
|
||
}
|
||
|
||
function closeConfirmModal(result) {
|
||
document.getElementById('confirmModal').classList.remove('active');
|
||
if (confirmModalResolve) { confirmModalResolve(result); confirmModalResolve = null; }
|
||
}
|
||
|
||
document.getElementById('confirmModalOk').addEventListener('click', () => {
|
||
const inputGroup = document.getElementById('confirmModalInputGroup');
|
||
closeConfirmModal(inputGroup.style.display !== 'none' ? document.getElementById('confirmModalInput').value : true);
|
||
});
|
||
document.getElementById('confirmModalCancel').addEventListener('click', () => closeConfirmModal(false));
|
||
document.getElementById('confirmModal').addEventListener('click', (e) => { if (e.target.id === 'confirmModal') closeConfirmModal(false); });
|
||
|
||
function showToast(message, type = 'info', duration = 4000) {
|
||
const container = document.getElementById('toastContainer');
|
||
const icons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast ${type}`;
|
||
toast.innerHTML = `<span style="font-size: 1.2em;">${icons[type] || icons.info}</span><span>${message}</span>`;
|
||
container.appendChild(toast);
|
||
setTimeout(() => { toast.style.animation = 'slideOut 0.3s ease forwards'; setTimeout(() => toast.remove(), 300); }, duration);
|
||
}
|
||
|
||
function updateSort() {
|
||
const select = document.getElementById('sort-select');
|
||
const [sort, dir] = select.value.split('-');
|
||
const url = new URL(window.location);
|
||
url.searchParams.set('sort', sort);
|
||
url.searchParams.set('dir', dir);
|
||
url.searchParams.delete('page'); // Reset to first page
|
||
window.location.href = url.toString();
|
||
}
|
||
|
||
async function approveNews(newsId) {
|
||
try {
|
||
const response = await fetch(`/admin/zopk/news/${newsId}/approve`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': csrfToken
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
showToast('News został zatwierdzony', 'success');
|
||
setTimeout(() => location.reload(), 800);
|
||
} else {
|
||
showToast(data.error || 'Wystąpił błąd', 'error');
|
||
}
|
||
} catch (error) {
|
||
showToast('Błąd połączenia: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function rejectNews(newsId) {
|
||
const reason = await showConfirm('Podaj powód odrzucenia (opcjonalnie):', {
|
||
icon: '✕',
|
||
title: 'Odrzuć news',
|
||
showInput: true,
|
||
inputLabel: 'Powód odrzucenia:',
|
||
inputPlaceholder: 'np. Nieistotny artykuł...',
|
||
okText: 'Odrzuć',
|
||
okClass: 'btn-danger'
|
||
});
|
||
if (reason === false) return;
|
||
|
||
try {
|
||
const response = await fetch(`/admin/zopk/news/${newsId}/reject`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': csrfToken
|
||
},
|
||
body: JSON.stringify({ reason: reason })
|
||
});
|
||
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
showToast('News został odrzucony', 'success');
|
||
setTimeout(() => location.reload(), 800);
|
||
} else {
|
||
showToast(data.error || 'Wystąpił błąd', 'error');
|
||
}
|
||
} catch (error) {
|
||
showToast('Błąd połączenia: ' + error.message, 'error');
|
||
}
|
||
}
|
||
{% endblock %}
|