modified: .gitignore
modified: QUICKSTART.md modified: app.py new file: output/.gitkeep modified: static/css/style.css modified: static/js/images-to-pdf.js modified: templates/images_to_pdf.html new file: uploads/.gitkeep
This commit is contained in:
SimolZimol
@@ -122,27 +122,50 @@ function displayFiles() {
|
||||
|
||||
function createFileItem(file, index) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-group-item file-item';
|
||||
div.className = 'list-group-item file-item-enhanced';
|
||||
div.dataset.index = index;
|
||||
|
||||
// Initialize rotation if not set
|
||||
if (!file.rotation) {
|
||||
file.rotation = 0;
|
||||
}
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="file-icon">
|
||||
<i class="${getFileIcon(file.original_name)}"></i>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">${file.original_name}</div>
|
||||
<div class="file-details">${formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveFileUp(${index})" ${index === 0 ? 'disabled' : ''}>
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveFileDown(${index})" ${index === imagesToPdfFiles.length - 1 ? 'disabled' : ''}>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile(${index})">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="image-preview-container me-3">
|
||||
<img src="/uploads/${file.filename}" class="image-preview size-medium rotate-${file.rotation}"
|
||||
alt="${file.original_name}" onclick="showImageModal('${file.filename}', '${file.original_name}', ${index})">
|
||||
</div>
|
||||
<div class="image-info">
|
||||
<div class="file-name fw-bold">${file.original_name}</div>
|
||||
<div class="file-details text-muted">${formatFileSize(file.size)}</div>
|
||||
<div class="rotation-controls">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rotation-btn"
|
||||
onclick="rotateImage(${index}, -90)" title="Links drehen">
|
||||
<i class="fas fa-undo"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary rotation-btn"
|
||||
onclick="rotateImage(${index}, 90)" title="Rechts drehen">
|
||||
<i class="fas fa-redo"></i>
|
||||
</button>
|
||||
<small class="text-muted ms-2">${file.rotation}°</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-controls">
|
||||
<div class="d-flex gap-1 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveFileUp(${index})"
|
||||
${index === 0 ? 'disabled' : ''} title="Nach oben">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveFileDown(${index})"
|
||||
${index === imagesToPdfFiles.length - 1 ? 'disabled' : ''} title="Nach unten">
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile(${index})" title="Entfernen">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -200,11 +223,16 @@ async function convertToPdf() {
|
||||
setLoadingState(convertBtn, true);
|
||||
|
||||
try {
|
||||
const filenames = imagesToPdfFiles.map(file => file.filename);
|
||||
// Include rotation data for each file
|
||||
const filesWithRotation = imagesToPdfFiles.map(file => ({
|
||||
filename: file.filename,
|
||||
rotation: file.rotation || 0,
|
||||
original_name: file.original_name
|
||||
}));
|
||||
|
||||
const response = await makeRequest('/api/convert-images-to-pdf', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ filenames })
|
||||
body: JSON.stringify({ files: filesWithRotation })
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
@@ -264,7 +292,97 @@ function hideResults() {
|
||||
errorArea.style.display = 'none';
|
||||
}
|
||||
|
||||
function rotateImage(index, degrees) {
|
||||
if (index >= 0 && index < imagesToPdfFiles.length) {
|
||||
imagesToPdfFiles[index].rotation = (imagesToPdfFiles[index].rotation + degrees) % 360;
|
||||
if (imagesToPdfFiles[index].rotation < 0) {
|
||||
imagesToPdfFiles[index].rotation += 360;
|
||||
}
|
||||
displayFiles();
|
||||
showNotification(`Bild um ${degrees}° gedreht.`, 'info');
|
||||
}
|
||||
}
|
||||
|
||||
function showImageModal(filename, originalName, index) {
|
||||
// Create modal if it doesn't exist
|
||||
let modal = document.getElementById('image-modal');
|
||||
if (!modal) {
|
||||
modal = document.createElement('div');
|
||||
modal.className = 'modal fade image-modal';
|
||||
modal.id = 'image-modal';
|
||||
modal.setAttribute('tabindex', '-1');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="image-modal-title">${originalName}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img id="modal-image" src="/uploads/${filename}" class="img-fluid rotate-${imagesToPdfFiles[index].rotation}" alt="${originalName}">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="btn-group me-auto">
|
||||
<button type="button" class="btn btn-outline-primary" onclick="rotateImageInModal(${index}, -90)">
|
||||
<i class="fas fa-undo me-1"></i>Links drehen
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" onclick="rotateImageInModal(${index}, 90)">
|
||||
<i class="fas fa-redo me-1"></i>Rechts drehen
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
} else {
|
||||
// Update existing modal
|
||||
document.getElementById('image-modal-title').textContent = originalName;
|
||||
const modalImage = document.getElementById('modal-image');
|
||||
modalImage.src = `/uploads/${filename}`;
|
||||
modalImage.alt = originalName;
|
||||
modalImage.className = `img-fluid rotate-${imagesToPdfFiles[index].rotation}`;
|
||||
|
||||
// Update rotation buttons
|
||||
const rotateButtons = modal.querySelectorAll('.btn-outline-primary');
|
||||
rotateButtons[0].onclick = () => rotateImageInModal(index, -90);
|
||||
rotateButtons[1].onclick = () => rotateImageInModal(index, 90);
|
||||
}
|
||||
|
||||
// Show modal
|
||||
const bootstrapModal = new bootstrap.Modal(modal);
|
||||
bootstrapModal.show();
|
||||
}
|
||||
|
||||
function rotateImageInModal(index, degrees) {
|
||||
rotateImage(index, degrees);
|
||||
|
||||
// Update modal image
|
||||
const modalImage = document.getElementById('modal-image');
|
||||
modalImage.className = `img-fluid rotate-${imagesToPdfFiles[index].rotation}`;
|
||||
}
|
||||
|
||||
function updatePreviewSize() {
|
||||
const previewSize = document.getElementById('preview-size').value;
|
||||
const previews = document.querySelectorAll('.image-preview');
|
||||
|
||||
previews.forEach(preview => {
|
||||
// Remove existing size classes
|
||||
preview.classList.remove('size-small', 'size-medium', 'size-large');
|
||||
// Add new size class
|
||||
preview.classList.add('size-' + previewSize);
|
||||
});
|
||||
}
|
||||
|
||||
// Global functions for button actions
|
||||
window.moveFileUp = moveFileUp;
|
||||
window.moveFileDown = moveFileDown;
|
||||
window.removeFile = removeFile;
|
||||
window.removeFile = removeFile;
|
||||
window.rotateImage = rotateImage;
|
||||
window.showImageModal = showImageModal;
|
||||
window.rotateImageInModal = rotateImageInModal;
|
||||
window.updatePreviewSize = updatePreviewSize;
|
||||
Reference in New Issue
Block a user