mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 04:22:58 +00:00
Tomáš Dvořák
1013 lines
39 KiB
HTML
1013 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Dashboard - PP Kunovice</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.header {
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
.logout-btn {
|
|
background: none;
|
|
border: 1px solid white;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.logout-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
.dashboard-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.form-group input[type="text"],
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
.form-group textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
.color-preview {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid #ddd;
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
}
|
|
.style-presets {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
.style-preset {
|
|
padding: 5px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.style-preset:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.banner-preview {
|
|
margin: 1rem 0;
|
|
padding: 0;
|
|
border: 2px dashed #ccc;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
display: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 150px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.banner-preview:hover {
|
|
border-color: #999;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.banner-preview img {
|
|
max-width: 100%;
|
|
max-height: 300px;
|
|
object-fit: contain;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.banner-preview.with-image {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.banner-preview-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
margin: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.banner-preview-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.7;
|
|
z-index: 1;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.banner-preview-text {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin: 0;
|
|
padding: 20px;
|
|
font-size: 1.2rem;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
|
color: inherit;
|
|
}
|
|
.color-picker-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.color-picker {
|
|
width: 40px;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.image-upload-container {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
border: 1px dashed #ddd;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.image-preview {
|
|
max-width: 200px;
|
|
max-height: 150px;
|
|
margin: 10px auto;
|
|
display: block;
|
|
}
|
|
.card p {
|
|
color: #666;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Form Actions */
|
|
.form-actions {
|
|
margin-top: 2rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1.25rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
text-decoration: none;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn i {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #4a6cf7;
|
|
color: white;
|
|
border-color: #4a6cf7;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #3a5ce4;
|
|
border-color: #3a5ce4;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border-color: #6c757d;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #5a6268;
|
|
border-color: #545b62;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
border-color: #bd2130;
|
|
}
|
|
|
|
/* Notifications */
|
|
.notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
animation: slideIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.notification i {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.notification.success {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.notification.error {
|
|
background-color: #dc3545;
|
|
}
|
|
|
|
.notification.warning {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fadeOut 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Admin Dashboard</h1>
|
|
<button class="logout-btn" id="logoutBtn">Odhlásit se</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Vítejte v administraci</h2>
|
|
|
|
<div class="card" style="margin: 2rem auto; max-width: 1000px;">
|
|
<h3>Správa banneru</h3>
|
|
|
|
<form id="bannerForm" enctype="multipart/form-data" onsubmit="saveBanner(event)">
|
|
<div class="form-group">
|
|
<label for="bannerText">Text banneru</label>
|
|
<textarea id="bannerText" name="text" placeholder="Zadejte text banneru" required></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerLink">Odkaz (volitelný)</label>
|
|
<input type="url" id="bannerLink" name="link" placeholder="https://example.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Nahrát obrázek</label>
|
|
<input type="file" id="bannerImage" name="image" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
|
|
<input type="hidden" id="removeImage" name="removeImage" value="false">
|
|
<div>
|
|
<button type="button" class="btn btn-secondary" id="uploadImageBtn">
|
|
<i class="fas fa-upload"></i> Vybrat obrázek
|
|
</button>
|
|
<button type="button" id="removeImageBtn" class="btn btn-danger" style="display: none; margin-left: 10px;" onclick="removeImage()">
|
|
<i class="fas fa-trash"></i> Odstranit obrázek
|
|
</button>
|
|
</div>
|
|
<div id="imagePreviewContainer" style="margin-top: 10px; display: none;">
|
|
<img id="imagePreview" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; border-radius: 4px; padding: 5px;" />
|
|
</div>
|
|
<p class="help-text" style="font-size: 0.8em; color: #666; margin-top: 5px;">
|
|
Doporučený poměr stran: 3:1 (např. 1200x400px)
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="bannerVisible" name="style[isVisible]" value="true" checked> Zobrazit banner
|
|
</label>
|
|
</div>
|
|
|
|
<h4>Styl</h4>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerBgColor">Barva pozadí</label>
|
|
<input type="text" id="bannerBgColor" name="style[backgroundColor]" value="#f8d7da" class="color-input">
|
|
<input type="color" id="bannerBgColorPicker" value="#f8d7da" class="color-picker">
|
|
<div id="bgColorPreview" class="color-preview"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerTextColor">Barva textu</label>
|
|
<input type="text" id="bannerTextColor" name="style[textColor]" value="#721c24" class="color-input">
|
|
<input type="color" id="bannerTextColorPicker" value="#721c24" class="color-picker">
|
|
<div id="textColorPreview" class="color-preview"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerTextAlign">Zarovnání textu</label>
|
|
<select id="bannerTextAlign" name="style[textAlign]">
|
|
<option value="left">Vlevo</option>
|
|
<option value="center" selected>Na střed</option>
|
|
<option value="right">Vpravo</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerFontSize">Velikost písma (px)</label>
|
|
<input type="number" id="bannerFontSize" name="style[fontSize]" value="18" min="10" max="50">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerPadding">Odsazení (px)</label>
|
|
<input type="number" id="bannerPadding" name="style[padding]" value="20" min="0" max="100">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerMargin">Okraj (px)</label>
|
|
<input type="number" id="bannerMargin" name="style[margin]" value="20" min="0" max="100">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerBorderRadius">Zaoblení rohů (px)</label>
|
|
<input type="number" id="bannerBorderRadius" name="style[borderRadius]" value="8" min="0" max="50">
|
|
</div>
|
|
|
|
<h4>Předvolby stylů</h4>
|
|
<div class="style-presets">
|
|
<div class="style-preset" data-preset="info">Info</div>
|
|
<div class="style-preset" data-preset="warning">Upozornění</div>
|
|
<div class="style-preset" data-preset="success">Úspěch</div>
|
|
<div class="style-preset" data-preset="error">Chyba</div>
|
|
</div>
|
|
|
|
<div class="banner-preview" id="bannerPreview" style="display: none;">
|
|
<div class="banner-preview-bg"></div>
|
|
<div class="banner-preview-content">
|
|
<div class="banner-preview-text">Náhled banneru se zde zobrazí</div>
|
|
<div id="imagePreviewContainer" style="display: none; margin-top: 15px; text-align: center;">
|
|
<img id="imagePreview" style="max-width: 100%; max-height: 200px; border-radius: 4px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" id="saveBannerBtn" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Uložit banner
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="dashboard-cards">
|
|
<div class="card">
|
|
<h3>Uživatelé</h3>
|
|
<p>Správa uživatelských účtů</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Nastavení</h3>
|
|
<p>Konfigurace systému</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Statistiky</h3>
|
|
<p>Přehled aktivit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Uživatelé</h3>
|
|
<p>Správa uživatelských účtů</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Nastavení</h3>
|
|
<p>Konfigurace systému</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Statistiky</h3>
|
|
<p>Přehled aktivit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Get token and check authentication
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
window.location.href = '/login.html';
|
|
}
|
|
|
|
// Show notification to user
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification ${type}`;
|
|
|
|
// Set icon based on notification type
|
|
let icon = 'info-circle';
|
|
if (type === 'success') icon = 'check-circle';
|
|
else if (type === 'error') icon = 'exclamation-circle';
|
|
else if (type === 'warning') icon = 'exclamation-triangle';
|
|
|
|
notification.innerHTML = `
|
|
<i class="fas fa-${icon}"></i>
|
|
<span>${message}</span>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// Auto-remove notification after delay
|
|
const delay = type === 'error' ? 5000 : 3000;
|
|
setTimeout(() => {
|
|
notification.classList.add('fade-out');
|
|
setTimeout(() => notification.remove(), 300);
|
|
}, delay);
|
|
}
|
|
|
|
// Override fetch to include token
|
|
const originalFetch = window.fetch;
|
|
window.fetch = async function(resource, init = {}) {
|
|
// Add token to headers if it's an API request
|
|
if (typeof resource === 'string' && resource.startsWith('/api/')) {
|
|
const headers = new Headers(init.headers || {});
|
|
if (token) {
|
|
headers.set('Authorization', `Bearer ${token}`);
|
|
}
|
|
|
|
// Set content type if not set
|
|
if (!headers.has('Content-Type') && init.body) {
|
|
headers.set('Content-Type', 'application/json');
|
|
}
|
|
|
|
init.headers = headers;
|
|
}
|
|
|
|
return originalFetch(resource, init);
|
|
};
|
|
|
|
// Image handling
|
|
document.getElementById('uploadImageBtn').addEventListener('click', function() {
|
|
document.getElementById('bannerImage').click();
|
|
});
|
|
|
|
// Handle image upload
|
|
function handleImageUpload(event) {
|
|
const fileInput = event.target;
|
|
const file = fileInput.files[0];
|
|
|
|
if (!file) return;
|
|
|
|
// Check file type
|
|
const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
|
|
if (!validImageTypes.includes(file.type)) {
|
|
alert('Vyberte prosím soubor obrázku (JPG, PNG, GIF, SVG)');
|
|
fileInput.value = ''; // Reset file input
|
|
return;
|
|
}
|
|
|
|
// Check file size (max 5MB)
|
|
const maxSize = 5 * 1024 * 1024; // 5MB
|
|
if (file.size > maxSize) {
|
|
alert('Maximální velikost souboru je 5MB');
|
|
fileInput.value = ''; // Reset file input
|
|
return;
|
|
}
|
|
|
|
// Show preview
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const preview = document.getElementById('imagePreview');
|
|
const previewContainer = document.getElementById('imagePreviewContainer');
|
|
const removeBtn = document.getElementById('removeImageBtn');
|
|
|
|
// Update preview elements if they exist
|
|
if (preview) {
|
|
preview.src = e.target.result;
|
|
preview.alt = 'Náhled obrázku';
|
|
}
|
|
|
|
if (previewContainer) {
|
|
previewContainer.style.display = 'block';
|
|
}
|
|
|
|
if (removeBtn) {
|
|
removeBtn.style.display = 'inline-block';
|
|
}
|
|
|
|
// Update hidden input
|
|
const removeImageInput = document.getElementById('removeImage');
|
|
if (removeImageInput) {
|
|
removeImageInput.value = 'false';
|
|
}
|
|
|
|
// Update banner preview with the new image
|
|
currentImage = e.target.result;
|
|
updateBannerPreview();
|
|
};
|
|
|
|
reader.onerror = function() {
|
|
alert('Při načítání obrázku došlo k chybě. Zkuste to prosím znovu.');
|
|
fileInput.value = ''; // Reset file input
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// Logout functionality
|
|
document.getElementById('logoutBtn').addEventListener('click', function() {
|
|
localStorage.removeItem('token');
|
|
window.location.href = '/';
|
|
});
|
|
|
|
// DOM Elements
|
|
const bannerText = document.getElementById('bannerText');
|
|
const bannerVisible = document.getElementById('bannerVisible');
|
|
const bannerBgColor = document.getElementById('bannerBgColor');
|
|
const bannerTextColor = document.getElementById('bannerTextColor');
|
|
const bannerTextAlign = document.getElementById('bannerTextAlign');
|
|
const bannerFontSize = document.getElementById('bannerFontSize');
|
|
const bannerPadding = document.getElementById('bannerPadding');
|
|
const bannerMargin = document.getElementById('bannerMargin');
|
|
const bannerBorderRadius = document.getElementById('bannerBorderRadius');
|
|
const bannerPreview = document.getElementById('bannerPreview');
|
|
const bannerPreviewContent = bannerPreview.querySelector('.banner-preview-content');
|
|
const bannerPreviewText = bannerPreview.querySelector('.banner-preview-text');
|
|
const bannerPreviewBg = bannerPreview.querySelector('.banner-preview-bg');
|
|
const bgColorPreview = document.getElementById('bgColorPreview');
|
|
const textColorPreview = document.getElementById('textColorPreview');
|
|
const saveBannerBtn = document.getElementById('saveBannerBtn');
|
|
const stylePresets = document.querySelectorAll('.style-preset');
|
|
let currentImage = null;
|
|
|
|
// Preset styles
|
|
const presets = {
|
|
info: {
|
|
backgroundColor: '#cce5ff',
|
|
textColor: '#004085',
|
|
textAlign: 'left'
|
|
},
|
|
warning: {
|
|
backgroundColor: '#fff3cd',
|
|
textColor: '#856404',
|
|
textAlign: 'center'
|
|
},
|
|
success: {
|
|
backgroundColor: '#d4edda',
|
|
textColor: '#155724',
|
|
textAlign: 'center'
|
|
},
|
|
error: {
|
|
backgroundColor: '#f8d7da',
|
|
textColor: '#721c24',
|
|
textAlign: 'center'
|
|
}
|
|
};
|
|
|
|
// Load current banner
|
|
async function loadBanner() {
|
|
try {
|
|
const response = await fetch('/api/banner');
|
|
if (!response.ok) {
|
|
throw new Error('Nepodařilo se načíst banner');
|
|
}
|
|
const data = await response.json();
|
|
|
|
if (data) {
|
|
// Update form fields
|
|
document.getElementById('bannerText').value = data.text || '';
|
|
document.getElementById('bannerBgColor').value = data.style?.backgroundColor || '#f8d7da';
|
|
document.getElementById('bannerTextColor').value = data.style?.color || '#721c24';
|
|
document.getElementById('bannerTextAlign').value = data.style?.textAlign || 'center';
|
|
document.getElementById('bannerFontSize').value = data.style?.fontSize || '18';
|
|
document.getElementById('bannerPadding').value = data.style?.padding || '20';
|
|
document.getElementById('bannerMargin').value = data.style?.margin || '20';
|
|
document.getElementById('bannerBorderRadius').value = data.style?.borderRadius || '8';
|
|
|
|
// Handle image
|
|
const imagePreview = document.getElementById('imagePreview');
|
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
|
const removeBtn = document.getElementById('removeImageBtn');
|
|
const removeImageInput = document.getElementById('removeImage');
|
|
|
|
if (data.image) {
|
|
currentImage = data.image;
|
|
|
|
if (imagePreview) {
|
|
imagePreview.src = data.image;
|
|
imagePreview.alt = 'Nahraný obrázek banneru';
|
|
}
|
|
|
|
if (imagePreviewContainer) {
|
|
imagePreviewContainer.style.display = 'block';
|
|
}
|
|
|
|
if (removeBtn) {
|
|
removeBtn.style.display = 'inline-block';
|
|
}
|
|
|
|
if (removeImageInput) {
|
|
removeImageInput.value = 'false';
|
|
}
|
|
} else {
|
|
// No image in the saved banner
|
|
currentImage = null;
|
|
|
|
if (imagePreview) {
|
|
imagePreview.removeAttribute('src');
|
|
}
|
|
|
|
if (imagePreviewContainer) {
|
|
imagePreviewContainer.style.display = 'none';
|
|
}
|
|
|
|
if (removeBtn) {
|
|
removeBtn.style.display = 'none';
|
|
}
|
|
|
|
if (removeImageInput) {
|
|
removeImageInput.value = 'true';
|
|
}
|
|
}
|
|
|
|
// Update previews
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
}
|
|
} catch (error) {
|
|
console.error('Chyba při načítání banneru:', error);
|
|
showNotification('Chyba při načítání banneru', 'error');
|
|
}
|
|
}
|
|
|
|
async function saveBanner(event) {
|
|
event.preventDefault();
|
|
|
|
const form = document.getElementById('bannerForm');
|
|
const formData = new FormData(form);
|
|
const submitButton = form.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton ? submitButton.innerHTML : '';
|
|
|
|
try {
|
|
// Show loading state
|
|
if (submitButton) {
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ukládám...';
|
|
}
|
|
|
|
// Add text and link to form data
|
|
formData.append('text', document.getElementById('bannerText').value);
|
|
formData.append('link', document.getElementById('bannerLink').value);
|
|
|
|
// Create style object with default values
|
|
const style = {
|
|
backgroundColor: document.getElementById('bannerBgColor').value,
|
|
textColor: document.getElementById('bannerTextColor').value,
|
|
textAlign: document.getElementById('bannerTextAlign').value,
|
|
fontSize: document.getElementById('bannerFontSize').value || '16px',
|
|
padding: document.getElementById('bannerPadding').value || '0px',
|
|
margin: document.getElementById('bannerMargin').value || '0px',
|
|
borderRadius: document.getElementById('bannerBorderRadius').value || '0px',
|
|
isVisible: document.getElementById('bannerVisible').checked
|
|
};
|
|
|
|
// Convert style object to JSON string and append to form data
|
|
formData.append('style', JSON.stringify(style));
|
|
|
|
// Log form data for debugging
|
|
console.log('Odesílám data:');
|
|
for (let [key, value] of formData.entries()) {
|
|
console.log(key, value);
|
|
}
|
|
|
|
// Create headers object
|
|
const headers = {};
|
|
|
|
// Add Authorization header if token exists
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
headers['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
// Note: Don't set Content-Type header when using FormData with files
|
|
// The browser will set it automatically with the correct boundary
|
|
|
|
const response = await fetch('/api/banner/update', {
|
|
method: 'POST',
|
|
headers: headers,
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text().catch(() => 'Neznámá chyba serveru');
|
|
console.error('Server error:', errorText);
|
|
let errorMessage = 'Chyba při ukládání banneru';
|
|
|
|
try {
|
|
const errorData = JSON.parse(errorText);
|
|
errorMessage = errorData.message || errorMessage;
|
|
} catch (e) {
|
|
errorMessage = errorText || errorMessage;
|
|
}
|
|
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
const result = await response.json().catch(() => ({}));
|
|
|
|
// Show success message using the showNotification function
|
|
showNotification('Banner byl úspěšně uložen', 'success');
|
|
|
|
// Update the preview with the new banner data
|
|
if (result.image) {
|
|
currentImage = result.image;
|
|
const imagePreview = document.getElementById('imagePreview');
|
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
|
const removeBtn = document.getElementById('removeImageBtn');
|
|
|
|
if (imagePreview) imagePreview.src = currentImage;
|
|
if (imagePreviewContainer) imagePreviewContainer.style.display = 'block';
|
|
if (removeBtn) removeBtn.style.display = 'inline-block';
|
|
|
|
// Update the hidden input if the image was changed
|
|
const removeImageInput = document.getElementById('removeImage');
|
|
if (removeImageInput) removeImageInput.value = 'false';
|
|
}
|
|
|
|
updateBannerPreview();
|
|
|
|
} catch (error) {
|
|
console.error('Chyba při ukládání banneru:', error);
|
|
showNotification(error.message || 'Nepodařilo se uložit banner', 'error');
|
|
|
|
} finally {
|
|
// Reset button state
|
|
if (submitButton) {
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonText;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update color previews
|
|
function updateColorPreviews() {
|
|
const bgColorPreview = document.getElementById('bgColorPreview');
|
|
const textColorPreview = document.getElementById('textColorPreview');
|
|
|
|
if (bgColorPreview) {
|
|
bgColorPreview.style.backgroundColor = document.getElementById('bannerBgColor').value;
|
|
}
|
|
|
|
if (textColorPreview) {
|
|
textColorPreview.style.backgroundColor = document.getElementById('bannerTextColor').value;
|
|
}
|
|
}
|
|
|
|
// Remove image
|
|
function removeImage() {
|
|
const bannerImage = document.getElementById('bannerImage');
|
|
const imagePreview = document.getElementById('imagePreview');
|
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
|
const removeBtn = document.getElementById('removeImageBtn');
|
|
const removeImageInput = document.getElementById('removeImage');
|
|
|
|
// Reset file input
|
|
if (bannerImage) bannerImage.value = '';
|
|
|
|
// Reset preview image
|
|
if (imagePreview) {
|
|
imagePreview.src = '';
|
|
imagePreview.removeAttribute('src');
|
|
}
|
|
|
|
// Hide preview container
|
|
if (imagePreviewContainer) {
|
|
imagePreviewContainer.style.display = 'none';
|
|
}
|
|
|
|
// Hide remove button
|
|
if (removeBtn) {
|
|
removeBtn.style.display = 'none';
|
|
}
|
|
|
|
// Update hidden input to indicate image removal
|
|
if (removeImageInput) {
|
|
removeImageInput.value = 'true';
|
|
}
|
|
|
|
// Clear the current image and update preview
|
|
currentImage = null;
|
|
updateBannerPreview();
|
|
|
|
// Trigger a change event on the file input in case any other code is listening
|
|
if (bannerImage) {
|
|
const event = new Event('change');
|
|
bannerImage.dispatchEvent(event);
|
|
}
|
|
}
|
|
|
|
// Update banner preview
|
|
function updateBannerPreview() {
|
|
const bannerPreview = document.getElementById('bannerPreview');
|
|
const bannerPreviewText = bannerPreview?.querySelector('.banner-preview-text');
|
|
const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
|
|
const bannerPreviewContent = bannerPreview?.querySelector('.banner-preview-content');
|
|
const imagePreview = document.getElementById('imagePreview');
|
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
|
|
|
if (!bannerPreview || !bannerPreviewText || !bannerPreviewBg || !bannerPreviewContent) {
|
|
return; // Elements not found
|
|
}
|
|
|
|
// Get current values
|
|
const bannerText = document.getElementById('bannerText')?.value || '';
|
|
const bannerBgColor = document.getElementById('bannerBgColor')?.value || '#f8d7da';
|
|
const bannerTextColor = document.getElementById('bannerTextColor')?.value || '#721c24';
|
|
const bannerTextAlign = document.getElementById('bannerTextAlign')?.value || 'center';
|
|
const bannerFontSize = parseInt(document.getElementById('bannerFontSize')?.value || '18');
|
|
const bannerPadding = parseInt(document.getElementById('bannerPadding')?.value || '20');
|
|
const bannerMargin = parseInt(document.getElementById('bannerMargin')?.value || '20');
|
|
const bannerBorderRadius = parseInt(document.getElementById('bannerBorderRadius')?.value || '8');
|
|
|
|
// Update banner styles
|
|
bannerPreview.style.display = 'block';
|
|
bannerPreview.style.padding = `${bannerPadding}px`;
|
|
bannerPreview.style.margin = `${bannerMargin}px auto`;
|
|
bannerPreview.style.borderRadius = `${bannerBorderRadius}px`;
|
|
bannerPreview.style.overflow = 'hidden';
|
|
bannerPreview.style.position = 'relative';
|
|
bannerPreview.style.backgroundColor = bannerBgColor;
|
|
bannerPreview.style.textAlign = bannerTextAlign;
|
|
|
|
// Update banner content
|
|
bannerPreviewText.textContent = bannerText || 'Náhled banneru';
|
|
bannerPreviewText.style.fontSize = `${bannerFontSize}px`;
|
|
bannerPreviewText.style.color = bannerTextColor;
|
|
bannerPreviewText.style.margin = '0';
|
|
bannerPreviewText.style.padding = '15px';
|
|
bannerPreviewText.style.position = 'relative';
|
|
bannerPreviewText.style.zIndex = '2';
|
|
|
|
// Handle image
|
|
const bannerImage = document.getElementById('bannerImage');
|
|
const hasImage = currentImage || (bannerImage && bannerImage.files.length > 0);
|
|
|
|
if (hasImage) {
|
|
bannerPreview.classList.add('with-image');
|
|
|
|
// Update background image
|
|
if (currentImage) {
|
|
bannerPreviewBg.style.backgroundImage = `url(${currentImage})`;
|
|
bannerPreviewBg.style.display = 'block';
|
|
|
|
// Show the image preview in the container
|
|
if (imagePreview && imagePreviewContainer) {
|
|
imagePreview.src = currentImage;
|
|
imagePreviewContainer.style.display = 'block';
|
|
}
|
|
} else {
|
|
bannerPreviewBg.style.backgroundImage = '';
|
|
bannerPreviewBg.style.display = 'none';
|
|
|
|
// Hide the image preview container if no image
|
|
if (imagePreviewContainer) {
|
|
imagePreviewContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Style the background image
|
|
bannerPreviewBg.style.position = 'absolute';
|
|
bannerPreviewBg.style.top = '0';
|
|
bannerPreviewBg.style.left = '0';
|
|
bannerPreviewBg.style.width = '100%';
|
|
bannerPreviewBg.style.height = '100%';
|
|
bannerPreviewBg.style.backgroundSize = 'cover';
|
|
bannerPreviewBg.style.backgroundPosition = 'center';
|
|
bannerPreviewBg.style.backgroundRepeat = 'no-repeat';
|
|
bannerPreviewBg.style.opacity = '0.7';
|
|
bannerPreviewBg.style.zIndex = '1';
|
|
} else {
|
|
bannerPreview.classList.remove('with-image');
|
|
bannerPreviewBg.style.display = 'none';
|
|
|
|
// Hide the image preview container
|
|
if (imagePreviewContainer) {
|
|
imagePreviewContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Make sure the preview is visible
|
|
bannerPreview.style.visibility = 'visible';
|
|
}
|
|
|
|
// Apply preset
|
|
function applyPreset(preset) {
|
|
const style = presets[preset];
|
|
if (!style) return;
|
|
|
|
bannerBgColor.value = style.backgroundColor;
|
|
bannerTextColor.value = style.textColor;
|
|
bannerTextAlign.value = style.textAlign;
|
|
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
}
|
|
|
|
// Event Listeners
|
|
bannerBgColor.addEventListener('input', () => {
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
});
|
|
|
|
bannerTextColor.addEventListener('input', () => {
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
});
|
|
|
|
[bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
|
|
el.addEventListener('change', updateBannerPreview);
|
|
el.addEventListener('input', updateBannerPreview);
|
|
});
|
|
|
|
stylePresets.forEach(preset => {
|
|
preset.addEventListener('click', () => applyPreset(preset.dataset.preset));
|
|
});
|
|
|
|
saveBannerBtn.addEventListener('click', saveBanner);
|
|
|
|
// Load banner when page loads
|
|
document.addEventListener('DOMContentLoaded', loadBanner);
|
|
</script>
|
|
</body>
|
|
</html>
|