Initial commit

templates/mobile_upload.html

@@ -0,0 +1,195 @@
+{% extends 'base.html' %}
+
+{% block title %}Subir Albarán{% endblock %}
+
+{% block extra_css %}
+<style>
+    .upload-container {
+        max-width: 600px;
+        margin: 2rem auto;
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .upload-area {
+        border: 2px dashed #3498db;
+        border-radius: 8px;
+        padding: 3rem;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s;
+        background: #f8f9fa;
+    }
+    
+    .upload-area:hover {
+        background: #e9ecef;
+        border-color: #2980b9;
+    }
+    
+    .upload-area.dragover {
+        background: #d4edda;
+        border-color: #27ae60;
+    }
+    
+    .upload-icon {
+        font-size: 3rem;
+        color: #3498db;
+        margin-bottom: 1rem;
+    }
+    
+    .file-input {
+        display: none;
+    }
+    
+    .preview-image {
+        max-width: 100%;
+        max-height: 400px;
+        margin-top: 1rem;
+        border-radius: 4px;
+    }
+    
+    .btn-upload {
+        margin-top: 1rem;
+        width: 100%;
+    }
+    
+    .status-message {
+        margin-top: 1rem;
+        padding: 1rem;
+        border-radius: 4px;
+        display: none;
+    }
+    
+    .status-message.success {
+        background: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+    }
+    
+    .status-message.error {
+        background: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="upload-container">
+    <h2 style="margin-bottom: 2rem;">Subir Albarán</h2>
+    
+    <div class="upload-area" id="upload-area">
+        <div class="upload-icon">📄</div>
+        <p>Arrastra una imagen aquí o haz clic para seleccionar</p>
+        <p style="font-size: 0.9rem; color: #7f8c8d; margin-top: 0.5rem;">
+            Formatos soportados: JPG, PNG, PDF
+        </p>
+        <input type="file" id="file-input" class="file-input" accept="image/*,.pdf">
+    </div>
+    
+    <div id="preview-container" style="display: none;">
+        <img id="preview-image" class="preview-image" alt="Vista previa">
+        <button class="btn btn-primary btn-upload" onclick="uploadFile()">Subir Albarán</button>
+    </div>
+    
+    <div id="status-message" class="status-message"></div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const API_BASE = '/api';
+let selectedFile = null;
+
+const uploadArea = document.getElementById('upload-area');
+const fileInput = document.getElementById('file-input');
+const previewContainer = document.getElementById('preview-container');
+const previewImage = document.getElementById('preview-image');
+const statusMessage = document.getElementById('status-message');
+
+uploadArea.addEventListener('click', () => fileInput.click());
+
+uploadArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadArea.classList.add('dragover');
+});
+
+uploadArea.addEventListener('dragleave', () => {
+    uploadArea.classList.remove('dragover');
+});
+
+uploadArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadArea.classList.remove('dragover');
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+        handleFile(files[0]);
+    }
+});
+
+fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        handleFile(e.target.files[0]);
+    }
+});
+
+function handleFile(file) {
+    selectedFile = file;
+    
+    if (file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            previewImage.src = e.target.result;
+            previewContainer.style.display = 'block';
+        };
+        reader.readAsDataURL(file);
+    } else if (file.type === 'application/pdf') {
+        previewImage.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VjZjBmMSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IiM3ZjhjOGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5QREY8L3RleHQ+PC9zdmc+';
+        previewContainer.style.display = 'block';
+    }
+}
+
+function uploadFile() {
+    if (!selectedFile) return;
+    
+    const formData = new FormData();
+    formData.append('archivo', selectedFile);
+    
+    statusMessage.style.display = 'none';
+    const btn = document.querySelector('.btn-upload');
+    btn.disabled = true;
+    btn.textContent = 'Subiendo...';
+    
+    fetch(`${API_BASE}/albaranes/upload/`, {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        statusMessage.className = 'status-message success';
+        statusMessage.textContent = 'Albarán subido y procesado correctamente';
+        statusMessage.style.display = 'block';
+        
+        // Reset
+        setTimeout(() => {
+            selectedFile = null;
+            fileInput.value = '';
+            previewContainer.style.display = 'none';
+            statusMessage.style.display = 'none';
+            btn.disabled = false;
+            btn.textContent = 'Subir Albarán';
+        }, 3000);
+    })
+    .catch(error => {
+        statusMessage.className = 'status-message error';
+        statusMessage.textContent = 'Error al subir el albarán: ' + error.message;
+        statusMessage.style.display = 'block';
+        btn.disabled = false;
+        btn.textContent = 'Subir Albarán';
+    });
+}
+</script>
+{% endblock %}
+