Actualizar mapeador2.html
This commit is contained in:
190
mapeador2.html
190
mapeador2.html
@@ -1,19 +1,177 @@
|
||||
<div class="card shadow-sm p-4">
|
||||
<h2 class="mb-4">🎯 Configuración Maestra de Variables</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Campo en tu CRM (Fijo)</th>
|
||||
<th>Variable Detectada en la Web</th>
|
||||
<th>Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="mappingBody">
|
||||
</tbody>
|
||||
</table>
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mapeador Maestro - Integra Repara</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
|
||||
.card { border: none; border-radius: 15px; }
|
||||
.table-fixed-header thead { position: sticky; top: 0; background: white; z-index: 10; }
|
||||
.internal-label { font-weight: 600; color: #2c3e50; }
|
||||
.sample-text { font-size: 0.85rem; color: #7f8c8d; font-style: italic; }
|
||||
.badge-mapped { background-color: #27ae60; }
|
||||
.badge-pending { background-color: #f39c12; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1"><i class="fas fa-map-signs text-primary me-2"></i>Mapeador Maestro</h1>
|
||||
<p class="text-muted">Asocia los datos de la web con tus campos internos.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<select id="providerSelect" class="form-select w-auto" onchange="loadMappingData()">
|
||||
<option value="multiasistencia">Multiasistencia</option>
|
||||
<option value="homeserve">HomeServe</option>
|
||||
</select>
|
||||
<button onclick="saveMapping()" class="btn btn-primary px-4">
|
||||
<i class="fas fa-save me-2"></i>Guardar Configuración
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-3">
|
||||
<button onclick="saveFinalMapping()" class="btn btn-success btn-lg">🚀 Guardar y Activar Robot</button>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-hover mb-0 align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%;">Campo Interno (Tu CRM)</th>
|
||||
<th style="width: 40%;">Variable en la Web del Proveedor</th>
|
||||
<th style="width: 30%;">Ejemplo de Valor Actual</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="mappingBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/layout.js"></script>
|
||||
<script>
|
||||
// LISTA DE VARIABLES QUE TÚ NECESITAS (Fijas)
|
||||
const INTERNAL_FIELDS = [
|
||||
{ id: 'expediente', label: 'Número de Expediente' },
|
||||
{ id: 'compania', label: 'Compañía Aseguradora' },
|
||||
{ id: 'clientName', label: 'Nombre del Cliente' },
|
||||
{ id: 'phone', label: 'Teléfono Principal' },
|
||||
{ id: 'phone2', label: 'Teléfono Secundario' },
|
||||
{ id: 'address', label: 'Dirección Completa' },
|
||||
{ id: 'poblacion', label: 'Población / Localidad' },
|
||||
{ id: 'cp', label: 'Código Postal' },
|
||||
{ id: 'descripcion', label: 'Descripción de la Avería' },
|
||||
{ id: 'urgencia', label: 'Nivel de Urgencia' },
|
||||
{ id: 'tramitador', label: 'Nombre del Tramitador' },
|
||||
{ id: 'fecha_cita', label: 'Fecha de Realización' },
|
||||
{ id: 'notas', label: 'Observaciones / Notas' }
|
||||
];
|
||||
|
||||
let detectedKeys = []; // Aquí guardaremos lo que el robot ha encontrado
|
||||
|
||||
async function loadMappingData() {
|
||||
const provider = document.getElementById('providerSelect').value;
|
||||
const body = document.getElementById('mappingBody');
|
||||
body.innerHTML = '<tr><td colspan="3" class="text-center py-5"><div class="spinner-border text-primary"></div></td></tr>';
|
||||
|
||||
try {
|
||||
// 1. Pedimos al servidor TODAS las llaves que el robot ha detectado
|
||||
const response = await fetch(`${API_URL}/discovery/keys/${provider}`, {
|
||||
headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.ok) throw new Error(data.error);
|
||||
|
||||
detectedKeys = data.keys; // Guardamos las llaves detectadas por el robot
|
||||
renderTable();
|
||||
} catch (err) {
|
||||
body.innerHTML = `<tr><td colspan="3" class="text-center text-danger">Error: ${err.message}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const body = document.getElementById('mappingBody');
|
||||
body.innerHTML = '';
|
||||
|
||||
INTERNAL_FIELDS.forEach(field => {
|
||||
// Buscamos si este campo ya tiene algo mapeado en la base de datos
|
||||
const currentMapping = detectedKeys.find(k => k.mappedTo === field.id);
|
||||
|
||||
let optionsHtml = `<option value="">-- No mapeado (Ignorar) --</option>`;
|
||||
|
||||
detectedKeys.forEach(dk => {
|
||||
const selected = dk.mappedTo === field.id ? 'selected' : '';
|
||||
optionsHtml += `<option value="${dk.original}" ${selected}>${dk.original}</option>`;
|
||||
});
|
||||
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<span class="internal-label">${field.label}</span><br>
|
||||
<code>${field.id}</code>
|
||||
</td>
|
||||
<td>
|
||||
<select class="form-select mapping-select" data-internal="${field.id}">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sample-text" id="sample-${field.id}">
|
||||
${currentMapping ? currentMapping.sample : 'Selecciona una variable...'}
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
body.appendChild(row);
|
||||
});
|
||||
|
||||
// Escuchar cambios en los selects para actualizar el ejemplo de valor
|
||||
document.querySelectorAll('.mapping-select').forEach(select => {
|
||||
select.addEventListener('change', (e) => {
|
||||
const internalId = e.target.dataset.internal;
|
||||
const originalKey = e.target.value;
|
||||
const sampleDiv = document.getElementById(`sample-${internalId}`);
|
||||
|
||||
const found = detectedKeys.find(k => k.original === originalKey);
|
||||
sampleDiv.innerText = found ? found.sample : '---';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function saveMapping() {
|
||||
const provider = document.getElementById('providerSelect').value;
|
||||
const selects = document.querySelectorAll('.mapping-select');
|
||||
|
||||
const mappings = Array.from(selects).map(s => ({
|
||||
original: s.value,
|
||||
target: s.dataset.internal,
|
||||
ignored: s.value === ""
|
||||
})).filter(m => m.original !== "");
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/discovery/save`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: JSON.stringify({ provider, mappings })
|
||||
});
|
||||
|
||||
if (await res.json()) {
|
||||
alert("✅ Configuración guardada. El robot usará estos campos ahora.");
|
||||
}
|
||||
} catch (err) {
|
||||
alert("❌ Error al guardar.");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadMappingData);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user