PDF-WEB/static/js/images-to-pdf.js

// Images to PDF - JavaScript Functionality

let imagesToPdfFiles = [];
let imagesToPdfSortable = null;

// DOM elements
let uploadArea, fileInput, fileList, filesContainer, convertBtn, clearBtn;
let progressBar, progressText, uploadProgress, resultArea, errorArea;
let downloadLink;

// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    uploadArea = document.getElementById('upload-area');
    fileInput = document.getElementById('file-input');
    fileList = document.getElementById('file-list');
    filesContainer = document.getElementById('files-container');
    convertBtn = document.getElementById('convert-btn');
    clearBtn = document.getElementById('clear-btn');
    progressBar = document.getElementById('progress-bar');
    progressText = document.getElementById('progress-text');
    uploadProgress = document.getElementById('upload-progress');
    resultArea = document.getElementById('result-area');
    errorArea = document.getElementById('error-area');
    downloadLink = document.getElementById('download-link');
    
    // Setup event listeners
    setupEventListeners();
    
    // Setup drag and drop
    setupDragAndDrop(uploadArea, handleFiles);
});

function setupEventListeners() {
    // File input change
    fileInput.addEventListener('change', function(e) {
        handleFiles(Array.from(e.target.files));
    });
    
    // Convert button
    convertBtn.addEventListener('click', convertToPdf);
    
    // Clear button
    clearBtn.addEventListener('click', clearFiles);
    
    // Upload area click
    uploadArea.addEventListener('click', function() {
        fileInput.click();
    });
}

function handleFiles(files) {
    // Hide previous results/errors
    hideResults();
    
    if (!files || files.length === 0) {
        showError('Keine Dateien ausgewählt.');
        return;
    }
    
    // Filter valid image files
    const validFiles = files.filter(file => {
        const isValid = file.type.startsWith('image/');
        if (!isValid) {
            showNotification(`${file.name} ist keine gültige Bilddatei.`, 'warning');
        }
        return isValid;
    });
    
    if (validFiles.length === 0) {
        showError('Keine gültigen Bilddateien gefunden.');
        return;
    }
    
    // Show upload progress
    showUploadProgress();
    
    // Upload files
    uploadImages(validFiles);
}

async function uploadImages(files) {
    try {
        const response = await uploadFiles(files, '/api/upload-images', updateProgress);
        
        if (response.success) {
            imagesToPdfFiles = response.files;
            displayFiles();
            showNotification(response.message, 'success');
        } else {
            throw new Error(response.error || 'Upload fehlgeschlagen');
        }
    } catch (error) {
        showError(`Upload-Fehler: ${error.message}`);
    } finally {
        hideUploadProgress();
    }
}

function updateProgress(percent) {
    progressBar.style.width = percent + '%';
    progressText.textContent = Math.round(percent) + '%';
}

function displayFiles() {
    filesContainer.innerHTML = '';
    
    imagesToPdfFiles.forEach((file, index) => {
        const fileItem = createFileItem(file, index);
        filesContainer.appendChild(fileItem);
    });
    
    // Show file list
    fileList.style.display = 'block';
    
    // Enable convert button
    convertBtn.disabled = false;
    
    // Setup sortable
    setupSortableList();
}

function createFileItem(file, index) {
    const div = document.createElement('div');
    div.className = 'list-group-item file-item';
    div.dataset.index = index;
    
    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>
    `;
    
    return div;
}

function setupSortableList() {
    if (imagesToPdfSortable) {
        imagesToPdfSortable.destroy();
    }
    
    imagesToPdfSortable = setupSortable(filesContainer, function(evt) {
        // Update array order
        const item = imagesToPdfFiles.splice(evt.oldIndex, 1)[0];
        imagesToPdfFiles.splice(evt.newIndex, 0, item);
        
        // Refresh display
        displayFiles();
    });
}

function moveFileUp(index) {
    if (index > 0) {
        [imagesToPdfFiles[index], imagesToPdfFiles[index - 1]] = [imagesToPdfFiles[index - 1], imagesToPdfFiles[index]];
        displayFiles();
    }
}

function moveFileDown(index) {
    if (index < imagesToPdfFiles.length - 1) {
        [imagesToPdfFiles[index], imagesToPdfFiles[index + 1]] = [imagesToPdfFiles[index + 1], imagesToPdfFiles[index]];
        displayFiles();
    }
}

function removeFile(index) {
    imagesToPdfFiles.splice(index, 1);
    
    if (imagesToPdfFiles.length === 0) {
        clearFiles();
    } else {
        displayFiles();
    }
    
    showNotification('Datei entfernt.', 'info');
}

async function convertToPdf() {
    if (imagesToPdfFiles.length === 0) {
        showError('Keine Dateien zum Konvertieren vorhanden.');
        return;
    }
    
    hideResults();
    setLoadingState(convertBtn, true);
    
    try {
        const filenames = imagesToPdfFiles.map(file => file.filename);
        
        const response = await makeRequest('/api/convert-images-to-pdf', {
            method: 'POST',
            body: JSON.stringify({ filenames })
        });
        
        if (response.success) {
            showResult(response.filename, response.message);
        } else {
            throw new Error(response.error || 'Konvertierung fehlgeschlagen');
        }
    } catch (error) {
        showError(`Konvertierungs-Fehler: ${error.message}`);
    } finally {
        setLoadingState(convertBtn, false);
    }
}

function clearFiles() {
    imagesToPdfFiles = [];
    filesContainer.innerHTML = '';
    fileList.style.display = 'none';
    convertBtn.disabled = true;
    fileInput.value = '';
    hideResults();
    
    if (imagesToPdfSortable) {
        imagesToPdfSortable.destroy();
        imagesToPdfSortable = null;
    }
}

function showUploadProgress() {
    uploadProgress.style.display = 'block';
    progressBar.style.width = '0%';
    progressText.textContent = '0%';
}

function hideUploadProgress() {
    uploadProgress.style.display = 'none';
}

function showResult(filename, message) {
    resultArea.style.display = 'block';
    downloadLink.href = `/download/${filename}`;
    downloadLink.querySelector('.me-2').nextSibling.textContent = 'PDF herunterladen';
    
    // Update message if provided
    if (message) {
        resultArea.querySelector('p').textContent = message;
    }
}

function showError(message) {
    errorArea.style.display = 'block';
    document.getElementById('error-message').textContent = message;
}

function hideResults() {
    resultArea.style.display = 'none';
    errorArea.style.display = 'none';
}

// Global functions for button actions
window.moveFileUp = moveFileUp;
window.moveFileDown = moveFileDown;
window.removeFile = removeFile;