Spaces:

Fred808
/

TLD1

Paused

TLD1 / script.js

Upload 5 files

74f7b0e verified over 1 year ago

8.51 kB

document.addEventListener('DOMContentLoaded', function() {
    // DOM elements
    const uploadForm = document.getElementById('uploadForm');
    const filenamesTextarea = document.getElementById('filenames');
    const uploadBtn = document.getElementById('uploadBtn');
    const clearBtn = document.getElementById('clearBtn');
    const clearResultsBtn = document.getElementById('clearResultsBtn');
    const resultsSection = document.getElementById('resultsSection');
    const resultsContent = document.getElementById('resultsContent');
    const loadingSection = document.getElementById('loadingSection');
    const configBadge = document.getElementById('configBadge');
    const healthBadge = document.getElementById('healthBadge');

    // Initialize the application
    init();

    async function init() {
        await checkConfiguration();
        await checkHealth();
        setupEventListeners();
        setupKeyboardShortcuts();
    }

    function setupEventListeners() {
        // Form submission
        uploadForm.addEventListener('submit', handleUpload);
        
        // Clear buttons
        clearBtn.addEventListener('click', clearForm);
        clearResultsBtn.addEventListener('click', clearResults);
        
        // Auto-resize textarea
        filenamesTextarea.addEventListener('input', autoResizeTextarea);
        
        // Real-time validation
        filenamesTextarea.addEventListener('input', validateInput);
    }

    function setupKeyboardShortcuts() {
        document.addEventListener('keydown', function(e) {
            // Ctrl+Enter or Cmd+Enter to submit
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                if (!uploadBtn.disabled) {
                    handleUpload(e);
                }
            }
            
            // Escape to clear results
            if (e.key === 'Escape') {
                clearResults();
            }
        });
    }

    async function handleUpload(e) {
        e.preventDefault();
        
        const filenames = filenamesTextarea.value.trim();
        if (!filenames) {
            showError('Please enter at least one filename');
            return;
        }

        setLoading(true);
        clearResults();

        try {
            const formData = new FormData();
            formData.append('filenames', filenames);

            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.detail || `HTTP ${response.status}`);
            }

            const data = await response.json();
            displayResults(data.results);
            
        } catch (error) {
            console.error('Upload error:', error);
            showError(`Upload failed: ${error.message}`);
        } finally {
            setLoading(false);
        }
    }

    function displayResults(results) {
        if (!results) {
            showError('No results received from server');
            return;
        }

        resultsContent.innerHTML = '';
        
        // Split results by lines and process each
        const lines = results.split('\n').filter(line => line.trim());
        
        lines.forEach(line => {
            const resultDiv = document.createElement('div');
            resultDiv.className = 'result-line';
            
            // Determine result type and apply appropriate styling
            if (line.includes('✅')) {
                resultDiv.classList.add('result-success');
            } else if (line.includes('❌')) {
                resultDiv.classList.add('result-error');
            } else if (line.includes('⏩')) {
                resultDiv.classList.add('result-info');
            } else {
                resultDiv.classList.add('result-warning');
            }
            
            resultDiv.textContent = line;
            resultsContent.appendChild(resultDiv);
        });

        resultsSection.style.display = 'block';
        resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function showError(message) {
        resultsContent.innerHTML = '';
        const errorDiv = document.createElement('div');
        errorDiv.className = 'result-line result-error';
        errorDiv.textContent = `❌ ${message}`;
        resultsContent.appendChild(errorDiv);
        resultsSection.style.display = 'block';
    }

    function setLoading(isLoading) {
        if (isLoading) {
            loadingSection.style.display = 'block';
            uploadBtn.disabled = true;
            uploadBtn.querySelector('.btn-text').textContent = 'Processing...';
        } else {
            loadingSection.style.display = 'none';
            uploadBtn.disabled = false;
            uploadBtn.querySelector('.btn-text').textContent = 'Start Upload';
        }
    }

    function clearForm() {
        filenamesTextarea.value = '';
        filenamesTextarea.style.height = 'auto';
        validateInput();
        filenamesTextarea.focus();
    }

    function clearResults() {
        resultsSection.style.display = 'none';
        resultsContent.innerHTML = '';
    }

    function autoResizeTextarea() {
        filenamesTextarea.style.height = 'auto';
        filenamesTextarea.style.height = filenamesTextarea.scrollHeight + 'px';
    }

    function validateInput() {
        const value = filenamesTextarea.value.trim();
        uploadBtn.disabled = !value;
        
        if (value) {
            uploadBtn.classList.remove('btn-disabled');
        } else {
            uploadBtn.classList.add('btn-disabled');
        }
    }

    async function checkConfiguration() {
        try {
            const response = await fetch('/config');
            const config = await response.json();
            
            const allConfigured = Object.values(config).every(status => status.includes('✅'));
            
            if (allConfigured) {
                configBadge.textContent = 'Ready';
                configBadge.className = 'status-badge success';
            } else {
                configBadge.textContent = 'Incomplete';
                configBadge.className = 'status-badge warning';
            }
        } catch (error) {
            console.error('Config check failed:', error);
            configBadge.textContent = 'Error';
            configBadge.className = 'status-badge error';
        }
    }

    async function checkHealth() {
        try {
            const response = await fetch('/health');
            const health = await response.json();
            
            if (health.status === 'healthy') {
                healthBadge.textContent = 'Healthy';
                healthBadge.className = 'status-badge success';
            } else {
                healthBadge.textContent = 'Issues';
                healthBadge.className = 'status-badge warning';
            }
        } catch (error) {
            console.error('Health check failed:', error);
            healthBadge.textContent = 'Error';
            healthBadge.className = 'status-badge error';
        }
    }

    // Refresh status indicators every 30 seconds
    setInterval(() => {
        checkConfiguration();
        checkHealth();
    }, 30000);

    // Show keyboard shortcuts hint on first visit
    if (!localStorage.getItem('keyboardHintShown')) {
        setTimeout(() => {
            showKeyboardHint();
            localStorage.setItem('keyboardHintShown', 'true');
        }, 2000);
    }

    function showKeyboardHint() {
        const hint = document.createElement('div');
        hint.className = 'keyboard-hint';
        hint.innerHTML = '💡 Tip: Use Ctrl+Enter to upload, Esc to clear results';
        document.body.appendChild(hint);
        
        setTimeout(() => hint.classList.add('show'), 100);
        setTimeout(() => {
            hint.classList.remove('show');
            setTimeout(() => document.body.removeChild(hint), 300);
        }, 4000);
    }

    // Add some visual feedback for better UX
    uploadBtn.addEventListener('mouseenter', function() {
        if (!this.disabled) {
            this.style.transform = 'translateY(-2px)';
        }
    });

    uploadBtn.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0)';
    });

    // Initialize textarea validation
    validateInput();
});

	document.addEventListener('DOMContentLoaded', function() {
	// DOM elements
	const uploadForm = document.getElementById('uploadForm');
	const filenamesTextarea = document.getElementById('filenames');
	const uploadBtn = document.getElementById('uploadBtn');
	const clearBtn = document.getElementById('clearBtn');
	const clearResultsBtn = document.getElementById('clearResultsBtn');
	const resultsSection = document.getElementById('resultsSection');
	const resultsContent = document.getElementById('resultsContent');
	const loadingSection = document.getElementById('loadingSection');
	const configBadge = document.getElementById('configBadge');
	const healthBadge = document.getElementById('healthBadge');

	// Initialize the application
	init();

	async function init() {
	await checkConfiguration();
	await checkHealth();
	setupEventListeners();
	setupKeyboardShortcuts();
	}

	function setupEventListeners() {
	// Form submission
	uploadForm.addEventListener('submit', handleUpload);

	// Clear buttons
	clearBtn.addEventListener('click', clearForm);
	clearResultsBtn.addEventListener('click', clearResults);

	// Auto-resize textarea
	filenamesTextarea.addEventListener('input', autoResizeTextarea);

	// Real-time validation
	filenamesTextarea.addEventListener('input', validateInput);
	}

	function setupKeyboardShortcuts() {
	document.addEventListener('keydown', function(e) {
	// Ctrl+Enter or Cmd+Enter to submit
	if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter') {
	e.preventDefault();
	if (!uploadBtn.disabled) {
	handleUpload(e);
	}
	}

	// Escape to clear results
	if (e.key === 'Escape') {
	clearResults();
	}
	});
	}

	async function handleUpload(e) {
	e.preventDefault();

	const filenames = filenamesTextarea.value.trim();
	if (!filenames) {
	showError('Please enter at least one filename');
	return;
	}

	setLoading(true);
	clearResults();

	try {
	const formData = new FormData();
	formData.append('filenames', filenames);

	const response = await fetch('/upload', {
	method: 'POST',
	body: formData
	});

	if (!response.ok) {
	const errorData = await response.json();
	throw new Error(errorData.detail \|\| `HTTP ${response.status}`);
	}

	const data = await response.json();
	displayResults(data.results);

	} catch (error) {
	console.error('Upload error:', error);
	showError(`Upload failed: ${error.message}`);
	} finally {
	setLoading(false);
	}
	}

	function displayResults(results) {
	if (!results) {
	showError('No results received from server');
	return;
	}

	resultsContent.innerHTML = '';

	// Split results by lines and process each
	const lines = results.split('\n').filter(line => line.trim());

	lines.forEach(line => {
	const resultDiv = document.createElement('div');
	resultDiv.className = 'result-line';

	// Determine result type and apply appropriate styling
	if (line.includes('✅')) {
	resultDiv.classList.add('result-success');
	} else if (line.includes('❌')) {
	resultDiv.classList.add('result-error');
	} else if (line.includes('⏩')) {
	resultDiv.classList.add('result-info');
	} else {
	resultDiv.classList.add('result-warning');
	}

	resultDiv.textContent = line;
	resultsContent.appendChild(resultDiv);
	});

	resultsSection.style.display = 'block';
	resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
	}

	function showError(message) {
	resultsContent.innerHTML = '';
	const errorDiv = document.createElement('div');
	errorDiv.className = 'result-line result-error';
	errorDiv.textContent = `❌ ${message}`;
	resultsContent.appendChild(errorDiv);
	resultsSection.style.display = 'block';
	}

	function setLoading(isLoading) {
	if (isLoading) {
	loadingSection.style.display = 'block';
	uploadBtn.disabled = true;
	uploadBtn.querySelector('.btn-text').textContent = 'Processing...';
	} else {
	loadingSection.style.display = 'none';
	uploadBtn.disabled = false;
	uploadBtn.querySelector('.btn-text').textContent = 'Start Upload';
	}
	}

	function clearForm() {
	filenamesTextarea.value = '';
	filenamesTextarea.style.height = 'auto';
	validateInput();
	filenamesTextarea.focus();
	}

	function clearResults() {
	resultsSection.style.display = 'none';
	resultsContent.innerHTML = '';
	}

	function autoResizeTextarea() {
	filenamesTextarea.style.height = 'auto';
	filenamesTextarea.style.height = filenamesTextarea.scrollHeight + 'px';
	}

	function validateInput() {
	const value = filenamesTextarea.value.trim();
	uploadBtn.disabled = !value;

	if (value) {
	uploadBtn.classList.remove('btn-disabled');
	} else {
	uploadBtn.classList.add('btn-disabled');
	}
	}

	async function checkConfiguration() {
	try {
	const response = await fetch('/config');
	const config = await response.json();

	const allConfigured = Object.values(config).every(status => status.includes('✅'));

	if (allConfigured) {
	configBadge.textContent = 'Ready';
	configBadge.className = 'status-badge success';
	} else {
	configBadge.textContent = 'Incomplete';
	configBadge.className = 'status-badge warning';
	}
	} catch (error) {
	console.error('Config check failed:', error);
	configBadge.textContent = 'Error';
	configBadge.className = 'status-badge error';
	}
	}

	async function checkHealth() {
	try {
	const response = await fetch('/health');
	const health = await response.json();

	if (health.status === 'healthy') {
	healthBadge.textContent = 'Healthy';
	healthBadge.className = 'status-badge success';
	} else {
	healthBadge.textContent = 'Issues';
	healthBadge.className = 'status-badge warning';
	}
	} catch (error) {
	console.error('Health check failed:', error);
	healthBadge.textContent = 'Error';
	healthBadge.className = 'status-badge error';
	}
	}

	// Refresh status indicators every 30 seconds
	setInterval(() => {
	checkConfiguration();
	checkHealth();
	}, 30000);

	// Show keyboard shortcuts hint on first visit
	if (!localStorage.getItem('keyboardHintShown')) {
	setTimeout(() => {
	showKeyboardHint();
	localStorage.setItem('keyboardHintShown', 'true');
	}, 2000);
	}

	function showKeyboardHint() {
	const hint = document.createElement('div');
	hint.className = 'keyboard-hint';
	hint.innerHTML = '💡 Tip: Use Ctrl+Enter to upload, Esc to clear results';
	document.body.appendChild(hint);

	setTimeout(() => hint.classList.add('show'), 100);
	setTimeout(() => {
	hint.classList.remove('show');
	setTimeout(() => document.body.removeChild(hint), 300);
	}, 4000);
	}

	// Add some visual feedback for better UX
	uploadBtn.addEventListener('mouseenter', function() {
	if (!this.disabled) {
	this.style.transform = 'translateY(-2px)';
	}
	});

	uploadBtn.addEventListener('mouseleave', function() {
	this.style.transform = 'translateY(0)';
	});

	// Initialize textarea validation
	validateInput();
	});