175 lines
7.1 KiB
HTML
175 lines
7.1 KiB
HTML
<!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="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>
|
|
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' }
|
|
];
|
|
|
|
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> |