hokoritemp/static/view.js

// HokoriTemp - JavaScript para la página de vista

// DOM Elements
const linksContainer = document.getElementById('linksContainer');
const emptyState = document.getElementById('emptyState');
const loadingState = document.getElementById('loadingState');

// Load links on page load
document.addEventListener('DOMContentLoaded', loadLinks);

function loadLinks() {
    const links = JSON.parse(localStorage.getItem('tempFileLinks') || '[]');
    
    // Filter expired links
    const currentTime = new Date();
    const validLinks = links.filter(link => {
        const expiresAt = new Date(link.expiresAt);
        return expiresAt > currentTime;
    });

    // Update localStorage with only valid links
    localStorage.setItem('tempFileLinks', JSON.stringify(validLinks));

    // Hide loading
    loadingState.classList.add('hidden');

    if (validLinks.length === 0) {
        showEmptyState();
    } else {
        showLinks(validLinks);
    }
}

function showEmptyState() {
    emptyState.classList.remove('hidden');
}

function showLinks(links) {
    const linksHTML = links.map(link => createLinkCard(link)).join('');
    linksContainer.innerHTML = linksHTML;
}

function createLinkCard(link) {
    const createdAt = new Date(link.createdAt);
    const expiresAt = new Date(link.expiresAt);
    const timeLeft = getTimeLeft(expiresAt);
    const isExpired = expiresAt <= new Date();

    return `
        <div class="bg-white rounded-lg shadow-lg p-6 mb-4 ${isExpired ? 'opacity-50' : ''}">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center space-x-3">
                        <svg class="h-8 w-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <div>
                            <h3 class="text-lg font-medium text-gray-900">${link.filename}</h3>
                            <p class="text-sm text-gray-500">Creado: ${formatDate(createdAt)}</p>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <div class="flex items-center space-x-2">
                            <span class="text-sm text-gray-500">Enlace:</span>
                            <input type="text" value="${link.url}" class="flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
                            <button onclick="copyLink('${link.url}')" class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                Copiar
                            </button>
                        </div>
                    </div>

                    <div class="mt-3 flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <span class="text-sm text-gray-500">
                                ${isExpired ? 'Expirado' : `Expira en: ${timeLeft}`}
                            </span>
                            ${isExpired ? '' : `
                                <button onclick="openLink('${link.url}')" class="text-sm text-blue-600 hover:text-blue-800 underline">
                                    Abrir enlace
                                </button>
                            `}
                        </div>
                        <button onclick="removeLink('${link.id}')" class="text-sm text-red-600 hover:text-red-800 underline">
                            Eliminar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function getTimeLeft(expiresAt) {
    const now = new Date();
    const diff = expiresAt - now;
    
    if (diff <= 0) return 'Expirado';
    
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    
    if (hours > 0) {
        return `${hours}h ${minutes}m`;
    } else {
        return `${minutes}m`;
    }
}

function formatDate(date) {
    return date.toLocaleString('es-ES', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function copyLink(url) {
    navigator.clipboard.writeText(url).then(() => {
        // Show feedback
        const button = event.target;
        const originalText = button.textContent;
        button.textContent = '¡Copiado!';
        setTimeout(() => {
            button.textContent = originalText;
        }, 2000);
        
        // Show notification
        showNotification('Enlace copiado al portapapeles', 'success');
    }).catch(() => {
        // Fallback for older browsers
        const textArea = document.createElement('textarea');
        textArea.value = url;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        
        const button = event.target;
        const originalText = button.textContent;
        button.textContent = '¡Copiado!';
        setTimeout(() => {
            button.textContent = originalText;
        }, 2000);
        
        showNotification('Enlace copiado al portapapeles', 'success');
    });
}

function openLink(url) {
    window.open(url, '_blank');
}

function removeLink(linkId) {
    const links = JSON.parse(localStorage.getItem('tempFileLinks') || '[]');
    const updatedLinks = links.filter(link => link.id !== linkId);
    localStorage.setItem('tempFileLinks', JSON.stringify(updatedLinks));
    
    // Reload the page to update the display
    location.reload();
}

// Función para mostrar notificaciones
function showNotification(message, type = 'info') {
    // Crear elemento de notificación
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    
    // Agregar al DOM
    document.body.appendChild(notification);
    
    // Mostrar con animación
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    // Ocultar después de 3 segundos
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Auto-refresh every minute to update expiration times
setInterval(() => {
    const links = document.querySelectorAll('[data-expires-at]');
    links.forEach(linkElement => {
        const expiresAt = new Date(linkElement.dataset.expiresAt);
        const timeLeftElement = linkElement.querySelector('.time-left');
        if (timeLeftElement) {
            timeLeftElement.textContent = getTimeLeft(expiresAt);
        }
    });
}, 60000);