Initial commit
This commit is contained in:
319
templates/kanban.html
Normal file
319
templates/kanban.html
Normal file
@@ -0,0 +1,319 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Kanban - Gestión de Pedidos{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
padding: 1rem 0;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
background: #ecf0f1;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background: #34495e;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column-header.pendiente-revision { background: #95a5a6; }
|
||||
.column-header.en-revision { background: #f39c12; }
|
||||
.column-header.pendiente-materiales { background: #e74c3c; }
|
||||
.column-header.completado { background: #27ae60; }
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.card.urgente {
|
||||
border-left: 4px solid #e74c3c;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.urgente-badge {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.referencias-list {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.referencia-item {
|
||||
padding: 0.5rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.referencia-item.completo {
|
||||
background: #d5f4e6;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.referencia-item.parcial {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.referencia-item.pendiente {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.referencia-codigo {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.filters {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.empty-column {
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="filters">
|
||||
<input type="text" id="search-input" class="filter-input" placeholder="Buscar por matrícula o número de pedido...">
|
||||
<select id="estado-filter" class="filter-input">
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="pendiente_revision">Pendiente Revisión</option>
|
||||
<option value="en_revision">En Revisión</option>
|
||||
<option value="pendiente_materiales">Pendiente Materiales</option>
|
||||
<option value="completado">Completado</option>
|
||||
</select>
|
||||
<label>
|
||||
<input type="checkbox" id="urgente-only"> Solo urgentes
|
||||
</label>
|
||||
<button class="btn btn-primary refresh-btn" onclick="loadKanban()">Actualizar</button>
|
||||
</div>
|
||||
|
||||
<div class="kanban-container" id="kanban-container">
|
||||
<div class="kanban-column">
|
||||
<div class="column-header pendiente-revision">Pendiente Revisión</div>
|
||||
<div id="col-pendiente-revision" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header en-revision">En Revisión</div>
|
||||
<div id="col-en-revision" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header pendiente-materiales">Pendiente Materiales</div>
|
||||
<div id="col-pendiente-materiales" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header completado">Completado</div>
|
||||
<div id="col-completado" class="cards-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
|
||||
function createCard(pedido) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
if (pedido.es_urgente) {
|
||||
card.classList.add('urgente');
|
||||
}
|
||||
|
||||
const fechaCita = pedido.fecha_cita ? new Date(pedido.fecha_cita).toLocaleString('es-ES') : 'Sin fecha';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Pedido ${pedido.numero_pedido}</div>
|
||||
<div class="card-subtitle">${pedido.cliente.matricula_vehiculo} - ${pedido.cliente.nombre}</div>
|
||||
</div>
|
||||
${pedido.es_urgente ? '<span class="urgente-badge">URGENTE</span>' : ''}
|
||||
</div>
|
||||
<div class="card-subtitle" style="margin-bottom: 0.5rem;">Cita: ${fechaCita}</div>
|
||||
<div class="referencias-list">
|
||||
${pedido.referencias.map(ref => {
|
||||
const estadoClass = ref.estado === 'completo' ? 'completo' :
|
||||
ref.estado === 'parcial' ? 'parcial' : 'pendiente';
|
||||
return `
|
||||
<div class="referencia-item ${estadoClass}">
|
||||
<div>
|
||||
<span class="referencia-codigo">${ref.referencia}</span>
|
||||
<div style="font-size: 0.8rem;">${ref.denominacion}</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div>${ref.unidades_solicitadas} unidades</div>
|
||||
<div style="font-size: 0.8rem;">
|
||||
Stock: ${ref.unidades_en_stock} | Pendiente: ${ref.unidades_pendientes}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.onclick = () => {
|
||||
window.location.href = `/admin/gestion_pedidos/pedidocliente/${pedido.id}/change/`;
|
||||
};
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderKanban(data) {
|
||||
const columns = {
|
||||
'pendiente_revision': document.getElementById('col-pendiente-revision'),
|
||||
'en_revision': document.getElementById('col-en-revision'),
|
||||
'pendiente_materiales': document.getElementById('col-pendiente-materiales'),
|
||||
'completado': document.getElementById('col-completado'),
|
||||
};
|
||||
|
||||
// Limpiar columnas
|
||||
Object.values(columns).forEach(col => {
|
||||
col.innerHTML = '';
|
||||
});
|
||||
|
||||
// Renderizar tarjetas
|
||||
Object.entries(data).forEach(([estado, pedidos]) => {
|
||||
const column = columns[estado];
|
||||
if (!column) return;
|
||||
|
||||
if (pedidos.length === 0) {
|
||||
column.innerHTML = '<div class="empty-column">No hay pedidos</div>';
|
||||
} else {
|
||||
pedidos.forEach(pedido => {
|
||||
column.appendChild(createCard(pedido));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadKanban() {
|
||||
fetch(`${API_BASE}/kanban/`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
renderKanban(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar Kanban:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Filtros
|
||||
document.getElementById('search-input').addEventListener('input', (e) => {
|
||||
const search = e.target.value.toLowerCase();
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
const text = card.textContent.toLowerCase();
|
||||
card.style.display = text.includes(search) ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('estado-filter').addEventListener('change', (e) => {
|
||||
const estado = e.target.value;
|
||||
if (!estado) {
|
||||
loadKanban();
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${API_BASE}/pedidos-cliente/?estado=${estado}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const grouped = {
|
||||
'pendiente_revision': [],
|
||||
'en_revision': [],
|
||||
'pendiente_materiales': [],
|
||||
'completado': [],
|
||||
};
|
||||
grouped[estado] = data.results || data;
|
||||
renderKanban(grouped);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-refresh cada 30 segundos
|
||||
setInterval(loadKanban, 30000);
|
||||
|
||||
// Cargar inicial
|
||||
loadKanban();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user