TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-05 13:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-05-27 09:13:03 +02:00
committed by GitHub
parent 7e119ab943
commit 6f1d593a42
1 changed files with 509 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+91 -88
View File
@@ -464,13 +464,13 @@
<script>
// Get token and check authentication
const token = localStorage.getItem('token');
if (!token) {
const token = localStorage.getItem('token');
if (!token) {
window.location.href = '/login.html';
}
}
// Show notification to user
function showNotification(message, type = 'info') {
// Show notification to user
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
@@ -493,11 +493,11 @@
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 = {}) {
// Override fetch to include token (but NOT for FormData requests)
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 || {});
@@ -505,8 +505,8 @@
headers.set('Authorization', `Bearer ${token}`);
}
// Set content type if not set
if (!headers.has('Content-Type') && init.body) {
// Only set content type if not FormData (FormData sets its own)
if (!headers.has('Content-Type') && init.body && !(init.body instanceof FormData)) {
headers.set('Content-Type', 'application/json');
}
@@ -514,15 +514,15 @@
}
return originalFetch(resource, init);
};
};
// Image handling
document.getElementById('uploadImageBtn').addEventListener('click', function() {
// Image handling
document.getElementById('uploadImageBtn').addEventListener('click', function() {
document.getElementById('bannerImage').click();
});
});
// Handle image upload
function handleImageUpload(event) {
// Handle image upload
function handleImageUpload(event) {
const fileInput = event.target;
const file = fileInput.files[0];
@@ -582,36 +582,36 @@
};
reader.readAsDataURL(file);
}
}
// Logout functionality
document.getElementById('logoutBtn').addEventListener('click', function() {
// 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;
// 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 = {
// Preset styles
const presets = {
info: {
backgroundColor: '#cce5ff',
textColor: '#004085',
@@ -632,10 +632,10 @@
textColor: '#721c24',
textAlign: 'center'
}
};
};
// Load current banner
async function loadBanner() {
// Load current banner
async function loadBanner() {
try {
const response = await fetch('/api/banner');
if (!response.ok) {
@@ -708,10 +708,9 @@
console.error('Chyba při načítání banneru:', error);
showNotification('Chyba při načítání banneru', 'error');
}
}
}
// Save banner
async function saveBanner(event) {
async function saveBanner(event) {
event.preventDefault();
const form = document.getElementById('bannerForm');
@@ -730,15 +729,20 @@
formData.append('text', document.getElementById('bannerText').value);
formData.append('link', document.getElementById('bannerLink').value);
// Add style properties to form data with the correct format
formData.append('style.backgroundColor', document.getElementById('bannerBgColor').value);
formData.append('style.textColor', document.getElementById('bannerTextColor').value);
formData.append('style.textAlign', document.getElementById('bannerTextAlign').value);
formData.append('style.fontSize', document.getElementById('bannerFontSize').value);
formData.append('style.padding', document.getElementById('bannerPadding').value);
formData.append('style.margin', document.getElementById('bannerMargin').value);
formData.append('style.borderRadius', document.getElementById('bannerBorderRadius').value);
formData.append('style.isVisible', document.getElementById('bannerVisible').checked);
// 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:');
@@ -746,20 +750,19 @@
console.log(key, value);
}
// Create a new headers object
const headers = new Headers();
// Don't set Content-Type header manually when using FormData
// The browser will set it automatically with the correct boundary
// Create headers object - DO NOT set Content-Type for FormData!
const headers = {};
// Add Authorization header if token exists
const token = localStorage.getItem('token');
if (token) {
headers.append('Authorization', `Bearer ${token}`);
headers['Authorization'] = `Bearer ${token}`;
}
// Send request with FormData (browser will set correct Content-Type with boundary)
const response = await fetch('/api/banner/update', {
method: 'POST',
headers: headers,
headers: headers, // No Content-Type header!
body: formData
});
@@ -812,10 +815,10 @@
submitButton.innerHTML = originalButtonText;
}
}
}
}
// Update color previews
function updateColorPreviews() {
// Update color previews
function updateColorPreviews() {
const bgColorPreview = document.getElementById('bgColorPreview');
const textColorPreview = document.getElementById('textColorPreview');
@@ -826,10 +829,10 @@
if (textColorPreview) {
textColorPreview.style.backgroundColor = document.getElementById('bannerTextColor').value;
}
}
}
// Remove image
function removeImage() {
// Remove image
function removeImage() {
const bannerImage = document.getElementById('bannerImage');
const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
@@ -869,10 +872,10 @@
const event = new Event('change');
bannerImage.dispatchEvent(event);
}
}
}
// Update banner preview
function updateBannerPreview() {
// Update banner preview
function updateBannerPreview() {
const bannerPreview = document.getElementById('bannerPreview');
const bannerPreviewText = bannerPreview?.querySelector('.banner-preview-text');
const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
@@ -963,10 +966,10 @@
// Make sure the preview is visible
bannerPreview.style.visibility = 'visible';
}
}
// Apply preset
function applyPreset(preset) {
// Apply preset
function applyPreset(preset) {
const style = presets[preset];
if (!style) return;
@@ -976,32 +979,32 @@
updateColorPreviews();
updateBannerPreview();
}
}
// Event Listeners
bannerBgColor.addEventListener('input', () => {
// Event Listeners
bannerBgColor.addEventListener('input', () => {
updateColorPreviews();
updateBannerPreview();
});
});
bannerTextColor.addEventListener('input', () => {
bannerTextColor.addEventListener('input', () => {
updateColorPreviews();
updateBannerPreview();
});
});
[bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
[bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
el.addEventListener('change', updateBannerPreview);
el.addEventListener('input', updateBannerPreview);
});
});
stylePresets.forEach(preset => {
stylePresets.forEach(preset => {
preset.addEventListener('click', () => applyPreset(preset.dataset.preset));
});
});
saveBannerBtn.addEventListener('click', saveBanner);
saveBannerBtn.addEventListener('click', saveBanner);
// Load banner when page loads
document.addEventListener('DOMContentLoaded', loadBanner);
// Load banner when page loads
document.addEventListener('DOMContentLoaded', loadBanner);
</script>
</body>
</html>