style: Ładny modal potwierdzenia w release notes
- Modal z ikoną dzwoneczka zamiast natywnego confirm() - Toast zamiast alert() dla wyników - Informacja o działaniu powiadomień Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
85cb5f14e0
commit
69c0d7fc72
@ -332,54 +332,194 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Modal -->
|
||||
<div class="confirm-modal-overlay" id="confirmModal">
|
||||
<div class="confirm-modal">
|
||||
<div class="confirm-modal-icon">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="confirm-modal-title" id="confirmTitle">Wyślij powiadomienia</h3>
|
||||
<p class="confirm-modal-message" id="confirmMessage">Czy na pewno chcesz wysłać powiadomienia?</p>
|
||||
<p class="confirm-modal-info" id="confirmInfo"></p>
|
||||
<div class="confirm-modal-actions">
|
||||
<button type="button" class="btn btn-outline" onclick="closeConfirmModal()">Anuluj</button>
|
||||
<button type="button" class="btn btn-primary" id="confirmButton">Wyślij</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>
|
||||
.confirm-modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
.confirm-modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
.confirm-modal {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.confirm-modal-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #dbeafe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
}
|
||||
.confirm-modal-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #2563eb;
|
||||
}
|
||||
.confirm-modal-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
.confirm-modal-message {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
.confirm-modal-info {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
.confirm-modal-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
}
|
||||
.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: toastIn 0.3s ease; }
|
||||
.toast.success { border-left-color: var(--success); }
|
||||
.toast.error { border-left-color: var(--error); }
|
||||
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
// Toast function
|
||||
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]||'ℹ'}</span><span>${message}</span>`;
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => { toast.style.animation = 'toastOut 0.3s ease forwards'; setTimeout(() => toast.remove(), 300); }, duration);
|
||||
}
|
||||
|
||||
// Confirm modal
|
||||
let confirmCallback = null;
|
||||
|
||||
function showConfirmModal(title, message, info, onConfirm) {
|
||||
document.getElementById('confirmTitle').textContent = title;
|
||||
document.getElementById('confirmMessage').textContent = message;
|
||||
document.getElementById('confirmInfo').textContent = info || '';
|
||||
document.getElementById('confirmModal').classList.add('active');
|
||||
confirmCallback = onConfirm;
|
||||
}
|
||||
|
||||
function closeConfirmModal() {
|
||||
document.getElementById('confirmModal').classList.remove('active');
|
||||
confirmCallback = null;
|
||||
}
|
||||
|
||||
document.getElementById('confirmButton').addEventListener('click', function() {
|
||||
if (confirmCallback) {
|
||||
confirmCallback();
|
||||
}
|
||||
closeConfirmModal();
|
||||
});
|
||||
|
||||
document.getElementById('confirmModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeConfirmModal();
|
||||
}
|
||||
});
|
||||
|
||||
{% if current_user.is_authenticated and current_user.is_admin %}
|
||||
function notifyRelease(version, btn) {
|
||||
if (!confirm('Czy na pewno chcesz wysłać powiadomienia o wersji ' + version + ' do wszystkich użytkowników?')) {
|
||||
return;
|
||||
}
|
||||
showConfirmModal(
|
||||
'Wyślij powiadomienia',
|
||||
`Czy na pewno chcesz wysłać powiadomienia o wersji ${version}?`,
|
||||
'Powiadomienie pojawi się przy ikonce dzwoneczka u wszystkich użytkowników.',
|
||||
function() {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '⏳ Wysyłanie...';
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '⏳ Wysyłanie...';
|
||||
// Get first 3 highlights from the release card
|
||||
const card = btn.closest('.release-card');
|
||||
const highlights = [];
|
||||
const items = card.querySelectorAll('.change-category.new .change-list li');
|
||||
items.forEach((item, i) => {
|
||||
if (i < 3) highlights.push(item.textContent.trim());
|
||||
});
|
||||
|
||||
// Get first 3 highlights from the release card
|
||||
const card = btn.closest('.release-card');
|
||||
const highlights = [];
|
||||
const items = card.querySelectorAll('.change-category.new .change-list li');
|
||||
items.forEach((item, i) => {
|
||||
if (i < 3) highlights.push(item.textContent.trim());
|
||||
});
|
||||
|
||||
fetch('/admin/notify-release', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
version: version,
|
||||
highlights: highlights
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
btn.innerHTML = '✅ Wysłano';
|
||||
btn.classList.add('sent');
|
||||
alert(data.message);
|
||||
} else {
|
||||
btn.innerHTML = '❌ Błąd';
|
||||
btn.disabled = false;
|
||||
alert('Błąd: ' + data.error);
|
||||
fetch('/admin/notify-release', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
version: version,
|
||||
highlights: highlights
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
btn.innerHTML = '✅ Wysłano';
|
||||
btn.classList.add('sent');
|
||||
showToast(data.message, 'success');
|
||||
} else {
|
||||
btn.innerHTML = '❌ Błąd';
|
||||
btn.disabled = false;
|
||||
showToast('Błąd: ' + data.error, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
btn.innerHTML = '❌ Błąd';
|
||||
btn.disabled = false;
|
||||
showToast('Błąd połączenia', 'error');
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
btn.innerHTML = '❌ Błąd';
|
||||
btn.disabled = false;
|
||||
alert('Błąd połączenia: ' + error);
|
||||
});
|
||||
);
|
||||
}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user