TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-04 20:42:59 +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 12:58:01 +02:00
committed by GitHub
parent bf2433e6ed
commit 2b7fdb4f04
1 changed files with 196 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+187 -74
View File
@@ -195,6 +195,8 @@
min-height: 180px; min-height: 180px;
transition: var(--transition); transition: var(--transition);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
width: 100%;
max-width: 100%;
} }
.banner-preview:hover { .banner-preview:hover {
@@ -232,14 +234,11 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
text-align: center; text-align: center;
padding: 40px 30px; padding: 20px;
margin: 0; margin: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: block;
flex-direction: column;
justify-content: center;
min-height: 180px;
} }
.banner-preview-bg { .banner-preview-bg {
@@ -260,12 +259,9 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
margin: 0; margin: 0;
padding: 20px; padding: 0;
font-size: 1.2rem; line-height: 1.5;
line-height: 1.6;
word-wrap: break-word; word-wrap: break-word;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
} }
.color-picker-container { .color-picker-container {
display: flex; display: flex;
@@ -471,6 +467,59 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
.drag-drop-area {
border: 2px dashed var(--border-color);
border-radius: var(--border-radius);
padding: 30px 20px;
text-align: center;
background-color: #f8f9fa;
cursor: pointer;
transition: var(--transition);
margin-bottom: 15px;
position: relative;
}
.drag-drop-area:hover, .drag-drop-area.dragover {
border-color: var(--primary-color);
background-color: rgba(74, 108, 247, 0.05);
}
.drag-drop-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--secondary-color);
}
.drag-drop-message i {
font-size: 2.5rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.drag-drop-message p {
margin: 0;
font-size: 1rem;
}
.image-actions {
display: flex;
gap: 10px;
}
.image-preview {
max-width: 100%;
max-height: 200px;
border-radius: 4px;
margin-top: 10px;
display: none;
}
.banner-preview.with-image {
min-height: 220px;
}
</style> </style>
</head> </head>
<body> <body>
@@ -500,7 +549,18 @@
<label>Nahrát obrázek</label> <label>Nahrát obrázek</label>
<input type="file" id="bannerImage" name="image" accept="image/*" style="display: none;" onchange="handleImageUpload(event)"> <input type="file" id="bannerImage" name="image" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
<input type="hidden" id="removeImage" name="removeImage" value="false"> <input type="hidden" id="removeImage" name="removeImage" value="false">
<div>
<div id="dragDropArea" class="drag-drop-area">
<div class="drag-drop-message">
<i class="fas fa-cloud-upload-alt"></i>
<p>Přetáhněte obrázek sem nebo klikněte pro výběr</p>
</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 class="image-actions" style="margin-top: 10px;">
<button type="button" class="btn btn-secondary" id="uploadImageBtn"> <button type="button" class="btn btn-secondary" id="uploadImageBtn">
<i class="fas fa-upload"></i> Vybrat obrázek <i class="fas fa-upload"></i> Vybrat obrázek
</button> </button>
@@ -508,10 +568,8 @@
<i class="fas fa-trash"></i> Odstranit obrázek <i class="fas fa-trash"></i> Odstranit obrázek
</button> </button>
</div> </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;" /> <p class="help-text" style="margin-top: 10px;">
</div>
<p class="help-text" style="font-size: 0.8em; color: #666; margin-top: 5px;">
Doporučený poměr stran: 3:1 (např. 1200x400px) Doporučený poměr stran: 3:1 (např. 1200x400px)
</p> </p>
</div> </div>
@@ -577,13 +635,12 @@
<div class="banner-preview" id="bannerPreview" style="display: none;"> <div class="banner-preview" id="bannerPreview" style="display: none;">
<div class="banner-preview-bg"></div> <div class="banner-preview-bg"></div>
<div class="banner-preview-content"> <div class="banner-preview-content">Náhled banneru se zde zobrazí</div>
<div class="banner-preview-text">Náhled banneru se zde zobrazí</div> </div>
<div id="imagePreviewContainer" style="display: none; margin-top: 15px; text-align: center;"> <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;" /> <img id="imagePreview" style="max-width: 100%; max-height: 200px; border-radius: 4px;" />
</div> </div>
</div>
</div>
<div class="form-actions"> <div class="form-actions">
<button type="submit" id="saveBannerBtn" class="btn btn-primary"> <button type="submit" id="saveBannerBtn" class="btn btn-primary">
@@ -676,11 +733,62 @@ window.fetch = async function(resource, init = {}) {
return originalFetch(resource, init); return originalFetch(resource, init);
}; };
// Image handling // Image handling - Drag and Drop functionality
document.getElementById('uploadImageBtn').addEventListener('click', function() { const dragDropArea = document.getElementById('dragDropArea');
document.getElementById('bannerImage').click(); const uploadImageBtn = document.getElementById('uploadImageBtn');
const bannerImage = document.getElementById('bannerImage');
// Click on drag area to select file
dragDropArea.addEventListener('click', function() {
bannerImage.click();
}); });
// Click on upload button to select file
uploadImageBtn.addEventListener('click', function() {
bannerImage.click();
});
// Prevent default behavior for drag events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dragDropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
// Visual feedback when dragging over the area
['dragenter', 'dragover'].forEach(eventName => {
dragDropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dragDropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dragDropArea.classList.add('dragover');
}
function unhighlight() {
dragDropArea.classList.remove('dragover');
}
// Handle dropped files
dragDropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
if (files.length) {
bannerImage.files = files;
const event = new Event('change');
bannerImage.dispatchEvent(event);
}
}
// Handle image upload // Handle image upload
function handleImageUpload(event) { function handleImageUpload(event) {
const fileInput = event.target; const fileInput = event.target;
@@ -691,7 +799,7 @@ function handleImageUpload(event) {
// Check file type // Check file type
const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']; const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
if (!validImageTypes.includes(file.type)) { if (!validImageTypes.includes(file.type)) {
alert('Vyberte prosím soubor obrázku (JPG, PNG, GIF, SVG)'); showNotification('Vyberte prosím soubor obrázku (JPG, PNG, GIF, SVG)', 'warning');
fileInput.value = ''; // Reset file input fileInput.value = ''; // Reset file input
return; return;
} }
@@ -699,7 +807,7 @@ function handleImageUpload(event) {
// Check file size (max 5MB) // Check file size (max 5MB)
const maxSize = 5 * 1024 * 1024; // 5MB const maxSize = 5 * 1024 * 1024; // 5MB
if (file.size > maxSize) { if (file.size > maxSize) {
alert('Maximální velikost souboru je 5MB'); showNotification('Maximální velikost souboru je 5MB', 'warning');
fileInput.value = ''; // Reset file input fileInput.value = ''; // Reset file input
return; return;
} }
@@ -710,6 +818,7 @@ function handleImageUpload(event) {
const preview = document.getElementById('imagePreview'); const preview = document.getElementById('imagePreview');
const previewContainer = document.getElementById('imagePreviewContainer'); const previewContainer = document.getElementById('imagePreviewContainer');
const removeBtn = document.getElementById('removeImageBtn'); const removeBtn = document.getElementById('removeImageBtn');
const dragDropMessage = document.querySelector('.drag-drop-message');
// Update preview elements if they exist // Update preview elements if they exist
if (preview) { if (preview) {
@@ -725,6 +834,11 @@ function handleImageUpload(event) {
removeBtn.style.display = 'inline-block'; removeBtn.style.display = 'inline-block';
} }
// Hide the drag & drop message when showing preview
if (dragDropMessage) {
dragDropMessage.style.display = 'none';
}
// Update hidden input // Update hidden input
const removeImageInput = document.getElementById('removeImage'); const removeImageInput = document.getElementById('removeImage');
if (removeImageInput) { if (removeImageInput) {
@@ -737,7 +851,7 @@ function handleImageUpload(event) {
}; };
reader.onerror = function() { reader.onerror = function() {
alert('Při načítání obrázku došlo k chybě. Zkuste to prosím znovu.'); showNotification('Při načítání obrázku došlo k chybě. Zkuste to prosím znovu.', 'error');
fileInput.value = ''; // Reset file input fileInput.value = ''; // Reset file input
}; };
@@ -1005,6 +1119,7 @@ function removeImage() {
const imagePreviewContainer = document.getElementById('imagePreviewContainer'); const imagePreviewContainer = document.getElementById('imagePreviewContainer');
const removeBtn = document.getElementById('removeImageBtn'); const removeBtn = document.getElementById('removeImageBtn');
const removeImageInput = document.getElementById('removeImage'); const removeImageInput = document.getElementById('removeImage');
const dragDropMessage = document.querySelector('.drag-drop-message');
// Reset file input // Reset file input
if (bannerImage) bannerImage.value = ''; if (bannerImage) bannerImage.value = '';
@@ -1020,6 +1135,11 @@ function removeImage() {
imagePreviewContainer.style.display = 'none'; imagePreviewContainer.style.display = 'none';
} }
// Show drag & drop message again
if (dragDropMessage) {
dragDropMessage.style.display = 'flex';
}
// Hide remove button // Hide remove button
if (removeBtn) { if (removeBtn) {
removeBtn.style.display = 'none'; removeBtn.style.display = 'none';
@@ -1034,6 +1154,9 @@ function removeImage() {
currentImage = null; currentImage = null;
updateBannerPreview(); updateBannerPreview();
// Show success notification
showNotification('Obrázek byl odstraněn', 'info');
// Trigger a change event on the file input in case any other code is listening // Trigger a change event on the file input in case any other code is listening
if (bannerImage) { if (bannerImage) {
const event = new Event('change'); const event = new Event('change');
@@ -1044,13 +1167,13 @@ function removeImage() {
// Update banner preview // Update banner preview
function updateBannerPreview() { function updateBannerPreview() {
const bannerPreview = document.getElementById('bannerPreview'); 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 bannerPreviewContent = bannerPreview?.querySelector('.banner-preview-content');
const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
const imagePreview = document.getElementById('imagePreview'); const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer'); const imagePreviewContainer = document.getElementById('imagePreviewContainer');
const bannerLink = document.getElementById('bannerLink')?.value || '';
if (!bannerPreview || !bannerPreviewText || !bannerPreviewBg || !bannerPreviewContent) { if (!bannerPreview || !bannerPreviewContent || !bannerPreviewBg) {
return; // Elements not found return; // Elements not found
} }
@@ -1064,36 +1187,42 @@ function updateBannerPreview() {
const bannerMargin = parseInt(document.getElementById('bannerMargin')?.value || '20'); const bannerMargin = parseInt(document.getElementById('bannerMargin')?.value || '20');
const bannerBorderRadius = parseInt(document.getElementById('bannerBorderRadius')?.value || '8'); const bannerBorderRadius = parseInt(document.getElementById('bannerBorderRadius')?.value || '8');
// Update banner styles // Update banner container styles to match index.html
bannerPreview.style.display = 'block'; bannerPreview.style.display = 'block';
bannerPreview.style.padding = `${bannerPadding}px`; bannerPreview.style.width = '100%';
bannerPreview.style.margin = `${bannerMargin}px auto`; bannerPreview.style.transition = 'all 0.3s ease';
bannerPreview.style.borderRadius = `${bannerBorderRadius}px`; bannerPreview.style.margin = '0 auto';
bannerPreview.style.overflow = 'hidden'; bannerPreview.style.maxWidth = '100%';
bannerPreview.style.position = 'relative'; bannerPreview.style.padding = '0';
bannerPreview.style.backgroundColor = bannerBgColor;
bannerPreview.style.textAlign = bannerTextAlign;
// Update banner content // Update banner content styles to match index.html
bannerPreviewText.textContent = bannerText || 'Náhled banneru'; Object.assign(bannerPreviewContent.style, {
bannerPreviewText.style.fontSize = `${bannerFontSize}px`; backgroundColor: bannerBgColor,
bannerPreviewText.style.color = bannerTextColor; color: bannerTextColor,
bannerPreviewText.style.margin = '0'; textAlign: bannerTextAlign,
bannerPreviewText.style.padding = '15px'; fontSize: `${bannerFontSize}px`,
bannerPreviewText.style.position = 'relative'; padding: `${bannerPadding}px`,
bannerPreviewText.style.zIndex = '2'; margin: `${bannerMargin}px 0`,
borderRadius: `${bannerBorderRadius}px`,
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
display: 'block',
position: 'relative',
zIndex: '2'
});
// Handle image // Handle content and image like in index.html
let content = bannerText || 'Náhled banneru';
const bannerImage = document.getElementById('bannerImage'); const bannerImage = document.getElementById('bannerImage');
const hasImage = currentImage || (bannerImage && bannerImage.files.length > 0); const hasImage = currentImage || (bannerImage && bannerImage.files.length > 0);
if (hasImage) { if (hasImage && currentImage) {
bannerPreview.classList.add('with-image'); // Format content with image like in index.html
content = `
// Update background image <div style="margin-bottom: 15px;">
if (currentImage) { <img src="${currentImage}" style="max-width: 100%; max-height: 200px; border-radius: 4px;">
bannerPreviewBg.style.backgroundImage = `url(${currentImage})`; </div>
bannerPreviewBg.style.display = 'block'; ${content}
`;
// Show the image preview in the container // Show the image preview in the container
if (imagePreview && imagePreviewContainer) { if (imagePreview && imagePreviewContainer) {
@@ -1101,35 +1230,19 @@ function updateBannerPreview() {
imagePreviewContainer.style.display = 'block'; imagePreviewContainer.style.display = 'block';
} }
} else { } else {
bannerPreviewBg.style.backgroundImage = '';
bannerPreviewBg.style.display = 'none';
// Hide the image preview container if no image // Hide the image preview container if no image
if (imagePreviewContainer) { if (imagePreviewContainer) {
imagePreviewContainer.style.display = 'none'; imagePreviewContainer.style.display = 'none';
} }
} }
// Style the background image // Wrap in link if provided
bannerPreviewBg.style.position = 'absolute'; if (bannerLink) {
bannerPreviewBg.style.top = '0'; content = `<a href="${bannerLink}" style="color: inherit; text-decoration: none; display: block;">${content}</a>`;
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 // Update content
if (imagePreviewContainer) { bannerPreviewContent.innerHTML = content;
imagePreviewContainer.style.display = 'none';
}
}
// Make sure the preview is visible // Make sure the preview is visible
bannerPreview.style.visibility = 'visible'; bannerPreview.style.visibility = 'visible';